Grapesjs: Absolute/Designer mode

[artf]

Hi guys,
this issue is an overview of what is it, what is done, what to do and nice-to-have to complete the Designer Mode feature.

Preface

So let's start by describing what is it and what is the goal of this feature. The Designer mode should allow the user to drag components freely around the canvas, without HTML fixed positioning constraints, more like you'd do in tools like Photoshop/Sketch. This way moving components is much more intuitive especially for who has nothing to do with HTML positioning.

This approach might be extremely useful if you're building documents where the final result is visually static, like, for instance, PDFs or presentation slides. So what I'm trying to say, is that the absolute positioning it's not easy to deal when you have to do with something like websites, mainly because it's kind of a pain to work with responsive templates. A component in absolute position, from a less-technical point of view, is put out of the "HTML fixed flow", so neither its siblings or parent nodes are able to see its dimensions.

Let's see below an example of absolute positioning applied to a simple HTML page

So from this example, you can clearly see how components are removed from the flow (you can notice it by looking at their parent node) and how weird they behave in changing the width of the canvas, where all other components adapt to the new width but the one in absolute stay still. The example shows only a few components in absolute mode, imagine to deal with an entire page.

So for web page designing, I thought about an alternative solution, instead of relying on position: absolute it seems to be much more reliable transform: transition(...) as it moves the component related to its original fixed position without putting it out from the flow.

Obviously, it's not perfect and each template would require its specific adjustments for different device sizes but at least the component it's not moved totally away from its original position.

So, the goal of this feature would be:

• Be able to create a whole project in absolute mode, from the start (initialization) to the end (code export)
• Be able to mix different drag modes (default, absolute and translate)
  This obviously this is not something you can enable with juts "one option". How to mix drag modes should be delegated to who implements the editor

Implementation

From the https://github.com/artf/grapesjs/releases/tag/v0.14.57 you're already able to change the drag mode option, globally or per component.

To init the editor, globally, in one of the drag modes you should change the editor model option. We didn't yet specify any stable API, so any suggestion is welcome, but for the initialization, most likely the option will be something like:

const editor = grapesjs.init({
  // ...
  dragMode: 'absolute', // 'absolute' | 'translate'
});
// ... or to change via API
editor.setDragMode('absolute');

For now you can enable it in this way:

editor.getModel().set('dmode', 'absolute');

It's not that different changing the drag mode on a single component, we just added a new propriety to the Component instance:
component.set('dmode', 'absolute');
So you could, for example, add a new toolbar icon to switch between different modes

Here an example of a global absolute drag mode

https://jsfiddle.net/9zf4kd6e/

You can notice that the editor adds automatically absolute positioning to components.

Let's see more in details about how it's implemented.
When you click on the move icon you activate the default tlb-move command where it decides if to move the component using the standard way or to delegate the requested drag operation to another, new, core:component-drag command.
The new command makes use of the Dragger utility and updates the position of the component when the dragger tells to do so.
This command creates also guides for the Dragger, which is able to snap to them (kind of Smart Guides).

Issues/Bugs

