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,17 +26,21 @@ const scale = controlledComputed(
   () => store.transform[2],
   () => store.transform[2],
 )
-watch([() => node.value.position, () => node.value.parentNode?.position], () => {
+watch(
-  const xyzPos = {
+  [() => node.value.position, () => node.value.parentNode],
-    ...node.value.position,
+  ([pos, parent]) => {
-    z: node.value.computedPosition.z,
+    const xyzPos = {
-  }
+      ...pos,
-  if (node.value.parentNode) {
+      z: node.value.computedPosition.z,
-    node.value.computedPosition = getXYZPos(node.value.parentNode, xyzPos)
+    }
-  } else {
+    if (parent) {
-    node.value.computedPosition = xyzPos
+      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 }))

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))