diff --git a/.changeset/ten-waves-remain.md b/.changeset/ten-waves-remain.md new file mode 100644 index 00000000..9210e772 --- /dev/null +++ b/.changeset/ten-waves-remain.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Use current expandParent value on drag to be able to update it while dragging diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 5711102b..bb05ae22 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -152,9 +152,12 @@ const createStore = ({ updateNodePositions: (nodeDragItems, dragging = false) => { const parentExpandChildren: ParentExpandChild[] = []; const changes = []; + const { nodeLookup, triggerNodeChanges } = get(); for (const [id, dragItem] of nodeDragItems) { - const expandParent = !!(dragItem?.expandParent && dragItem?.parentId && dragItem?.position); + // we are using the nodelookup to be sure to use the current expandParent and parentId value + const node = nodeLookup.get(id); + const expandParent = !!(node?.expandParent && node?.parentId && dragItem?.position); const change: NodeChange = { id, @@ -168,10 +171,10 @@ const createStore = ({ dragging, }; - if (expandParent) { + if (expandParent && node.parentId) { parentExpandChildren.push({ id, - parentId: dragItem.parentId!, + parentId: node.parentId, rect: { ...dragItem.internals.positionAbsolute, width: dragItem.measured.width ?? 0, @@ -184,12 +187,12 @@ const createStore = ({ } if (parentExpandChildren.length > 0) { - const { nodeLookup, parentLookup, nodeOrigin } = get(); + const { parentLookup, nodeOrigin } = get(); const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin); changes.push(...parentExpandChanges); } - get().triggerNodeChanges(changes); + triggerNodeChanges(changes); }, triggerNodeChanges: (changes) => { const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();