fix(core): calculate handle positions correctly

.changeset/clever-eyes-leave.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Prevent page scroll when using arrow keys to move nodes.

packages/core/src/components/ConnectionLine/index.ts

@@ -1,18 +1,11 @@
 import { computed, defineComponent, h, inject } from 'vue'
 import type { HandleElement } from '../../types'
 import { ConnectionLineType, ConnectionMode, Position } from '../../types'
-import { getHandlePosition, getMarkerId } from '../../utils'
+import { getHandlePosition, getMarkerId, oppositePosition } from '../../utils'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 import { getBezierPath, getSimpleBezierPath, getSmoothStepPath } from '../Edges/utils'
 
-const oppositePosition = {
-  [Position.Left]: Position.Right,
-  [Position.Right]: Position.Left,
-  [Position.Top]: Position.Bottom,
-  [Position.Bottom]: Position.Top,
-}
-
 const ConnectionLine = defineComponent({
   name: 'ConnectionLine',
   compatConfig: { MODE: 3 },
@@ -57,7 +50,7 @@ const ConnectionLine = defineComponent({
         return null
       }
 
-      const startHandleId = connectionStartHandle.value.handleId
+      const startHandleId = connectionStartHandle.value.id
 
       const handleType = connectionStartHandle.value.type
 
@@ -78,18 +71,18 @@ const ConnectionLine = defineComponent({
       const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition)
 
       let toHandle: HandleElement | null = null
-      if (toNode.value && connectionEndHandle.value?.handleId) {
+      if (toNode.value) {
         // if connection mode is strict, we only look for handles of the opposite type
         if (connectionMode.value === ConnectionMode.Strict) {
           toHandle =
             toNode.value.handleBounds[handleType === 'source' ? 'target' : 'source']?.find(
-              (d) => d.id === connectionEndHandle.value?.handleId,
+              (d) => d.id === connectionEndHandle.value?.id,
             ) || null
         } else {
           // if connection mode is loose, look for the handle in both source and target bounds
           toHandle =
             [...(toNode.value.handleBounds.source || []), ...(toNode.value.handleBounds.target || [])]?.find(
-              (d) => d.id === connectionEndHandle.value?.handleId,
+              (d) => d.id === connectionEndHandle.value?.id,
             ) || null
         }
       }

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -8,7 +8,7 @@ import {
   ErrorCode,
   VueFlowError,
   elementSelectionKeys,
-  getHandle,
+  getEdgeHandle,
   getHandlePosition,
   getMarkerId,
 } from '../../utils'
@@ -150,7 +150,7 @@ const EdgeWrapper = defineComponent({
         sourceNodeHandles = [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]
       }
 
-      const sourceHandle = getHandle(sourceNodeHandles, edge.value.sourceHandle)
+      const sourceHandle = getEdgeHandle(sourceNodeHandles, edge.value.sourceHandle)
 
       let targetNodeHandles
       if (connectionMode.value === ConnectionMode.Strict) {
@@ -159,7 +159,7 @@ const EdgeWrapper = defineComponent({
         targetNodeHandles = [...(targetNode.handleBounds.target || []), ...(targetNode.handleBounds.source || [])]
       }
 
-      const targetHandle = getHandle(targetNodeHandles, edge.value.targetHandle)
+      const targetHandle = getEdgeHandle(targetNodeHandles, edge.value.targetHandle)
 
       const sourcePosition = sourceHandle?.position || Position.Bottom
 

packages/core/src/components/Handle/Handle.vue

@@ -19,6 +19,7 @@ const type = toRef(() => props.type ?? 'source')
 const isValidConnection = toRef(() => props.isValidConnection ?? null)
 
 const {
+  id: flowId,
   connectionStartHandle,
   connectionClickStartHandle,
   connectionEndHandle,
@@ -39,17 +40,17 @@ const isConnectableEnd = toRef(() => (typeof connectableEnd !== 'undefined' ? co
 const isConnecting = toRef(
   () =>
     (connectionStartHandle.value?.nodeId === nodeId &&
-      connectionStartHandle.value?.handleId === handleId &&
+      connectionStartHandle.value?.id === handleId &&
       connectionStartHandle.value?.type === type.value) ||
     (connectionEndHandle.value?.nodeId === nodeId &&
-      connectionEndHandle.value?.handleId === handleId &&
+      connectionEndHandle.value?.id === handleId &&
       connectionEndHandle.value?.type === type.value),
 )
 
 const isClickConnecting = toRef(
   () =>
     connectionClickStartHandle.value?.nodeId === nodeId &&
-    connectionClickStartHandle.value?.handleId === handleId &&
+    connectionClickStartHandle.value?.id === handleId &&
     connectionClickStartHandle.value?.type === type.value,
 )
 
@@ -127,6 +128,8 @@ onMounted(() => {
     position,
     x: (handleBounds.left - nodeBounds.left) / zoom,
     y: (handleBounds.top - nodeBounds.top) / zoom,
+    type: type.value,
+    nodeId,
     ...getDimensions(handle.value),
   }
 
@@ -177,7 +180,7 @@ export default {
 <template>
   <div
     ref="handle"
-    :data-id="`${nodeId}-${handleId}-${type}`"
+    :data-id="`${flowId}-${nodeId}-${handleId}-${type}`"
     :data-handleid="handleId"
     :data-nodeid="nodeId"
     :data-handlepos="position"

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

@@ -408,6 +408,9 @@ const NodeWrapper = defineComponent({
           nodeElement.value!,
         )
       } else if (isDraggable.value && node.selected && arrowKeyDiffs[event.key]) {
+        // prevent page scrolling
+        event.preventDefault()
+
         ariaLiveMessage.value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
           .position.x}, y: ${~~node.position.y}`