refactor(store): simplify setElement

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>

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;

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