From 52a73d68a056cf882778a91ffbb1a019ee06ff97 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 24 Nov 2020 18:21:36 +0100
Subject: [PATCH] refactor(store): simplify setElement

---
 example/src/Basic/index.js | 27 ++++++++++++++++++++++-----
 example/src/index.css      |  5 +++++
 src/store/index.ts         | 30 +++++++++++-------------------
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js
index 3395d29b..6c5acbe4 100644
--- a/example/src/Basic/index.js
+++ b/example/src/Basic/index.js
@@ -6,10 +6,10 @@ const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onElementClick = (event, element) => console.log('click', element);
 
 const initialElements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ];
@@ -40,9 +40,23 @@ const BasicFlow = () => {
   };
 
   const logToObject = () => console.log(rfInstance.toObject());
-
   const resetTransform = () => rfInstance.setTransform({ x: 0, y: 0, zoom: 1 });
 
+  const toggleClassnames = () => {
+    setElements((elms) => {
+      return elms.map((el) => {
+        if (isNode(el)) {
+          return {
+            ...el,
+            className: el.className === 'light' ? 'dark' : 'light',
+          };
+        }
+
+        return el;
+      });
+    });
+  };
+
   return (
     <ReactFlow
       elements={elements}
@@ -65,6 +79,9 @@ const BasicFlow = () => {
         <button onClick={updatePos} style={{ marginRight: 5 }}>
           change pos
         </button>
+        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
+          toggle classnames
+        </button>
         <button onClick={logToObject}>toObject</button>
       </div>
     </ReactFlow>
diff --git a/example/src/index.css b/example/src/index.css
index 76f50147..10b22e56 100644
--- a/example/src/index.css
+++ b/example/src/index.css
@@ -140,6 +140,11 @@ nav a.active:before {
   color: #f8f8f8;
 }
 
+.react-flow__node.dark {
+  background: #557;
+  color: #f8f8f8;
+}
+
 .react-flow__node-selectorNode {
   font-size: 12px;
   background: #f0f2f3;
diff --git a/src/store/index.ts b/src/store/index.ts
index 89638164..fc46d917 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -213,30 +213,22 @@ export const storeModel: StoreModel = {
 
       // update existing element
       if (storeElementIndex !== -1) {
-        const storeElement = state.elements[storeElementIndex];
+        let storeElement = state.elements[storeElementIndex];
+
+        if (isNode(storeElement)) {
+          let storeNode = storeElement as Node;
 
-        if (isNode(state.elements[storeElementIndex])) {
           const propNode = el as Node;
-          const storeNode = state.elements[storeElementIndex] as Node;
-
           const positionChanged =
             storeNode.position.x !== propNode.position.x || storeNode.position.y !== propNode.position.y;
 
+          state.elements[storeElementIndex] = {
+            ...storeNode,
+            ...propNode,
+          };
+
           if (positionChanged) {
-            (state.elements[storeElementIndex] as Node) = {
-              ...storeElement,
-              ...el,
-              __rf: {
-                ...storeNode.__rf,
-                position: propNode.position,
-              },
-              position: propNode.position,
-            };
-          } else {
-            state.elements[storeElementIndex] = {
-              ...storeElement,
-              ...el,
-            };
+            (state.elements[storeElementIndex] as Node).__rf.position = propNode.position;
           }
           // we reset the elements dimensions here in order to force a re-calculation of the bounds.
           // When the type of a node changes it is possible that the number or positions of handles changes too.
@@ -252,7 +244,7 @@ export const storeModel: StoreModel = {
         }
       } else {
         // add new element
-        state.elements.push(parseElement({ ...el }));
+        state.elements.push(parseElement(el));
       }
     });
   }),