Absolute/Designer mode

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]

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]

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]

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.

[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

[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