Merge branch 'main' into feat/use-handle-connection

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 = {

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;

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

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",

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));

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

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",

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;
     }
   });
 }