refactor(elementUpdater): simplify

src/store/index.ts

@@ -3,7 +3,7 @@ import isEqual from 'fast-deep-equal';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
 import { getDimensions } from '../utils';
-import { getNodesInside, getConnectedEdges, getRectOfNodes, isNode, isEdge } from '../utils/graph';
+import { getNodesInside, getConnectedEdges, getRectOfNodes, isNode, isEdge, parseElement } from '../utils/graph';
 import { getHandleBounds } from '../components/Nodes/utils';
 
 import {
@@ -196,8 +196,54 @@ export const storeModel: StoreModel = {
     state.onConnectEnd = onConnectEnd;
   }),
 
-  setElements: action((state, elements) => {
-    state.elements = elements;
+  setElements: action((state, propElements) => {
+    // remove deleted elements
+    state.elements.forEach((se, i) => {
+      const removeElement = !propElements.some((pe) => pe.id === se.id);
+
+      if (removeElement) {
+        state.elements.splice(i, 1);
+      }
+    });
+
+    propElements.forEach((el) => {
+      const storeElementIndex = state.elements.findIndex((se) => se.id === el.id);
+
+      // update existing element
+      if (storeElementIndex !== -1) {
+        const storeElement = state.elements[storeElementIndex];
+
+        state.elements[storeElementIndex] = {
+          ...storeElement,
+          ...el,
+        };
+
+        if (isNode(state.elements[storeElementIndex])) {
+          const propNode = el as Node;
+          const storeNode = state.elements[storeElementIndex] as Node;
+
+          const poitionChanged =
+            storeNode.position.x !== propNode.position.x || storeNode.position.y !== propNode.position.y;
+
+          if (poitionChanged) {
+            (state.elements[storeElementIndex] as Node).__rf = {
+              ...storeNode.__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.
+          if (propNode.type !== storeNode.type) {
+            (state.elements[storeElementIndex] as Node).__rf.width = null;
+            (state.elements[storeElementIndex] as Node).__rf.height = null;
+          }
+        }
+      } else {
+        // add new element
+        state.elements.push(parseElement(el));
+      }
+    });
   }),
 
   updateNodeDimensions: action((state, { id, nodeElement }) => {