[Bug] Drag and drop rendering improperly

[00salmon]

Version 0.14.40

1. Click "Continue"
2. Select "You have successfully signed up!" header (sqh-header)
3. Drag sqh-header block between "Give $10 and Get $10" and text below
4. sqh-header appears visually above the Give $10 Header, but below the Give $10 Header in the layer manager
5. Drag sqh-header beneath "Rewards Dashboard" back inside "form-component"
6. sqh-header appears visually above "Rewards Dashboard", but below in the layer section

Couldn't reproduce this bug with the demo, and I can't seem to figure out what the issue is. Tried multiple versions of grapesjs and the bug appears each time.

Tested on https://jsfiddle.net/00salmon/ocbxqm91/ using Chrome

[artf]

Seems like the issue is due to different empty "textnode"s you have in your JSON. How do you obtain that structure?

[00salmon]

Hey @artf,

Thanks for pointing that out. The JSON came from an internal example with more components and the missing bits must've been converted to empty textnodes.

I've removed the empty textnodes in the jsfiddle, but still seem to be getting the issue with the "sqh-header" landing in the wrong spot. Any other clues?

Cheers

[artf]

Please update the live demo with cleaned JSON

[00salmon]

the JSON should be proper now here: https://jsfiddle.net/00salmon/kpbx9st3/

[artf]

I think the issue happens because the number of DOM elements inside the sqh-global-container is not the same as its component models. Those last elements seems not to be inserted via the proper API

[00salmon]

Hey @artf,

I've removed those DOM elements from the container in case they were causing the issue but still seem to be getting the strange drag behavior. I updated the live demo to reflect that.

https://jsfiddle.net/00salmon/fs8gnpte/

As a note, the DOM is being generated via the use of <slot /> within <sqh-global-container>, and within <sqh-form-component> for the elements shown after the form completion. I tried removing those but the dragging still has the original problem.

[loganvolkers]

hey @artf thanks for responding so quickly to this one.

I work with @00salmon and we've been using Grapes with web components. I think that this bug is related to the interaction with the <slot/> elements required by web components and the canvas.

It's interesting that drag and drop via the side panels or by updating the Backbone models work correctly. The components are re-ordered and the canvas is updated correctly. Only drag and drop in the canvas itself seems to cause problems.

We'd be happy to provide more tests or a pull request, but we're really not sure where to start.

Let us know if there's anything else we can provide!

[artf]

Hi @loganvolkers thanks for your feedback. Probably you're right, something is conflicting with one of the web components specs. The module responsible for the d&d is Sorter and in case of the canvas it starts from startSort method Can you show me your integration with Web Components?

[loganvolkers]

That demo link is probably the best starting point.

Alternatively, we could put some more test scenarios together with a collection of Polymer and/or Stencil libraries, or even put together a super vanilla web component.

I should note that I think that GrapesJS + Web Components is an incredibly powerful combination that could change a lot about how people build web page templates. If you're not already using it for your new spin off project @artf I highly suggest you take a look ;)

[loganvolkers]

Here's a good example library to look at: BlazeUI

For example their timeline: https://www.blazeui.com/components/timelines

<blaze-timeline alternate loading>
  <blaze-timeline-item left>Nothing</blaze-timeline-item>
  <blaze-timeline-item type="brand">
    Big bang
    <p class="c-paragraph">
      Widely considered to be how the universe began
    </p>
  </blaze-timeline-item>
  <blaze-timeline-item type="info">Galaxies go everywhere</blaze-timeline-item>
  <blaze-timeline-item type="warning">Solar systems form</blaze-timeline-item>
  <blaze-timeline-item type="success">Earth appears</blaze-timeline-item>
  <blaze-timeline-item type="error">Human infestation occurs!</blaze-timeline-item>
  <blaze-timeline-item last>All this has happened before and will happen again</blaze-timeline-item>
  <blaze-timeline-item loading>Evolution</blaze-timeline-item>
</blaze-timeline>

And source code here: https://github.com/BlazeUI/blaze/blob/master/packages/atoms/src/components/timeline/blaze-timeline-item.tsx

And another demo link here: https://jsfiddle.net/ocbxqm91/128/