From f3931a2c054093f0e184b0851a799f22d8aabb0d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Jun 2023 22:05:49 +0200
Subject: [PATCH] fix(core): consider handle dimensions when checking for
 closest handle

---
 packages/core/src/composables/useHandle.ts |  4 ++--
 packages/core/src/utils/handle.ts          | 22 ++++++++++++----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 05cf3e75..32a30561 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -155,7 +155,7 @@ export function useHandle({
             ),
         )
 
-        closestHandle = handle
+        closestHandle = handle || handleLookup.find((handle) => handle.id === validHandleResult.endHandle?.handleId) || null
 
         if (!autoPanStarted) {
           autoPan()
@@ -198,7 +198,7 @@ export function useHandle({
       }
 
       function onPointerUp(event: MouseTouchEvent) {
-        if ((closestHandle || handleDomNode || connectionEndHandle.value) && connection && isValid) {
+        if ((closestHandle || handleDomNode) && connection && isValid) {
           if (!onEdgeUpdate) {
             emits.connect(connection)
           } else {
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
index 67a42c7e..4c86b531 100644
--- a/packages/core/src/utils/handle.ts
+++ b/packages/core/src/utils/handle.ts
@@ -4,6 +4,7 @@ import type {
   Actions,
   Connection,
   ConnectionStatus,
+  Dimensions,
   GraphEdge,
   GraphNode,
   HandleType,
@@ -13,12 +14,10 @@ import type {
   XYPosition,
 } from '~/types'
 
-export interface ConnectionHandle {
+export interface ConnectionHandle extends XYPosition, Dimensions {
   id: string | null
   type: HandleType
   nodeId: string
-  x: number
-  y: number
 }
 
 function defaultValidHandleResult(): ValidHandleResult {
@@ -50,6 +49,8 @@ export function getHandles(
         nodeId: node.id,
         x: (node.computedPosition?.x ?? 0) + h.x + h.width / 2,
         y: (node.computedPosition?.y ?? 0) + h.y + h.height / 2,
+        width: h.width,
+        height: h.height,
       })
     }
     return res
@@ -66,7 +67,8 @@ export function getClosestHandle(
   let minDistance = Infinity
 
   handles.forEach((handle) => {
-    const distance = Math.sqrt((handle.x - pos.x) ** 2 + (handle.y - pos.y) ** 2)
+    // calculate distance from mouse position to center of handle while considering handle width and height as well as x and y position
+    const distance = Math.sqrt((handle.x - pos.x - handle.width / 2) ** 2 + (handle.y - pos.y - handle.height / 2) ** 2)
 
     if (distance <= connectionRadius) {
       const validHandleResult = validator(handle)
@@ -147,13 +149,13 @@ export function isValidHandle(
         ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
         : handleNodeId !== fromNodeId || handleId !== fromHandleId)
 
-    if (isValid) {
-      result.endHandle = {
-        nodeId: handleNodeId,
-        handleId,
-        type: handleType as HandleType,
-      }
+    result.endHandle = {
+      nodeId: handleNodeId,
+      handleId,
+      type: handleType as HandleType,
+    }
 
+    if (isValid) {
       result.isValid = isValidConnection(connection, {
         edges,
         sourceNode: findNode(connection.source)!,