From fbe62b9ab96aa4d654f674af9981ce30c79cf182 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 20 Dec 2021 19:10:21 +0100
Subject: [PATCH] fix(nodes): watch parent nodes deeply to trigger xyz-pos
 calculation

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Nodes/NodeWrapper.vue | 26 +++++++++++++++-----------
 src/utils/changes.ts                 |  8 +++++++-
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/Nodes/NodeWrapper.vue b/src/components/Nodes/NodeWrapper.vue
index 54de45d5..211de3a9 100644
--- a/src/components/Nodes/NodeWrapper.vue
+++ b/src/components/Nodes/NodeWrapper.vue
@@ -26,17 +26,21 @@ const scale = controlledComputed(
   () => store.transform[2],
   () => store.transform[2],
 )
-watch([() => node.value.position, () => node.value.parentNode?.position], () => {
-  const xyzPos = {
-    ...node.value.position,
-    z: node.value.computedPosition.z,
-  }
-  if (node.value.parentNode) {
-    node.value.computedPosition = getXYZPos(node.value.parentNode, xyzPos)
-  } else {
-    node.value.computedPosition = xyzPos
-  }
-})
+watch(
+  [() => node.value.position, () => node.value.parentNode],
+  ([pos, parent]) => {
+    const xyzPos = {
+      ...pos,
+      z: node.value.computedPosition.z,
+    }
+    if (parent) {
+      node.value.computedPosition = getXYZPos(parent, xyzPos)
+    } else {
+      node.value.computedPosition = xyzPos
+    }
+  },
+  { deep: true },
+)
 
 const onMouseEnterHandler = () =>
   node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: node.value }))
diff --git a/src/utils/changes.ts b/src/utils/changes.ts
index 3e3ead79..e7c2881b 100644
--- a/src/utils/changes.ts
+++ b/src/utils/changes.ts
@@ -81,10 +81,16 @@ export const createPositionChange = ({ node, diff, dragging, nodeExtent }: Creat
   return change
 }
 
+const isParentSelected = (node: GraphNode, selectedIds: string[]): boolean => {
+  if (!node.parentNode) return false
+  if (selectedIds.includes(node.parentNode.id)) return true
+  return isParentSelected(node.parentNode, selectedIds)
+}
+
 export const getSelectionChanges = (items: FlowElements, selectedIds: string[]) => {
   return items.reduce((res, item) => {
     const willBeSelected =
-      selectedIds.includes(item.id) || !!(isGraphNode(item) && item.parentNode && selectedIds.includes(item.parentNode?.id))
+      selectedIds.includes(item.id) || !!(isGraphNode(item) && item.parentNode && isParentSelected(item, selectedIds))
 
     if (!item.selected && willBeSelected) {
       res.push(createSelectionChange(item.id, true))