From 3054be4c20aec51159e9577f329fce55c37a2931 Mon Sep 17 00:00:00 2001
From: Mark Tolmacs <mark@lazycat.hu>
Date: Wed, 16 Apr 2025 19:55:50 +0200
Subject: [PATCH] Binding gap correctly represent the area where the arrow can
 bind

---
 packages/excalidraw/renderer/interactiveScene.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts
index 69c6a8196e..bfcac96b60 100644
--- a/packages/excalidraw/renderer/interactiveScene.ts
+++ b/packages/excalidraw/renderer/interactiveScene.ts
@@ -17,7 +17,6 @@ import {
 
 import {
   BINDING_HIGHLIGHT_OFFSET,
-  BINDING_HIGHLIGHT_THICKNESS,
   maxBindingGap,
 } from "@excalidraw/element/binding";
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
@@ -261,9 +260,9 @@ const renderBindingHighlightForBindableElement = (
   const height = y2 - y1;
 
   context.strokeStyle = "rgba(0,0,0,.05)";
-  // When zooming out, make line width greater for visibility
-  const zoomValue = zoom.value < 1 ? zoom.value : 1;
-  context.lineWidth = BINDING_HIGHLIGHT_THICKNESS / zoomValue;
+  context.lineWidth =
+    maxBindingGap(element, element.width, element.height, zoom) -
+    BINDING_HIGHLIGHT_OFFSET;
   // To ensure the binding highlight doesn't overlap the element itself
   const padding = context.lineWidth / 2 + BINDING_HIGHLIGHT_OFFSET;