fix(core): use whole handle for snapping area (#1843)

* chore(changeset): add

* fix(core): use whole handle for snapping area

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

---------

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

Author: bcakmakoglu

.changeset/mighty-glasses-impress.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Use whole handle area for snapping.

packages/core/src/composables/useHandle.ts

@@ -163,6 +163,7 @@ export function useHandle({
           id: toValue(handleId),
           type: handleType,
           position: (clickedHandle?.getAttribute('data-handlepos') as Position) || Position.Top,
+          ...connectionPosition,
         },
         {
           x: x - containerBounds.left,
@@ -217,8 +218,8 @@ export function useHandle({
           ...previousConnection,
           isValid,
           to:
-            closestHandle && isValid
-              ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, viewport.value)
+            result.toHandle && isValid
+              ? rendererPointToPoint({ x: result.toHandle.x, y: result.toHandle.y }, viewport.value)
               : connectionPosition,
           toHandle: result.toHandle,
           toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
@@ -325,7 +326,13 @@ export function useHandle({
       emits.clickConnectStart({ event, nodeId: toValue(nodeId), handleId: toValue(handleId) })
 
       startConnection(
-        { nodeId: toValue(nodeId), type: toValue(type), id: toValue(handleId), position: Position.Top },
+        {
+          nodeId: toValue(nodeId),
+          type: toValue(type),
+          id: toValue(handleId),
+          position: Position.Top,
+          ...getEventPosition(event),
+        },
         undefined,
         true,
       )
@@ -355,10 +362,11 @@ export function useHandle({
           id: toValue(handleId),
           type: toValue(type),
           position: Position.Top,
+          ...getEventPosition(event),
         },
         connectionMode: connectionMode.value,
         fromNodeId: connectionClickStartHandle.value.nodeId,
-        fromHandleId: connectionClickStartHandle.value.id || null,
+        fromHandleId: connectionClickStartHandle.value.id ?? null,
         fromType: connectionClickStartHandle.value.type,
         isValidConnection: isValidConnectionHandler,
         doc,

packages/core/src/types/handle.ts

@@ -19,7 +19,7 @@ export interface ConnectionHandle extends XYPosition {
   nodeId: string
 }
 
-export interface ConnectingHandle {
+export interface ConnectingHandle extends XYPosition {
   nodeId: string
   type: HandleType
   id?: string | null