Dropping from block [Fixed in [v0.15.3](https://github.com/artf/grapesjs/releases/tag/v0.15.3)]

Currently dropping from blocks is not handled, so all dropped components are placed fixedly.

Not sure if we need to rely on the green placeholder (seems not that bad as idea btw) or just drop it based on the mouse position

Autoscroll [Fixed in [v0.15.3](https://github.com/artf/grapesjs/releases/tag/v0.15.3)]

Autoscroll on component drag is not working

Actually, it's disabled by this CSS rule otherwise the result is even worst

We need to place a scroll listener on the start of the dragger (and remove it on the end) and update the positioning of the component on the trigger.

Toolbar positioning [Fixed in [v0.14.62](https://github.com/artf/grapesjs/releases/tag/v0.14.62)]

When the component is placed outside of the canvas (on the left side) its toolbar is wrongly positioned

There is definitely something to fix in the SelectComponent command

Nice to have

Rulers

Its quite common in absolute positioning tools to have rulers, with the possibility to toggle them and adding horizontal/vertical guides.
Here an example of the Sketch interface

This is a quick recap of what is came to my mind and I wanted to share, so any other suggestion, bug reports, API or architectural improvements, are highly welcome. From my point of view the goal Be able to mix different drag modes is already at the good point, but for the Be able to create a whole project in absolute mode the Dropping from block is mandatory.

[Amir2828]

First of great job! that take grapes to the next level.
I have been trying to include this feature in my grapesjs that is rendered inside react.
for some reason I get an error at:

dragger = editor.runCommand('core:component-drag', {..})
Reference Error: editor is not defined.
Anything special need to be done in this case?

Solved:
I think "editor" should be "ed". as editor is a global variable.

dragger = ed.runCommand('core:component-drag', {..})

Managed to bypass it by defining window.editor as the my editor

[artf]

@Amir2828 editor it's just a common variable used to store Editor instance, eg. const editor = grapesjs.init({...}) so it depends on you how it's created

[simplecommerce]

In regards to responsive pages, my integrator told me this.

When clicking on device modes, if using absolute positioning, would create the styles only for that mode, it would make it easier to build responsive pages, as you could toggle between the device modes and position your elements.

It's not a complete idea, but it was just a thought he spewed out, thought i'd share.

[sunhillbd]

Hi @artf ,
Great work.
I was playing through the fiddle you gave here - https://jsfiddle.net/9zf4kd6e/
Did you notice that when click on the drag icon of middle or top text block, it seems to be behaving a bit strangely, like overlapping with the other text block?
I tested it in my project with a custom pricing block, same issue was happening there as well. Whenever I tried to drag a single component out of a block, the component moved to some other part of the canvas.
Any idea why is this happening?
Thanks

[artf]

@sunhillbd ... did you read the Preface part of this issue???

[artf]

@simplecommerce

When clicking on device modes, if using absolute positioning, would create the styles only for that mode, it would make it easier to build responsive pages, as you could toggle between the device modes and position your elements.

GrapesJS works already in this way, but this doesn't solve the issue of redoing a big part of the work for each breakpoint

[sunhillbd]

@sunhillbd ... did you read the Preface part of this issue???

Yes. Did I miss anything? @artf

[artf]

@sunhillbd yes, but probably it's my fault for not being totally clear about the point. Basically, what you see in the demo is an example of mixing static position with absolute one, when you click on the drag icon you detach the component from the static flow so the effect you see it's like removing the node from the parent. This is why I suggest the translate option in that case

[WejusT1k]

Can I move blocks by measuring the properties of left, top in percent and not in px?

[artf]

@WejusT1k not really, but maybe we can find a way to let the user intercept/change the value in px before the update

[sunhillbd]

Hi, Did you get a chance to work on the Ruler idea? @artf

[artf]

@sunhillbd nope, the issues I've mentioned should be fixed in the next release but for the Ruler, I didn't even start

[pouyamiralayi]

Hello there and tnx for this awesome feature!
it would be nice if it was possible to draw elements on the canvas -> bubble. bubble is using this feature instead of d&d. i just think it would worth mentioning in this thread because it is a really awesome design related feature to wok with.
tnx.

[artf]

Quick update, from the https://github.com/artf/grapesjs/releases/tag/v0.15.3 you can start using these new Drag Mode API

• config.dragMode - The initial configuration for the global drag mode
• editor.setDragMode - change the global drag mode of components
• component.setDragMode - change the drag mode of a single component
  Possible values are already described: none (default), absolute, translate

[bartnv]

Hi, sorry to reopen this thread, but currently it's the best information available on the Drag Mode API.

Some context: I'm evaluating the use of grapesjs within a narrowcasting application. The plan is to create fixed-aspect slides with grapesjs within the web-based admin interface. Absolute mode is essential here as these slides are currently made in a separate bitmap editor, which obviously has this flexibility.

I'm defining blocks within the blockManager to drag onto the slides and I want some blocks (but not all) to use the dragMode 'absolute' setting. But I can't figure out how to make that work. There doesn't seem to be a way to set dragMode declaratively within the blockManager configuration object and I can't figure out how to get to the block's component API after creating it with the blockManager.

Can you perhaps share an example of a "partially dragmode" configuration?

[artf]

There doesn't seem to be a way to set dragMode declaratively within the blockManager configuration object and I can't figure out how to get to the block's component API after creating it with the blockManager.

You can add a block with a different Drag Mode in this way:

BlockManager.add('my-block', {
    ...
    content: { 
        type: 'my-component', 
        dmode: 'absolute'
    }
});

[SimKana]

@WejusT1k not really, but maybe we can find a way to let the user intercept/change the value in px before the update

@artf Can you tell me how to achieve this ? I need to set the positioning in vh/vw instead of px. I can easily translate the value in px to a vw/vh but I don't know how to change the value before the update