From 735c81c63f4eab13b5660211c9696078e754c03b Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 May 2025 17:55:14 +0200
Subject: [PATCH] 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>
---
 .changeset/mighty-glasses-impress.md       |  5 +++++
 packages/core/src/composables/useHandle.ts | 16 ++++++++++++----
 packages/core/src/types/handle.ts          |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/mighty-glasses-impress.md

diff --git a/.changeset/mighty-glasses-impress.md b/.changeset/mighty-glasses-impress.md
new file mode 100644
index 00000000..0beffb4c
--- /dev/null
+++ b/.changeset/mighty-glasses-impress.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Use whole handle area for snapping.
diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 64f7c3f0..158b4f39 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/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,
diff --git a/packages/core/src/types/handle.ts b/packages/core/src/types/handle.ts
index f88f318d..13885bdf 100644
--- a/packages/core/src/types/handle.ts
+++ b/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