fix(vue-flow,nodes): use computed pos to calculate relative node pos

packages/vue-flow/src/utils/drag.ts

@@ -1,13 +1,6 @@
 import type { Ref } from 'vue'
 import { clampPosition, isParentSelected } from './graph'
-import type { CoordinateExtent, Getters, GraphNode, NodeDragItem, XYPosition } from '~/types'
-
-export function getParentNodePosition(parent?: GraphNode): XYPosition {
-  return {
-    x: parent?.computedPosition?.x || 0,
-    y: parent?.computedPosition?.y || 0,
-  }
-}
+import type { ComputedGetters, CoordinateExtent, Getters, GraphNode, NodeDragItem, XYPosition } from '~/types'
 
 export function hasSelector(target: Element, selector: string, node: Ref<Element>): boolean {
   let current = target
@@ -32,14 +25,10 @@ export function getDragItems(
     .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, getNode)))
     .map((n) => ({
       id: n.id,
-      position: n.position,
+      position: n.computedPosition || { x: 0, y: 0, z: 0 },
       distance: {
-        x: mousePos.x - n.position.x,
-        y: mousePos.y - n.position.y,
-      },
-      delta: {
-        x: 0,
-        y: 0,
+        x: mousePos.x - n.computedPosition?.x || 0,
+        y: mousePos.y - n.computedPosition?.y || 0,
       },
       extent: n.extent,
       parentNode: n.parentNode,
@@ -50,21 +39,17 @@ export function getDragItems(
 export function getEventHandlerParams({
   id,
   dragItems,
-  node,
+  getNode,
 }: {
   id?: string
   dragItems: NodeDragItem[]
-  node: GraphNode
+  getNode: ComputedGetters['getNode']
 }): [GraphNode, GraphNode[]] {
   const extendedDragItems: GraphNode[] = dragItems.map((n) => {
+    const node = getNode.value(n.id)!
+
     return {
       ...node,
-      position: n.position,
-      computedPosition: {
-        x: (node.computedPosition?.x || 0) + n.delta.x,
-        y: (node.computedPosition?.y || 0) + n.delta.y,
-        z: node.computedPosition.z,
-      },
     }
   })
 
@@ -78,15 +63,18 @@ export function updatePosition(
   nodeExtent?: CoordinateExtent,
 ): NodeDragItem {
   let currentExtent = dragItem.extent || nodeExtent
-  let nextPosition = { x: mousePos.x - dragItem.distance.x, y: mousePos.y - dragItem.distance.y }
+  const nextPosition = { x: mousePos.x - dragItem.distance.x, y: mousePos.y - dragItem.distance.y }
 
   if (dragItem.extent === 'parent' && parent) {
     if (dragItem.parentNode && dragItem.dimensions.width && dragItem.dimensions.height) {
       currentExtent =
-        parent.dimensions.width && parent.dimensions.height
+        parent.computedPosition && parent.dimensions.width && parent.dimensions.height
           ? [
-              [0, 0],
-              [parent.dimensions.width - dragItem.dimensions.width, parent.dimensions.height - dragItem.dimensions.height],
+              [parent.computedPosition.x, parent.computedPosition.y],
+              [
+                parent.computedPosition.x + parent.dimensions.width - dragItem.dimensions.width,
+                parent.computedPosition.y + parent.dimensions.height - dragItem.dimensions.height,
+              ],
             ]
           : currentExtent
     }
@@ -94,13 +82,7 @@ export function updatePosition(
     currentExtent = nodeExtent
   }
 
-  nextPosition = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition
-
-  dragItem.delta = {
-    x: nextPosition.x - dragItem.position.x,
-    y: nextPosition.y - dragItem.position.y,
-  }
-  dragItem.position = nextPosition
+  dragItem.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition
 
   return dragItem
 }