fix(nodes): jumping when drag is out of sync with last pos

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]) => {

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) => {
+            .on('drag', handleDrag)
-              const pos = pointToRendererPoint(
+            .on('end', (event: UseDragEvent) => {
-                {
+              if (node) lastPos = node.position
-                  x: event.x - startPos.x,
+              onStop(event)
-                  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('end', onStop)
             .filter((event: any) => {
               const filter = !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName)