diff --git a/examples/react/src/examples/UseNodesData/index.tsx b/examples/react/src/examples/UseNodesData/index.tsx index dabc1d4d..c00e26a1 100644 --- a/examples/react/src/examples/UseNodesData/index.tsx +++ b/examples/react/src/examples/UseNodesData/index.tsx @@ -21,7 +21,7 @@ export type UppercaseNode = Node<{ text: string }, 'uppercase'>; export type MyNode = TextNode | ResultNode | UppercaseNode; export function isTextNode(node: any): node is TextNode | UppercaseNode { - return node.type === 'text' || node.type === 'uppercase'; + return !node || !node.type ? false : node.type === 'text' || node.type === 'uppercase'; } const nodeTypes = { diff --git a/examples/svelte/src/routes/examples/usenodesdata/+page.svelte b/examples/svelte/src/routes/examples/usenodesdata/+page.svelte index 91fd8432..8f041b0a 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/+page.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/+page.svelte @@ -6,7 +6,7 @@ type ResultNodeType = Node<{}, 'result'>; export function isTextNode(node: any): node is TextNodeType | UppercaseNode { - return node.type === 'text' || node.type === 'uppercase'; + return !node || !node.type ? false : node.type === 'text' || node.type === 'uppercase'; } export type MyNode = TextNodeType | UppercaseNodeType | ResultNodeType; diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 280993df..46c96cd1 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @xyflow/react +## 12.3.2 + +### Patch Changes + +- [#4722](https://github.com/xyflow/xyflow/pull/4722) [`e816bb69`](https://github.com/xyflow/xyflow/commit/e816bb6953486e37dd39d93252aa9b94fe5d4ec1) Thanks [@moklick](https://github.com/moklick)! - Fix internal behaviour that mutated user nodes which led to an issue with Redux and immer + ## 12.3.1 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 0625c6cd..b97d7487 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@xyflow/react", - "version": "12.3.1", + "version": "12.3.2", "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.", "keywords": [ "react", diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index ea06fb8b..067f4093 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -238,12 +238,17 @@ const createStore = ({ triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true)); }, unselectNodesAndEdges: ({ nodes, edges }: UnselectNodesAndEdgesParams = {}) => { - const { edges: storeEdges, nodes: storeNodes, triggerNodeChanges, triggerEdgeChanges } = get(); + const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get(); const nodesToUnselect = nodes ? nodes : storeNodes; const edgesToUnselect = edges ? edges : storeEdges; - const nodeChanges = nodesToUnselect.map((n) => { - n.selected = false; + const internalNode = nodeLookup.get(n.id); + if (internalNode) { + // we need to unselect the internal node that was selected previously before we + // send the change to the user to prevent it to be selected while dragging the new node + internalNode.selected = false; + } + return createSelectionChange(n.id, false); }); const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false)); diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index d13926dd..174c0001 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,11 @@ # @xyflow/svelte +## 0.1.21 + +### Patch Changes + +- [#4718](https://github.com/xyflow/xyflow/pull/4718) [`51f08aac`](https://github.com/xyflow/xyflow/commit/51f08aaca5ddfbaa3259f666005d687d0a83f3db) Thanks [@peterkogo](https://github.com/peterkogo)! - Fixed hook useNodesData unexpectedly returning undefined + ## 0.1.20 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 4d7b0c77..970308ae 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@xyflow/svelte", - "version": "0.1.20", + "version": "0.1.21", "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.", "keywords": [ "svelte", diff --git a/packages/svelte/src/lib/hooks/useNodesData.ts b/packages/svelte/src/lib/hooks/useNodesData.ts index a13bdb65..2e8fba50 100644 --- a/packages/svelte/src/lib/hooks/useNodesData.ts +++ b/packages/svelte/src/lib/hooks/useNodesData.ts @@ -22,6 +22,7 @@ export function useNodesData(nodeIds: any): any { const { nodes, nodeLookup } = useStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any let prevNodesData: any[] = []; + let initialRun = true; return derived([nodes, nodeLookup], ([, nodeLookup], set) => { const nextNodesData = []; @@ -39,9 +40,10 @@ export function useNodesData(nodeIds: any): any { } } - if (!shallowNodeData(nextNodesData, prevNodesData)) { + if (!shallowNodeData(nextNodesData, prevNodesData) || initialRun) { prevNodesData = nextNodesData; set(isArrayOfIds ? nextNodesData : nextNodesData[0] ?? null); + initialRun = false; } }); }