From 267187b8d1fc292a5a33fdde83dae85ceaed29b8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 14 May 2020 10:56:50 +0200
Subject: [PATCH] feat(elementUpdater): apply position and style changes #220

---
 src/hooks/useElementUpdater.ts | 44 ++++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useElementUpdater.ts b/src/hooks/useElementUpdater.ts
index cdd4e9b0..6d141151 100644
--- a/src/hooks/useElementUpdater.ts
+++ b/src/hooks/useElementUpdater.ts
@@ -6,7 +6,7 @@ import { parseElement, isNode, isEdge } from '../utils/graph';
 import { Elements, Node, Edge } from '../types';
 
 const useElementUpdater = (elements: Elements): void => {
-  const state = useStoreState(s => ({
+  const state = useStoreState((s) => ({
     nodes: s.nodes,
     edges: s.edges,
     transform: s.transform,
@@ -14,37 +14,51 @@ const useElementUpdater = (elements: Elements): void => {
     snapGrid: s.snapGrid,
   }));
 
-  const setNodes = useStoreActions(a => a.setNodes);
-  const setEdges = useStoreActions(a => a.setEdges);
+  const setNodes = useStoreActions((a) => a.setNodes);
+  const setEdges = useStoreActions((a) => a.setEdges);
 
   useEffect(() => {
     const nodes = elements.filter(isNode) as Node[];
     const edges = elements
       .filter(isEdge)
-      .map(e =>
-        parseElement(e, state.transform, state.snapToGrid, state.snapGrid)
-      ) as Edge[];
+      .map((e) => parseElement(e, state.transform, state.snapToGrid, state.snapGrid)) as Edge[];
 
-    const nextNodes = nodes.map(propNode => {
-      const existingNode = state.nodes.find(n => n.id === propNode.id);
+    const nextNodes = nodes.map((propNode) => {
+      const existingNode = state.nodes.find((n) => n.id === propNode.id);
 
       if (existingNode) {
         const data = !isEqual(existingNode.data, propNode.data)
           ? { ...existingNode.data, ...propNode.data }
           : existingNode.data;
 
+        const style = !isEqual(existingNode.style, propNode.style)
+          ? { ...existingNode.style, ...propNode.style }
+          : existingNode.style;
+
+        const positionChanged =
+          existingNode.position.x !== propNode.position.x || existingNode.position.y !== propNode.position.y;
+
+        if (positionChanged) {
+          return {
+            ...existingNode,
+            __rg: {
+              ...existingNode.__rg,
+              position: propNode.position,
+            },
+            position: propNode.position,
+            data,
+            style,
+          };
+        }
+
         return {
           ...existingNode,
           data,
+          style,
         };
       }
 
-      return parseElement(
-        propNode,
-        state.transform,
-        state.snapToGrid,
-        state.snapGrid
-      );
+      return parseElement(propNode, state.transform, state.snapToGrid, state.snapGrid);
     }) as Node[];
 
     const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
@@ -57,7 +71,7 @@ const useElementUpdater = (elements: Elements): void => {
     if (edgesChanged) {
       setEdges(edges);
     }
-  });
+  }, [elements, state.nodes, state.edges]);
 };
 
 export default useElementUpdater;