Drag and drop a Canvas

[real-ashwin]

Hi,

Is it possible to drag and drop a canvas?

Right now, when we create a UserComponent which we can drag and drop from the ToolBox, it cannot be a Canvas. It can contain a Canvas inside it - Is this correct?

So we have to do something like:

return (
    <div // Can this be a Canvas instead of div?
        ref={connectors ? connectors.connect : null}
    >
    <Canvas
        id="canvas-in-container"
      ></Canvas>
    </div>
)

The problem is that this shows a pe in Layers under the original component.

So, can the top level DOM element itself be a Canvas?

[ankri]

So when this is your Container

const Container: UserComponent = ({ children }) => {
  const {
    connectors: { drag, connect }
  } = useNode();

  return <div ref={(ref) => connect(drag(ref))}>{children}</div>;
};

you can create it as a canvas

      <button
        ref={(ref) => connectors.create(ref, <Element canvas is={Container} />)}
      >
        Container
      </button>

You can have a look at the Basic Example / Container and Basic Example / Toolbox

---

So if you want your Component to be a Canvas, you create it as a Canvas. (note: <Canvas /> has been deprecated - use <Element canvas /> instead)

[real-ashwin]

Thank you @ankri . The example in the Toolbox is what I was missing.