fix(core): calculate position and computedPos correctly in calcNextPosition

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -49,6 +49,8 @@ const connectedEdges = $computed(() => getConnectedEdges([node], edges))
 
 const nodeElement = ref()
 
+const init = ref(false)
+
 provide(NodeRef, nodeElement)
 
 const { emit, on } = useNodeHooks(node, emits)
@@ -117,6 +119,7 @@ watch(
     () => node.dimensions.width,
     () => parentNode?.dimensions.height,
     () => parentNode?.dimensions.width,
+    init,
   ],
   ([newX, newY, parentX, parentY, parentZ]) => {
     const xyzPos = {
@@ -126,23 +129,27 @@ watch(
       z: (isNumber(getStyle.value.zIndex) ? getStyle.value.zIndex : 0) + (elevateNodesOnSelect ? (node.selected ? 1000 : 0) : 0),
     }
 
+    console.log('foo')
+
     updatePosition(xyzPos, parentX && parentY ? { x: parentX, y: parentY, z: parentZ || 0 } : undefined)
   },
-  { flush: 'pre', immediate: true },
+  { flush: 'post', immediate: true },
 )
 
 watch([() => node.extent, () => nodeExtent], () => {
-  const { position } = calcNextPosition(node, node.computedPosition, nodeExtent, parentNode)
+  const { computedPosition, position } = calcNextPosition(node, node.computedPosition, nodeExtent, parentNode)
 
-  node.computedPosition = { ...node.computedPosition, ...position }
+  node.computedPosition = { ...node.computedPosition, ...computedPosition }
+  node.position = position
 })
 
 until(() => node.initialized)
   .toBe(true)
   .then(() => {
-    const { position } = calcNextPosition(node, node.computedPosition, nodeExtent, parentNode)
+    const { computedPosition, position } = calcNextPosition(node, node.computedPosition, nodeExtent, parentNode)
 
-    node.computedPosition = { ...node.computedPosition, ...position }
+    node.computedPosition = { ...node.computedPosition, ...computedPosition }
+    node.position = position
   })
 
 function updatePosition(nodePos: XYZPosition, parentPos?: XYZPosition) {
@@ -158,8 +165,9 @@ function updatePosition(nodePos: XYZPosition, parentPos?: XYZPosition) {
 function updateInternals() {
   if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
 
-  const { position } = calcNextPosition(node, node.position, nodeExtent, parentNode)
+  const { computedPosition, position } = calcNextPosition(node, node.computedPosition, nodeExtent, parentNode)
 
+  node.computedPosition = { ...node.computedPosition, ...computedPosition }
   node.position = position
 }
 

packages/core/src/composables/useDrag.ts

@@ -94,7 +94,7 @@ function useDrag(params: UseDragParams) {
                     nextPosition.y = snapY * Math.round(nextPosition.y / snapY)
                   }
 
-                  const { position } = calcNextPosition(
+                  const { computedPosition } = calcNextPosition(
                     n,
                     nextPosition,
                     nodeExtent,
@@ -104,7 +104,7 @@ function useDrag(params: UseDragParams) {
                   // we want to make sure that we only fire a change event when there is a changes
                   hasChange = hasChange || n.position.x !== nextPosition.x || n.position.y !== nextPosition.y
 
-                  n.position = position
+                  n.position = computedPosition
 
                   return n
                 })

packages/core/src/composables/useUpdateNodePositions.ts

@@ -16,11 +16,16 @@ function useUpdateNodePositions() {
     const nodeUpdates = getSelectedNodes.value.map((n) => {
       const nextPosition = { x: n.computedPosition.x + positionDiffX, y: n.computedPosition.y + positionDiffY }
 
-      const updatedPos = calcNextPosition(n, nextPosition, nodeExtent.value, n.parentNode ? findNode(n.parentNode) : undefined)
+      const { computedPosition } = calcNextPosition(
+        n,
+        nextPosition,
+        nodeExtent.value,
+        n.parentNode ? findNode(n.parentNode) : undefined,
+      )
 
       return {
         id: n.id,
-        position: updatedPos.position,
+        position: computedPosition,
         from: n.position,
         distance: { x: positionDiff.x, y: positionDiff.y },
         dimensions: n.dimensions,

packages/core/src/utils/drag.ts

@@ -144,6 +144,10 @@ export const calcNextPosition = (
   const clampedPos = clampPosition(nextPosition, extent)
 
   return {
-    position: clampedPos,
+    position: {
+      x: clampedPos.x - (parentNode?.computedPosition.x || 0),
+      y: clampedPos.y - (parentNode?.computedPosition.y || 0),
+    },
+    computedPosition: clampedPos,
   }
 }