From 4570b2494bcbeffc8278bdf93d21fe5419a855e6 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 8 Apr 2024 17:32:49 +0200
Subject: [PATCH] chore(react/store): cleanup

---
 examples/react/src/examples/Basic/index.tsx   | 29 +++++++++++++------
 .../src/components/StoreUpdater/index.tsx     |  1 -
 packages/react/src/store/index.ts             |  5 ++--
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx
index cafa9fa8..62232a35 100644
--- a/examples/react/src/examples/Basic/index.tsx
+++ b/examples/react/src/examples/Basic/index.tsx
@@ -56,18 +56,19 @@ const initialEdges: Edge[] = [
 const defaultEdgeOptions = {};
 
 const BasicFlow = () => {
-  const { setNodes, getNodes, setEdges, getEdges, deleteElements, updateNodeData, toObject, setViewport } =
+  const { addNodes, setNodes, getNodes, setEdges, getEdges, deleteElements, updateNodeData, toObject, setViewport } =
     useReactFlow();
 
   const updatePos = () => {
     setNodes((nodes) =>
       nodes.map((node) => {
-        node.position = {
-          x: Math.random() * 400,
-          y: Math.random() * 400,
+        return {
+          ...node,
+          position: {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
+          },
         };
-
-        return node;
       })
     );
   };
@@ -78,9 +79,10 @@ const BasicFlow = () => {
   const toggleClassnames = () => {
     setNodes((nodes) =>
       nodes.map((node) => {
-        node.className = node.className === 'light' ? 'dark' : 'light';
-
-        return node;
+        return {
+          ...node,
+          className: node.className === 'light' ? 'dark' : 'light',
+        };
       })
     );
   };
@@ -108,6 +110,14 @@ const BasicFlow = () => {
     updateNodeData('1', { label: 'update' });
     updateNodeData('2', { label: 'update' });
   };
+  const addNode = () => {
+    addNodes({
+      id: `${Math.random()}`,
+      data: { label: 'Node' },
+      position: { x: Math.random() * 300, y: Math.random() * 300 },
+      className: 'light',
+    });
+  };
 
   return (
     <ReactFlow
@@ -144,6 +154,7 @@ const BasicFlow = () => {
         <button onClick={deleteSomeElements}>deleteSomeElements</button>
         <button onClick={onSetNodes}>setNodes</button>
         <button onClick={onUpdateNode}>updateNode</button>
+        <button onClick={addNode}>addNode</button>
       </Panel>
     </ReactFlow>
   );
diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx
index 6d92e8b4..624d10a5 100644
--- a/packages/react/src/components/StoreUpdater/index.tsx
+++ b/packages/react/src/components/StoreUpdater/index.tsx
@@ -138,7 +138,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
 
         if (fieldValue === previousFieldValue) continue;
         if (typeof props[fieldName] === 'undefined') continue;
-
         // Custom handling with dedicated setters for some fields
         if (fieldName === 'nodes') setNodes(fieldValue as Node[]);
         else if (fieldName === 'edges') setEdges(fieldValue as Edge[]);
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index 3a5686b2..4b2c0e95 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -73,7 +73,6 @@ const createRFStore = ({
       // new dimensions and update the nodes.
       updateNodeDimensions: (updates) => {
         const {
-          nodes,
           onNodesChange,
           fitView,
           nodeLookup,
@@ -98,7 +97,7 @@ const createRFStore = ({
         if (!fitViewDone && fitViewOnInit) {
           nextFitViewDone = fitView({
             ...fitViewOnInitOptions,
-            nodes: fitViewOnInitOptions?.nodes || nodes,
+            nodes: fitViewOnInitOptions?.nodes,
           });
         }
 
@@ -107,7 +106,7 @@ const createRFStore = ({
         // has not provided an onNodesChange handler.
         // Nodes are only rendered if they have a width and height
         // attribute which they get from this handler.
-        set({ nodes, fitViewDone: nextFitViewDone });
+        set({ fitViewDone: nextFitViewDone });
 
         if (changes?.length > 0) {
           if (debug) {