Multiple canvases which change based on user selection

[real-ashwin]

Hi,

I am trying to create a column layout like in this issue - #56 .

In addition to that, I want to allow the user to change the number of columns in the column layout.

Since the columns are nested in ‘components.create’ I cannot figure out how to add and delete the number of columns based on user selection.

Is this possible ?

[prevwong]

I'm assuming you want to be able to modify the number of columns after you've dropped the component?

If so, you just need to know the Id of that element and add/remove its child node. Ie:

// When the user decreases the number of columns
const children = query.node(id).descendants();
if ( children.length > 1 ) {
    const lastChildId = children[children.length - 1];
   actions.delete(lastChildId);
}

[real-ashwin]

Thank you for your pointers. I figured out the delete part, updated the sandbox - https://codesandbox.io/s/craft-column-layout-forked-7wgrj?file=/src/App.tsx .

Could you please help me with the add column part as well?

I am trying something like this but its crashing.

const addItem = () => {
    const data = {
      type: Column,
    };

    const freshNode = query.createNode({
      data,
    });

    // const item = query.node(id);
    const node = query.createNode(freshNode);
    actions.add(node, id);
  }

[prevwong]

Could you add the above code to the sandbox so I can replicate the error?

[real-ashwin]

Added it . starts at line number 30.

[prevwong]

So the createNode method is being used incorrectly. You just need to do the following:

const freshNode = query.createNode(<Column />);
actions.add(freshNode, id);

Note, createNode has been deprecated in the latest 0.1.x version of Craft. If you were to update, you would need to do:

const freshNode = query.parseReactElement(<Column />).toNodeTree();
actions.addNodeTree(freshNode, id);

[real-ashwin]

Got it. Updated the sandbox - it works great.
Thank you for the help 🙏

[ankri]

Hi guys

Thanks for the answers. For future readers looking for the same answer, I updated the codesandbox and cleaned it up a bit.

Demo