refactor(core): use correct end handle position in connection line (#1508)

* refactor(core): use correct end handle position in connection line

* chore(changeset): add

.changeset/short-ligers-help.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Use correct end handle position in connection line component and store handle positions during connections.

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

@@ -93,8 +93,7 @@ const ConnectionLine = defineComponent({
         }
       }
 
-      // we assume the target position is opposite to the source position
-      const toPosition = fromPosition ? oppositePosition[fromPosition] : null
+      const toPosition = connectionEndHandle.value?.position ?? (fromPosition ? oppositePosition[fromPosition] : null)
 
       if (!fromPosition || !toPosition) {
         return null

packages/core/src/composables/useHandle.ts

@@ -15,6 +15,7 @@ import {
   rendererPointToPoint,
   resetRecentHandle,
 } from '../utils'
+import { Position } from '../types'
 import { useVueFlow } from './useVueFlow'
 
 export interface UseHandleProps {
@@ -129,6 +130,7 @@ export function useHandle({
           nodeId: toValue(nodeId),
           handleId: toValue(handleId),
           type: handleType,
+          position: (clickedHandle?.getAttribute('data-handlepos') as Position) || Position.Top,
         },
         {
           x: x - containerBounds.left,

packages/core/src/types/handle.ts

@@ -26,7 +26,8 @@ export interface ValidHandleResult {
 export interface ConnectingHandle {
   nodeId: string
   type: HandleType
-  handleId: string | null
+  handleId?: string | null
+  position?: Position | null
 }
 
 /** A valid connection function can determine if an attempted connection is valid or not, i.e. abort creating a new edge */

packages/core/src/utils/handle.ts

@@ -8,6 +8,7 @@ import type {
   GraphNode,
   HandleType,
   NodeHandleBounds,
+  Position,
   ValidConnectionFunc,
   ValidHandleResult,
   XYPosition,
@@ -192,12 +193,6 @@ export function isValidHandle(
         ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
         : handleNodeId !== fromNodeId || handleId !== fromHandleId)
 
-    result.endHandle = {
-      nodeId: handleNodeId,
-      handleId,
-      type: handleType as HandleType,
-    }
-
     if (isValid) {
       result.isValid = isValidConnection(connection, {
         edges,
@@ -205,6 +200,13 @@ export function isValidHandle(
         sourceNode: findNode(connection.source)!,
         targetNode: findNode(connection.target)!,
       })
+
+      result.endHandle = {
+        nodeId: handleNodeId,
+        handleId,
+        type: handleType as HandleType,
+        position: result.isValid ? (handleToCheck.getAttribute('data-handlepos') as Position) : null,
+      }
     }
   }