@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-4689a6b

package/dist/excalidraw/element/binding.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawLinearElement, ExcalidrawBindableElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap } from "./types";
-import { AppState } from "../types";
-import Scene from "../scene/Scene";
+import * as GA from "../ga";
+import { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, ExcalidrawImageElement, ExcalidrawFrameLikeElement, ExcalidrawIframeLikeElement, NonDeleted, ExcalidrawLinearElement, NonDeletedExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap } from "./types";
+import { AppClassProperties, AppState, Point } from "../types";
 export type SuggestedBinding = NonDeleted<ExcalidrawBindableElement> | SuggestedPointBinding;
 export type SuggestedPointBinding = [
     NonDeleted<ExcalidrawLinearElement>,
@@ -10,18 +10,18 @@ export type SuggestedPointBinding = [
 export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLElement>) => boolean;
 export declare const isBindingEnabled: (appState: AppState) => boolean;
 export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep", elementsMap: NonDeletedSceneElementsMap) => void;
-export declare const bindOrUnbindSelectedElements: (selectedElements: NonDeleted<ExcalidrawElement>[], elements: readonly ExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap) => void;
-export declare const maybeBindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, appState: AppState, scene: Scene, pointerCoords: {
+export declare const bindOrUnbindSelectedElements: (selectedElements: NonDeleted<ExcalidrawElement>[], app: AppClassProperties) => void;
+export declare const maybeBindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, appState: AppState, pointerCoords: {
     x: number;
     y: number;
-}, elementsMap: NonDeletedSceneElementsMap) => void;
+}, app: AppClassProperties) => void;
 export declare const bindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: NonDeletedSceneElementsMap) => void;
 export declare const isLinearElementSimpleAndAlreadyBound: (linearElement: NonDeleted<ExcalidrawLinearElement>, alreadyBoundToId: ExcalidrawBindableElement["id"] | undefined, bindableElement: ExcalidrawBindableElement) => boolean;
-export declare const unbindLinearElements: (elements: NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap) => void;
+export declare const unbindLinearElements: (elements: readonly NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap) => void;
 export declare const getHoveredElementForBinding: (pointerCoords: {
     x: number;
     y: number;
-}, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap) => NonDeleted<ExcalidrawBindableElement> | null;
+}, app: AppClassProperties) => NonDeleted<ExcalidrawBindableElement> | null;
 export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawElement, elementsMap: ElementsMap, options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     newSize?: {
@@ -29,6 +29,19 @@ export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawE
         height: number;
     };
 }) => void;
-export declare const getEligibleElementsForBinding: (selectedElements: NonDeleted<ExcalidrawElement>[], elements: readonly ExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap) => SuggestedBinding[];
+export declare const getEligibleElementsForBinding: (selectedElements: NonDeleted<ExcalidrawElement>[], app: AppClassProperties) => SuggestedBinding[];
 export declare const fixBindingsAfterDuplication: (sceneElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>, duplicatesServeAsOld?: "duplicatesServeAsOld" | undefined) => void;
 export declare const fixBindingsAfterDeletion: (sceneElements: readonly ExcalidrawElement[], deletedElements: readonly ExcalidrawElement[]) => void;
+export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
+    x: number;
+    y: number;
+}, app: AppClassProperties) => boolean;
+export declare const maxBindingGap: (element: ExcalidrawElement, elementWidth: number, elementHeight: number) => number;
+export declare const distanceToBindableElement: (element: ExcalidrawBindableElement, point: readonly [number, number], elementsMap: ElementsMap) => number;
+export declare const distanceToEllipse: (element: ExcalidrawEllipseElement, point: readonly [number, number], elementsMap: ElementsMap) => number;
+export declare const determineFocusDistance: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], elementsMap: ElementsMap) => number;
+export declare const determineFocusPoint: (element: ExcalidrawBindableElement, focus: number, adjecentPoint: readonly [number, number], elementsMap: ElementsMap) => readonly [number, number];
+export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap: number | undefined, elementsMap: ElementsMap) => Point[];
+export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
+export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
+export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawIframeLikeElement | ExcalidrawFrameLikeElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];

