fix: Overlap behavior

packages/element/src/binding.ts

@@ -3,6 +3,7 @@ import {
   arrayToMap,
   invariant,
   isAlwaysInsideBinding,
+  isTransparent,
 } from "@excalidraw/common";
 
 import {
@@ -303,49 +304,31 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
     }
 
     // Check and handle nested shapes
-    if (arrow.startBinding) {
+    if (hit && arrow.startBinding) {
       const otherElement = elementsMap.get(
         arrow.startBinding.elementId,
       ) as ExcalidrawBindableElement;
-      invariant(otherElement, "Other element must be in the elements map");
-      const startFocusElements = getAllHoveredElementAtPoint(
-        getGlobalFixedPointForBindableElement(
-          arrow.startBinding.fixedPoint,
-          otherElement,
-          elementsMap,
-        ),
-        elements,
-        elementsMap,
-      );
-      const startHoverElements = getAllHoveredElementAtPoint(
-        LinearElementEditor.getPointAtIndexGlobalCoordinates(
-          arrow,
-          0,
-          elementsMap,
-        ),
-        elements,
-        elementsMap,
-      );
 
-      if (
-        hit &&
-        otherElement.id !== hit.id &&
-        (startHoverElements.find((el) => el.id === hit.id) ||
-          startFocusElements.find((el) => el.id === hit.id))
-      ) {
+      invariant(otherElement, "Other element must be in the elements map");
+
+      const allHits = getAllHoveredElementAtPoint(point, elements, elementsMap);
+
+      if (allHits.find((el) => el.id === otherElement.id)) {
+        const otherIsTransparent = isTransparent(otherElement.backgroundColor);
+
         return {
           start: isMultiPoint
             ? { mode: undefined }
             : {
-                mode: "orbit",
+                mode: "inside",
                 element: otherElement,
-                focusPoint: snapToCenter(
-                  otherElement,
-                  elementsMap,
-                  origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y),
-                ),
+                focusPoint: origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y),
               },
-          end: { mode: "inside", element: hit, focusPoint: point },
+          end: {
+            mode: "inside",
+            element: otherIsTransparent ? hit : otherElement,
+            focusPoint: point,
+          },
         };
       }
     }