From 4644af5736a5b928fe538439cd5c0bb26adcff19 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 24 Mar 2022 20:23:22 +0100
Subject: [PATCH] fix(nodes): expand nodes correctly when prop enabled

---
 examples/Nesting/Nesting.vue | 20 +++++++++++++++----
 src/utils/changes.ts         | 37 ++++++++++++++++++++++++++++--------
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/examples/Nesting/Nesting.vue b/examples/Nesting/Nesting.vue
index 9686af9a..86543240 100644
--- a/examples/Nesting/Nesting.vue
+++ b/examples/Nesting/Nesting.vue
@@ -74,10 +74,22 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
 onConnect((params) => addEdges([params]))
 
 onMounted(() => {
-  // dynamically add nodes to parent
-  addNodes([{ id: '999', type: 'input', label: 'Node 1', position: { x: 20, y: 100 }, class: 'light', extent: 'parent' }], {
-    parentNode: '2',
-  })
+  // add nodes to parent
+  addNodes(
+    [
+      {
+        id: '999',
+        type: 'input',
+        label: 'Added after mount',
+        position: { x: 20, y: 100 },
+        class: 'light',
+        expandParent: true,
+      },
+    ],
+    {
+      parentNode: '2',
+    },
+  )
 })
 </script>
 <template>
diff --git a/src/utils/changes.ts b/src/utils/changes.ts
index 920520e0..62932aee 100644
--- a/src/utils/changes.ts
+++ b/src/utils/changes.ts
@@ -1,3 +1,4 @@
+import { clampPosition, isGraphNode } from './graph'
 import {
   CreatePositionChangeParams,
   EdgeChange,
@@ -10,9 +11,9 @@ import {
   NodeSelectionChange,
   NodePositionChange,
 } from '~/types'
-import { clampPosition, isGraphNode } from '~/utils/graph'
 
-function handleParentExpand(parent: GraphNode, updateItem: GraphNode) {
+function handleParentExpand(updateItem: GraphNode) {
+  const parent = updateItem.parentNode
   if (parent) {
     const extendWidth = updateItem.position.x + updateItem.dimensions.width - parent.dimensions.width
     const extendHeight = updateItem.position.y + updateItem.dimensions.height - parent.dimensions.height
@@ -24,27 +25,47 @@ function handleParentExpand(parent: GraphNode, updateItem: GraphNode) {
         if (!parent.style.width) {
           parent.style.width = parent.dimensions.width
         }
-        ;(<number>parent.style.width) += extendWidth
+        if (typeof parent.style.width === 'string') {
+          const currWidth = parseInt(parent.style.width, 10)
+          parent.style.width = `${currWidth + extendWidth}px`
+        } else {
+          parent.style.width += extendWidth
+        }
       }
 
       if (extendHeight > 0) {
         if (!parent.style.height) {
           parent.style.height = parent.dimensions.height
         }
-        ;(<number>parent.style.height) += extendHeight
+        if (typeof parent.style.height === 'string') {
+          const currWidth = parseInt(parent.style.height, 10)
+          parent.style.height = `${currWidth + extendHeight}px`
+        } else {
+          parent.style.height += extendHeight
+        }
       }
 
       if (updateItem.position.x < 0) {
         const xDiff = Math.abs(updateItem.position.x)
         parent.position.x = parent.position.x - xDiff
-        ;(<number>parent.style.width) += xDiff
+        if (typeof parent.style.width === 'string') {
+          const currWidth = parseInt(parent.style.width, 10)
+          parent.style.width = `${currWidth + xDiff}px`
+        } else {
+          ;(parent.style as any).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
-        ;(<number>parent.style.height) += yDiff
+        if (typeof parent.style.height === 'string') {
+          const currWidth = parseInt(parent.style.height, 10)
+          parent.style.height = `${currWidth + yDiff}px`
+        } else {
+          ;(parent.style as any).height += yDiff
+        }
         updateItem.position.y = 0
       }
 
@@ -74,13 +95,13 @@ export const applyChanges = <
         if (isGraphNode(el)) {
           if (typeof change.position !== 'undefined') el.position = change.position
           if (typeof change.dragging !== 'undefined') el.dragging = change.dragging
-          if (el.expandParent && el.parentNode) handleParentExpand(el, el.parentNode)
+          if (el.expandParent && el.parentNode) handleParentExpand(el)
         }
         break
       case 'dimensions':
         if (isGraphNode(el)) {
           if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
-          if (el.expandParent && el.parentNode) handleParentExpand(el, el.parentNode)
+          if (el.expandParent && el.parentNode) handleParentExpand(el)
         }
         break
       case 'remove':