package/dist/excalidraw/element/binding.js

@@ -1,6 +1,12 @@
+import * as GA from "../ga";
+import * as GAPoint from "../gapoints";
+import * as GADirection from "../gadirections";
+import * as GALine from "../galines";
+import * as GATransform from "../gatransforms";
+import { getElementAbsoluteCoords } from "./bounds";
+import { isPointOnShape } from "../../utils/collision";
 import { getElementAtPosition } from "../scene";
 import { isBindableElement, isBindingElement, isLinearElement, } from "./typeChecks";
-import { bindingBorderTest, distanceToBindableElement, maxBindingGap, determineFocusDistance, intersectElementWithLine, determineFocusPoint, } from "./collision";
 import { mutateElement } from "./mutateElement";
 import Scene from "../scene/Scene";
 import { LinearElementEditor } from "./linearElementEditor";
@@ -61,27 +67,27 @@ unboundFromElementIds, elementsMap) => {
         }
     }
 };
-export const bindOrUnbindSelectedElements = (selectedElements, elements, elementsMap) => {
+export const bindOrUnbindSelectedElements = (selectedElements, app) => {
     selectedElements.forEach((selectedElement) => {
         if (isBindingElement(selectedElement)) {
-            bindOrUnbindLinearElement(selectedElement, getElligibleElementForBindingElement(selectedElement, "start", elements, elementsMap), getElligibleElementForBindingElement(selectedElement, "end", elements, elementsMap), elementsMap);
+            bindOrUnbindLinearElement(selectedElement, getElligibleElementForBindingElement(selectedElement, "start", app), getElligibleElementForBindingElement(selectedElement, "end", app), app.scene.getNonDeletedElementsMap());
         }
         else if (isBindableElement(selectedElement)) {
-            maybeBindBindableElement(selectedElement, elementsMap);
+            maybeBindBindableElement(selectedElement, app.scene.getNonDeletedElementsMap(), app);
         }
     });
 };
-const maybeBindBindableElement = (bindableElement, elementsMap) => {
-    getElligibleElementsForBindableElementAndWhere(bindableElement, elementsMap).forEach(([linearElement, where]) => bindOrUnbindLinearElement(linearElement, where === "end" ? "keep" : bindableElement, where === "start" ? "keep" : bindableElement, elementsMap));
+const maybeBindBindableElement = (bindableElement, elementsMap, app) => {
+    getElligibleElementsForBindableElementAndWhere(bindableElement, app).forEach(([linearElement, where]) => bindOrUnbindLinearElement(linearElement, where === "end" ? "keep" : bindableElement, where === "start" ? "keep" : bindableElement, elementsMap));
 };
-export const maybeBindLinearElement = (linearElement, appState, scene, pointerCoords, elementsMap) => {
+export const maybeBindLinearElement = (linearElement, appState, pointerCoords, app) => {
     if (appState.startBoundElement != null) {
-        bindLinearElement(linearElement, appState.startBoundElement, "start", elementsMap);
+        bindLinearElement(linearElement, appState.startBoundElement, "start", app.scene.getNonDeletedElementsMap());
     }
-    const hoveredElement = getHoveredElementForBinding(pointerCoords, scene.getNonDeletedElements(), elementsMap);
+    const hoveredElement = getHoveredElementForBinding(pointerCoords, app);
     if (hoveredElement != null &&
         !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, hoveredElement, "end")) {
-        bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
+        bindLinearElement(linearElement, hoveredElement, "end", app.scene.getNonDeletedElementsMap());
     }
 };
 export const bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
@@ -125,9 +131,9 @@ const unbindLinearElement = (linearElement, startOrEnd) => {
     mutateElement(linearElement, { [field]: null });
     return binding.elementId;
 };
-export const getHoveredElementForBinding = (pointerCoords, elements, elementsMap) => {
-    const hoveredElement = getElementAtPosition(elements, (element) => isBindableElement(element, false) &&
-        bindingBorderTest(element, pointerCoords, elementsMap));
+export const getHoveredElementForBinding = (pointerCoords, app) => {
+    const hoveredElement = getElementAtPosition(app.scene.getNonDeletedElements(), (element) => isBindableElement(element, false) &&
+        bindingBorderTest(element, pointerCoords, app));
     return hoveredElement;
 };
 const calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
@@ -237,28 +243,28 @@ const maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize
     return { elementId, gap: newGap, focus };
 };
 // TODO: this is a bottleneck, optimise
-export const getEligibleElementsForBinding = (selectedElements, elements, elementsMap) => {
+export const getEligibleElementsForBinding = (selectedElements, app) => {
     const includedElementIds = new Set(selectedElements.map(({ id }) => id));
     return selectedElements.flatMap((selectedElement) => isBindingElement(selectedElement, false)
-        ? getElligibleElementsForBindingElement(selectedElement, elements, elementsMap).filter((element) => !includedElementIds.has(element.id))
+        ? getElligibleElementsForBindingElement(selectedElement, app).filter((element) => !includedElementIds.has(element.id))
         : isBindableElement(selectedElement, false)
-            ? getElligibleElementsForBindableElementAndWhere(selectedElement, elementsMap).filter((binding) => !includedElementIds.has(binding[0].id))
+            ? getElligibleElementsForBindableElementAndWhere(selectedElement, app).filter((binding) => !includedElementIds.has(binding[0].id))
             : []);
 };
-const getElligibleElementsForBindingElement = (linearElement, elements, elementsMap) => {
+const getElligibleElementsForBindingElement = (linearElement, app) => {
     return [
-        getElligibleElementForBindingElement(linearElement, "start", elements, elementsMap),
-        getElligibleElementForBindingElement(linearElement, "end", elements, elementsMap),
+        getElligibleElementForBindingElement(linearElement, "start", app),
+        getElligibleElementForBindingElement(linearElement, "end", app),
     ].filter((element) => element != null);
 };
-const getElligibleElementForBindingElement = (linearElement, startOrEnd, elements, elementsMap) => {
-    return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), elements, elementsMap);
+const getElligibleElementForBindingElement = (linearElement, startOrEnd, app) => {
+    return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, app.scene.getNonDeletedElementsMap()), app);
 };
 const getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {
     const index = startOrEnd === "start" ? 0 : -1;
     return tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, index, elementsMap));
 };
-const getElligibleElementsForBindableElementAndWhere = (bindableElement, elementsMap) => {
+const getElligibleElementsForBindableElementAndWhere = (bindableElement, app) => {
     const scene = Scene.getScene(bindableElement);
     return scene
         .getNonDeletedElements()
@@ -266,8 +272,8 @@ const getElligibleElementsForBindableElementAndWhere = (bindableElement, element
         if (!isBindingElement(element, false)) {
             return null;
         }
-        const canBindStart = isLinearElementEligibleForNewBindingByBindable(element, "start", bindableElement, elementsMap);
-        const canBindEnd = isLinearElementEligibleForNewBindingByBindable(element, "end", bindableElement, elementsMap);
+        const canBindStart = isLinearElementEligibleForNewBindingByBindable(element, "start", bindableElement, scene.getNonDeletedElementsMap(), app);
+        const canBindEnd = isLinearElementEligibleForNewBindingByBindable(element, "end", bindableElement, scene.getNonDeletedElementsMap(), app);
         if (!canBindStart && !canBindEnd) {
             return null;
         }
@@ -279,11 +285,11 @@ const getElligibleElementsForBindableElementAndWhere = (bindableElement, element
     })
         .filter((maybeElement) => maybeElement != null);
 };
-const isLinearElementEligibleForNewBindingByBindable = (linearElement, startOrEnd, bindableElement, elementsMap) => {
+const isLinearElementEligibleForNewBindingByBindable = (linearElement, startOrEnd, bindableElement, elementsMap, app) => {
     const existingBinding = linearElement[startOrEnd === "start" ? "startBinding" : "endBinding"];
     return (existingBinding == null &&
         !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd) &&
-        bindingBorderTest(bindableElement, getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), elementsMap));
+        bindingBorderTest(bindableElement, getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), app));
 };
 // We need to:
 // 1: Update elements not selected to point to duplicated elements
@@ -412,3 +418,374 @@ const newBoundElementsAfterDeletion = (boundElements, deletedElementIds) => {
     }
     return boundElements.filter((ele) => !deletedElementIds.has(ele.id));
 };
+export const bindingBorderTest = (element, { x, y }, app) => {
+    const threshold = maxBindingGap(element, element.width, element.height);
+    const shape = app.getElementShape(element);
+    return isPointOnShape([x, y], shape, threshold);
+};
+export const maxBindingGap = (element, elementWidth, elementHeight) => {
+    // Aligns diamonds with rectangles
+    const shapeRatio = element.type === "diamond" ? 1 / Math.sqrt(2) : 1;
+    const smallerDimension = shapeRatio * Math.min(elementWidth, elementHeight);
+    // We make the bindable boundary bigger for bigger elements
+    return Math.max(16, Math.min(0.25 * smallerDimension, 32));
+};
+export const distanceToBindableElement = (element, point, elementsMap) => {
+    switch (element.type) {
+        case "rectangle":
+        case "image":
+        case "text":
+        case "iframe":
+        case "embeddable":
+        case "frame":
+        case "magicframe":
+            return distanceToRectangle(element, point, elementsMap);
+        case "diamond":
+            return distanceToDiamond(element, point, elementsMap);
+        case "ellipse":
+            return distanceToEllipse(element, point, elementsMap);
+    }
+};
+const distanceToRectangle = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
+    return Math.max(GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)), GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)));
+};
+const distanceToDiamond = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
+    const side = GALine.equation(hheight, hwidth, -hheight * hwidth);
+    return GAPoint.distanceToLine(pointRel, side);
+};
+export const distanceToEllipse = (element, point, elementsMap) => {
+    const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);
+    return -GALine.sign(tangent) * GAPoint.distanceToLine(pointRel, tangent);
+};
+const ellipseParamsForTest = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
+    const [px, py] = GAPoint.toTuple(pointRel);
+    // We're working in positive quadrant, so start with `t = 45deg`, `tx=cos(t)`
+    let tx = 0.707;
+    let ty = 0.707;
+    const a = hwidth;
+    const b = hheight;
+    // This is a numerical method to find the params tx, ty at which
+    // the ellipse has the closest point to the given point
+    [0, 1, 2, 3].forEach((_) => {
+        const xx = a * tx;
+        const yy = b * ty;
+        const ex = ((a * a - b * b) * tx ** 3) / a;
+        const ey = ((b * b - a * a) * ty ** 3) / b;
+        const rx = xx - ex;
+        const ry = yy - ey;
+        const qx = px - ex;
+        const qy = py - ey;
+        const r = Math.hypot(ry, rx);
+        const q = Math.hypot(qy, qx);
+        tx = Math.min(1, Math.max(0, ((qx * r) / q + ex) / a));
+        ty = Math.min(1, Math.max(0, ((qy * r) / q + ey) / b));
+        const t = Math.hypot(ty, tx);
+        tx /= t;
+        ty /= t;
+    });
+    const closestPoint = GA.point(a * tx, b * ty);
+    const tangent = GALine.orthogonalThrough(pointRel, closestPoint);
+    return [pointRel, tangent];
+};
+// Returns:
+//   1. the point relative to the elements (x, y) position
+//   2. the point relative to the element's center with positive (x, y)
+//   3. half element width
+//   4. half element height
+//
+// Note that for linear elements the (x, y) position is not at the
+// top right corner of their boundary.
+//
+// Rectangles, diamonds and ellipses are symmetrical over axes,
+// and other elements have a rectangular boundary,
+// so we only need to perform hit tests for the positive quadrant.
+const pointRelativeToElement = (element, pointTuple, elementsMap) => {
+    const point = GAPoint.from(pointTuple);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+    const center = coordsCenter(x1, y1, x2, y2);
+    // GA has angle orientation opposite to `rotate`
+    const rotate = GATransform.rotation(center, element.angle);
+    const pointRotated = GATransform.apply(rotate, point);
+    const pointRelToCenter = GA.sub(pointRotated, GADirection.from(center));
+    const pointRelToCenterAbs = GAPoint.abs(pointRelToCenter);
+    const elementPos = GA.offset(element.x, element.y);
+    const pointRelToPos = GA.sub(pointRotated, elementPos);
+    const halfWidth = (x2 - x1) / 2;
+    const halfHeight = (y2 - y1) / 2;
+    return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
+};
+const relativizationToElementCenter = (element, elementsMap) => {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+    const center = coordsCenter(x1, y1, x2, y2);
+    // GA has angle orientation opposite to `rotate`
+    const rotate = GATransform.rotation(center, element.angle);
+    const translate = GA.reverse(GATransform.translation(GADirection.from(center)));
+    return GATransform.compose(rotate, translate);
+};
+const coordsCenter = (x1, y1, x2, y2) => {
+    return GA.point((x1 + x2) / 2, (y1 + y2) / 2);
+};
+// The focus distance is the oriented ratio between the size of
+// the `element` and the "focus image" of the element on which
+// all focus points lie, so it's a number between -1 and 1.
+// The line going through `a` and `b` is a tangent to the "focus image"
+// of the element.
+export const determineFocusDistance = (element, 
+// Point on the line, in absolute coordinates
+a, 
+// Another point on the line, in absolute coordinates (closer to element)
+b, elementsMap) => {
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
+    const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
+    const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
+    const line = GALine.through(aRel, bRel);
+    const q = element.height / element.width;
+    const hwidth = element.width / 2;
+    const hheight = element.height / 2;
+    const n = line[2];
+    const m = line[3];
+    const c = line[1];
+    const mabs = Math.abs(m);
+    const nabs = Math.abs(n);
+    let ret;
+    switch (element.type) {
+        case "rectangle":
+        case "image":
+        case "text":
+        case "iframe":
+        case "embeddable":
+        case "frame":
+        case "magicframe":
+            ret = c / (hwidth * (nabs + q * mabs));
+            break;
+        case "diamond":
+            ret = mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
+            break;
+        case "ellipse":
+            ret = c / (hwidth * Math.sqrt(n ** 2 + q ** 2 * m ** 2));
+            break;
+    }
+    return ret || 0;
+};
+export const determineFocusPoint = (element, 
+// The oriented, relative distance from the center of `element` of the
+// returned focusPoint
+focus, adjecentPoint, elementsMap) => {
+    if (focus === 0) {
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+        const center = coordsCenter(x1, y1, x2, y2);
+        return GAPoint.toTuple(center);
+    }
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
+    const adjecentPointRel = GATransform.apply(relateToCenter, GAPoint.from(adjecentPoint));
+    const reverseRelateToCenter = GA.reverse(relateToCenter);
+    let point;
+    switch (element.type) {
+        case "rectangle":
+        case "image":
+        case "text":
+        case "diamond":
+        case "iframe":
+        case "embeddable":
+        case "frame":
+        case "magicframe":
+            point = findFocusPointForRectangulars(element, focus, adjecentPointRel);
+            break;
+        case "ellipse":
+            point = findFocusPointForEllipse(element, focus, adjecentPointRel);
+            break;
+    }
+    return GAPoint.toTuple(GATransform.apply(reverseRelateToCenter, point));
+};
+// Returns 2 or 0 intersection points between line going through `a` and `b`
+// and the `element`, in ascending order of distance from `a`.
+export const intersectElementWithLine = (element, 
+// Point on the line, in absolute coordinates
+a, 
+// Another point on the line, in absolute coordinates
+b, 
+// If given, the element is inflated by this value
+gap = 0, elementsMap) => {
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
+    const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
+    const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
+    const line = GALine.through(aRel, bRel);
+    const reverseRelateToCenter = GA.reverse(relateToCenter);
+    const intersections = getSortedElementLineIntersections(element, line, aRel, gap);
+    return intersections.map((point) => GAPoint.toTuple(GATransform.apply(reverseRelateToCenter, point)));
+};
+const getSortedElementLineIntersections = (element, 
+// Relative to element center
+line, 
+// Relative to element center
+nearPoint, gap = 0) => {
+    let intersections;
+    switch (element.type) {
+        case "rectangle":
+        case "image":
+        case "text":
+        case "diamond":
+        case "iframe":
+        case "embeddable":
+        case "frame":
+        case "magicframe":
+            const corners = getCorners(element);
+            intersections = corners
+                .flatMap((point, i) => {
+                const edge = [point, corners[(i + 1) % 4]];
+                return intersectSegment(line, offsetSegment(edge, gap));
+            })
+                .concat(corners.flatMap((point) => getCircleIntersections(point, gap, line)));
+            break;
+        case "ellipse":
+            intersections = getEllipseIntersections(element, gap, line);
+            break;
+    }
+    if (intersections.length < 2) {
+        // Ignore the "edge" case of only intersecting with a single corner
+        return [];
+    }
+    const sortedIntersections = intersections.sort((i1, i2) => GAPoint.distance(i1, nearPoint) - GAPoint.distance(i2, nearPoint));
+    return [
+        sortedIntersections[0],
+        sortedIntersections[sortedIntersections.length - 1],
+    ];
+};
+const getCorners = (element, scale = 1) => {
+    const hx = (scale * element.width) / 2;
+    const hy = (scale * element.height) / 2;
+    switch (element.type) {
+        case "rectangle":
+        case "image":
+        case "text":
+        case "iframe":
+        case "embeddable":
+        case "frame":
+        case "magicframe":
+            return [
+                GA.point(hx, hy),
+                GA.point(hx, -hy),
+                GA.point(-hx, -hy),
+                GA.point(-hx, hy),
+            ];
+        case "diamond":
+            return [
+                GA.point(0, hy),
+                GA.point(hx, 0),
+                GA.point(0, -hy),
+                GA.point(-hx, 0),
+            ];
+    }
+};
+// Returns intersection of `line` with `segment`, with `segment` moved by
+// `gap` in its polar direction.
+// If intersection coincides with second segment point returns empty array.
+const intersectSegment = (line, segment) => {
+    const [a, b] = segment;
+    const aDist = GAPoint.distanceToLine(a, line);
+    const bDist = GAPoint.distanceToLine(b, line);
+    if (aDist * bDist >= 0) {
+        // The intersection is outside segment `(a, b)`
+        return [];
+    }
+    return [GAPoint.intersect(line, GALine.through(a, b))];
+};
+const offsetSegment = (segment, distance) => {
+    const [a, b] = segment;
+    const offset = GATransform.translationOrthogonal(GADirection.fromTo(a, b), distance);
+    return [GATransform.apply(offset, a), GATransform.apply(offset, b)];
+};
+const getEllipseIntersections = (element, gap, line) => {
+    const a = element.width / 2 + gap;
+    const b = element.height / 2 + gap;
+    const m = line[2];
+    const n = line[3];
+    const c = line[1];
+    const squares = a * a * m * m + b * b * n * n;
+    const discr = squares - c * c;
+    if (squares === 0 || discr <= 0) {
+        return [];
+    }
+    const discrRoot = Math.sqrt(discr);
+    const xn = -a * a * m * c;
+    const yn = -b * b * n * c;
+    return [
+        GA.point((xn + a * b * n * discrRoot) / squares, (yn - a * b * m * discrRoot) / squares),
+        GA.point((xn - a * b * n * discrRoot) / squares, (yn + a * b * m * discrRoot) / squares),
+    ];
+};
+export const getCircleIntersections = (center, radius, line) => {
+    if (radius === 0) {
+        return GAPoint.distanceToLine(line, center) === 0 ? [center] : [];
+    }
+    const m = line[2];
+    const n = line[3];
+    const c = line[1];
+    const [a, b] = GAPoint.toTuple(center);
+    const r = radius;
+    const squares = m * m + n * n;
+    const discr = r * r * squares - (m * a + n * b + c) ** 2;
+    if (squares === 0 || discr <= 0) {
+        return [];
+    }
+    const discrRoot = Math.sqrt(discr);
+    const xn = a * n * n - b * m * n - m * c;
+    const yn = b * m * m - a * m * n - n * c;
+    return [
+        GA.point((xn + n * discrRoot) / squares, (yn - m * discrRoot) / squares),
+        GA.point((xn - n * discrRoot) / squares, (yn + m * discrRoot) / squares),
+    ];
+};
+// The focus point is the tangent point of the "focus image" of the
+// `element`, where the tangent goes through `point`.
+export const findFocusPointForEllipse = (ellipse, 
+// Between -1 and 1 (not 0) the relative size of the "focus image" of
+// the element on which the focus point lies
+relativeDistance, 
+// The point for which we're trying to find the focus point, relative
+// to the ellipse center.
+point) => {
+    const relativeDistanceAbs = Math.abs(relativeDistance);
+    const a = (ellipse.width * relativeDistanceAbs) / 2;
+    const b = (ellipse.height * relativeDistanceAbs) / 2;
+    const orientation = Math.sign(relativeDistance);
+    const [px, pyo] = GAPoint.toTuple(point);
+    // The calculation below can't handle py = 0
+    const py = pyo === 0 ? 0.0001 : pyo;
+    const squares = px ** 2 * b ** 2 + py ** 2 * a ** 2;
+    // Tangent mx + ny + 1 = 0
+    const m = (-px * b ** 2 +
+        orientation * py * Math.sqrt(Math.max(0, squares - a ** 2 * b ** 2))) /
+        squares;
+    let n = (-m * px - 1) / py;
+    if (n === 0) {
+        // if zero {-0, 0}, fall back to a same-sign value in the similar range
+        n = (Object.is(n, -0) ? -1 : 1) * 0.01;
+    }
+    const x = -(a ** 2 * m) / (n ** 2 * b ** 2 + m ** 2 * a ** 2);
+    return GA.point(x, (-m * x - 1) / n);
+};
+export const findFocusPointForRectangulars = (element, 
+// Between -1 and 1 for how far away should the focus point be relative
+// to the size of the element. Sign determines orientation.
+relativeDistance, 
+// The point for which we're trying to find the focus point, relative
+// to the element center.
+point) => {
+    const relativeDistanceAbs = Math.abs(relativeDistance);
+    const orientation = Math.sign(relativeDistance);
+    const corners = getCorners(element, relativeDistanceAbs);
+    let maxDistance = 0;
+    let tangentPoint = null;
+    corners.forEach((corner) => {
+        const distance = orientation * GALine.through(point, corner)[1];
+        if (distance > maxDistance) {
+            maxDistance = distance;
+            tangentPoint = corner;
+        }
+    });
+    return tangentPoint;
+};

package/dist/excalidraw/element/bounds.d.ts

@@ -36,7 +36,6 @@ export declare const getElementLineSegments: (element: ExcalidrawElement, elemen
  * Rectangle here means any rectangular frame, not an excalidraw element.
  */
 export declare const getRectangleBoxAbsoluteCoords: (boxSceneCoords: RectangleBox) => number[];
-export declare const pointRelativeTo: (element: ExcalidrawElement, absoluteCoords: readonly [number, number]) => readonly [number, number];
 export declare const getDiamondPoints: (element: ExcalidrawElement) => number[];
 export declare const getCurvePathOps: (shape: Drawable) => Op[];
 export declare const getMinMaxXYFromCurvePathOps: (ops: Op[], transformXY?: ((x: number, y: number) => [number, number]) | undefined) => Bounds;

package/dist/excalidraw/element/bounds.js

@@ -192,9 +192,6 @@ export const getRectangleBoxAbsoluteCoords = (boxSceneCoords) => {
         boxSceneCoords.y + boxSceneCoords.height / 2,
     ];
 };
-export const pointRelativeTo = (element, absoluteCoords) => {
-    return [absoluteCoords[0] - element.x, absoluteCoords[1] - element.y];
-};
 export const getDiamondPoints = (element) => {
     // Here we add +1 to avoid these numbers to be 0
     // otherwise rough.js will throw an error complaining about it

package/dist/excalidraw/element/collision.d.ts

@@ -1,21 +1,16 @@
-import * as GA from "../ga";
-import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement, ExcalidrawFrameLikeElement, ExcalidrawIframeLikeElement, ElementsMap } from "./types";
-import { FrameNameBoundsCache, Point } from "../types";
-import { AppState } from "../types";
-export declare const hitTest: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache, x: number, y: number, elementsMap: ElementsMap) => boolean;
-export declare const isHittingElementBoundingBoxWithoutHittingElement: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache, x: number, y: number, elementsMap: ElementsMap) => boolean;
-export declare const isHittingElementNotConsideringBoundingBox: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache | null, point: readonly [number, number], elementsMap: ElementsMap) => boolean;
-export declare const isPointHittingElementBoundingBox: (element: NonDeleted<ExcalidrawElement>, elementsMap: ElementsMap, [x, y]: readonly [number, number], threshold: number, frameNameBoundsCache: FrameNameBoundsCache | null) => boolean;
-export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
+import { ElementsMap, ExcalidrawElement } from "./types";
+import { FrameNameBounds } from "../types";
+import { GeometricShape } from "../../utils/geometry/shape";
+export declare const shouldTestInside: (element: ExcalidrawElement) => boolean;
+export type HitTestArgs = {
     x: number;
     y: number;
-}, elementsMap: ElementsMap) => boolean;
-export declare const maxBindingGap: (element: ExcalidrawElement, elementWidth: number, elementHeight: number) => number;
-export declare const distanceToBindableElement: (element: ExcalidrawBindableElement, point: readonly [number, number], elementsMap: ElementsMap) => number;
-export declare const pointInAbsoluteCoords: (element: ExcalidrawElement, elementsMap: ElementsMap, point: readonly [number, number]) => readonly [number, number];
-export declare const determineFocusDistance: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], elementsMap: ElementsMap) => number;
-export declare const determineFocusPoint: (element: ExcalidrawBindableElement, focus: number, adjecentPoint: readonly [number, number], elementsMap: ElementsMap) => readonly [number, number];
-export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap: number | undefined, elementsMap: ElementsMap) => Point[];
-export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
-export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
-export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawIframeLikeElement | ExcalidrawFrameLikeElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
+    element: ExcalidrawElement;
+    shape: GeometricShape;
+    threshold?: number;
+    frameNameBound?: FrameNameBounds | null;
+};
+export declare const hitElementItself: ({ x, y, element, shape, threshold, frameNameBound, }: HitTestArgs) => boolean;
+export declare const hitElementBoundingBox: (x: number, y: number, element: ExcalidrawElement, elementsMap: ElementsMap, tolerance?: number) => boolean;
+export declare const hitElementBoundingBoxOnly: (hitArgs: HitTestArgs, elementsMap: ElementsMap) => boolean;
+export declare const hitElementBoundText: (x: number, y: number, textShape: GeometricShape | null) => boolean | null;