From a5ee9d978c7d6a7827804a39b23bf2a1a2b0b1a1 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 10 Feb 2023 13:28:42 +0100
Subject: [PATCH] refactor(core): use watcheffect to observe node dimensions

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../core/src/components/Nodes/NodeWrapper.vue     | 15 +++++++++------
 .../src/container/NodeRenderer/NodeRenderer.vue   |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue
index c083ca8f..cab21f97 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.vue
+++ b/packages/core/src/components/Nodes/NodeWrapper.vue
@@ -88,13 +88,16 @@ onUpdateNodeInternals((updateIds) => {
   }
 })
 
-onMounted(() => {
-  props.resizeObserver.observe(nodeElement.value as HTMLDivElement)
-})
+watchEffect(
+  (onCleanup) => {
+    if (!node.hidden) {
+      props.resizeObserver.observe(nodeElement.value as HTMLDivElement)
 
-onBeforeUnmount(() => {
-  props.resizeObserver.unobserve(nodeElement.value as HTMLDivElement)
-})
+      onCleanup(() => props.resizeObserver.unobserve(nodeElement.value as HTMLDivElement))
+    }
+  },
+  { flush: 'post' },
+)
 
 watch(
   [() => node.type, () => node.sourcePosition, () => node.targetPosition],
diff --git a/packages/core/src/container/NodeRenderer/NodeRenderer.vue b/packages/core/src/container/NodeRenderer/NodeRenderer.vue
index 8bf194ad..c97ba9dd 100644
--- a/packages/core/src/container/NodeRenderer/NodeRenderer.vue
+++ b/packages/core/src/container/NodeRenderer/NodeRenderer.vue
@@ -29,7 +29,7 @@ until(() => nodes.length > 0 && getNodesInitialized.length === nodes.length)
 
 onMounted(() => {
   resizeObserver = new ResizeObserver((entries) => {
-    const updates = entries.map((entry: ResizeObserverEntry) => {
+    const updates = entries.map((entry) => {
       const id = entry.target.getAttribute('data-id') as string
 
       return {