From fba54e669de4c222a9f126addd326c0e160ef8a5 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 8 Oct 2024 11:41:25 +0200 Subject: [PATCH 1/5] fix useNodesData returning undefined in svelte flow --- examples/react/src/examples/UseNodesData/index.tsx | 2 +- .../svelte/src/routes/examples/usenodesdata/+page.svelte | 2 +- packages/svelte/src/lib/hooks/useNodesData.ts | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) 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/svelte/src/lib/hooks/useNodesData.ts b/packages/svelte/src/lib/hooks/useNodesData.ts index a13bdb65..e4d8dd36 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)) { - prevNodesData = nextNodesData; + if (!shallowNodeData(nextNodesData, prevNodesData) || initialRun) { + prevNodesData = [...nextNodesData]; set(isArrayOfIds ? nextNodesData : nextNodesData[0] ?? null); + initialRun = false; } }); } From 51f08aaca5ddfbaa3259f666005d687d0a83f3db Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 8 Oct 2024 12:03:22 +0200 Subject: [PATCH 2/5] added changelog --- .changeset/brave-worms-study.md | 5 +++++ packages/svelte/src/lib/hooks/useNodesData.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/brave-worms-study.md diff --git a/.changeset/brave-worms-study.md b/.changeset/brave-worms-study.md new file mode 100644 index 00000000..123459fe --- /dev/null +++ b/.changeset/brave-worms-study.md @@ -0,0 +1,5 @@ +--- +'@xyflow/svelte': patch +--- + +Fixed hook useNodesData unexpectedly returning undefined diff --git a/packages/svelte/src/lib/hooks/useNodesData.ts b/packages/svelte/src/lib/hooks/useNodesData.ts index e4d8dd36..2e8fba50 100644 --- a/packages/svelte/src/lib/hooks/useNodesData.ts +++ b/packages/svelte/src/lib/hooks/useNodesData.ts @@ -41,7 +41,7 @@ export function useNodesData(nodeIds: any): any { } if (!shallowNodeData(nextNodesData, prevNodesData) || initialRun) { - prevNodesData = [...nextNodesData]; + prevNodesData = nextNodesData; set(isArrayOfIds ? nextNodesData : nextNodesData[0] ?? null); initialRun = false; } From 66998fa8e2b605401ed6bdddf53227209c01eaf1 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 9 Oct 2024 17:08:40 +0200 Subject: [PATCH 3/5] fix(react): use internal nodes for deselecting node #4716 --- packages/react/src/store/index.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index ea06fb8b..c4dc42b6 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -20,7 +20,6 @@ import { import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; import getInitialState from './initialState'; import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types'; - const createStore = ({ nodes, edges, @@ -238,12 +237,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)); From e816bb6953486e37dd39d93252aa9b94fe5d4ec1 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 9 Oct 2024 17:11:27 +0200 Subject: [PATCH 4/5] chore(changesets): add --- .changeset/stale-owls-turn.md | 5 +++++ packages/react/src/store/index.ts | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/stale-owls-turn.md diff --git a/.changeset/stale-owls-turn.md b/.changeset/stale-owls-turn.md new file mode 100644 index 00000000..60687a4d --- /dev/null +++ b/.changeset/stale-owls-turn.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Fix internal behaviour that mutated user nodes which led to an issue with Redux and immer diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index c4dc42b6..067f4093 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -20,6 +20,7 @@ import { import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; import getInitialState from './initialState'; import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types'; + const createStore = ({ nodes, edges, From f8cef2dd0fb3e2c0d7e9e2011b5b4477e03f717d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 9 Oct 2024 15:33:36 +0000 Subject: [PATCH 5/5] chore(packages): bump --- .changeset/brave-worms-study.md | 5 ----- .changeset/stale-owls-turn.md | 5 ----- packages/react/CHANGELOG.md | 6 ++++++ packages/react/package.json | 2 +- packages/svelte/CHANGELOG.md | 6 ++++++ packages/svelte/package.json | 2 +- 6 files changed, 14 insertions(+), 12 deletions(-) delete mode 100644 .changeset/brave-worms-study.md delete mode 100644 .changeset/stale-owls-turn.md diff --git a/.changeset/brave-worms-study.md b/.changeset/brave-worms-study.md deleted file mode 100644 index 123459fe..00000000 --- a/.changeset/brave-worms-study.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@xyflow/svelte': patch ---- - -Fixed hook useNodesData unexpectedly returning undefined diff --git a/.changeset/stale-owls-turn.md b/.changeset/stale-owls-turn.md deleted file mode 100644 index 60687a4d..00000000 --- a/.changeset/stale-owls-turn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@xyflow/react': patch ---- - -Fix internal behaviour that mutated user nodes which led to an issue with Redux and immer 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/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",