feat: Precise hit testing (#9488)

2025-11-14 17:54:47 +01:00 · 2025-06-07 12:56:32 +02:00
parent 56c05b3099
commit ca1a4f25e7
52 changed files with 2223 additions and 2718 deletions
--- a/packages/element/src/Shape.ts
+++ b/packages/element/src/Shape.ts
@@ -1,8 +1,17 @@
 import { simplify } from "points-on-curve";

-import { pointFrom, pointDistance, type LocalPoint } from "@excalidraw/math";
+import {
+  pointFrom,
+  pointDistance,
+  type LocalPoint,
+  pointRotateRads,
+} from "@excalidraw/math";
 import { ROUGHNESS, isTransparent, assertNever } from "@excalidraw/common";

+import { RoughGenerator } from "roughjs/bin/generator";
+
+import type { GlobalPoint } from "@excalidraw/math";
+
 import type { Mutable } from "@excalidraw/common/utility-types";

 import type { EmbedsValidationStatus } from "@excalidraw/excalidraw/types";
@@ -20,7 +29,12 @@ import { headingForPointIsHorizontal } from "./heading";

 import { canChangeRoundness } from "./comparisons";
 import { generateFreeDrawShape } from "./renderElement";
-import { getArrowheadPoints, getDiamondPoints } from "./bounds";
+import {
+  getArrowheadPoints,
+  getCenterForBounds,
+  getDiamondPoints,
+  getElementBounds,
+} from "./bounds";

 import type {
  ExcalidrawElement,
@@ -28,10 +42,11 @@ import type {
  ExcalidrawSelectionElement,
  ExcalidrawLinearElement,
  Arrowhead,
+  ExcalidrawFreeDrawElement,
+  ElementsMap,
 } from "./types";

 import type { Drawable, Options } from "roughjs/bin/core";
-import type { RoughGenerator } from "roughjs/bin/generator";
 import type { Point as RoughPoint } from "roughjs/bin/geometry";

 const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
@@ -303,6 +318,172 @@ const getArrowheadShapes = (
  }
 };

+export const generateLinearCollisionShape = (
+  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
+) => {
+  const generator = new RoughGenerator();
+  const options: Options = {
+    seed: element.seed,
+    disableMultiStroke: true,
+    disableMultiStrokeFill: true,
+    roughness: 0,
+    preserveVertices: true,
+  };
+  const center = getCenterForBounds(
+    getElementBounds(element, elementsMap, true),
+  );
+
+  switch (element.type) {
+    case "line":
+    case "arrow": {
+      // points array can be empty in the beginning, so it is important to add
+      // initial position to it
+      const points = element.points.length
+        ? element.points
+        : [pointFrom<LocalPoint>(0, 0)];
+
+      if (isElbowArrow(element)) {
+        return generator.path(generateElbowArrowShape(points, 16), options)
+          .sets[0].ops;
+      } else if (!element.roundness) {
+        return points.map((point, idx) => {
+          const p = pointRotateRads(
+            pointFrom<GlobalPoint>(element.x + point[0], element.y + point[1]),
+            center,
+            element.angle,
+          );
+
+          return {
+            op: idx === 0 ? "move" : "lineTo",
+            data: pointFrom<LocalPoint>(p[0] - element.x, p[1] - element.y),
+          };
+        });
+      }
+
+      return generator
+        .curve(points as unknown as RoughPoint[], options)
+        .sets[0].ops.slice(0, element.points.length)
+        .map((op, i) => {
+          if (i === 0) {
+            const p = pointRotateRads<GlobalPoint>(
+              pointFrom<GlobalPoint>(
+                element.x + op.data[0],
+                element.y + op.data[1],
+              ),
+              center,
+              element.angle,
+            );
+
+            return {
+              op: "move",
+              data: pointFrom<LocalPoint>(p[0] - element.x, p[1] - element.y),
+            };
+          }
+
+          return {
+            op: "bcurveTo",
+            data: [
+              pointRotateRads(
+                pointFrom<GlobalPoint>(
+                  element.x + op.data[0],
+                  element.y + op.data[1],
+                ),
+                center,
+                element.angle,
+              ),
+              pointRotateRads(
+                pointFrom<GlobalPoint>(
+                  element.x + op.data[2],
+                  element.y + op.data[3],
+                ),
+                center,
+                element.angle,
+              ),
+              pointRotateRads(
+                pointFrom<GlobalPoint>(
+                  element.x + op.data[4],
+                  element.y + op.data[5],
+                ),
+                center,
+                element.angle,
+              ),
+            ]
+              .map((p) =>
+                pointFrom<LocalPoint>(p[0] - element.x, p[1] - element.y),
+              )
+              .flat(),
+          };
+        });
+    }
+    case "freedraw": {
+      if (element.points.length < 2) {
+        return [];
+      }
+
+      const simplifiedPoints = simplify(
+        element.points as Mutable<LocalPoint[]>,
+        0.75,
+      );
+
+      return generator
+        .curve(simplifiedPoints as [number, number][], options)
+        .sets[0].ops.slice(0, element.points.length)
+        .map((op, i) => {
+          if (i === 0) {
+            const p = pointRotateRads<GlobalPoint>(
+              pointFrom<GlobalPoint>(
+                element.x + op.data[0],
+                element.y + op.data[1],
+              ),
+              center,
+              element.angle,
+            );
+
+            return {
+              op: "move",
+              data: pointFrom<LocalPoint>(p[0] - element.x, p[1] - element.y),
+            };
+          }
+
+          return {
+            op: "bcurveTo",
+            data: [
+              pointRotateRads(
+                pointFrom<GlobalPoint>(
+                  element.x + op.data[0],
+                  element.y + op.data[1],
+                ),
+                center,
+                element.angle,
+              ),
+              pointRotateRads(
+                pointFrom<GlobalPoint>(
+                  element.x + op.data[2],
+                  element.y + op.data[3],
+                ),
+                center,
+                element.angle,
+              ),
+              pointRotateRads(
+                pointFrom<GlobalPoint>(
+                  element.x + op.data[4],
+                  element.y + op.data[5],
+                ),
+                center,
+                element.angle,
+              ),
+            ]
+              .map((p) =>
+                pointFrom<LocalPoint>(p[0] - element.x, p[1] - element.y),
+              )
+              .flat(),
+          };
+        });
+    }
+  }
+};
+
 /**
 * Generates the roughjs shape for given element.
 *
--- a/packages/element/src/binding.ts
+++ b/packages/element/src/binding.ts
@@ -27,8 +27,6 @@ import {
  PRECISION,
 } from "@excalidraw/math";

-import { isPointOnShape } from "@excalidraw/utils/collision";
-
 import type { LocalPoint, Radians } from "@excalidraw/math";

 import type { AppState } from "@excalidraw/excalidraw/types";
@@ -41,7 +39,7 @@ import {
  doBoundsIntersect,
 } from "./bounds";
 import { intersectElementWithLineSegment } from "./collision";
-import { distanceToBindableElement } from "./distance";
+import { distanceToElement } from "./distance";
 import {
  headingForPointFromElement,
  headingIsHorizontal,
@@ -63,7 +61,7 @@ import {
  isTextElement,
 } from "./typeChecks";

-import { aabbForElement, getElementShape, pointInsideBounds } from "./shapes";
+import { aabbForElement } from "./shapes";
 import { updateElbowArrowPoints } from "./elbowArrow";

 import type { Scene } from "./Scene";
@@ -109,7 +107,6 @@ export const isBindingEnabled = (appState: AppState): boolean => {

 export const FIXED_BINDING_DISTANCE = 5;
 export const BINDING_HIGHLIGHT_THICKNESS = 10;
-export const BINDING_HIGHLIGHT_OFFSET = 4;

 const getNonDeletedElements = (
  scene: Scene,
@@ -131,6 +128,7 @@ export const bindOrUnbindLinearElement = (
  endBindingElement: ExcalidrawBindableElement | null | "keep",
  scene: Scene,
 ): void => {
+  const elementsMap = scene.getNonDeletedElementsMap();
  const boundToElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
  const unboundFromElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
  bindOrUnbindLinearElementEdge(
@@ -141,6 +139,7 @@ export const bindOrUnbindLinearElement = (
    boundToElementIds,
    unboundFromElementIds,
    scene,
+    elementsMap,
  );
  bindOrUnbindLinearElementEdge(
    linearElement,
@@ -150,6 +149,7 @@ export const bindOrUnbindLinearElement = (
    boundToElementIds,
    unboundFromElementIds,
    scene,
+    elementsMap,
  );

  const onlyUnbound = Array.from(unboundFromElementIds).filter(
@@ -176,6 +176,7 @@ const bindOrUnbindLinearElementEdge = (
  // Is mutated
  unboundFromElementIds: Set<ExcalidrawBindableElement["id"]>,
  scene: Scene,
+  elementsMap: ElementsMap,
 ): void => {
  // "keep" is for method chaining convenience, a "no-op", so just bail out
  if (bindableElement === "keep") {
@@ -216,43 +217,29 @@ const bindOrUnbindLinearElementEdge = (
  }
 };

-const getOriginalBindingIfStillCloseOfLinearElementEdge = (
-  linearElement: NonDeleted<ExcalidrawLinearElement>,
-  edge: "start" | "end",
-  elementsMap: NonDeletedSceneElementsMap,
-  zoom?: AppState["zoom"],
-): NonDeleted<ExcalidrawElement> | null => {
-  const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);
-  const elementId =
-    edge === "start"
-      ? linearElement.startBinding?.elementId
-      : linearElement.endBinding?.elementId;
-  if (elementId) {
-    const element = elementsMap.get(elementId);
-    if (
-      isBindableElement(element) &&
-      bindingBorderTest(element, coors, elementsMap, zoom)
-    ) {
-      return element;
-    }
-  }
-
-  return null;
-};
-
 const getOriginalBindingsIfStillCloseToArrowEnds = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
  elementsMap: NonDeletedSceneElementsMap,
  zoom?: AppState["zoom"],
 ): (NonDeleted<ExcalidrawElement> | null)[] =>
-  ["start", "end"].map((edge) =>
-    getOriginalBindingIfStillCloseOfLinearElementEdge(
-      linearElement,
-      edge as "start" | "end",
-      elementsMap,
-      zoom,
-    ),
-  );
+  (["start", "end"] as const).map((edge) => {
+    const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);
+    const elementId =
+      edge === "start"
+        ? linearElement.startBinding?.elementId
+        : linearElement.endBinding?.elementId;
+    if (elementId) {
+      const element = elementsMap.get(elementId);
+      if (
+        isBindableElement(element) &&
+        bindingBorderTest(element, coors, elementsMap, zoom)
+      ) {
+        return element;
+      }
+    }
+
+    return null;
+  });

 const getBindingStrategyForDraggingArrowEndpoints = (
  selectedElement: NonDeleted<ExcalidrawLinearElement>,
@@ -268,7 +255,7 @@ const getBindingStrategyForDraggingArrowEndpoints = (
  const endDragged = draggingPoints.findIndex((i) => i === endIdx) > -1;
  const start = startDragged
    ? isBindingEnabled
-      ? getElligibleElementForBindingElement(
+      ? getEligibleElementForBindingElement(
          selectedElement,
          "start",
          elementsMap,
@@ -279,7 +266,7 @@ const getBindingStrategyForDraggingArrowEndpoints = (
    : "keep";
  const end = endDragged
    ? isBindingEnabled
-      ? getElligibleElementForBindingElement(
+      ? getEligibleElementForBindingElement(
          selectedElement,
          "end",
          elementsMap,
@@ -311,7 +298,7 @@ const getBindingStrategyForDraggingArrowOrJoints = (
  );
  const start = startIsClose
    ? isBindingEnabled
-      ? getElligibleElementForBindingElement(
+      ? getEligibleElementForBindingElement(
          selectedElement,
          "start",
          elementsMap,
@@ -322,7 +309,7 @@ const getBindingStrategyForDraggingArrowOrJoints = (
    : null;
  const end = endIsClose
    ? isBindingEnabled
-      ? getElligibleElementForBindingElement(
+      ? getEligibleElementForBindingElement(
          selectedElement,
          "end",
          elementsMap,
@@ -441,22 +428,13 @@ export const maybeBindLinearElement = (
 const normalizePointBinding = (
  binding: { focus: number; gap: number },
  hoveredElement: ExcalidrawBindableElement,
-) => {
-  let gap = binding.gap;
-  const maxGap = maxBindingGap(
-    hoveredElement,
-    hoveredElement.width,
-    hoveredElement.height,
-  );
-
-  if (gap > maxGap) {
-    gap = BINDING_HIGHLIGHT_THICKNESS + BINDING_HIGHLIGHT_OFFSET;
-  }
-  return {
-    ...binding,
-    gap,
-  };
-};
+) => ({
+  ...binding,
+  gap: Math.min(
+    binding.gap,
+    maxBindingGap(hoveredElement, hoveredElement.width, hoveredElement.height),
+  ),
+});

 export const bindLinearElement = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
@@ -488,6 +466,7 @@ export const bindLinearElement = (
        linearElement,
        hoveredElement,
        startOrEnd,
+        scene.getNonDeletedElementsMap(),
      ),
    };
  }
@@ -703,8 +682,13 @@ const calculateFocusAndGap = (
  );

  return {
-    focus: determineFocusDistance(hoveredElement, adjacentPoint, edgePoint),
-    gap: Math.max(1, distanceToBindableElement(hoveredElement, edgePoint)),
+    focus: determineFocusDistance(
+      hoveredElement,
+      elementsMap,
+      adjacentPoint,
+      edgePoint,
+    ),
+    gap: Math.max(1, distanceToElement(hoveredElement, elementsMap, edgePoint)),
  };
 };

@@ -874,6 +858,7 @@ export const getHeadingForElbowArrowSnap = (
  bindableElement: ExcalidrawBindableElement | undefined | null,
  aabb: Bounds | undefined | null,
  origPoint: GlobalPoint,
+  elementsMap: ElementsMap,
  zoom?: AppState["zoom"],
 ): Heading => {
  const otherPointHeading = vectorToHeading(vectorFromPoint(otherPoint, p));
@@ -882,11 +867,16 @@ export const getHeadingForElbowArrowSnap = (
    return otherPointHeading;
  }

-  const distance = getDistanceForBinding(origPoint, bindableElement, zoom);
+  const distance = getDistanceForBinding(
+    origPoint,
+    bindableElement,
+    elementsMap,
+    zoom,
+  );

  if (!distance) {
    return vectorToHeading(
-      vectorFromPoint(p, elementCenterPoint(bindableElement)),
+      vectorFromPoint(p, elementCenterPoint(bindableElement, elementsMap)),
    );
  }

@@ -896,9 +886,10 @@ export const getHeadingForElbowArrowSnap = (
 const getDistanceForBinding = (
  point: Readonly<GlobalPoint>,
  bindableElement: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
  zoom?: AppState["zoom"],
 ) => {
-  const distance = distanceToBindableElement(bindableElement, point);
+  const distance = distanceToElement(bindableElement, elementsMap, point);
  const bindDistance = maxBindingGap(
    bindableElement,
    bindableElement.width,
@@ -913,12 +904,13 @@ export const bindPointToSnapToElementOutline = (
  arrow: ExcalidrawElbowArrowElement,
  bindableElement: ExcalidrawBindableElement,
  startOrEnd: "start" | "end",
+  elementsMap: ElementsMap,
 ): GlobalPoint => {
  if (isDevEnv() || isTestEnv()) {
    invariant(arrow.points.length > 1, "Arrow should have at least 2 points");
  }

-  const aabb = aabbForElement(bindableElement);
+  const aabb = aabbForElement(bindableElement, elementsMap);
  const localP =
    arrow.points[startOrEnd === "start" ? 0 : arrow.points.length - 1];
  const globalP = pointFrom<GlobalPoint>(
@@ -926,7 +918,7 @@ export const bindPointToSnapToElementOutline = (
    arrow.y + localP[1],
  );
  const edgePoint = isRectanguloidElement(bindableElement)
-    ? avoidRectangularCorner(bindableElement, globalP)
+    ? avoidRectangularCorner(bindableElement, elementsMap, globalP)
    : globalP;
  const elbowed = isElbowArrow(arrow);
  const center = getCenterForBounds(aabb);
@@ -945,26 +937,31 @@ export const bindPointToSnapToElementOutline = (
    const isHorizontal = headingIsHorizontal(
      headingForPointFromElement(bindableElement, aabb, globalP),
    );
+    const snapPoint = snapToMid(bindableElement, elementsMap, edgePoint);
    const otherPoint = pointFrom<GlobalPoint>(
-      isHorizontal ? center[0] : edgePoint[0],
-      !isHorizontal ? center[1] : edgePoint[1],
+      isHorizontal ? center[0] : snapPoint[0],
+      !isHorizontal ? center[1] : snapPoint[1],
+    );
+    const intersector = lineSegment(
+      otherPoint,
+      pointFromVector(
+        vectorScale(
+          vectorNormalize(vectorFromPoint(snapPoint, otherPoint)),
+          Math.max(bindableElement.width, bindableElement.height) * 2,
+        ),
+        otherPoint,
+      ),
    );
    intersection = intersectElementWithLineSegment(
      bindableElement,
-      lineSegment(
-        otherPoint,
-        pointFromVector(
-          vectorScale(
-            vectorNormalize(vectorFromPoint(edgePoint, otherPoint)),
-            Math.max(bindableElement.width, bindableElement.height) * 2,
-          ),
-          otherPoint,
-        ),
-      ),
-    )[0];
+      elementsMap,
+      intersector,
+      FIXED_BINDING_DISTANCE,
+    ).sort(pointDistanceSq)[0];
  } else {
    intersection = intersectElementWithLineSegment(
      bindableElement,
+      elementsMap,
      lineSegment(
        adjacentPoint,
        pointFromVector(
@@ -991,31 +988,15 @@ export const bindPointToSnapToElementOutline = (
    return edgePoint;
  }

-  if (elbowed) {
-    const scalar =
-      pointDistanceSq(edgePoint, center) -
-        pointDistanceSq(intersection, center) >
-      0
-        ? FIXED_BINDING_DISTANCE
-        : -FIXED_BINDING_DISTANCE;
-
-    return pointFromVector(
-      vectorScale(
-        vectorNormalize(vectorFromPoint(edgePoint, intersection)),
-        scalar,
-      ),
-      intersection,
-    );
-  }
-
-  return edgePoint;
+  return elbowed ? intersection : edgePoint;
 };

 export const avoidRectangularCorner = (
  element: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
  p: GlobalPoint,
 ): GlobalPoint => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);
  const nonRotatedPoint = pointRotateRads(p, center, -element.angle as Radians);

  if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {
@@ -1108,35 +1089,34 @@ export const avoidRectangularCorner = (

 export const snapToMid = (
  element: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
  p: GlobalPoint,
  tolerance: number = 0.05,
 ): GlobalPoint => {
  const { x, y, width, height, angle } = element;
-
-  const center = elementCenterPoint(element, -0.1, -0.1);
-
+  const center = elementCenterPoint(element, elementsMap, -0.1, -0.1);
  const nonRotated = pointRotateRads(p, center, -angle as Radians);

  // snap-to-center point is adaptive to element size, but we don't want to go
  // above and below certain px distance
-  const verticalThrehsold = clamp(tolerance * height, 5, 80);
-  const horizontalThrehsold = clamp(tolerance * width, 5, 80);
+  const verticalThreshold = clamp(tolerance * height, 5, 80);
+  const horizontalThreshold = clamp(tolerance * width, 5, 80);

  if (
    nonRotated[0] <= x + width / 2 &&
-    nonRotated[1] > center[1] - verticalThrehsold &&
-    nonRotated[1] < center[1] + verticalThrehsold
+    nonRotated[1] > center[1] - verticalThreshold &&
+    nonRotated[1] < center[1] + verticalThreshold
  ) {
    // LEFT
-    return pointRotateRads(
+    return pointRotateRads<GlobalPoint>(
      pointFrom(x - FIXED_BINDING_DISTANCE, center[1]),
      center,
      angle,
    );
  } else if (
    nonRotated[1] <= y + height / 2 &&
-    nonRotated[0] > center[0] - horizontalThrehsold &&
-    nonRotated[0] < center[0] + horizontalThrehsold
+    nonRotated[0] > center[0] - horizontalThreshold &&
+    nonRotated[0] < center[0] + horizontalThreshold
  ) {
    // TOP
    return pointRotateRads(
@@ -1146,8 +1126,8 @@ export const snapToMid = (
    );
  } else if (
    nonRotated[0] >= x + width / 2 &&
-    nonRotated[1] > center[1] - verticalThrehsold &&
-    nonRotated[1] < center[1] + verticalThrehsold
+    nonRotated[1] > center[1] - verticalThreshold &&
+    nonRotated[1] < center[1] + verticalThreshold
  ) {
    // RIGHT
    return pointRotateRads(
@@ -1157,8 +1137,8 @@ export const snapToMid = (
    );
  } else if (
    nonRotated[1] >= y + height / 2 &&
-    nonRotated[0] > center[0] - horizontalThrehsold &&
-    nonRotated[0] < center[0] + horizontalThrehsold
+    nonRotated[0] > center[0] - horizontalThreshold &&
+    nonRotated[0] < center[0] + horizontalThreshold
  ) {
    // DOWN
    return pointRotateRads(
@@ -1167,7 +1147,7 @@ export const snapToMid = (
      angle,
    );
  } else if (element.type === "diamond") {
-    const distance = FIXED_BINDING_DISTANCE - 1;
+    const distance = FIXED_BINDING_DISTANCE;
    const topLeft = pointFrom<GlobalPoint>(
      x + width / 4 - distance,
      y + height / 4 - distance,
@@ -1184,27 +1164,28 @@ export const snapToMid = (
      x + (3 * width) / 4 + distance,
      y + (3 * height) / 4 + distance,
    );
+
    if (
      pointDistance(topLeft, nonRotated) <
-      Math.max(horizontalThrehsold, verticalThrehsold)
+      Math.max(horizontalThreshold, verticalThreshold)
    ) {
      return pointRotateRads(topLeft, center, angle);
    }
    if (
      pointDistance(topRight, nonRotated) <
-      Math.max(horizontalThrehsold, verticalThrehsold)
+      Math.max(horizontalThreshold, verticalThreshold)
    ) {
      return pointRotateRads(topRight, center, angle);
    }
    if (
      pointDistance(bottomLeft, nonRotated) <
-      Math.max(horizontalThrehsold, verticalThrehsold)
+      Math.max(horizontalThreshold, verticalThreshold)
    ) {
      return pointRotateRads(bottomLeft, center, angle);
    }
    if (
      pointDistance(bottomRight, nonRotated) <
-      Math.max(horizontalThrehsold, verticalThrehsold)
+      Math.max(horizontalThreshold, verticalThreshold)
    ) {
      return pointRotateRads(bottomRight, center, angle);
    }
@@ -1239,8 +1220,9 @@ const updateBoundPoint = (
        linearElement,
        bindableElement,
        startOrEnd === "startBinding" ? "start" : "end",
+        elementsMap,
      ).fixedPoint;
-    const globalMidPoint = elementCenterPoint(bindableElement);
+    const globalMidPoint = elementCenterPoint(bindableElement, elementsMap);
    const global = pointFrom<GlobalPoint>(
      bindableElement.x + fixedPoint[0] * bindableElement.width,
      bindableElement.y + fixedPoint[1] * bindableElement.height,
@@ -1266,6 +1248,7 @@ const updateBoundPoint = (
  );
  const focusPointAbsolute = determineFocusPoint(
    bindableElement,
+    elementsMap,
    binding.focus,
    adjacentPoint,
  );
@@ -1284,7 +1267,7 @@ const updateBoundPoint = (
        elementsMap,
      );

-    const center = elementCenterPoint(bindableElement);
+    const center = elementCenterPoint(bindableElement, elementsMap);
    const interceptorLength =
      pointDistance(adjacentPoint, edgePointAbsolute) +
      pointDistance(adjacentPoint, center) +
@@ -1292,6 +1275,7 @@ const updateBoundPoint = (
    const intersections = [
      ...intersectElementWithLineSegment(
        bindableElement,
+        elementsMap,
        lineSegment<GlobalPoint>(
          adjacentPoint,
          pointFromVector(
@@ -1342,6 +1326,7 @@ export const calculateFixedPointForElbowArrowBinding = (
  linearElement: NonDeleted<ExcalidrawElbowArrowElement>,
  hoveredElement: ExcalidrawBindableElement,
  startOrEnd: "start" | "end",
+  elementsMap: ElementsMap,
 ): { fixedPoint: FixedPoint } => {
  const bounds = [
    hoveredElement.x,
@@ -1353,6 +1338,7 @@ export const calculateFixedPointForElbowArrowBinding = (
    linearElement,
    hoveredElement,
    startOrEnd,
+    elementsMap,
  );
  const globalMidPoint = pointFrom(
    bounds[0] + (bounds[2] - bounds[0]) / 2,
@@ -1396,7 +1382,7 @@ const maybeCalculateNewGapWhenScaling = (
  return { ...currentBinding, gap: newGap };
 };

-const getElligibleElementForBindingElement = (
+const getEligibleElementForBindingElement = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
  startOrEnd: "start" | "end",
  elementsMap: NonDeletedSceneElementsMap,
@@ -1548,14 +1534,38 @@ export const bindingBorderTest = (
  zoom?: AppState["zoom"],
  fullShape?: boolean,
 ): boolean => {
+  const p = pointFrom<GlobalPoint>(x, y);
  const threshold = maxBindingGap(element, element.width, element.height, zoom);
+  const shouldTestInside =
+    // disable fullshape snapping for frame elements so we
+    // can bind to frame children
+    (fullShape || !isBindingFallthroughEnabled(element)) &&
+    !isFrameLikeElement(element);

-  const shape = getElementShape(element, elementsMap);
-  return (
-    isPointOnShape(pointFrom(x, y), shape, threshold) ||
-    (fullShape === true &&
-      pointInsideBounds(pointFrom(x, y), aabbForElement(element)))
+  // PERF: Run a cheap test to see if the binding element
+  // is even close to the element
+  const bounds = [
+    x - threshold,
+    y - threshold,
+    x + threshold,
+    y + threshold,
+  ] as Bounds;
+  const elementBounds = getElementBounds(element, elementsMap);
+  if (!doBoundsIntersect(bounds, elementBounds)) {
+    return false;
+  }
+
+  // Do the intersection test against the element since it's close enough
+  const intersections = intersectElementWithLineSegment(
+    element,
+    elementsMap,
+    lineSegment(elementCenterPoint(element, elementsMap), p),
  );
+  const distance = distanceToElement(element, elementsMap, p);
+
+  return shouldTestInside
+    ? intersections.length === 0 || distance <= threshold
+    : intersections.length > 0 && distance <= threshold;
 };

 export const maxBindingGap = (
@@ -1575,7 +1585,7 @@ export const maxBindingGap = (
    // bigger bindable boundary for bigger elements
    Math.min(0.25 * smallerDimension, 32),
    // keep in sync with the zoomed highlight
-    BINDING_HIGHLIGHT_THICKNESS / zoomValue + BINDING_HIGHLIGHT_OFFSET,
+    BINDING_HIGHLIGHT_THICKNESS / zoomValue + FIXED_BINDING_DISTANCE,
  );
 };

@@ -1586,12 +1596,13 @@ export const maxBindingGap = (
 // of the element.
 const determineFocusDistance = (
  element: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
  // Point on the line, in absolute coordinates
  a: GlobalPoint,
  // Another point on the line, in absolute coordinates (closer to element)
  b: GlobalPoint,
 ): number => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);

  if (pointsEqual(a, b)) {
    return 0;
@@ -1716,12 +1727,13 @@ const determineFocusDistance = (

 const determineFocusPoint = (
  element: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
  // The oriented, relative distance from the center of `element` of the
  // returned focusPoint
  focus: number,
  adjacentPoint: GlobalPoint,
 ): GlobalPoint => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);

  if (focus === 0) {
    return center;
@@ -2144,6 +2156,7 @@ export class BindableElement {
 export const getGlobalFixedPointForBindableElement = (
  fixedPointRatio: [number, number],
  element: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
 ): GlobalPoint => {
  const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);

@@ -2152,7 +2165,7 @@ export const getGlobalFixedPointForBindableElement = (
      element.x + element.width * fixedX,
      element.y + element.height * fixedY,
    ),
-    elementCenterPoint(element),
+    elementCenterPoint(element, elementsMap),
    element.angle,
  );
 };
@@ -2176,6 +2189,7 @@ export const getGlobalFixedPoints = (
      ? getGlobalFixedPointForBindableElement(
          arrow.startBinding.fixedPoint,
          startElement as ExcalidrawBindableElement,
+          elementsMap,
        )
      : pointFrom<GlobalPoint>(
          arrow.x + arrow.points[0][0],
@@ -2186,6 +2200,7 @@ export const getGlobalFixedPoints = (
      ? getGlobalFixedPointForBindableElement(
          arrow.endBinding.fixedPoint,
          endElement as ExcalidrawBindableElement,
+          elementsMap,
        )
      : pointFrom<GlobalPoint>(
          arrow.x + arrow.points[arrow.points.length - 1][0],
--- a/packages/element/src/bounds.ts
+++ b/packages/element/src/bounds.ts
@@ -102,9 +102,23 @@ export class ElementBounds {
      version: ExcalidrawElement["version"];
    }
  >();
+  private static nonRotatedBoundsCache = new WeakMap<
+    ExcalidrawElement,
+    {
+      bounds: Bounds;
+      version: ExcalidrawElement["version"];
+    }
+  >();

-  static getBounds(element: ExcalidrawElement, elementsMap: ElementsMap) {
-    const cachedBounds = ElementBounds.boundsCache.get(element);
+  static getBounds(
+    element: ExcalidrawElement,
+    elementsMap: ElementsMap,
+    nonRotated: boolean = false,
+  ) {
+    const cachedBounds =
+      nonRotated && element.angle !== 0
+        ? ElementBounds.nonRotatedBoundsCache.get(element)
+        : ElementBounds.boundsCache.get(element);

    if (
      cachedBounds?.version &&
@@ -115,6 +129,23 @@ export class ElementBounds {
    ) {
      return cachedBounds.bounds;
    }
+
+    if (nonRotated && element.angle !== 0) {
+      const nonRotatedBounds = ElementBounds.calculateBounds(
+        {
+          ...element,
+          angle: 0 as Radians,
+        },
+        elementsMap,
+      );
+      ElementBounds.nonRotatedBoundsCache.set(element, {
+        version: element.version,
+        bounds: nonRotatedBounds,
+      });
+
+      return nonRotatedBounds;
+    }
+
    const bounds = ElementBounds.calculateBounds(element, elementsMap);

    ElementBounds.boundsCache.set(element, {
@@ -939,8 +970,9 @@ const getLinearElementRotatedBounds = (
 export const getElementBounds = (
  element: ExcalidrawElement,
  elementsMap: ElementsMap,
+  nonRotated: boolean = false,
 ): Bounds => {
-  return ElementBounds.getBounds(element, elementsMap);
+  return ElementBounds.getBounds(element, elementsMap, nonRotated);
 };

 export const getCommonBounds = (
--- a/packages/element/src/collision.ts
+++ b/packages/element/src/collision.ts
@@ -2,51 +2,60 @@ import { isTransparent, elementCenterPoint } from "@excalidraw/common";
 import {
  curveIntersectLineSegment,
  isPointWithinBounds,
-  line,
  lineSegment,
  lineSegmentIntersectionPoints,
  pointFrom,
+  pointFromVector,
  pointRotateRads,
  pointsEqual,
+  vectorFromPoint,
+  vectorNormalize,
+  vectorScale,
 } from "@excalidraw/math";

 import {
  ellipse,
-  ellipseLineIntersectionPoints,
+  ellipseSegmentInterceptPoints,
 } from "@excalidraw/math/ellipse";

-import { isPointInShape, isPointOnShape } from "@excalidraw/utils/collision";
-import { type GeometricShape, getPolygonShape } from "@excalidraw/utils/shape";
-
-import type {
-  GlobalPoint,
-  LineSegment,
-  LocalPoint,
-  Polygon,
-  Radians,
-} from "@excalidraw/math";
+import type { GlobalPoint, LineSegment, Radians } from "@excalidraw/math";

 import type { FrameNameBounds } from "@excalidraw/excalidraw/types";

-import { getBoundTextShape, isPathALoop } from "./shapes";
-import { getElementBounds } from "./bounds";
+import { isPathALoop } from "./shapes";
+import {
+  type Bounds,
+  doBoundsIntersect,
+  getCenterForBounds,
+  getElementBounds,
+} from "./bounds";
 import {
  hasBoundTextElement,
+  isFreeDrawElement,
  isIframeLikeElement,
  isImageElement,
+  isLinearElement,
  isTextElement,
 } from "./typeChecks";
 import {
  deconstructDiamondElement,
+  deconstructLinearOrFreeDrawElement,
  deconstructRectanguloidElement,
 } from "./utils";

+import { getBoundTextElement } from "./textElement";
+
+import { LinearElementEditor } from "./linearElementEditor";
+
+import { distanceToElement } from "./distance";
+
 import type {
  ElementsMap,
  ExcalidrawDiamondElement,
  ExcalidrawElement,
  ExcalidrawEllipseElement,
-  ExcalidrawRectangleElement,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawLinearElement,
  ExcalidrawRectanguloidElement,
 } from "./types";

@@ -72,45 +81,64 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
  return isDraggableFromInside || isImageElement(element);
 };

-export type HitTestArgs<Point extends GlobalPoint | LocalPoint> = {
-  x: number;
-  y: number;
+export type HitTestArgs = {
+  point: GlobalPoint;
  element: ExcalidrawElement;
-  shape: GeometricShape<Point>;
-  threshold?: number;
+  threshold: number;
+  elementsMap: ElementsMap;
  frameNameBound?: FrameNameBounds | null;
 };

-export const hitElementItself = <Point extends GlobalPoint | LocalPoint>({
-  x,
-  y,
+export const hitElementItself = ({
+  point,
  element,
-  shape,
-  threshold = 10,
+  threshold,
+  elementsMap,
  frameNameBound = null,
-}: HitTestArgs<Point>) => {
-  let hit = shouldTestInside(element)
-    ? // Since `inShape` tests STRICTLY againt the insides of a shape
-      // we would need `onShape` as well to include the "borders"
-      isPointInShape(pointFrom(x, y), shape) ||
-      isPointOnShape(pointFrom(x, y), shape, threshold)
-    : isPointOnShape(pointFrom(x, y), shape, threshold);
+}: HitTestArgs) => {
+  // Hit test against a frame's name
+  const hitFrameName = frameNameBound
+    ? isPointWithinBounds(
+        pointFrom(frameNameBound.x - threshold, frameNameBound.y - threshold),
+        point,
+        pointFrom(
+          frameNameBound.x + frameNameBound.width + threshold,
+          frameNameBound.y + frameNameBound.height + threshold,
+        ),
+      )
+    : false;

-  // hit test against a frame's name
-  if (!hit && frameNameBound) {
-    hit = isPointInShape(pointFrom(x, y), {
-      type: "polygon",
-      data: getPolygonShape(frameNameBound as ExcalidrawRectangleElement)
-        .data as Polygon<Point>,
-    });
+  // Hit test against the extended, rotated bounding box of the element first
+  const bounds = getElementBounds(element, elementsMap, true);
+  const hitBounds = isPointWithinBounds(
+    pointFrom(bounds[0] - threshold, bounds[1] - threshold),
+    pointRotateRads(
+      point,
+      getCenterForBounds(bounds),
+      -element.angle as Radians,
+    ),
+    pointFrom(bounds[2] + threshold, bounds[3] + threshold),
+  );
+
+  // PERF: Bail out early if the point is not even in the
+  // rotated bounding box or not hitting the frame name (saves 99%)
+  if (!hitBounds && !hitFrameName) {
+    return false;
  }

-  return hit;
+  // Do the precise (and relatively costly) hit test
+  const hitElement = shouldTestInside(element)
+    ? // Since `inShape` tests STRICTLY againt the insides of a shape
+      // we would need `onShape` as well to include the "borders"
+      isPointInElement(point, element, elementsMap) ||
+      isPointOnElementOutline(point, element, elementsMap, threshold)
+    : isPointOnElementOutline(point, element, elementsMap, threshold);
+
+  return hitElement || hitFrameName;
 };

 export const hitElementBoundingBox = (
-  x: number,
-  y: number,
+  point: GlobalPoint,
  element: ExcalidrawElement,
  elementsMap: ElementsMap,
  tolerance = 0,
@@ -120,37 +148,42 @@ export const hitElementBoundingBox = (
  y1 -= tolerance;
  x2 += tolerance;
  y2 += tolerance;
-  return isPointWithinBounds(
-    pointFrom(x1, y1),
-    pointFrom(x, y),
-    pointFrom(x2, y2),
-  );
+  return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2));
 };

-export const hitElementBoundingBoxOnly = <
-  Point extends GlobalPoint | LocalPoint,
->(
-  hitArgs: HitTestArgs<Point>,
+export const hitElementBoundingBoxOnly = (
+  hitArgs: HitTestArgs,
  elementsMap: ElementsMap,
-) => {
-  return (
-    !hitElementItself(hitArgs) &&
-    // bound text is considered part of the element (even if it's outside the bounding box)
-    !hitElementBoundText(
-      hitArgs.x,
-      hitArgs.y,
-      getBoundTextShape(hitArgs.element, elementsMap),
-    ) &&
-    hitElementBoundingBox(hitArgs.x, hitArgs.y, hitArgs.element, elementsMap)
-  );
-};
+) =>
+  !hitElementItself(hitArgs) &&
+  // bound text is considered part of the element (even if it's outside the bounding box)
+  !hitElementBoundText(hitArgs.point, hitArgs.element, elementsMap) &&
+  hitElementBoundingBox(hitArgs.point, hitArgs.element, elementsMap);

-export const hitElementBoundText = <Point extends GlobalPoint | LocalPoint>(
-  x: number,
-  y: number,
-  textShape: GeometricShape<Point> | null,
+export const hitElementBoundText = (
+  point: GlobalPoint,
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
 ): boolean => {
-  return !!textShape && isPointInShape(pointFrom(x, y), textShape);
+  const boundTextElementCandidate = getBoundTextElement(element, elementsMap);
+
+  if (!boundTextElementCandidate) {
+    return false;
+  }
+  const boundTextElement = isLinearElement(element)
+    ? {
+        ...boundTextElementCandidate,
+        // arrow's bound text accurate position is not stored in the element's property
+        // but rather calculated and returned from the following static method
+        ...LinearElementEditor.getBoundTextElementPosition(
+          element,
+          boundTextElementCandidate,
+          elementsMap,
+        ),
+      }
+    : boundTextElementCandidate;
+
+  return isPointInElement(point, boundTextElement, elementsMap);
 };

 /**
@@ -163,9 +196,26 @@ export const hitElementBoundText = <Point extends GlobalPoint | LocalPoint>(
 */
 export const intersectElementWithLineSegment = (
  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
  line: LineSegment<GlobalPoint>,
  offset: number = 0,
+  onlyFirst = false,
 ): GlobalPoint[] => {
+  // First check if the line intersects the element's axis-aligned bounding box
+  // as it is much faster than checking intersection against the element's shape
+  const intersectorBounds = [
+    Math.min(line[0][0] - offset, line[1][0] - offset),
+    Math.min(line[0][1] - offset, line[1][1] - offset),
+    Math.max(line[0][0] + offset, line[1][0] + offset),
+    Math.max(line[0][1] + offset, line[1][1] + offset),
+  ] as Bounds;
+  const elementBounds = getElementBounds(element, elementsMap);
+
+  if (!doBoundsIntersect(intersectorBounds, elementBounds)) {
+    return [];
+  }
+
+  // Do the actual intersection test against the element's shape
  switch (element.type) {
    case "rectangle":
    case "image":
@@ -173,23 +223,88 @@ export const intersectElementWithLineSegment = (
    case "iframe":
    case "embeddable":
    case "frame":
+    case "selection":
    case "magicframe":
-      return intersectRectanguloidWithLineSegment(element, line, offset);
+      return intersectRectanguloidWithLineSegment(
+        element,
+        elementsMap,
+        line,
+        offset,
+        onlyFirst,
+      );
    case "diamond":
-      return intersectDiamondWithLineSegment(element, line, offset);
+      return intersectDiamondWithLineSegment(
+        element,
+        elementsMap,
+        line,
+        offset,
+        onlyFirst,
+      );
    case "ellipse":
-      return intersectEllipseWithLineSegment(element, line, offset);
-    default:
-      throw new Error(`Unimplemented element type '${element.type}'`);
+      return intersectEllipseWithLineSegment(
+        element,
+        elementsMap,
+        line,
+        offset,
+      );
+    case "line":
+    case "freedraw":
+    case "arrow":
+      return intersectLinearOrFreeDrawWithLineSegment(
+        element,
+        elementsMap,
+        line,
+        onlyFirst,
+      );
  }
 };

+const intersectLinearOrFreeDrawWithLineSegment = (
+  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
+  segment: LineSegment<GlobalPoint>,
+  onlyFirst = false,
+): GlobalPoint[] => {
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap,
+  );
+  const intersections = [];
+
+  for (const l of lines) {
+    const intersection = lineSegmentIntersectionPoints(l, segment);
+    if (intersection) {
+      intersections.push(intersection);
+
+      if (onlyFirst) {
+        return intersections;
+      }
+    }
+  }
+
+  for (const c of curves) {
+    const hits = curveIntersectLineSegment(c, segment);
+
+    if (hits.length > 0) {
+      intersections.push(...hits);
+
+      if (onlyFirst) {
+        return intersections;
+      }
+    }
+  }
+
+  return intersections;
+};
+
 const intersectRectanguloidWithLineSegment = (
  element: ExcalidrawRectanguloidElement,
+  elementsMap: ElementsMap,
  l: LineSegment<GlobalPoint>,
  offset: number = 0,
+  onlyFirst = false,
 ): GlobalPoint[] => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);
  // To emulate a rotated rectangle we rotate the point in the inverse angle
  // instead. It's all the same distance-wise.
  const rotatedA = pointRotateRads<GlobalPoint>(
@@ -206,34 +321,37 @@ const intersectRectanguloidWithLineSegment = (
  // Get the element's building components we can test against
  const [sides, corners] = deconstructRectanguloidElement(element, offset);

-  return (
-    // Test intersection against the sides, keep only the valid
-    // intersection points and rotate them back to scene space
-    sides
-      .map((s) =>
-        lineSegmentIntersectionPoints(
-          lineSegment<GlobalPoint>(rotatedA, rotatedB),
-          s,
-        ),
-      )
-      .filter((x) => x != null)
-      .map((j) => pointRotateRads<GlobalPoint>(j!, center, element.angle))
-      // Test intersection against the corners which are cubic bezier curves,
-      // keep only the valid intersection points and rotate them back to scene
-      // space
-      .concat(
-        corners
-          .flatMap((t) =>
-            curveIntersectLineSegment(t, lineSegment(rotatedA, rotatedB)),
-          )
-          .filter((i) => i != null)
-          .map((j) => pointRotateRads(j, center, element.angle)),
-      )
-      // Remove duplicates
-      .filter(
-        (p, idx, points) => points.findIndex((d) => pointsEqual(p, d)) === idx,
-      )
-  );
+  const intersections: GlobalPoint[] = [];
+
+  for (const s of sides) {
+    const intersection = lineSegmentIntersectionPoints(
+      lineSegment(rotatedA, rotatedB),
+      s,
+    );
+    if (intersection) {
+      intersections.push(pointRotateRads(intersection, center, element.angle));
+
+      if (onlyFirst) {
+        return intersections;
+      }
+    }
+  }
+
+  for (const t of corners) {
+    const hits = curveIntersectLineSegment(t, lineSegment(rotatedA, rotatedB));
+
+    if (hits.length > 0) {
+      for (const j of hits) {
+        intersections.push(pointRotateRads(j, center, element.angle));
+      }
+
+      if (onlyFirst) {
+        return intersections;
+      }
+    }
+  }
+
+  return intersections;
 };

 /**
@@ -245,43 +363,51 @@ const intersectRectanguloidWithLineSegment = (
 */
 const intersectDiamondWithLineSegment = (
  element: ExcalidrawDiamondElement,
+  elementsMap: ElementsMap,
  l: LineSegment<GlobalPoint>,
  offset: number = 0,
+  onlyFirst = false,
 ): GlobalPoint[] => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);

  // Rotate the point to the inverse direction to simulate the rotated diamond
  // points. It's all the same distance-wise.
  const rotatedA = pointRotateRads(l[0], center, -element.angle as Radians);
  const rotatedB = pointRotateRads(l[1], center, -element.angle as Radians);

-  const [sides, curves] = deconstructDiamondElement(element, offset);
+  const [sides, corners] = deconstructDiamondElement(element, offset);

-  return (
-    sides
-      .map((s) =>
-        lineSegmentIntersectionPoints(
-          lineSegment<GlobalPoint>(rotatedA, rotatedB),
-          s,
-        ),
-      )
-      .filter((p): p is GlobalPoint => p != null)
-      // Rotate back intersection points
-      .map((p) => pointRotateRads<GlobalPoint>(p!, center, element.angle))
-      .concat(
-        curves
-          .flatMap((p) =>
-            curveIntersectLineSegment(p, lineSegment(rotatedA, rotatedB)),
-          )
-          .filter((p) => p != null)
-          // Rotate back intersection points
-          .map((p) => pointRotateRads(p, center, element.angle)),
-      )
-      // Remove duplicates
-      .filter(
-        (p, idx, points) => points.findIndex((d) => pointsEqual(p, d)) === idx,
-      )
-  );
+  const intersections: GlobalPoint[] = [];
+
+  for (const s of sides) {
+    const intersection = lineSegmentIntersectionPoints(
+      lineSegment(rotatedA, rotatedB),
+      s,
+    );
+    if (intersection) {
+      intersections.push(pointRotateRads(intersection, center, element.angle));
+
+      if (onlyFirst) {
+        return intersections;
+      }
+    }
+  }
+
+  for (const t of corners) {
+    const hits = curveIntersectLineSegment(t, lineSegment(rotatedA, rotatedB));
+
+    if (hits.length > 0) {
+      for (const j of hits) {
+        intersections.push(pointRotateRads(j, center, element.angle));
+      }
+
+      if (onlyFirst) {
+        return intersections;
+      }
+    }
+  }
+
+  return intersections;
 };

 /**
@@ -293,16 +419,76 @@ const intersectDiamondWithLineSegment = (
 */
 const intersectEllipseWithLineSegment = (
  element: ExcalidrawEllipseElement,
+  elementsMap: ElementsMap,
  l: LineSegment<GlobalPoint>,
  offset: number = 0,
 ): GlobalPoint[] => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);

  const rotatedA = pointRotateRads(l[0], center, -element.angle as Radians);
  const rotatedB = pointRotateRads(l[1], center, -element.angle as Radians);

-  return ellipseLineIntersectionPoints(
+  return ellipseSegmentInterceptPoints(
    ellipse(center, element.width / 2 + offset, element.height / 2 + offset),
-    line(rotatedA, rotatedB),
+    lineSegment(rotatedA, rotatedB),
  ).map((p) => pointRotateRads(p, center, element.angle));
 };
+
+/**
+ * Check if the given point is considered on the given shape's border
+ *
+ * @param point
+ * @param element
+ * @param tolerance
+ * @returns
+ */
+const isPointOnElementOutline = (
+  point: GlobalPoint,
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+  tolerance = 1,
+) => distanceToElement(element, elementsMap, point) <= tolerance;
+
+/**
+ * Check if the given point is considered inside the element's border
+ *
+ * @param point
+ * @param element
+ * @returns
+ */
+export const isPointInElement = (
+  point: GlobalPoint,
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+) => {
+  if (
+    (isLinearElement(element) || isFreeDrawElement(element)) &&
+    !isPathALoop(element.points)
+  ) {
+    // There isn't any "inside" for a non-looping path
+    return false;
+  }
+
+  const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
+
+  if (!isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2))) {
+    return false;
+  }
+
+  const center = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
+  const otherPoint = pointFromVector(
+    vectorScale(
+      vectorNormalize(vectorFromPoint(point, center, 0.1)),
+      Math.max(element.width, element.height) * 2,
+    ),
+    center,
+  );
+  const intersector = lineSegment(point, otherPoint);
+  const intersections = intersectElementWithLineSegment(
+    element,
+    elementsMap,
+    intersector,
+  ).filter((p, pos, arr) => arr.findIndex((q) => pointsEqual(q, p)) === pos);
+
+  return intersections.length % 2 === 1;
+};
--- a/packages/element/src/cropElement.ts
+++ b/packages/element/src/cropElement.ts
@@ -34,6 +34,7 @@ export const MINIMAL_CROP_SIZE = 10;

 export const cropElement = (
  element: ExcalidrawImageElement,
+  elementsMap: ElementsMap,
  transformHandle: TransformHandleType,
  naturalWidth: number,
  naturalHeight: number,
@@ -63,7 +64,7 @@ export const cropElement = (

  const rotatedPointer = pointRotateRads(
    pointFrom(pointerX, pointerY),
-    elementCenterPoint(element),
+    elementCenterPoint(element, elementsMap),
    -element.angle as Radians,
  );

--- a/packages/element/src/distance.ts
+++ b/packages/element/src/distance.ts
@@ -12,21 +12,27 @@ import type { GlobalPoint, Radians } from "@excalidraw/math";

 import {
  deconstructDiamondElement,
+  deconstructLinearOrFreeDrawElement,
  deconstructRectanguloidElement,
 } from "./utils";

 import type {
-  ExcalidrawBindableElement,
+  ElementsMap,
  ExcalidrawDiamondElement,
+  ExcalidrawElement,
  ExcalidrawEllipseElement,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawLinearElement,
  ExcalidrawRectanguloidElement,
 } from "./types";

-export const distanceToBindableElement = (
-  element: ExcalidrawBindableElement,
+export const distanceToElement = (
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
  p: GlobalPoint,
 ): number => {
  switch (element.type) {
+    case "selection":
    case "rectangle":
    case "image":
    case "text":
@@ -34,11 +40,15 @@ export const distanceToBindableElement = (
    case "embeddable":
    case "frame":
    case "magicframe":
-      return distanceToRectanguloidElement(element, p);
+      return distanceToRectanguloidElement(element, elementsMap, p);
    case "diamond":
-      return distanceToDiamondElement(element, p);
+      return distanceToDiamondElement(element, elementsMap, p);
    case "ellipse":
-      return distanceToEllipseElement(element, p);
+      return distanceToEllipseElement(element, elementsMap, p);
+    case "line":
+    case "arrow":
+    case "freedraw":
+      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
  }
 };

@@ -52,9 +62,10 @@ export const distanceToBindableElement = (
 */
 const distanceToRectanguloidElement = (
  element: ExcalidrawRectanguloidElement,
+  elementsMap: ElementsMap,
  p: GlobalPoint,
 ) => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);
  // To emulate a rotated rectangle we rotate the point in the inverse angle
  // instead. It's all the same distance-wise.
  const rotatedPoint = pointRotateRads(p, center, -element.angle as Radians);
@@ -80,9 +91,10 @@ const distanceToRectanguloidElement = (
 */
 const distanceToDiamondElement = (
  element: ExcalidrawDiamondElement,
+  elementsMap: ElementsMap,
  p: GlobalPoint,
 ): number => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);

  // Rotate the point to the inverse direction to simulate the rotated diamond
  // points. It's all the same distance-wise.
@@ -108,12 +120,28 @@ const distanceToDiamondElement = (
 */
 const distanceToEllipseElement = (
  element: ExcalidrawEllipseElement,
+  elementsMap: ElementsMap,
  p: GlobalPoint,
 ): number => {
-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);
  return ellipseDistanceFromPoint(
    // Instead of rotating the ellipse, rotate the point to the inverse angle
    pointRotateRads(p, center, -element.angle as Radians),
    ellipse(center, element.width / 2, element.height / 2),
  );
 };
+
+const distanceToLinearOrFreeDraElement = (
+  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
+  p: GlobalPoint,
+) => {
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap,
+  );
+  return Math.min(
+    ...lines.map((s) => distanceToLineSegment(p, s)),
+    ...curves.map((a) => curvePointDistance(a, p)),
+  );
+};
--- a/packages/element/src/elbowArrow.ts
+++ b/packages/element/src/elbowArrow.ts
@@ -29,10 +29,9 @@ import {
  FIXED_BINDING_DISTANCE,
  getHeadingForElbowArrowSnap,
  getGlobalFixedPointForBindableElement,
-  snapToMid,
  getHoveredElementForBinding,
 } from "./binding";
-import { distanceToBindableElement } from "./distance";
+import { distanceToElement } from "./distance";
 import {
  compareHeading,
  flipHeading,
@@ -898,50 +897,6 @@ export const updateElbowArrowPoints = (
    return { points: updates.points ?? arrow.points };
  }

-  // NOTE (mtolmacs): This is a temporary check to ensure that the incoming elbow
-  // arrow size is valid. This check will be removed once the issue is identified
-  if (
-    arrow.x < -MAX_POS ||
-    arrow.x > MAX_POS ||
-    arrow.y < -MAX_POS ||
-    arrow.y > MAX_POS ||
-    arrow.x + (updates?.points?.[updates?.points?.length - 1]?.[0] ?? 0) <
-      -MAX_POS ||
-    arrow.x + (updates?.points?.[updates?.points?.length - 1]?.[0] ?? 0) >
-      MAX_POS ||
-    arrow.y + (updates?.points?.[updates?.points?.length - 1]?.[1] ?? 0) <
-      -MAX_POS ||
-    arrow.y + (updates?.points?.[updates?.points?.length - 1]?.[1] ?? 0) >
-      MAX_POS ||
-    arrow.x + (arrow?.points?.[arrow?.points?.length - 1]?.[0] ?? 0) <
-      -MAX_POS ||
-    arrow.x + (arrow?.points?.[arrow?.points?.length - 1]?.[0] ?? 0) >
-      MAX_POS ||
-    arrow.y + (arrow?.points?.[arrow?.points?.length - 1]?.[1] ?? 0) <
-      -MAX_POS ||
-    arrow.y + (arrow?.points?.[arrow?.points?.length - 1]?.[1] ?? 0) > MAX_POS
-  ) {
-    console.error(
-      "Elbow arrow (or update) is outside reasonable bounds (> 1e6)",
-      {
-        arrow,
-        updates,
-      },
-    );
-  }
-  // @ts-ignore See above note
-  arrow.x = clamp(arrow.x, -MAX_POS, MAX_POS);
-  // @ts-ignore See above note
-  arrow.y = clamp(arrow.y, -MAX_POS, MAX_POS);
-  if (updates.points) {
-    updates.points = updates.points.map(([x, y]) =>
-      pointFrom<LocalPoint>(
-        clamp(x, -MAX_POS, MAX_POS),
-        clamp(y, -MAX_POS, MAX_POS),
-      ),
-    );
-  }
-
  if (!import.meta.env.PROD) {
    invariant(
      !updates.points || updates.points.length >= 2,
@@ -1273,6 +1228,7 @@ const getElbowArrowData = (
    arrow.startBinding?.fixedPoint,
    origStartGlobalPoint,
    hoveredStartElement,
+    elementsMap,
    options?.isDragging,
  );
  const endGlobalPoint = getGlobalPoint(
@@ -1286,6 +1242,7 @@ const getElbowArrowData = (
    arrow.endBinding?.fixedPoint,
    origEndGlobalPoint,
    hoveredEndElement,
+    elementsMap,
    options?.isDragging,
  );
  const startHeading = getBindPointHeading(
@@ -1293,12 +1250,14 @@ const getElbowArrowData = (
    endGlobalPoint,
    hoveredStartElement,
    origStartGlobalPoint,
+    elementsMap,
  );
  const endHeading = getBindPointHeading(
    endGlobalPoint,
    startGlobalPoint,
    hoveredEndElement,
    origEndGlobalPoint,
+    elementsMap,
  );
  const startPointBounds = [
    startGlobalPoint[0] - 2,
@@ -1315,6 +1274,7 @@ const getElbowArrowData = (
  const startElementBounds = hoveredStartElement
    ? aabbForElement(
        hoveredStartElement,
+        elementsMap,
        offsetFromHeading(
          startHeading,
          arrow.startArrowhead
@@ -1327,6 +1287,7 @@ const getElbowArrowData = (
  const endElementBounds = hoveredEndElement
    ? aabbForElement(
        hoveredEndElement,
+        elementsMap,
        offsetFromHeading(
          endHeading,
          arrow.endArrowhead
@@ -1342,6 +1303,7 @@ const getElbowArrowData = (
      hoveredEndElement
        ? aabbForElement(
            hoveredEndElement,
+            elementsMap,
            offsetFromHeading(endHeading, BASE_PADDING, BASE_PADDING),
          )
        : endPointBounds,
@@ -1351,6 +1313,7 @@ const getElbowArrowData = (
      hoveredStartElement
        ? aabbForElement(
            hoveredStartElement,
+            elementsMap,
            offsetFromHeading(startHeading, BASE_PADDING, BASE_PADDING),
          )
        : startPointBounds,
@@ -1397,8 +1360,8 @@ const getElbowArrowData = (
          BASE_PADDING,
        ),
    boundsOverlap,
-    hoveredStartElement && aabbForElement(hoveredStartElement),
-    hoveredEndElement && aabbForElement(hoveredEndElement),
+    hoveredStartElement && aabbForElement(hoveredStartElement, elementsMap),
+    hoveredEndElement && aabbForElement(hoveredEndElement, elementsMap),
  );
  const startDonglePosition = getDonglePosition(
    dynamicAABBs[0],
@@ -2229,34 +2192,35 @@ const getGlobalPoint = (
  fixedPointRatio: [number, number] | undefined | null,
  initialPoint: GlobalPoint,
  element?: ExcalidrawBindableElement | null,
+  elementsMap?: ElementsMap,
  isDragging?: boolean,
 ): GlobalPoint => {
  if (isDragging) {
-    if (element) {
-      const snapPoint = bindPointToSnapToElementOutline(
+    if (element && elementsMap) {
+      return bindPointToSnapToElementOutline(
        arrow,
        element,
        startOrEnd,
+        elementsMap,
      );
-
-      return snapToMid(element, snapPoint);
    }

    return initialPoint;
  }

-  if (element) {
+  if (element && elementsMap) {
    const fixedGlobalPoint = getGlobalFixedPointForBindableElement(
      fixedPointRatio || [0, 0],
      element,
+      elementsMap,
    );

    // NOTE: Resize scales the binding position point too, so we need to update it
    return Math.abs(
-      distanceToBindableElement(element, fixedGlobalPoint) -
+      distanceToElement(element, elementsMap, fixedGlobalPoint) -
        FIXED_BINDING_DISTANCE,
    ) > 0.01
-      ? bindPointToSnapToElementOutline(arrow, element, startOrEnd)
+      ? bindPointToSnapToElementOutline(arrow, element, startOrEnd, elementsMap)
      : fixedGlobalPoint;
  }

@@ -2268,6 +2232,7 @@ const getBindPointHeading = (
  otherPoint: GlobalPoint,
  hoveredElement: ExcalidrawBindableElement | null | undefined,
  origPoint: GlobalPoint,
+  elementsMap: ElementsMap,
 ): Heading =>
  getHeadingForElbowArrowSnap(
    p,
@@ -2276,7 +2241,8 @@ const getBindPointHeading = (
    hoveredElement &&
      aabbForElement(
        hoveredElement,
-        Array(4).fill(distanceToBindableElement(hoveredElement, p)) as [
+        elementsMap,
+        Array(4).fill(distanceToElement(hoveredElement, elementsMap, p)) as [
          number,
          number,
          number,
@@ -2284,6 +2250,7 @@ const getBindPointHeading = (
        ],
      ),
    origPoint,
+    elementsMap,
  );

 const getHoveredElement = (
--- a/packages/element/src/flowchart.ts
+++ b/packages/element/src/flowchart.ts
@@ -95,10 +95,11 @@ const getNodeRelatives = (
          type === "predecessors" ? el.points[el.points.length - 1] : [0, 0]
        ) as Readonly<LocalPoint>;

-        const heading = headingForPointFromElement(node, aabbForElement(node), [
-          edgePoint[0] + el.x,
-          edgePoint[1] + el.y,
-        ] as Readonly<GlobalPoint>);
+        const heading = headingForPointFromElement(
+          node,
+          aabbForElement(node, elementsMap),
+          [edgePoint[0] + el.x, edgePoint[1] + el.y] as Readonly<GlobalPoint>,
+        );

        acc.push({
          relative,
--- a/packages/element/src/shapes.ts
+++ b/packages/element/src/shapes.ts
@@ -291,6 +291,7 @@ export const mapIntervalToBezierT = <P extends GlobalPoint | LocalPoint>(
 */
 export const aabbForElement = (
  element: Readonly<ExcalidrawElement>,
+  elementsMap: ElementsMap,
  offset?: [number, number, number, number],
 ) => {
  const bbox = {
@@ -302,7 +303,7 @@ export const aabbForElement = (
    midY: element.y + element.height / 2,
  };

-  const center = elementCenterPoint(element);
+  const center = elementCenterPoint(element, elementsMap);
  const [topLeftX, topLeftY] = pointRotateRads(
    pointFrom(bbox.minX, bbox.minY),
    center,
--- a/packages/element/src/types.ts
+++ b/packages/element/src/types.ts
@@ -195,7 +195,8 @@ export type ExcalidrawRectanguloidElement =
  | ExcalidrawFreeDrawElement
  | ExcalidrawIframeLikeElement
  | ExcalidrawFrameLikeElement
-  | ExcalidrawEmbeddableElement;
+  | ExcalidrawEmbeddableElement
+  | ExcalidrawSelectionElement;

 /**
 * ExcalidrawElement should be JSON serializable and (eventually) contain
--- a/packages/element/src/utils.ts
+++ b/packages/element/src/utils.ts
@@ -1,28 +1,168 @@
 import {
  curve,
+  curveCatmullRomCubicApproxPoints,
+  curveOffsetPoints,
  lineSegment,
  pointFrom,
-  pointFromVector,
+  pointFromArray,
  rectangle,
-  vectorFromPoint,
-  vectorNormalize,
-  vectorScale,
  type GlobalPoint,
 } from "@excalidraw/math";

-import { elementCenterPoint } from "@excalidraw/common";
-
-import type { Curve, LineSegment } from "@excalidraw/math";
+import type { Curve, LineSegment, LocalPoint } from "@excalidraw/math";

 import { getCornerRadius } from "./shapes";

 import { getDiamondPoints } from "./bounds";

+import { generateLinearCollisionShape } from "./Shape";
+
 import type {
+  ElementsMap,
  ExcalidrawDiamondElement,
+  ExcalidrawElement,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawLinearElement,
  ExcalidrawRectanguloidElement,
 } from "./types";

+type ElementShape = [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]];
+
+const ElementShapesCache = new WeakMap<
+  ExcalidrawElement,
+  { version: ExcalidrawElement["version"]; shapes: Map<number, ElementShape> }
+>();
+
+const getElementShapesCacheEntry = <T extends ExcalidrawElement>(
+  element: T,
+  offset: number,
+): ElementShape | undefined => {
+  const record = ElementShapesCache.get(element);
+
+  if (!record) {
+    return undefined;
+  }
+
+  const { version, shapes } = record;
+
+  if (version !== element.version) {
+    ElementShapesCache.delete(element);
+    return undefined;
+  }
+
+  return shapes.get(offset);
+};
+
+const setElementShapesCacheEntry = <T extends ExcalidrawElement>(
+  element: T,
+  shape: ElementShape,
+  offset: number,
+) => {
+  const record = ElementShapesCache.get(element);
+
+  if (!record) {
+    ElementShapesCache.set(element, {
+      version: element.version,
+      shapes: new Map([[offset, shape]]),
+    });
+
+    return;
+  }
+
+  const { version, shapes } = record;
+
+  if (version !== element.version) {
+    ElementShapesCache.set(element, {
+      version: element.version,
+      shapes: new Map([[offset, shape]]),
+    });
+
+    return;
+  }
+
+  shapes.set(offset, shape);
+};
+
+export function deconstructLinearOrFreeDrawElement(
+  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
+): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
+  const cachedShape = getElementShapesCacheEntry(element, 0);
+
+  if (cachedShape) {
+    return cachedShape;
+  }
+
+  const ops = generateLinearCollisionShape(element, elementsMap) as {
+    op: string;
+    data: number[];
+  }[];
+  const lines = [];
+  const curves = [];
+
+  for (let idx = 0; idx < ops.length; idx += 1) {
+    const op = ops[idx];
+    const prevPoint =
+      ops[idx - 1] && pointFromArray<LocalPoint>(ops[idx - 1].data.slice(-2));
+    switch (op.op) {
+      case "move":
+        continue;
+      case "lineTo":
+        if (!prevPoint) {
+          throw new Error("prevPoint is undefined");
+        }
+
+        lines.push(
+          lineSegment<GlobalPoint>(
+            pointFrom<GlobalPoint>(
+              element.x + prevPoint[0],
+              element.y + prevPoint[1],
+            ),
+            pointFrom<GlobalPoint>(
+              element.x + op.data[0],
+              element.y + op.data[1],
+            ),
+          ),
+        );
+        continue;
+      case "bcurveTo":
+        if (!prevPoint) {
+          throw new Error("prevPoint is undefined");
+        }
+
+        curves.push(
+          curve<GlobalPoint>(
+            pointFrom<GlobalPoint>(
+              element.x + prevPoint[0],
+              element.y + prevPoint[1],
+            ),
+            pointFrom<GlobalPoint>(
+              element.x + op.data[0],
+              element.y + op.data[1],
+            ),
+            pointFrom<GlobalPoint>(
+              element.x + op.data[2],
+              element.y + op.data[3],
+            ),
+            pointFrom<GlobalPoint>(
+              element.x + op.data[4],
+              element.y + op.data[5],
+            ),
+          ),
+        );
+        continue;
+      default: {
+        console.error("Unknown op type", op.op);
+      }
+    }
+  }
+
+  const shape = [lines, curves] as ElementShape;
+  setElementShapesCacheEntry(element, shape, 0);
+
+  return shape;
+}
+
 /**
 * Get the building components of a rectanguloid element in the form of
 * line segments and curves.
@@ -35,175 +175,132 @@ export function deconstructRectanguloidElement(
  element: ExcalidrawRectanguloidElement,
  offset: number = 0,
 ): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
-  const roundness = getCornerRadius(
+  const cachedShape = getElementShapesCacheEntry(element, offset);
+
+  if (cachedShape) {
+    return cachedShape;
+  }
+
+  let radius = getCornerRadius(
    Math.min(element.width, element.height),
    element,
  );

-  if (roundness <= 0) {
-    const r = rectangle(
-      pointFrom(element.x - offset, element.y - offset),
-      pointFrom(
-        element.x + element.width + offset,
-        element.y + element.height + offset,
-      ),
-    );
-
-    const top = lineSegment<GlobalPoint>(
-      pointFrom<GlobalPoint>(r[0][0] + roundness, r[0][1]),
-      pointFrom<GlobalPoint>(r[1][0] - roundness, r[0][1]),
-    );
-    const right = lineSegment<GlobalPoint>(
-      pointFrom<GlobalPoint>(r[1][0], r[0][1] + roundness),
-      pointFrom<GlobalPoint>(r[1][0], r[1][1] - roundness),
-    );
-    const bottom = lineSegment<GlobalPoint>(
-      pointFrom<GlobalPoint>(r[0][0] + roundness, r[1][1]),
-      pointFrom<GlobalPoint>(r[1][0] - roundness, r[1][1]),
-    );
-    const left = lineSegment<GlobalPoint>(
-      pointFrom<GlobalPoint>(r[0][0], r[1][1] - roundness),
-      pointFrom<GlobalPoint>(r[0][0], r[0][1] + roundness),
-    );
-    const sides = [top, right, bottom, left];
-
-    return [sides, []];
+  if (radius === 0) {
+    radius = 0.01;
  }

-  const center = elementCenterPoint(element);
-
  const r = rectangle(
    pointFrom(element.x, element.y),
    pointFrom(element.x + element.width, element.y + element.height),
  );

  const top = lineSegment<GlobalPoint>(
-    pointFrom<GlobalPoint>(r[0][0] + roundness, r[0][1]),
-    pointFrom<GlobalPoint>(r[1][0] - roundness, r[0][1]),
+    pointFrom<GlobalPoint>(r[0][0] + radius, r[0][1]),
+    pointFrom<GlobalPoint>(r[1][0] - radius, r[0][1]),
  );
  const right = lineSegment<GlobalPoint>(
-    pointFrom<GlobalPoint>(r[1][0], r[0][1] + roundness),
-    pointFrom<GlobalPoint>(r[1][0], r[1][1] - roundness),
+    pointFrom<GlobalPoint>(r[1][0], r[0][1] + radius),
+    pointFrom<GlobalPoint>(r[1][0], r[1][1] - radius),
  );
  const bottom = lineSegment<GlobalPoint>(
-    pointFrom<GlobalPoint>(r[0][0] + roundness, r[1][1]),
-    pointFrom<GlobalPoint>(r[1][0] - roundness, r[1][1]),
+    pointFrom<GlobalPoint>(r[0][0] + radius, r[1][1]),
+    pointFrom<GlobalPoint>(r[1][0] - radius, r[1][1]),
  );
  const left = lineSegment<GlobalPoint>(
-    pointFrom<GlobalPoint>(r[0][0], r[1][1] - roundness),
-    pointFrom<GlobalPoint>(r[0][0], r[0][1] + roundness),
+    pointFrom<GlobalPoint>(r[0][0], r[1][1] - radius),
+    pointFrom<GlobalPoint>(r[0][0], r[0][1] + radius),
  );

-  const offsets = [
-    vectorScale(
-      vectorNormalize(
-        vectorFromPoint(pointFrom(r[0][0] - offset, r[0][1] - offset), center),
-      ),
-      offset,
-    ), // TOP LEFT
-    vectorScale(
-      vectorNormalize(
-        vectorFromPoint(pointFrom(r[1][0] + offset, r[0][1] - offset), center),
-      ),
-      offset,
-    ), //TOP RIGHT
-    vectorScale(
-      vectorNormalize(
-        vectorFromPoint(pointFrom(r[1][0] + offset, r[1][1] + offset), center),
-      ),
-      offset,
-    ), // BOTTOM RIGHT
-    vectorScale(
-      vectorNormalize(
-        vectorFromPoint(pointFrom(r[0][0] - offset, r[1][1] + offset), center),
-      ),
-      offset,
-    ), // BOTTOM LEFT
-  ];
-
-  const corners = [
+  const baseCorners = [
    curve(
-      pointFromVector(offsets[0], left[1]),
-      pointFromVector(
-        offsets[0],
-        pointFrom<GlobalPoint>(
-          left[1][0] + (2 / 3) * (r[0][0] - left[1][0]),
-          left[1][1] + (2 / 3) * (r[0][1] - left[1][1]),
-        ),
+      left[1],
+      pointFrom<GlobalPoint>(
+        left[1][0] + (2 / 3) * (r[0][0] - left[1][0]),
+        left[1][1] + (2 / 3) * (r[0][1] - left[1][1]),
      ),
-      pointFromVector(
-        offsets[0],
-        pointFrom<GlobalPoint>(
-          top[0][0] + (2 / 3) * (r[0][0] - top[0][0]),
-          top[0][1] + (2 / 3) * (r[0][1] - top[0][1]),
-        ),
+      pointFrom<GlobalPoint>(
+        top[0][0] + (2 / 3) * (r[0][0] - top[0][0]),
+        top[0][1] + (2 / 3) * (r[0][1] - top[0][1]),
      ),
-      pointFromVector(offsets[0], top[0]),
+      top[0],
    ), // TOP LEFT
    curve(
-      pointFromVector(offsets[1], top[1]),
-      pointFromVector(
-        offsets[1],
-        pointFrom<GlobalPoint>(
-          top[1][0] + (2 / 3) * (r[1][0] - top[1][0]),
-          top[1][1] + (2 / 3) * (r[0][1] - top[1][1]),
-        ),
+      top[1],
+      pointFrom<GlobalPoint>(
+        top[1][0] + (2 / 3) * (r[1][0] - top[1][0]),
+        top[1][1] + (2 / 3) * (r[0][1] - top[1][1]),
      ),
-      pointFromVector(
-        offsets[1],
-        pointFrom<GlobalPoint>(
-          right[0][0] + (2 / 3) * (r[1][0] - right[0][0]),
-          right[0][1] + (2 / 3) * (r[0][1] - right[0][1]),
-        ),
+      pointFrom<GlobalPoint>(
+        right[0][0] + (2 / 3) * (r[1][0] - right[0][0]),
+        right[0][1] + (2 / 3) * (r[0][1] - right[0][1]),
      ),
-      pointFromVector(offsets[1], right[0]),
+      right[0],
    ), // TOP RIGHT
    curve(
-      pointFromVector(offsets[2], right[1]),
-      pointFromVector(
-        offsets[2],
-        pointFrom<GlobalPoint>(
-          right[1][0] + (2 / 3) * (r[1][0] - right[1][0]),
-          right[1][1] + (2 / 3) * (r[1][1] - right[1][1]),
-        ),
+      right[1],
+      pointFrom<GlobalPoint>(
+        right[1][0] + (2 / 3) * (r[1][0] - right[1][0]),
+        right[1][1] + (2 / 3) * (r[1][1] - right[1][1]),
      ),
-      pointFromVector(
-        offsets[2],
-        pointFrom<GlobalPoint>(
-          bottom[1][0] + (2 / 3) * (r[1][0] - bottom[1][0]),
-          bottom[1][1] + (2 / 3) * (r[1][1] - bottom[1][1]),
-        ),
+      pointFrom<GlobalPoint>(
+        bottom[1][0] + (2 / 3) * (r[1][0] - bottom[1][0]),
+        bottom[1][1] + (2 / 3) * (r[1][1] - bottom[1][1]),
      ),
-      pointFromVector(offsets[2], bottom[1]),
+      bottom[1],
    ), // BOTTOM RIGHT
    curve(
-      pointFromVector(offsets[3], bottom[0]),
-      pointFromVector(
-        offsets[3],
-        pointFrom<GlobalPoint>(
-          bottom[0][0] + (2 / 3) * (r[0][0] - bottom[0][0]),
-          bottom[0][1] + (2 / 3) * (r[1][1] - bottom[0][1]),
-        ),
+      bottom[0],
+      pointFrom<GlobalPoint>(
+        bottom[0][0] + (2 / 3) * (r[0][0] - bottom[0][0]),
+        bottom[0][1] + (2 / 3) * (r[1][1] - bottom[0][1]),
      ),
-      pointFromVector(
-        offsets[3],
-        pointFrom<GlobalPoint>(
-          left[0][0] + (2 / 3) * (r[0][0] - left[0][0]),
-          left[0][1] + (2 / 3) * (r[1][1] - left[0][1]),
-        ),
+      pointFrom<GlobalPoint>(
+        left[0][0] + (2 / 3) * (r[0][0] - left[0][0]),
+        left[0][1] + (2 / 3) * (r[1][1] - left[0][1]),
      ),
-      pointFromVector(offsets[3], left[0]),
+      left[0],
    ), // BOTTOM LEFT
  ];

-  const sides = [
-    lineSegment<GlobalPoint>(corners[0][3], corners[1][0]),
-    lineSegment<GlobalPoint>(corners[1][3], corners[2][0]),
-    lineSegment<GlobalPoint>(corners[2][3], corners[3][0]),
-    lineSegment<GlobalPoint>(corners[3][3], corners[0][0]),
-  ];
+  const corners =
+    offset > 0
+      ? baseCorners.map(
+          (corner) =>
+            curveCatmullRomCubicApproxPoints(
+              curveOffsetPoints(corner, offset),
+            )!,
+        )
+      : [
+          [baseCorners[0]],
+          [baseCorners[1]],
+          [baseCorners[2]],
+          [baseCorners[3]],
+        ];

-  return [sides, corners];
+  const sides = [
+    lineSegment<GlobalPoint>(
+      corners[0][corners[0].length - 1][3],
+      corners[1][0][0],
+    ),
+    lineSegment<GlobalPoint>(
+      corners[1][corners[1].length - 1][3],
+      corners[2][0][0],
+    ),
+    lineSegment<GlobalPoint>(
+      corners[2][corners[2].length - 1][3],
+      corners[3][0][0],
+    ),
+    lineSegment<GlobalPoint>(
+      corners[3][corners[3].length - 1][3],
+      corners[0][0][0],
+    ),
+  ];
+  const shape = [sides, corners.flat()] as ElementShape;
+
+  setElementShapesCacheEntry(element, shape, offset);
+
+  return shape;
 }

 /**
@@ -218,42 +315,20 @@ export function deconstructDiamondElement(
  element: ExcalidrawDiamondElement,
  offset: number = 0,
 ): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
-  const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
-    getDiamondPoints(element);
-  const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element);
-  const horizontalRadius = getCornerRadius(Math.abs(rightY - topY), element);
+  const cachedShape = getElementShapesCacheEntry(element, offset);

-  if (element.roundness?.type == null) {
-    const [top, right, bottom, left]: GlobalPoint[] = [
-      pointFrom(element.x + topX, element.y + topY - offset),
-      pointFrom(element.x + rightX + offset, element.y + rightY),
-      pointFrom(element.x + bottomX, element.y + bottomY + offset),
-      pointFrom(element.x + leftX - offset, element.y + leftY),
-    ];
-
-    // Create the line segment parts of the diamond
-    // NOTE: Horizontal and vertical seems to be flipped here
-    const topRight = lineSegment<GlobalPoint>(
-      pointFrom(top[0] + verticalRadius, top[1] + horizontalRadius),
-      pointFrom(right[0] - verticalRadius, right[1] - horizontalRadius),
-    );
-    const bottomRight = lineSegment<GlobalPoint>(
-      pointFrom(right[0] - verticalRadius, right[1] + horizontalRadius),
-      pointFrom(bottom[0] + verticalRadius, bottom[1] - horizontalRadius),
-    );
-    const bottomLeft = lineSegment<GlobalPoint>(
-      pointFrom(bottom[0] - verticalRadius, bottom[1] - horizontalRadius),
-      pointFrom(left[0] + verticalRadius, left[1] + horizontalRadius),
-    );
-    const topLeft = lineSegment<GlobalPoint>(
-      pointFrom(left[0] + verticalRadius, left[1] - horizontalRadius),
-      pointFrom(top[0] - verticalRadius, top[1] + horizontalRadius),
-    );
-
-    return [[topRight, bottomRight, bottomLeft, topLeft], []];
+  if (cachedShape) {
+    return cachedShape;
  }

-  const center = elementCenterPoint(element);
+  const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
+    getDiamondPoints(element);
+  const verticalRadius = element.roundness
+    ? getCornerRadius(Math.abs(topX - leftX), element)
+    : (topX - leftX) * 0.01;
+  const horizontalRadius = element.roundness
+    ? getCornerRadius(Math.abs(rightY - topY), element)
+    : (rightY - topY) * 0.01;

  const [top, right, bottom, left]: GlobalPoint[] = [
    pointFrom(element.x + topX, element.y + topY),
@@ -262,94 +337,94 @@ export function deconstructDiamondElement(
    pointFrom(element.x + leftX, element.y + leftY),
  ];

-  const offsets = [
-    vectorScale(vectorNormalize(vectorFromPoint(right, center)), offset), // RIGHT
-    vectorScale(vectorNormalize(vectorFromPoint(bottom, center)), offset), // BOTTOM
-    vectorScale(vectorNormalize(vectorFromPoint(left, center)), offset), // LEFT
-    vectorScale(vectorNormalize(vectorFromPoint(top, center)), offset), // TOP
-  ];
-
-  const corners = [
+  const baseCorners = [
    curve(
-      pointFromVector(
-        offsets[0],
-        pointFrom<GlobalPoint>(
-          right[0] - verticalRadius,
-          right[1] - horizontalRadius,
-        ),
+      pointFrom<GlobalPoint>(
+        right[0] - verticalRadius,
+        right[1] - horizontalRadius,
      ),
-      pointFromVector(offsets[0], right),
-      pointFromVector(offsets[0], right),
-      pointFromVector(
-        offsets[0],
-        pointFrom<GlobalPoint>(
-          right[0] - verticalRadius,
-          right[1] + horizontalRadius,
-        ),
+      right,
+      right,
+      pointFrom<GlobalPoint>(
+        right[0] - verticalRadius,
+        right[1] + horizontalRadius,
      ),
    ), // RIGHT
    curve(
-      pointFromVector(
-        offsets[1],
-        pointFrom<GlobalPoint>(
-          bottom[0] + verticalRadius,
-          bottom[1] - horizontalRadius,
-        ),
+      pointFrom<GlobalPoint>(
+        bottom[0] + verticalRadius,
+        bottom[1] - horizontalRadius,
      ),
-      pointFromVector(offsets[1], bottom),
-      pointFromVector(offsets[1], bottom),
-      pointFromVector(
-        offsets[1],
-        pointFrom<GlobalPoint>(
-          bottom[0] - verticalRadius,
-          bottom[1] - horizontalRadius,
-        ),
+      bottom,
+      bottom,
+      pointFrom<GlobalPoint>(
+        bottom[0] - verticalRadius,
+        bottom[1] - horizontalRadius,
      ),
    ), // BOTTOM
    curve(
-      pointFromVector(
-        offsets[2],
-        pointFrom<GlobalPoint>(
-          left[0] + verticalRadius,
-          left[1] + horizontalRadius,
-        ),
+      pointFrom<GlobalPoint>(
+        left[0] + verticalRadius,
+        left[1] + horizontalRadius,
      ),
-      pointFromVector(offsets[2], left),
-      pointFromVector(offsets[2], left),
-      pointFromVector(
-        offsets[2],
-        pointFrom<GlobalPoint>(
-          left[0] + verticalRadius,
-          left[1] - horizontalRadius,
-        ),
+      left,
+      left,
+      pointFrom<GlobalPoint>(
+        left[0] + verticalRadius,
+        left[1] - horizontalRadius,
      ),
    ), // LEFT
    curve(
-      pointFromVector(
-        offsets[3],
-        pointFrom<GlobalPoint>(
-          top[0] - verticalRadius,
-          top[1] + horizontalRadius,
-        ),
+      pointFrom<GlobalPoint>(
+        top[0] - verticalRadius,
+        top[1] + horizontalRadius,
      ),
-      pointFromVector(offsets[3], top),
-      pointFromVector(offsets[3], top),
-      pointFromVector(
-        offsets[3],
-        pointFrom<GlobalPoint>(
-          top[0] + verticalRadius,
-          top[1] + horizontalRadius,
-        ),
+      top,
+      top,
+      pointFrom<GlobalPoint>(
+        top[0] + verticalRadius,
+        top[1] + horizontalRadius,
      ),
    ), // TOP
  ];

+  const corners =
+    offset > 0
+      ? baseCorners.map(
+          (corner) =>
+            curveCatmullRomCubicApproxPoints(
+              curveOffsetPoints(corner, offset),
+            )!,
+        )
+      : [
+          [baseCorners[0]],
+          [baseCorners[1]],
+          [baseCorners[2]],
+          [baseCorners[3]],
+        ];
+
  const sides = [
-    lineSegment<GlobalPoint>(corners[0][3], corners[1][0]),
-    lineSegment<GlobalPoint>(corners[1][3], corners[2][0]),
-    lineSegment<GlobalPoint>(corners[2][3], corners[3][0]),
-    lineSegment<GlobalPoint>(corners[3][3], corners[0][0]),
+    lineSegment<GlobalPoint>(
+      corners[0][corners[0].length - 1][3],
+      corners[1][0][0],
+    ),
+    lineSegment<GlobalPoint>(
+      corners[1][corners[1].length - 1][3],
+      corners[2][0][0],
+    ),
+    lineSegment<GlobalPoint>(
+      corners[2][corners[2].length - 1][3],
+      corners[3][0][0],
+    ),
+    lineSegment<GlobalPoint>(
+      corners[3][corners[3].length - 1][3],
+      corners[0][0][0],
+    ),
  ];

-  return [sides, corners];
+  const shape = [sides, corners.flat()] as ElementShape;
+
+  setElementShapesCacheEntry(element, shape, offset);
+
+  return shape;
 }