How to create multiple canvases inside a canvas

[abdhalees]

I want to create a component similar to 3 columns component in grapejs https://grapesjs.com/demo.html

I want the container and all inside elements to be draggable, droppable and deletable, I've tried different options but none meet all the above requirements.
is this achievable?

[ankri]

I created a Demo CodeSandbox for you. Is this what you wanted to achieve?

Note: as soon as #35 is merged it is easier to define the rules

[prevwong]

I think the example in Grape.js requires some extra rules ( I will refer to ColumnLayout in @ankri's example as "Row" for simplicity):

• The example in Grape.js disallows the Columns to be dragged out of the Row. We would need to set the Row's canMoveOut to false. But right now, when a Node is being moved, it checks for the target Canvas' canMoveOut rule. In this case, when a Column is being moved inside the Row to swap places with its sibling Columns, it checks for Row's canMoveOut rule and since it's false, it will not be allowed to be moved. I think this is incorrect since the Column is not being moved out of the Row, so there is no need to check for the canMoveOut rule.

• The Row should not accept anything in it other than the 3 initial Columns. The canMoveIn rule in Row currently only allows Column, but this would mean that we can still drag more Columns into it. If we set canMoveIn to false then the 3 initial Columns cannot be added into Row at all. This is because when a new Node is being added, it checks for the drag-n-drop rules as well. I'm now considering that we should only check for drag-n-drop rules when the Node is being moved.

What do you guys think, if it makes sense to make these changes?

[ankri]

The example in Grape.js disallows the Columns to be dragged out of the Row

In my use case (not the CodeSandbox) it should be possible to drag Columns from one ColumnLayout to another ColumnLayout. In my opinion this should still be possible.

I think this is incorrect since the Column is not being moved out of the Row, so there is no need to check for the canMoveOut rule.
Yes, reordering Columns should be possible.

In my use case canMoveIn and canDrop from #35 should do the trick:
ColumnLayout should only accept Column -> canMoveIn
Columns should only be able to be placed into ColumnLayouts -> canDrop

I think adding a restriction on a specific number of Columns per layout should be possible, too.

[abdhalees]

I created a Demo CodeSandbox for you. Is this what you wanted to achieve?

thanks @ankri that worked.
what I was missing is that I needed to nest the components in connectors.create not in ColumnsLayout

ref={ref => {
        connectors.create(
          ref,
          <Canvas is={ColumnLayout}>
            <Canvas is={Column}>1</Canvas>
            <Canvas is={Column}>2</Canvas>
            <Canvas is={Column}>3</Canvas>
          </Canvas>
        );
      }}

[abdhalees]

What do you guys think, if it makes sense to make these changes?

for my use case it's ok not to have these rules but I could see cases where they're needed