diff --git a/.changeset/friendly-grapes-lay.md b/.changeset/friendly-grapes-lay.md new file mode 100644 index 00000000..b092cc25 --- /dev/null +++ b/.changeset/friendly-grapes-lay.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Prevent unnecessary updates when selectNodesOnDrag = false diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 1c5bdd3d..816059f0 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -304,8 +304,16 @@ const createStore = ({ const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get(); const nodesToUnselect = nodes ? nodes : storeNodes; const edgesToUnselect = edges ? edges : storeEdges; - const nodeChanges = nodesToUnselect.map((n) => { - const internalNode = nodeLookup.get(n.id); + + const nodeChanges: NodeSelectionChange[] = []; + + for (const node of nodesToUnselect) { + if (!node.selected) { + continue; // skip changing nodes that are not selected + } + + const internalNode = nodeLookup.get(node.id); + if (internalNode) { /* * we need to unselect the internal node that was selected previously before we @@ -314,9 +322,18 @@ const createStore = ({ internalNode.selected = false; } - return createSelectionChange(n.id, false); - }); - const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false)); + nodeChanges.push(createSelectionChange(node.id, false)); + } + + const edgeChanges: EdgeSelectionChange[] = []; + + for (const edge of edgesToUnselect) { + if (!edge.selected) { + continue; // skip changing edges that are not selected + } + + edgeChanges.push(createSelectionChange(edge.id, false)); + } triggerNodeChanges(nodeChanges); triggerEdgeChanges(edgeChanges);