fix(core): use valid handle result as connecting handle (#1932)

* fix(core): use valid handle result as connecting handle

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

* chore(changeset): add

---------

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

.changeset/orange-ligers-fail.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Use toHandle from valid handle check as target handle in ongoing connections

packages/core/src/composables/useHandle.ts

@@ -207,6 +207,7 @@ export function useHandle({
           edges.value,
           nodes.value,
           findNode,
+          nodeLookup.value,
         )
 
         handleDomNode = result.handleDomNode
@@ -242,18 +243,19 @@ export function useHandle({
           return
         }
 
+        const connectingHandle = closestHandle ?? result.toHandle
         updateConnection(
-          closestHandle && isValid
+          connectingHandle && isValid
             ? rendererPointToPoint(
                 {
-                  x: closestHandle.x,
-                  y: closestHandle.y,
+                  x: connectingHandle.x,
+                  y: connectingHandle.y,
                 },
                 viewport.value,
               )
             : connectionPosition,
           result.toHandle,
-          getConnectionStatus(!!closestHandle, isValid),
+          getConnectionStatus(!!connectingHandle, isValid),
         )
 
         previousConnection = newConnection
@@ -377,6 +379,7 @@ export function useHandle({
       edges.value,
       nodes.value,
       findNode,
+      nodeLookup.value,
     )
 
     const isOwnHandle = result.connection?.source === result.connection?.target

packages/core/src/utils/handle.ts

@@ -95,6 +95,7 @@ export function getClosestHandle(
       const { x, y } = getHandlePosition(node, handle, handle.position, true)
 
       const distance = Math.sqrt((x - position.x) ** 2 + (y - position.y) ** 2)
+
       if (distance > connectionRadius) {
         continue
       }
@@ -139,6 +140,7 @@ export function isValidHandle(
   edges: GraphEdge[],
   nodes: GraphNode[],
   findNode: Actions['findNode'],
+  nodeLookup: NodeLookup,
 ) {
   const isTarget = fromType === 'target'
   const handleDomNode = handle
@@ -195,7 +197,7 @@ export function isValidHandle(
         targetNode: findNode(connection.target)!,
       })
 
-    result.toHandle = handle
+    result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, connectionMode, true)
   }
 
   return result