fix: Alt precise positioning

packages/element/src/utils.ts

@@ -1,6 +1,8 @@
 import {
+  debugDrawLine,
   DEFAULT_ADAPTIVE_RADIUS,
   DEFAULT_PROPORTIONAL_RADIUS,
+  invariant,
   LINE_CONFIRM_THRESHOLD,
   ROUNDNESS,
 } from "@excalidraw/common";
@@ -10,10 +12,15 @@ import {
   curveCatmullRomCubicApproxPoints,
   curveOffsetPoints,
   lineSegment,
+  lineSegmentIntersectionPoints,
   pointDistance,
   pointFrom,
   pointFromArray,
+  pointFromVector,
+  pointRotateRads,
   rectangle,
+  vectorFromPoint,
+  vectorScale,
   type GlobalPoint,
 } from "@excalidraw/math";
 
@@ -21,11 +28,16 @@ import type { Curve, LineSegment, LocalPoint } from "@excalidraw/math";
 
 import type { NormalizedZoomValue, Zoom } from "@excalidraw/excalidraw/types";
 
-import { getDiamondPoints } from "./bounds";
+import { elementCenterPoint, getDiamondPoints } from "./bounds";
 
 import { generateLinearCollisionShape } from "./shape";
 
+import { LinearElementEditor } from "./linearElementEditor";
+import { isRectangularElement } from "./typeChecks";
+
 import type {
+  ElementsMap,
+  ExcalidrawArrowElement,
   ExcalidrawDiamondElement,
   ExcalidrawElement,
   ExcalidrawFreeDrawElement,
@@ -471,3 +483,118 @@ export const getCornerRadius = (x: number, element: ExcalidrawElement) => {
 
   return 0;
 };
+
+const getDiagonalsForBindableElement = (
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+) => {
+  const center = elementCenterPoint(element, elementsMap);
+  const diagonalOne = isRectangularElement(element)
+    ? lineSegment<GlobalPoint>(
+        pointRotateRads(
+          pointFrom<GlobalPoint>(element.x, element.y),
+          center,
+          element.angle,
+        ),
+        pointRotateRads(
+          pointFrom<GlobalPoint>(
+            element.x + element.width,
+            element.y + element.height,
+          ),
+          center,
+          element.angle,
+        ),
+      )
+    : lineSegment<GlobalPoint>(
+        pointRotateRads(
+          pointFrom<GlobalPoint>(element.x + element.width / 2, element.y),
+          center,
+          element.angle,
+        ),
+        pointRotateRads(
+          pointFrom<GlobalPoint>(
+            element.x + element.width / 2,
+            element.y + element.height,
+          ),
+          center,
+          element.angle,
+        ),
+      );
+  const diagonalTwo = isRectangularElement(element)
+    ? lineSegment<GlobalPoint>(
+        pointRotateRads(
+          pointFrom<GlobalPoint>(element.x + element.width, element.y),
+          center,
+          element.angle,
+        ),
+        pointRotateRads(
+          pointFrom<GlobalPoint>(element.x, element.y + element.height),
+          center,
+          element.angle,
+        ),
+      )
+    : lineSegment<GlobalPoint>(
+        pointRotateRads(
+          pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
+          center,
+          element.angle,
+        ),
+        pointRotateRads(
+          pointFrom<GlobalPoint>(
+            element.x + element.width,
+            element.y + element.height / 2,
+          ),
+          center,
+          element.angle,
+        ),
+      );
+
+  return [diagonalOne, diagonalTwo];
+};
+
+export const projectFixedPointOntoDiagonal = (
+  arrow: ExcalidrawArrowElement,
+  point: GlobalPoint,
+  element: ExcalidrawElement,
+  startOrEnd: "start" | "end",
+  elementsMap: ElementsMap,
+) => {
+  const [diagonalOne, diagonalTwo] = getDiagonalsForBindableElement(
+    element,
+    elementsMap,
+  );
+
+  invariant(arrow.points.length >= 2, "Arrow must have at least two points");
+
+  const a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    arrow,
+    startOrEnd === "start" ? 1 : arrow.points.length - 2,
+    elementsMap,
+  );
+  const b = pointFromVector<GlobalPoint>(
+    vectorScale(
+      vectorFromPoint(point, a),
+      2 * pointDistance(a, point) +
+        Math.max(
+          pointDistance(diagonalOne[0], diagonalOne[1]),
+          pointDistance(diagonalTwo[0], diagonalTwo[1]),
+        ),
+    ),
+    a,
+  );
+  const intersector = lineSegment<GlobalPoint>(a, b);
+  const p1 = lineSegmentIntersectionPoints(diagonalOne, intersector);
+  const p2 = lineSegmentIntersectionPoints(diagonalTwo, intersector);
+  const d1 = p1 && pointDistance(a, p1);
+  const d2 = p2 && pointDistance(a, p2);
+
+  debugDrawLine(diagonalOne, { color: "purple" });
+  debugDrawLine(diagonalTwo, { color: "purple" });
+  debugDrawLine(intersector, { color: "orange" });
+
+  if (d1 != null && d2 != null) {
+    return d1 < d2 ? p1 : p2;
+  }
+
+  return p1 || p2 || null;
+};