refactor(changes): handle expand parent on dimension update

src/utils/changes.ts

@@ -1,5 +1,49 @@
 import { Node, Edge, EdgeChange, NodeChange } from '../types';
 
+function handleParentExpand(res: any[], updateItem: any) {
+  const parent = res.find((e) => e.id === updateItem.parentNode);
+
+  if (parent) {
+    const extendWidth = updateItem.position.x + updateItem.width - parent.width;
+    const extendHeight = updateItem.position.y + updateItem.height - parent.height;
+
+    if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
+      parent.style = { ...parent.style } || {};
+
+      if (extendWidth > 0) {
+        if (!parent.style.width) {
+          parent.style.width = parent.width;
+        }
+        parent.style.width += extendWidth;
+      }
+
+      if (extendHeight > 0) {
+        if (!parent.style.height) {
+          parent.style.height = parent.height;
+        }
+        parent.style.height += extendHeight;
+      }
+
+      if (updateItem.position.x < 0) {
+        const xDiff = Math.abs(updateItem.position.x);
+        parent.position.x = parent.position.x - xDiff;
+        parent.style.width += xDiff;
+        updateItem.position.x = 0;
+      }
+
+      if (updateItem.position.y < 0) {
+        const yDiff = Math.abs(updateItem.position.y);
+        parent.position.y = parent.position.y - yDiff;
+        parent.style.height += yDiff;
+        updateItem.position.y = 0;
+      }
+
+      parent.width = parent.style.width;
+      parent.height = parent.style.height;
+    }
+  }
+}
+
 function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): any[] {
   const initElements: any[] = [];
 
@@ -24,41 +68,7 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
           }
 
           if (updateItem.expandParent) {
-            const parent = res.find((e) => e.id === updateItem.parentNode);
+            handleParentExpand(res, updateItem);
-
-            if (parent) {
-              const extendWidth = updateItem.position.x + updateItem.width - parent.width;
-              const extendHeight = updateItem.position.y + updateItem.height - parent.height;
-
-              if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
-                parent.style = { ...parent.style } || {};
-
-                if (extendWidth > 0) {
-                  parent.style.width += extendWidth;
-                }
-
-                if (extendHeight > 0) {
-                  parent.style.height += extendHeight;
-                }
-
-                if (updateItem.position.x < 0) {
-                  const xDiff = Math.abs(updateItem.position.x);
-                  parent.position.x = parent.position.x - xDiff;
-                  parent.style.width += xDiff;
-                  updateItem.position.x = 0;
-                }
-
-                if (updateItem.position.y < 0) {
-                  const yDiff = Math.abs(updateItem.position.y);
-                  parent.position.y = parent.position.y - yDiff;
-                  parent.style.height += yDiff;
-                  updateItem.position.y = 0;
-                }
-
-                parent.width = parent.style.width;
-                parent.height = parent.style.height;
-              }
-            }
           }
 
           res.push(updateItem);
@@ -72,6 +82,10 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
             updateItem.height = currentChange.dimensions.height;
           }
 
+          if (updateItem.expandParent) {
+            handleParentExpand(res, updateItem);
+          }
+
           res.push(updateItem);
           return res;
         }