Drag children into parent node

[yonjukyu]

Hello here !

I am currently using the drag and drop exemple of the library,
I want that when i moove a child node into a group node, the child node teleport somewhere randomly when i set his "parentNode" property to the parent id.

const isNodeInsideGroup = (node, groupNode) => {
	const nodeX = node.computedPosition.x;
	const nodeY = node.computedPosition.y;
	const nodeWidth = node.dimensions.width;
	const nodeHeight = node.dimensions.height;
	const groupNodeX = groupNode.computedPosition.x;
	const groupNodeY = groupNode.computedPosition.y;
	const groupNodeWidth = groupNode.dimensions.width;
	const groupNodeHeight = groupNode.dimensions.height;
	return (
		nodeX > groupNodeX &&
		nodeY > groupNodeY &&
		nodeX + nodeWidth < groupNodeX + groupNodeWidth &&
		nodeY + nodeHeight < groupNodeY + groupNodeHeight
	);
};
const {screenToFlowCoordinate} = useVueFlow()

const handleNodeDragStop = (event) => {
	console.log(event.event.clientX);
	const node = elements.value.find((el) => el.id === event.node.id);
	let parentNodeId = null;
	elements.value.forEach((el) => {
		if (el.type === 'group' && isNodeInsideGroup(node, el)) {
			parentNodeId = el.id;
		}
	});
	if (parentNodeId != null) {
		node.parentNode = parentNodeId;
	}
	else {
		node.parentNode = null;
	}
	node.position = screenToFlowCoordinate({x: event.event.clientX, y: event.event.clientY});
	saveData();
};

I've added the node.position = screenToFlowCoordinate({x: event.event.clientX, y: event.event.clientY}); to fix the positionning of the child node when I moove it out of the parent one, but the random moovement still remains when i want to put it in

Do you know where this could come from ?

Feel free to ask for more information

Thanks

[bcakmakoglu]

the child node teleport somewhere randomly when i set his "parentNode" property to the parent id.

It doesn't teleport somewhere randomly.
When you set parentNode the relation of a nodes position changes from the viewport to the node specified as the parent.
That means x: 0, y: 0 on a "regular" node (no parent id) is the top-left corner of the viewport (given that it has not been changed from it's initial position) and the same position for a child node (with parent id) is the top-left corner of the parent node.

You will have to consider the parents position initially when trying to move a node "inside" of a parent otherwise it seems like the node is going somewhere "randomly".