BUG: Restricting Drop on Wrapper Component

[BillTheGoat]

Version: 0.16.22

Are you able to reproduce the bug from the demo?

[ ] Yes [ X] No - requires editing js.

What is the expected behavior? wrapper component should not be droppable once droppable attribute is set to false.

What is the current behavior?` Nothing happens when this attribute is set.

Describe the bug detailed Child components can be restricted using data-gjs-droppable=".foo" or data-gjs-droppable="false", but this attribute does nothing when set on the wrapper component using the DomComponent API. I have tried adding them using domComponents in init, directly after init, or waiting for editor onload. I have tired using attributes of droppable, data-droppable, and/or data-gjs-droppable. The use case for this is to make sure users can't drop items outside my base template, since it would mess up post-processing. I am new to grapejs but find no info on this in issues or on stackoverflow/google etc.

Are you able to attach screenshots, screencasts or a live demo?

[X ] Yes (attach) [ ] No

https://codesandbox.io/s/kind-ritchie-5ue7i creates a wrapper like:

<div data-gjs-type="wrapper" draggable="true" data-highlightable="1" droppable="false" data-droppable="false" data-gjs-droppable="false" id="c55" class=""> ...

[RJCAM]

Hi @BillTheGoat try this after init:

editor.getWrapper().set({
    'droppable': false
});

[BillTheGoat]

That works perfectly, thank you. I am curious as to why DomComponent did not work...

[RJCAM]

I think it's because the wrapper doesn't make part of DomComponents. DomComponents are only the components inside of the wrapper. :smile:

[artf]

Indeed, there is an option for the initial props configuration of the wrapper

[BillTheGoat]

Hmmm. I tried this because the API docs list the DomComponents.getWrapper() as its first function, and it does apply attributes as seen in my sandbox above. It was doubly odd to me because it seems like the editor.getWrapper() function is just a wrapper for editor.get("DomComponents").getWrapper() in the source ;).

Edit: in fact wrapper is inside domComponents init scope, so this works:

domComponents: {
    wrapper: {
    droppable: false,
    }
},

Thank you so much for your great work.

[AgnRakul]

set Property Expecting 2 Arguments