[BUG] Component style is not updated after the drag event in Dragmode('absolute')

[MartinPutz]

In the new dragmode the component's style is not updated after dragging the component.

Expected behaviour:

1. Drag element by clicking on the component(or the toolbar icon)
2. After the components is 'dropped' the style should be updated with the new position

Current behaviour:

1. You drag the component somewhere else
2. The x and y position (top,left) are the same as before the dragging

There is an exception: if the stylemanager panel is not open yet and then you drag the component then it will be updated correctly(only for the first time since then the panel is open)

The issue is reproducable in the demo as well.
https://jsfiddle.net/yt0wz29p/

Steps to reproduce:

1. Open the demo with dragmode
2. Have a set x and y values(for example 0px and 0px)
3. Drag the component and check the new x and y values

GrapesJS Version:0.15.8

[artf]

Have a set x and y values(for example 0px and 0px)

For x/y you mean left/top?

[MartinPutz]

Yes, left and top should change and should be updated but they remain the same.

[artf]

I see them changing only after reselecting the component, can you confirm?

[MartinPutz]

Yes, after reselecting the component, it does update them properly.

[artf]

Thanks, probably I've disabled some event for better performances but I'll look what I can do

[sdrebel]

Hi @artf ,
Facing similar issue when I create custom component. Custom style is not getting updated for the component.
If I remove DragMode it works fine.

Created JSfiddle to replicate the issues
https://jsfiddle.net/73f6k2jr/4/

[MartinPutz]

Quick workaround:

editor.on('stop:core:component-drag',function() { editor.trigger('component:toggled') });

It only updates after you drop the component but it is enough in my case.

[sdrebel]

editor.on('stop:core:component-drag',function() { editor.trigger('component:toggled') });

@MartinPutz : Thank you, but it's not working

[xiyangliu]

@sdrebel I was facing the same issue. After some debugging, I found the issue is in https://github.com/artf/grapesjs/blob/dev/src/utils/Droppable.js#L78 custom defined style is overwritten by absolute styles. I fixed that in my own fork and it's working now.

[sdrebel]

Hi @xiyangliu, Great!! Similar hack I found and doing it in Component render method.

     onRender({ el }) 
        {

            let t = this.model;
            setTimeout(() => {
                console.log(t.getStyle());
                let st= t.getStyle();
                let left = (st.left.split('px')[0] - 400);
                t.setStyle({
                    //...st,
                    left: `${left}px`,
                    top: st.top,
                    position: st.position,
                    'z-index': 2,
                    padding: '10px',
                    width: '400px',
                    'min-height': '200px',
                    overflow: 'hidden',
                });
            }, 5)

        }

But I'm waiting these issues to be fixed in the package itself as we are importing in React and have multiple instances.

[sdrebel]

Do we have any fix for this issue?

[meyerco]

I also need a fix for this issue .
@artf did you plan a fix for this ?

[Heng-xiu]

Do we have further fix for this issue?

[artf]

This will be fixed in the next release