Initial placeholder for first node


I am trying to to assign a placeholder at a predefined location on the canvas (everything else is a blur background where nothing exists). Once the user drags the first node onto the location where the placeholder is, I want to remove the background blur. After this the operation is as usual. Users can drag mode nodes to the canvas and link them.

Above is a sample of what I am trying to achieve as my initial layout. Once the node is dragged from the palette, it would look something like this.

I am trying to figure out the best way to achieve it.

Do you want to keep the placeholder there after the first node has been dropped on it, or should the node just replace it? Should the border of the first node be dashed?


Once the first node is dropped, the node will replace the placeholder. If this (first) node is deleted, the placeholder will be shown again.

Sorry, I forgot to remove the border lines. It will look something like this once the node is dropped -

Thank you for helping me with this.

Ok, here’s an example:

You’ll notice we keep track of model changes, and when they are completed transactions, we determine whether we should or shouldn’t be in “edit mode.” The rest of the setup is just straightforward setting of properties like mouseDragOver and mouseDrop.

Jhardy, it works like a charm. Thank you.