How to preserve a node position when you nest it (add a parent node)

[DoaaRadwan]

Hi,

In our project we have a functionality to nest nodes inside other 'special' nodes onDrag of the child node over the parent node and the child node is completely inside the parent node.

We do this by adding those keys to the node object

nestedNode.parentNode = parentNode.id;
nestedNode.expandParent = true;

Is there a way to preserve the position of the child node? as of now we reset the position to 0,0 and the node will move to the left top corner of the parent node, as keeping the child nodes old position will move to the bottom right corner of the parent node and will expand it.

It be really great if there is away to preserve the relative position of the child node where it was dragged - is there a relationship/ a way to calculate the position relative to the parent workflow from the position relative to the main vueFlow canvas? so visually for the user the child node stays in the same position

[Kaua890]

I think you are needing "node.computedPosition" like "node.position" is a object with x and y but here is absolute, based on main canvas not in the parent node

[DoaaRadwan]

I tried using that by doing

nestedNode.position = nestedNode. computedPosition

const pos = {...nestedNode. computedPosition}
nestedNode.parentNode = parentNode.id;
nestedNode.expandParent = true;
nestedNode.computedPosition = pos

but none worked. Can you elaborate more about computedPosition?

This is the behaviour I see when I don't change the position or computedPosition . I am trying to keep the node in it's place

nestedNode.parentNode = parentNode.id;
nestedNode.expandParent = true;

Screen.Recording.2023-11-24.at.10.52.51.am.mov

[Kaua890]

Do this with computedPosition is hard because have to calculate the diff between parent and child positions, so i found a new way much simpler to preserve the child node position:

node.extent = "parent"

node.parentNode = parentNode.id

nextTick(() => (node.extent = undefined))

just set "node.extend" to "parent" before set the "parentNode" and remove later using nextTick, i did this in "onNodeDragStop" event

[DoaaRadwan]

It took a while to test this but it worked perfectly, thanks a lot !!