fix(core): drag position update

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

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

@@ -134,6 +134,7 @@ watch(
 
 function updatePosition(nodePos: XYZPosition, parentPos?: XYZPosition) {
   let nextPos = nodePos
+
   if (parentPos) {
     nextPos = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, nodePos)
   }
@@ -145,21 +146,21 @@ onNodesInitialized(() => {
   initialized.value = true
 })
 
-until(initialized)
-  .toBe(true)
-  .then(() => {
-    const { computedPosition, position } = calcNextPosition(node, node.position, nodeExtent, parentNode)
+onMounted(() => {
+  until(initialized)
+    .toBe(true)
+    .then(() => {
+      const { position } = calcNextPosition(node, node.computedPosition, nodeExtent, parentNode)
 
-    node.computedPosition = { ...node.computedPosition, ...computedPosition }
-    node.position = position
-  })
+      node.computedPosition = { ...node.computedPosition, ...position }
+    })
+})
 
 function updateInternals() {
   if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
 
-  const { computedPosition, position } = calcNextPosition(node, node.position, nodeExtent, parentNode)
+  const { position } = calcNextPosition(node, node.position, nodeExtent, parentNode)
 
-  node.computedPosition = { ...node.computedPosition, ...computedPosition }
   node.position = position
 }
 

packages/core/src/composables/useDrag.ts

@@ -98,7 +98,7 @@ function useDrag(params: UseDragParams) {
                     nextPosition.y = snapY * Math.round(nextPosition.y / snapY)
                   }
 
-                  const { computedPosition, position } = calcNextPosition(
+                  const { position } = calcNextPosition(
                     n,
                     nextPosition,
                     nodeExtent,
@@ -108,7 +108,6 @@ 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.computedPosition = { ...n.computedPosition, ...computedPosition }
                   n.position = position
 
                   return n

packages/core/src/types/changes.ts

@@ -6,8 +6,6 @@ export interface NodeDragItem {
   id: string
   // relative node position (to parent)
   position: XYPosition
-  // absolute node position
-  computedPosition: XYZPosition
   // distance from the mouse cursor to the node when start dragging
   distance: XYPosition
   dimensions: Dimensions

packages/core/src/utils/drag.ts

@@ -27,7 +27,6 @@ export function getDragItems(
       markRaw({
         id: n.id,
         position: n.position || { x: 0, y: 0 },
-        computedPosition: n.computedPosition || { x: 0, y: 0, z: 1 },
         distance: {
           x: mousePos.x - n.computedPosition?.x || 0,
           y: mousePos.y - n.computedPosition?.y || 0,
@@ -106,18 +105,7 @@ export const calcNextPosition = (
 
   const clampedPos = clampPosition(nextPosition, extent)
 
-  const parentPosition = { x: 0, y: 0 }
-
-  if (parentNode) {
-    parentPosition.x = parentNode.computedPosition.x
-    parentPosition.y = parentNode.computedPosition.y
-  }
-
   return {
-    position: {
-      x: clampedPos.x - parentPosition.x,
-      y: clampedPos.y - parentPosition.y,
-    },
-    computedPosition: clampedPos,
+    position: clampedPos,
   }
 }