From de60d924ff19154f02069b5981f852f30536a2c5 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 29 Apr 2022 21:42:33 +0200
Subject: [PATCH] fix(nodes): jumping when drag is out of sync with last pos

---
 .../src/components/Nodes/NodeWrapper.vue      |  2 +
 packages/vue-flow/src/composables/useDrag.ts  | 57 ++++++++++---------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
index ae5a674f..ff241f18 100644
--- a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
+++ b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
@@ -99,6 +99,8 @@ onMounted(() => {
 
   onBeforeUnmount(() => observer.stop())
 
+  updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
+
   watch(
     [() => node.position, () => parentNode?.computedPosition],
     ([pos, parent]) => {
diff --git a/packages/vue-flow/src/composables/useDrag.ts b/packages/vue-flow/src/composables/useDrag.ts
index 410ed3cd..830bbd24 100644
--- a/packages/vue-flow/src/composables/useDrag.ts
+++ b/packages/vue-flow/src/composables/useDrag.ts
@@ -61,6 +61,33 @@ function useDrag(params: UseDragParams) {
   let lastPos = $ref<Partial<XYPosition>>({ x: undefined, y: undefined })
   let parentPos = $ref<XYPosition>({ x: 0, y: 0 })
 
+  const handleDrag = (event: UseDragEvent) => {
+    const pos = pointToRendererPoint(
+      {
+        x: event.x - startPos.x,
+        y: event.y - startPos.y,
+      },
+      viewport.value,
+      snapToGrid.value,
+      snapGrid.value,
+    )
+
+    pos.x -= parentPos.x
+    pos.y -= parentPos.y
+
+    // skip events without movement
+    if (lastPos.x !== pos.x || lastPos.y !== pos.y) {
+      if (lastPos.x && lastPos.y) {
+        onDrag(event, {
+          dx: pos.x - lastPos.x,
+          dy: pos.y - lastPos.y,
+        })
+      }
+    }
+
+    lastPos = pos
+  }
+
   return watch(
     [() => disabled, () => noDragClassName, () => id, () => el],
     () => {
@@ -83,33 +110,11 @@ function useDrag(params: UseDragParams) {
 
               onStart(event)
             })
-            .on('drag', (event: UseDragEvent) => {
-              const pos = pointToRendererPoint(
-                {
-                  x: event.x - startPos.x,
-                  y: event.y - startPos.y,
-                },
-                viewport.value,
-                snapToGrid.value,
-                snapGrid.value,
-              )
-
-              pos.x -= parentPos.x
-              pos.y -= parentPos.y
-
-              // skip events without movement
-              if (lastPos.x !== pos.x || lastPos.y !== pos.y) {
-                if (lastPos.x && lastPos.y) {
-                  onDrag(event, {
-                    dx: pos.x - lastPos.x,
-                    dy: pos.y - lastPos.y,
-                  })
-                }
-
-                lastPos = pos
-              }
+            .on('drag', handleDrag)
+            .on('end', (event: UseDragEvent) => {
+              if (node) lastPos = node.position
+              onStop(event)
             })
-            .on('end', onStop)
             .filter((event: any) => {
               const filter = !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName)