fix: Centralized midpoint snap code

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/element/src/arrows/focus.ts

@@ -269,6 +269,7 @@ export const handleFocusPointDrag = (
         newMode || "orbit",
         linearElementEditor.draggedFocusPointBinding,
         scene,
+        appState.zoom,
         point,
       );
     }

packages/element/src/binding.ts

@@ -60,6 +60,7 @@ import { updateElbowArrowPoints } from "./elbowArrow";
 import {
   deconstructDiamondElement,
   deconstructRectanguloidElement,
+  getSnapOutlineMidPoint,
   projectFixedPointOntoDiagonal,
 } from "./utils";
 
@@ -175,6 +176,7 @@ export const bindOrUnbindBindingElement = (
     start,
     "start",
     scene,
+    appState.zoom,
     appState.isBindingEnabled,
   );
   bindOrUnbindBindingElementEdge(
@@ -182,6 +184,7 @@ export const bindOrUnbindBindingElement = (
     end,
     "end",
     scene,
+    appState.zoom,
     appState.isBindingEnabled,
   );
   if (start.focusPoint || end.focusPoint) {
@@ -226,6 +229,7 @@ const bindOrUnbindBindingElementEdge = (
   { mode, element, focusPoint }: BindingStrategy,
   startOrEnd: "start" | "end",
   scene: Scene,
+  zoom: AppState["zoom"],
   shouldSnapToOutline = true,
 ): void => {
   if (mode === null) {
@@ -238,6 +242,7 @@ const bindOrUnbindBindingElementEdge = (
       mode,
       startOrEnd,
       scene,
+      zoom,
       focusPoint,
       shouldSnapToOutline,
     );
@@ -1026,6 +1031,7 @@ export const bindBindingElement = (
   mode: BindMode,
   startOrEnd: "start" | "end",
   scene: Scene,
+  zoom: AppState["zoom"],
   focusPoint?: GlobalPoint,
   shouldSnapToOutline = true,
 ): void => {
@@ -1042,6 +1048,7 @@ export const bindBindingElement = (
         hoveredElement,
         startOrEnd,
         elementsMap,
+        zoom,
         shouldSnapToOutline,
       ),
     };
@@ -1266,6 +1273,7 @@ const updateArrowBindings = (
         strategy[strategyName].mode,
         strategyName,
         scene,
+        appState.zoom,
         strategy[strategyName].focusPoint,
       );
     }
@@ -1375,6 +1383,7 @@ export const bindPointToSnapToElementOutline = (
   bindableElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
   elementsMap: ElementsMap,
+  zoom: AppState["zoom"],
   customIntersector?: LineSegment<GlobalPoint>,
   isMidpointSnappingEnabled = true,
 ): GlobalPoint => {
@@ -1417,7 +1426,13 @@ export const bindPointToSnapToElementOutline = (
       headingForPointFromElement(bindableElement, aabb, point),
     );
     const snapPoint = isMidpointSnappingEnabled
-      ? snapToMid(bindableElement, elementsMap, edgePoint, 0.05, arrowElement)
+      ? getSnapOutlineMidPoint(
+          edgePoint,
+          bindableElement,
+          elementsMap,
+          zoom,
+          arrowElement,
+        )
       : undefined;
     const resolved = snapPoint || point;
     const otherPoint = pointFrom<GlobalPoint>(
@@ -1599,121 +1614,6 @@ export const avoidRectangularCorner = (
   return p;
 };
 
-export const snapToMid = (
-  bindTarget: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  p: GlobalPoint,
-  tolerance: number = 0.05,
-  arrowElement?: ExcalidrawArrowElement,
-): GlobalPoint | undefined => {
-  const { x, y, width, height, angle } = bindTarget;
-  const center = elementCenterPoint(bindTarget, elementsMap, -0.1, -0.1);
-  const nonRotated = pointRotateRads(p, center, -angle as Radians);
-
-  const bindingGap = arrowElement ? getBindingGap(bindTarget, arrowElement) : 0;
-
-  // snap-to-center point is adaptive to element size, but we don't want to go
-  // above and below certain px distance
-  const verticalThreshold = clamp(tolerance * height, 5, 80);
-  const horizontalThreshold = clamp(tolerance * width, 5, 80);
-
-  // Too close to the center makes it hard to resolve direction precisely
-  if (pointDistance(center, nonRotated) < bindingGap) {
-    return undefined;
-  }
-
-  if (
-    nonRotated[0] <= x + width / 2 &&
-    nonRotated[1] > center[1] - verticalThreshold &&
-    nonRotated[1] < center[1] + verticalThreshold
-  ) {
-    // LEFT
-    return pointRotateRads(
-      pointFrom<GlobalPoint>(x - bindingGap, center[1]),
-      center,
-      angle,
-    );
-  } else if (
-    nonRotated[1] <= y + height / 2 &&
-    nonRotated[0] > center[0] - horizontalThreshold &&
-    nonRotated[0] < center[0] + horizontalThreshold
-  ) {
-    // TOP
-    return pointRotateRads(
-      pointFrom<GlobalPoint>(center[0], y - bindingGap),
-      center,
-      angle,
-    );
-  } else if (
-    nonRotated[0] >= x + width / 2 &&
-    nonRotated[1] > center[1] - verticalThreshold &&
-    nonRotated[1] < center[1] + verticalThreshold
-  ) {
-    // RIGHT
-    return pointRotateRads(
-      pointFrom<GlobalPoint>(x + width + bindingGap, center[1]),
-      center,
-      angle,
-    );
-  } else if (
-    nonRotated[1] >= y + height / 2 &&
-    nonRotated[0] > center[0] - horizontalThreshold &&
-    nonRotated[0] < center[0] + horizontalThreshold
-  ) {
-    // DOWN
-    return pointRotateRads(
-      pointFrom<GlobalPoint>(center[0], y + height + bindingGap),
-      center,
-      angle,
-    );
-  } else if (bindTarget.type === "diamond") {
-    const distance = bindingGap;
-    const topLeft = pointFrom<GlobalPoint>(
-      x + width / 4 - distance,
-      y + height / 4 - distance,
-    );
-    const topRight = pointFrom<GlobalPoint>(
-      x + (3 * width) / 4 + distance,
-      y + height / 4 - distance,
-    );
-    const bottomLeft = pointFrom<GlobalPoint>(
-      x + width / 4 - distance,
-      y + (3 * height) / 4 + distance,
-    );
-    const bottomRight = pointFrom<GlobalPoint>(
-      x + (3 * width) / 4 + distance,
-      y + (3 * height) / 4 + distance,
-    );
-
-    if (
-      pointDistance(topLeft, nonRotated) <
-      Math.max(horizontalThreshold, verticalThreshold)
-    ) {
-      return pointRotateRads(topLeft, center, angle);
-    }
-    if (
-      pointDistance(topRight, nonRotated) <
-      Math.max(horizontalThreshold, verticalThreshold)
-    ) {
-      return pointRotateRads(topRight, center, angle);
-    }
-    if (
-      pointDistance(bottomLeft, nonRotated) <
-      Math.max(horizontalThreshold, verticalThreshold)
-    ) {
-      return pointRotateRads(bottomLeft, center, angle);
-    }
-    if (
-      pointDistance(bottomRight, nonRotated) <
-      Math.max(horizontalThreshold, verticalThreshold)
-    ) {
-      return pointRotateRads(bottomRight, center, angle);
-    }
-  }
-
-  return undefined;
-};
-
 const extractBinding = (
   arrow: ExcalidrawArrowElement,
   startOrEnd: "startBinding" | "endBinding",
@@ -1913,6 +1813,7 @@ export const calculateFixedPointForElbowArrowBinding = (
   hoveredElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
   elementsMap: ElementsMap,
+  zoom: AppState["zoom"],
   shouldSnapToOutline = true,
   isMidpointSnappingEnabled = true,
 ): { fixedPoint: FixedPoint } => {
@@ -1928,6 +1829,7 @@ export const calculateFixedPointForElbowArrowBinding = (
         hoveredElement,
         startOrEnd,
         elementsMap,
+        zoom,
         undefined,
         isMidpointSnappingEnabled,
       )

packages/element/src/elbowArrow.ts

@@ -1251,6 +1251,7 @@ const getElbowArrowData = (
     "start",
     arrow.startBinding?.fixedPoint,
     origStartGlobalPoint,
+    options?.zoom || ({ value: 1 } as AppState["zoom"]),
     hoveredStartElement,
     elementsMap,
     options?.isDragging,
@@ -1268,6 +1269,7 @@ const getElbowArrowData = (
     "end",
     arrow.endBinding?.fixedPoint,
     origEndGlobalPoint,
+    options?.zoom || ({ value: 1 } as AppState["zoom"]),
     hoveredEndElement,
     elementsMap,
     options?.isDragging,
@@ -2213,6 +2215,7 @@ const getGlobalPoint = (
   startOrEnd: "start" | "end",
   fixedPointRatio: [number, number] | undefined | null,
   initialPoint: GlobalPoint,
+  zoom: AppState["zoom"],
   element?: ExcalidrawBindableElement | null,
   elementsMap?: ElementsMap,
   isDragging?: boolean,
@@ -2226,6 +2229,7 @@ const getGlobalPoint = (
         element,
         startOrEnd,
         elementsMap,
+        zoom,
         undefined,
         isMidpointSnappingEnabled,
       );

packages/element/src/flowchart.ts

@@ -452,8 +452,16 @@ const createBindingArrow = (
     "orbit",
     "start",
     scene,
+    appState.zoom,
+  );
+  bindBindingElement(
+    bindingArrow,
+    endBindingElement,
+    "orbit",
+    "end",
+    scene,
+    appState.zoom,
   );
-  bindBindingElement(bindingArrow, endBindingElement, "orbit", "end", scene);
 
   const changedElements = new Map<string, OrderedExcalidrawElement>();
   changedElements.set(

packages/element/src/linearElementEditor.ts

@@ -48,7 +48,6 @@ import {
   calculateFixedPointForNonElbowArrowBinding,
   getBindingStrategyForDraggingBindingElementEndpoints,
   isBindingEnabled,
-  snapToMid,
   updateBoundPoint,
 } from "./binding";
 import {
@@ -2200,13 +2199,15 @@ const pointDraggingUpdates = (
           ? {
               element: suggestedBindingElement,
               midPoint: app.state.isMidpointSnappingEnabled
-                ? snapToMid(
-                    suggestedBindingElement,
-                    elementsMap,
+                ? getSnapOutlineMidPoint(
                     pointFrom<GlobalPoint>(
                       scenePointerX - linearElementEditor.pointerOffset.x,
                       scenePointerY - linearElementEditor.pointerOffset.y,
                     ),
+                    suggestedBindingElement,
+                    elementsMap,
+                    app.state.zoom,
+                    element,
                   )
                 : undefined,
             }
@@ -2313,6 +2314,7 @@ const pointDraggingUpdates = (
               start.element,
               elementsMap,
               app.state.zoom,
+              element,
             ),
           }
         : null;
@@ -2352,6 +2354,7 @@ const pointDraggingUpdates = (
               end.element,
               elementsMap,
               app.state.zoom,
+              element,
             ),
           }
         : null;

packages/element/src/transform.ts

@@ -17,6 +17,7 @@ import {
 } from "@excalidraw/common";
 
 import type { MarkOptional } from "@excalidraw/common/utility-types";
+import type { Zoom } from "@excalidraw/excalidraw/types";
 
 import { bindBindingElement } from "./binding";
 import {
@@ -248,6 +249,7 @@ const bindLinearElementToElement = (
   end: ValidLinearElement["end"],
   elementStore: ElementStore,
   scene: Scene,
+  zoom: Zoom,
 ): {
   linearElement: ExcalidrawLinearElement;
   startBoundElement?: ExcalidrawElement;
@@ -335,6 +337,7 @@ const bindLinearElementToElement = (
         "orbit",
         "start",
         scene,
+        zoom,
       );
     }
   }
@@ -411,6 +414,7 @@ const bindLinearElementToElement = (
         "orbit",
         "end",
         scene,
+        zoom,
       );
     }
   }
@@ -696,6 +700,7 @@ export const convertToExcalidrawElements = (
                 originalEnd,
                 elementStore,
                 scene,
+                { value: 1 } as Zoom,
               );
             container = linearElement;
             elementStore.add(linearElement);
@@ -721,6 +726,7 @@ export const convertToExcalidrawElements = (
                   end,
                   elementStore,
                   scene,
+                  { value: 1 } as Zoom,
                 );
 
               elementStore.add(linearElement);

packages/element/src/utils.ts

@@ -8,6 +8,7 @@ import {
 
 import {
   bezierEquation,
+  clamp,
   curve,
   curveCatmullRomCubicApproxPoints,
   curveOffsetPoints,
@@ -26,7 +27,7 @@ import {
   type GlobalPoint,
 } from "@excalidraw/math";
 
-import type { Curve, LineSegment, LocalPoint } from "@excalidraw/math";
+import type { Curve, LineSegment, LocalPoint, Radians } from "@excalidraw/math";
 
 import type {
   AppState,
@@ -41,7 +42,7 @@ import { generateLinearCollisionShape } from "./shape";
 import { hitElementItself, isPointInElement } from "./collision";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isRectangularElement } from "./typeChecks";
-import { maxBindingDistance_simple } from "./binding";
+import { getBindingGap, maxBindingDistance_simple } from "./binding";
 
 import {
   getGlobalFixedPointForBindableElement,
@@ -592,16 +593,135 @@ export const getSnapOutlineMidPoint = (
   element: ExcalidrawBindableElement,
   elementsMap: ElementsMap,
   zoom: AppState["zoom"],
-) => {
+  arrow: { elbowed: boolean },
+): GlobalPoint | undefined => {
   const center = elementCenterPoint(element, elementsMap);
+  const TOLERANCE = 0.05;
+  const maxDistance = maxBindingDistance_simple(zoom) + element.strokeWidth / 2;
+  const { x, y, width, height, angle } = element;
+
+  // snap-to-center point is adaptive to element size, but we don't want to go
+  // above and below certain px distance
+  const verticalThreshold = clamp(TOLERANCE * height, 5, maxDistance);
+  const horizontalThreshold = clamp(TOLERANCE * width, 5, maxDistance);
+
+  if (arrow.elbowed) {
+    const nonRotated = pointRotateRads(point, center, -angle as Radians);
+
+    const bindingGap = getBindingGap(element, arrow);
+
+    // Too close to the center makes it hard to resolve direction precisely
+    if (pointDistance(center, nonRotated) < bindingGap) {
+      return undefined;
+    }
+
+    if (
+      nonRotated[0] <= x + width / 2 &&
+      nonRotated[1] > center[1] - verticalThreshold &&
+      nonRotated[1] < center[1] + verticalThreshold
+    ) {
+      // LEFT
+      return pointRotateRads(
+        pointFrom<GlobalPoint>(x - bindingGap, center[1]),
+        center,
+        angle,
+      );
+    } else if (
+      nonRotated[1] <= y + height / 2 &&
+      nonRotated[0] > center[0] - horizontalThreshold &&
+      nonRotated[0] < center[0] + horizontalThreshold
+    ) {
+      // TOP
+      return pointRotateRads(
+        pointFrom<GlobalPoint>(center[0], y - bindingGap),
+        center,
+        angle,
+      );
+    } else if (
+      nonRotated[0] >= x + width / 2 &&
+      nonRotated[1] > center[1] - verticalThreshold &&
+      nonRotated[1] < center[1] + verticalThreshold
+    ) {
+      // RIGHT
+      return pointRotateRads(
+        pointFrom<GlobalPoint>(x + width + bindingGap, center[1]),
+        center,
+        angle,
+      );
+    } else if (
+      nonRotated[1] >= y + height / 2 &&
+      nonRotated[0] > center[0] - horizontalThreshold &&
+      nonRotated[0] < center[0] + horizontalThreshold
+    ) {
+      // DOWN
+      return pointRotateRads(
+        pointFrom<GlobalPoint>(center[0], y + height + bindingGap),
+        center,
+        angle,
+      );
+    } else if (element.type === "diamond") {
+      const distance = bindingGap;
+      const topLeft = pointFrom<GlobalPoint>(
+        x + width / 4 - distance,
+        y + height / 4 - distance,
+      );
+      const topRight = pointFrom<GlobalPoint>(
+        x + (3 * width) / 4 + distance,
+        y + height / 4 - distance,
+      );
+      const bottomLeft = pointFrom<GlobalPoint>(
+        x + width / 4 - distance,
+        y + (3 * height) / 4 + distance,
+      );
+      const bottomRight = pointFrom<GlobalPoint>(
+        x + (3 * width) / 4 + distance,
+        y + (3 * height) / 4 + distance,
+      );
+
+      if (
+        pointDistance(topLeft, nonRotated) <
+        Math.max(horizontalThreshold, verticalThreshold)
+      ) {
+        return pointRotateRads(topLeft, center, angle);
+      }
+      if (
+        pointDistance(topRight, nonRotated) <
+        Math.max(horizontalThreshold, verticalThreshold)
+      ) {
+        return pointRotateRads(topRight, center, angle);
+      }
+      if (
+        pointDistance(bottomLeft, nonRotated) <
+        Math.max(horizontalThreshold, verticalThreshold)
+      ) {
+        return pointRotateRads(bottomLeft, center, angle);
+      }
+      if (
+        pointDistance(bottomRight, nonRotated) <
+        Math.max(horizontalThreshold, verticalThreshold)
+      ) {
+        return pointRotateRads(bottomRight, center, angle);
+      }
+    }
+
+    return undefined;
+  }
+
   const sideMidpoints =
     element.type === "diamond"
-      ? getDiamondBaseCorners(element).map((curve) => {
-          const point = bezierEquation(curve, 0.5);
-          const rotatedPoint = pointRotateRads(point, center, element.angle);
+      ? getDiamondBaseCorners(element)
+          .map((curve) => {
+            const point = bezierEquation(curve, 0.5);
+            const rotatedPoint = pointRotateRads(point, center, element.angle);
 
-          return pointFrom<GlobalPoint>(rotatedPoint[0], rotatedPoint[1]);
-        })
+            return pointFrom<GlobalPoint>(rotatedPoint[0], rotatedPoint[1]);
+          })
+          .map((midpoint) => {
+            return pointFrom<GlobalPoint>(
+              midpoint[0] + (midpoint[0] - center[0]) * 0.1,
+              midpoint[1] + (midpoint[1] - center[1]) * 0.1,
+            );
+          })
       : [
           // RIGHT midpoint
           pointRotateRads(
@@ -634,20 +754,24 @@ export const getSnapOutlineMidPoint = (
             element.angle,
           ),
         ];
-  const candidate = sideMidpoints.find(
-    (midpoint) =>
-      pointDistance(point, midpoint) <=
-        maxBindingDistance_simple(zoom) + element.strokeWidth / 2 &&
-      !hitElementItself({
-        point,
-        element,
-        threshold: 0,
-        elementsMap,
-        overrideShouldTestInside: true,
-      }),
-  );
 
-  return candidate;
+  return sideMidpoints
+    .map((midpoint, i) => {
+      const threshold = i % 2 === 0 ? horizontalThreshold : verticalThreshold;
+
+      return pointDistance(midpoint, point) <= threshold ? midpoint : undefined;
+    })
+    .find(
+      (midpoint) =>
+        midpoint &&
+        !hitElementItself({
+          point,
+          element,
+          threshold: 0,
+          elementsMap,
+          overrideShouldTestInside: true,
+        }),
+    );
 };
 
 export const projectFixedPointOntoDiagonal = (
@@ -670,6 +794,7 @@ export const projectFixedPointOntoDiagonal = (
       element,
       elementsMap,
       zoom,
+      arrow,
     );
     if (sideMidPoint) {
       return sideMidPoint;

packages/element/tests/elbowArrow.test.tsx

@@ -16,6 +16,7 @@ import "@excalidraw/utils/test-utils";
 import { bindBindingElement } from "@excalidraw/element";
 
 import type { LocalPoint } from "@excalidraw/math";
+import type { Zoom } from "@excalidraw/excalidraw/types";
 
 import { Scene } from "../src/Scene";
 
@@ -187,8 +188,12 @@ describe("elbow arrow routing", () => {
     }) as ExcalidrawElbowArrowElement;
     API.setElements([rectangle1, rectangle2, arrow]);
 
-    bindBindingElement(arrow, rectangle1, "orbit", "start", h.scene);
-    bindBindingElement(arrow, rectangle2, "orbit", "end", h.scene);
+    bindBindingElement(arrow, rectangle1, "orbit", "start", h.scene, {
+      value: 1,
+    } as Zoom);
+    bindBindingElement(arrow, rectangle2, "orbit", "end", h.scene, {
+      value: 1,
+    } as Zoom);
 
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);