Merge branch 'master' into mtolmacs/chore/rename-inside-binding

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

packages/element/package.json

@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@excalidraw/common": "0.18.0",
-    "@excalidraw/math": "0.18.0"
+    "@excalidraw/math": "0.18.0",
+    "@excalidraw/fractional-indexing": "3.3.0"
   }
 }

packages/element/src/Scene.ts

@@ -338,29 +338,20 @@ export class Scene {
     this.callbacks.clear();
   }
 
-  insertElementAtIndex(element: ExcalidrawElement, index: number) {
-    if (!Number.isFinite(index) || index < 0) {
-      throw new Error(
-        "insertElementAtIndex can only be called with index >= 0",
-      );
-    }
-
-    const nextElements = [
-      ...this.elements.slice(0, index),
-      element,
-      ...this.elements.slice(index),
-    ];
-
-    syncMovedIndices(nextElements, arrayToMap([element]));
-
-    this.replaceAllElements(nextElements);
-  }
-
-  insertElementsAtIndex(elements: ExcalidrawElement[], index: number) {
+  /** low-level - generally use app.insertNewElements() */
+  insertElementsAtIndex(
+    elements: ExcalidrawElement[],
+    /** null indicates end of the array */
+    index: number | null,
+  ) {
     if (!elements.length) {
       return;
     }
 
+    if (index === null) {
+      index = this.elements.length;
+    }
+
     if (!Number.isFinite(index) || index < 0) {
       throw new Error(
         "insertElementAtIndex can only be called with index >= 0",
@@ -378,24 +369,9 @@ export class Scene {
     this.replaceAllElements(nextElements);
   }
 
+  /** low-level - generally use app.insertNewElement() */
   insertElement = (element: ExcalidrawElement) => {
-    const index = element.frameId
-      ? this.getElementIndex(element.frameId)
-      : this.elements.length;
-
-    this.insertElementAtIndex(element, index);
-  };
-
-  insertElements = (elements: ExcalidrawElement[]) => {
-    if (!elements.length) {
-      return;
-    }
-
-    const index = elements[0]?.frameId
-      ? this.getElementIndex(elements[0].frameId)
-      : this.elements.length;
-
-    this.insertElementsAtIndex(elements, index);
+    this.insertElementsAtIndex([element], null);
   };
 
   getElementIndex(elementId: string) {
@@ -438,6 +414,8 @@ export class Scene {
     options: {
       informMutation: boolean;
       isDragging: boolean;
+      isBindingEnabled?: boolean;
+      isMidpointSnappingEnabled?: boolean;
     } = {
       informMutation: true,
       isDragging: false,

packages/element/src/align.ts

@@ -43,7 +43,6 @@ export const alignElements = (
       // update bound elements
       updateBoundElements(element, scene, {
         simultaneouslyUpdated: group,
-        indirectArrowUpdate: true,
       });
       return updatedEle;
     });

packages/element/src/arrowheads.ts

@@ -0,0 +1,32 @@
+import type { Arrowhead, AnyArrowhead } from "./types";
+
+export const normalizeArrowhead = (
+  arrowhead: AnyArrowhead | null | undefined,
+): Arrowhead | null => {
+  switch (arrowhead) {
+    case undefined:
+    case null:
+      return null;
+    case "dot":
+      return "circle";
+    case "crowfoot_one":
+      return "cardinality_one";
+    case "crowfoot_many":
+      return "cardinality_many";
+    case "crowfoot_one_or_many":
+      return "cardinality_one_or_many";
+    default:
+      return arrowhead;
+  }
+};
+
+export const getArrowheadForPicker = (
+  arrowhead: AnyArrowhead | null | undefined,
+): Arrowhead | null => {
+  const normalizedArrowhead = normalizeArrowhead(arrowhead);
+  if (normalizedArrowhead === null) {
+    return null;
+  }
+
+  return normalizedArrowhead;
+};

packages/element/src/arrows/focus.ts

@@ -42,6 +42,7 @@ export const isFocusPointVisible = (
     isBindingEnabled: AppState["isBindingEnabled"];
     zoom: AppState["zoom"];
   },
+  startOrEnd: "start" | "end",
   ignoreOverlap = false,
 ): boolean => {
   // No focus point management for elbow arrows, because elbow arrows
@@ -76,14 +77,25 @@ export const isFocusPointVisible = (
     }
   }
 
-  // Check if the focus point is within the element's shape bounds
-  return hitElementItself({
-    element: bindableElement,
+  const arrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    arrow,
+    startOrEnd === "end" ? arrow.points.length - 1 : 0,
     elementsMap,
-    point: focusPoint,
-    threshold: getBindingGap(bindableElement, arrow),
-    overrideShouldTestInside: true,
-  });
+  );
+
+  // Check if the focus point is within the element's shape bounds
+  // Endpoint dragging takes precedence
+  return (
+    pointDistance(focusPoint, arrowPoint) >=
+      (FOCUS_POINT_SIZE * 1.5) / appState.zoom.value &&
+    hitElementItself({
+      element: bindableElement,
+      elementsMap,
+      point: focusPoint,
+      threshold: getBindingGap(bindableElement, arrow),
+      overrideShouldTestInside: true,
+    })
+  );
 };
 
 // Updates the arrow endpoints in "orbit" configuration
@@ -129,6 +141,7 @@ const focusPointUpdate = (
       currentBinding,
       bindableElement,
       elementsMap,
+      true,
     );
 
     if (newPoint) {
@@ -353,6 +366,7 @@ export const handleFocusPointPointerDown = (
           bindableElement,
           elementsMap,
           appState,
+          "start",
         ) &&
         pointDistance(pointerPos, focusPoint) <= hitThreshold
       ) {
@@ -387,6 +401,7 @@ export const handleFocusPointPointerDown = (
           bindableElement,
           elementsMap,
           appState,
+          "end",
         ) &&
         pointDistance(pointerPos, focusPoint) <= hitThreshold
       ) {
@@ -501,6 +516,7 @@ export const handleFocusPointHover = (
           bindableElement,
           elementsMap,
           appState,
+          "start",
         ) &&
         pointDistance(pointerPos, focusPoint) <= hitThreshold
       ) {
@@ -529,6 +545,7 @@ export const handleFocusPointHover = (
           bindableElement,
           elementsMap,
           appState,
+          "end",
         ) &&
         pointDistance(pointerPos, focusPoint) <= hitThreshold
       ) {

packages/element/src/binding.ts

@@ -1,5 +1,4 @@
 import {
-  KEYS,
   arrayToMap,
   getFeatureFlag,
   invariant,
@@ -27,11 +26,7 @@ import type { AppState } from "@excalidraw/excalidraw/types";
 import type { MapEntry, Mutable } from "@excalidraw/common/utility-types";
 import type { Bounds } from "@excalidraw/common";
 
-import {
-  doBoundsIntersect,
-  getCenterForBounds,
-  getElementBounds,
-} from "./bounds";
+import { getCenterForBounds } from "./bounds";
 import {
   getAllHoveredElementAtPoint,
   getHoveredElementForBinding,
@@ -116,6 +111,7 @@ export type BindingStrategy =
  */
 export const BASE_BINDING_GAP = 5;
 export const BASE_BINDING_GAP_ELBOW = 5;
+export const BASE_ARROW_MIN_LENGTH = 10;
 export const FOCUS_POINT_SIZE = 10 / 1.5;
 
 export const getBindingGap = (
@@ -140,12 +136,6 @@ export const maxBindingDistance_simple = (zoom?: AppState["zoom"]): number => {
   );
 };
 
-export const shouldEnableBindingForPointerEvent = (
-  event: React.PointerEvent<HTMLElement>,
-) => {
-  return !event[KEYS.CTRL_OR_CMD];
-};
-
 export const isBindingEnabled = (appState: {
   isBindingEnabled: AppState["isBindingEnabled"];
 }): boolean => {
@@ -180,8 +170,20 @@ export const bindOrUnbindBindingElement = (
     },
   );
 
-  bindOrUnbindBindingElementEdge(arrow, start, "start", scene);
-  bindOrUnbindBindingElementEdge(arrow, end, "end", scene);
+  bindOrUnbindBindingElementEdge(
+    arrow,
+    start,
+    "start",
+    scene,
+    appState.isBindingEnabled,
+  );
+  bindOrUnbindBindingElementEdge(
+    arrow,
+    end,
+    "end",
+    scene,
+    appState.isBindingEnabled,
+  );
   if (start.focusPoint || end.focusPoint) {
     // If the strategy dictates a focus point override, then
     // update the arrow points to point to the focus point.
@@ -224,12 +226,21 @@ const bindOrUnbindBindingElementEdge = (
   { mode, element, focusPoint }: BindingStrategy,
   startOrEnd: "start" | "end",
   scene: Scene,
+  shouldSnapToOutline = true,
 ): void => {
   if (mode === null) {
     // null means break the binding
     unbindBindingElement(arrow, startOrEnd, scene);
   } else if (mode !== undefined) {
-    bindBindingElement(arrow, element, mode, startOrEnd, scene, focusPoint);
+    bindBindingElement(
+      arrow,
+      element,
+      mode,
+      startOrEnd,
+      scene,
+      focusPoint,
+      shouldSnapToOutline,
+    );
   }
 };
 
@@ -720,12 +731,11 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     });
 
   // Handle outside-outside binding to the same element
-  if (otherBinding && otherBinding.elementId === hit?.id) {
-    invariant(
-      !opts?.newArrow || appState.selectedLinearElement?.initialState.origin,
-      "appState.selectedLinearElement.initialState.origin must be defined for new arrows",
-    );
-
+  if (
+    otherBinding &&
+    otherBinding.elementId === hit?.id &&
+    (!opts?.newArrow || appState.selectedLinearElement?.initialState.origin)
+  ) {
     return {
       start: {
         mode: "fixed",
@@ -798,6 +808,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
               startDragged ? "start" : "end",
               elementsMap,
               appState.zoom,
+              appState.isMidpointSnappingEnabled,
             ) || globalPoint,
         }
     : { mode: null };
@@ -807,13 +818,23 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     startDragged ? -1 : 0,
     elementsMap,
   );
-
+  const pointIsCloseToOtherElement =
+    otherFocusPoint &&
+    otherBindableElement &&
+    hitElementItself({
+      point: globalPoint,
+      element: otherBindableElement,
+      elementsMap,
+      threshold: maxBindingDistance_simple(appState.zoom),
+      overrideShouldTestInside: true,
+    });
   const otherNeverOverride = opts?.newArrow
     ? appState.selectedLinearElement?.initialState.arrowStartIsInside
     : otherBinding?.mode === "fixed";
   const other: BindingStrategy = !otherNeverOverride
     ? otherBindableElement &&
       !otherFocusPointIsInElement &&
+      !pointIsCloseToOtherElement &&
       appState.selectedLinearElement?.initialState.altFocusPoint
       ? {
           mode: "orbit",
@@ -832,6 +853,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
               startDragged ? "end" : "start",
               elementsMap,
               appState.zoom,
+              appState.isMidpointSnappingEnabled,
             ) || otherEndpoint,
         }
       : { mode: undefined }
@@ -995,6 +1017,7 @@ export const bindBindingElement = (
   startOrEnd: "start" | "end",
   scene: Scene,
   focusPoint?: GlobalPoint,
+  shouldSnapToOutline = true,
 ): void => {
   const elementsMap = scene.getNonDeletedElementsMap();
 
@@ -1009,6 +1032,7 @@ export const bindBindingElement = (
         hoveredElement,
         startOrEnd,
         elementsMap,
+        shouldSnapToOutline,
       ),
     };
   } else {
@@ -1080,7 +1104,6 @@ export const updateBoundElements = (
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     changedElements?: Map<string, ExcalidrawElement>;
-    indirectArrowUpdate?: boolean;
   },
 ) => {
   if (!isBindableElement(changedElement)) {
@@ -1175,11 +1198,6 @@ export const updateBoundElements = (
   };
 
   boundElementsVisitor(elementsMap, changedElement, visitor);
-
-  if (options?.indirectArrowUpdate) {
-    boundElementsVisitor(elementsMap, changedElement, visitor);
-    boundElementsVisitor(elementsMap, changedElement, visitor);
-  }
 };
 
 const updateArrowBindings = (
@@ -1348,6 +1366,7 @@ export const bindPointToSnapToElementOutline = (
   startOrEnd: "start" | "end",
   elementsMap: ElementsMap,
   customIntersector?: LineSegment<GlobalPoint>,
+  isMidpointSnappingEnabled = true,
 ): GlobalPoint => {
   const elbowed = isElbowArrow(arrowElement);
   const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(
@@ -1387,13 +1406,9 @@ export const bindPointToSnapToElementOutline = (
     const isHorizontal = headingIsHorizontal(
       headingForPointFromElement(bindableElement, aabb, point),
     );
-    const snapPoint = snapToMid(
-      bindableElement,
-      elementsMap,
-      edgePoint,
-      0.05,
-      arrowElement,
-    );
+    const snapPoint = isMidpointSnappingEnabled
+      ? snapToMid(bindableElement, elementsMap, edgePoint, 0.05, arrowElement)
+      : undefined;
     const resolved = snapPoint || point;
     const otherPoint = pointFrom<GlobalPoint>(
       isHorizontal ? bindableCenter[0] : resolved[0],
@@ -1689,10 +1704,41 @@ export const snapToMid = (
   return undefined;
 };
 
-const compareElementArea = (
-  a: ExcalidrawBindableElement,
-  b: ExcalidrawBindableElement,
-) => b.width ** 2 + b.height ** 2 - (a.width ** 2 + a.height ** 2);
+const extractBinding = (
+  arrow: ExcalidrawArrowElement,
+  startOrEnd: "startBinding" | "endBinding",
+  elementsMap: ElementsMap,
+) => {
+  const binding = arrow[startOrEnd];
+  if (!binding) {
+    return {
+      element: null,
+      fixedPoint: null,
+      focusPoint: null,
+      binding,
+      mode: null,
+    };
+  }
+
+  const element = elementsMap.get(
+    binding.elementId,
+  ) as ExcalidrawBindableElement;
+
+  return {
+    element,
+    fixedPoint: binding.fixedPoint,
+    focusPoint: getGlobalFixedPointForBindableElement(
+      normalizeFixedPoint(binding.fixedPoint),
+      element,
+      elementsMap,
+    ),
+    binding,
+    mode: binding.mode,
+  };
+};
+
+const elementArea = (element: ExcalidrawBindableElement) =>
+  element.width * element.height;
 
 export const updateBoundPoint = (
   arrow: NonDeleted<ExcalidrawArrowElement>,
@@ -1700,9 +1746,7 @@ export const updateBoundPoint = (
   binding: FixedPointBinding | null | undefined,
   bindableElement: ExcalidrawBindableElement,
   elementsMap: ElementsMap,
-  opts?: {
-    customIntersector?: LineSegment<GlobalPoint>;
-  },
+  dragging?: boolean,
 ): LocalPoint | null => {
   if (
     binding == null ||
@@ -1717,150 +1761,139 @@ export const updateBoundPoint = (
     return null;
   }
 
-  const global = getGlobalFixedPointForBindableElement(
+  const focusPoint = getGlobalFixedPointForBindableElement(
     normalizeFixedPoint(binding.fixedPoint),
     bindableElement,
     elementsMap,
   );
-  const pointIndex =
-    startOrEnd === "startBinding" ? 0 : arrow.points.length - 1;
-  const elbowed = isElbowArrow(arrow);
-  const otherBinding =
-    startOrEnd === "startBinding" ? arrow.endBinding : arrow.startBinding;
-  const otherBindableElement =
-    otherBinding &&
-    (elementsMap.get(otherBinding.elementId)! as ExcalidrawBindableElement);
-  const bounds = getElementBounds(bindableElement, elementsMap);
-  const otherBounds =
-    otherBindableElement && getElementBounds(otherBindableElement, elementsMap);
-  const isLargerThanOther =
-    otherBindableElement &&
-    compareElementArea(bindableElement, otherBindableElement) <
-      // if both shapes the same size, pretend the other is larger
-      (startOrEnd === "endBinding" ? 1 : 0);
-  const isOverlapping = otherBounds && doBoundsIntersect(bounds, otherBounds);
 
-  // GOAL: If the arrow becomes too short, we want to jump the arrow endpoints
-  // to the exact focus points on the elements.
-  // INTUITION: We're not interested in the exacts length of the arrow (which
-  // will change if we change where we route it), we want to know the length of
-  // the part which lies outside of both shapes and consider that as a trigger
-  // to change where we point the arrow. Avoids jumping the arrow in and out
-  // at every frame.
-  let arrowTooShort = false;
-  if (
-    !isOverlapping &&
-    !elbowed &&
-    arrow.startBinding &&
-    arrow.endBinding &&
-    otherBindableElement &&
-    arrow.points.length === 2
-  ) {
-    const startFocusPoint = getGlobalFixedPointForBindableElement(
-      arrow.startBinding.fixedPoint,
-      startOrEnd === "startBinding" ? bindableElement : otherBindableElement,
-      elementsMap,
-    );
-    const endFocusPoint = getGlobalFixedPointForBindableElement(
-      arrow.endBinding.fixedPoint,
-      startOrEnd === "endBinding" ? bindableElement : otherBindableElement,
-      elementsMap,
-    );
-    const segment = lineSegment(startFocusPoint, endFocusPoint);
-    const startIntersection = intersectElementWithLineSegment(
-      startOrEnd === "endBinding" ? bindableElement : otherBindableElement,
-      elementsMap,
-      segment,
-      0,
-      true,
-    );
-    const endIntersection = intersectElementWithLineSegment(
-      startOrEnd === "startBinding" ? bindableElement : otherBindableElement,
-      elementsMap,
-      segment,
-      0,
-      true,
-    );
-    if (startIntersection.length > 0 && endIntersection.length > 0) {
-      const len = pointDistance(startIntersection[0], endIntersection[0]);
-      arrowTooShort = len < 40;
-    }
-  }
-
-  const isNested = (arrowTooShort || isOverlapping) && isLargerThanOther;
-
-  let _customIntersector = opts?.customIntersector;
-  if (!elbowed && !_customIntersector) {
-    const [x1, y1, x2, y2] = LinearElementEditor.getElementAbsoluteCoords(
+  // 0. Short-circuit for inside binding as it doesn't require any
+  // calculations and is not affected by other bindings
+  if (binding.mode === "fixed") {
+    return LinearElementEditor.createPointAt(
       arrow,
       elementsMap,
-    );
-    const center = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
-    const edgePoint = global;
-    const adjacentPoint = pointRotateRads(
-      pointFrom<GlobalPoint>(
-        arrow.x +
-          arrow.points[pointIndex === 0 ? 1 : arrow.points.length - 2][0],
-        arrow.y +
-          arrow.points[pointIndex === 0 ? 1 : arrow.points.length - 2][1],
-      ),
-      center,
-      arrow.angle as Radians,
-    );
-    const bindingGap = getBindingGap(bindableElement, arrow);
-    const halfVector = vectorScale(
-      vectorNormalize(vectorFromPoint(edgePoint, adjacentPoint)),
-      pointDistance(edgePoint, adjacentPoint) +
-        Math.max(bindableElement.width, bindableElement.height) +
-        bindingGap * 2,
-    );
-    _customIntersector = lineSegment(
-      pointFromVector(halfVector, adjacentPoint),
-      pointFromVector(vectorScale(halfVector, -1), adjacentPoint),
+      focusPoint[0],
+      focusPoint[1],
+      null,
     );
   }
 
-  const maybeOutlineGlobal =
-    binding.mode === "orbit" && bindableElement
-      ? isNested
-        ? global
-        : bindPointToSnapToElementOutline(
-            {
-              ...arrow,
-              points: [
-                pointIndex === 0
-                  ? LinearElementEditor.createPointAt(
-                      arrow,
-                      elementsMap,
-                      global[0],
-                      global[1],
-                      null,
-                    )
-                  : arrow.points[0],
-                ...arrow.points.slice(1, -1),
-                pointIndex === arrow.points.length - 1
-                  ? LinearElementEditor.createPointAt(
-                      arrow,
-                      elementsMap,
-                      global[0],
-                      global[1],
-                      null,
-                    )
-                  : arrow.points[arrow.points.length - 1],
-              ],
-            },
-            bindableElement,
-            pointIndex === 0 ? "start" : "end",
-            elementsMap,
-            _customIntersector,
-          )
-      : global;
+  const { element: otherBindable, focusPoint: otherFocusPoint } =
+    extractBinding(
+      arrow,
+      startOrEnd === "startBinding" ? "endBinding" : "startBinding",
+      elementsMap,
+    );
+  const otherArrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    arrow,
+    startOrEnd === "startBinding" ? 1 : -2,
+    elementsMap,
+  );
+  const otherFocusPointOrArrowPoint =
+    arrow.points.length === 2
+      ? otherFocusPoint || otherArrowPoint
+      : otherArrowPoint;
+  const intersector =
+    otherFocusPointOrArrowPoint &&
+    lineSegment(focusPoint, otherFocusPointOrArrowPoint);
+  const otherOutlinePoint =
+    otherBindable &&
+    intersector &&
+    intersectElementWithLineSegment(
+      otherBindable,
+      elementsMap,
+      intersector,
+      getBindingGap(otherBindable, arrow),
+    ).sort(
+      (a, b) => pointDistanceSq(a, focusPoint) - pointDistanceSq(b, focusPoint),
+    )[0];
+  const outlinePoint =
+    intersector &&
+    intersectElementWithLineSegment(
+      bindableElement,
+      elementsMap,
+      intersector,
+      getBindingGap(bindableElement, arrow),
+    ).sort(
+      (a, b) =>
+        pointDistanceSq(a, otherFocusPointOrArrowPoint) -
+        pointDistanceSq(b, otherFocusPointOrArrowPoint),
+    )[0];
+  const startHasArrowhead = arrow.startArrowhead !== null;
+  const endHasArrowhead = arrow.endArrowhead !== null;
+  const resolvedTarget =
+    (!startHasArrowhead && !endHasArrowhead) ||
+    (startOrEnd === "startBinding" && startHasArrowhead) ||
+    (startOrEnd === "endBinding" && endHasArrowhead)
+      ? focusPoint
+      : outlinePoint || focusPoint;
 
+  // 1. Handle case when the outline point (or focus point) is inside
+  // the other shape by short-circuiting to the focus point, otherwise
+  // the arrow would invert
+  if (
+    otherBindable &&
+    outlinePoint &&
+    !dragging &&
+    // Arbitrary threshold to handle wireframing use cases
+    elementArea(otherBindable) < elementArea(bindableElement) * 2 &&
+    hitElementItself({
+      element: otherBindable,
+      point: outlinePoint,
+      elementsMap,
+      threshold: getBindingGap(otherBindable, arrow),
+      overrideShouldTestInside: true,
+    })
+  ) {
+    return LinearElementEditor.createPointAt(
+      arrow,
+      elementsMap,
+      resolvedTarget[0],
+      resolvedTarget[1],
+      null,
+    );
+  }
+
+  const otherTargetPoint = otherBindable
+    ? otherOutlinePoint || otherFocusPoint || otherArrowPoint
+    : otherArrowPoint;
+  const arrowTooShort =
+    pointDistance(otherTargetPoint, outlinePoint || focusPoint) <=
+    BASE_ARROW_MIN_LENGTH;
+
+  // 2. If the arrow is unconnected at the other end, just check arrow size
+  // and short-circuit to the focus point if the arrow is too short to
+  // avoid inversion
+  if (!otherBindable) {
+    return LinearElementEditor.createPointAt(
+      arrow,
+      elementsMap,
+      arrowTooShort ? focusPoint[0] : outlinePoint?.[0] ?? focusPoint[0],
+      arrowTooShort ? focusPoint[1] : outlinePoint?.[1] ?? focusPoint[1],
+      null,
+    );
+  }
+
+  // 3. If the arrow is too short while connected on both ends and
+  // the other arrow endpoint will not be inside the bindable, just
+  // check the arrow size and make a decision based on that
+  if (arrowTooShort) {
+    return LinearElementEditor.createPointAt(
+      arrow,
+      elementsMap,
+      resolvedTarget?.[0] || focusPoint[0],
+      resolvedTarget?.[1] || focusPoint[1],
+      null,
+    );
+  }
+
+  // 4. In the general case, snap to the outline if possible
   return LinearElementEditor.createPointAt(
     arrow,
     elementsMap,
-    maybeOutlineGlobal[0],
-    maybeOutlineGlobal[1],
+    outlinePoint?.[0] || focusPoint[0],
+    outlinePoint?.[1] || focusPoint[1],
     null,
   );
 };
@@ -1870,6 +1903,8 @@ export const calculateFixedPointForElbowArrowBinding = (
   hoveredElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
   elementsMap: ElementsMap,
+  shouldSnapToOutline = true,
+  isMidpointSnappingEnabled = true,
 ): { fixedPoint: FixedPoint } => {
   const bounds = [
     hoveredElement.x,
@@ -1877,12 +1912,20 @@ export const calculateFixedPointForElbowArrowBinding = (
     hoveredElement.x + hoveredElement.width,
     hoveredElement.y + hoveredElement.height,
   ] as Bounds;
-  const snappedPoint = bindPointToSnapToElementOutline(
-    linearElement,
-    hoveredElement,
-    startOrEnd,
-    elementsMap,
-  );
+  const snappedPoint = shouldSnapToOutline
+    ? bindPointToSnapToElementOutline(
+        linearElement,
+        hoveredElement,
+        startOrEnd,
+        elementsMap,
+        undefined,
+        isMidpointSnappingEnabled,
+      )
+    : LinearElementEditor.getPointAtIndexGlobalCoordinates(
+        linearElement,
+        startOrEnd === "start" ? 0 : -1,
+        elementsMap,
+      );
   const globalMidPoint = pointFrom(
     bounds[0] + (bounds[2] - bounds[0]) / 2,
     bounds[1] + (bounds[3] - bounds[1]) / 2,
@@ -1896,9 +1939,9 @@ export const calculateFixedPointForElbowArrowBinding = (
   return {
     fixedPoint: normalizeFixedPoint([
       (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
-        hoveredElement.width,
+        Math.max(hoveredElement.width, PRECISION),
       (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
-        hoveredElement.height,
+        Math.max(hoveredElement.height, PRECISION),
     ]),
   };
 };
@@ -1929,9 +1972,11 @@ export const calculateFixedPointForNonElbowArrowBinding = (
 
   // Calculate the ratio relative to the element's bounds
   const fixedPointX =
-    (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
+    (nonRotatedPoint[0] - hoveredElement.x) /
+    Math.max(hoveredElement.width, PRECISION);
   const fixedPointY =
-    (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
+    (nonRotatedPoint[1] - hoveredElement.y) /
+    Math.max(hoveredElement.height, PRECISION);
 
   return {
     fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
@@ -2428,21 +2473,37 @@ export const getArrowLocalFixedPoints = (
   ];
 };
 
-export const normalizeFixedPoint = <T extends FixedPoint | null>(
+export const isFixedPoint = (
+  fixedPoint: any,
+): fixedPoint is FixedPointBinding["fixedPoint"] => {
+  return (
+    Array.isArray(fixedPoint) &&
+    fixedPoint.length === 2 &&
+    fixedPoint.every((coord) => Number.isFinite(coord))
+  );
+};
+
+export const normalizeFixedPoint = <T extends FixedPoint>(
   fixedPoint: T,
-): T extends null ? null : FixedPoint => {
+): FixedPoint => {
+  if (!isFixedPoint(fixedPoint)) {
+    return [0.5001, 0.5001];
+  }
+
+  const EPSILON = 0.0001;
+
   // Do not allow a precise 0.5 for fixed point ratio
   // to avoid jumping arrow heading due to floating point imprecision
   if (
-    fixedPoint &&
-    (Math.abs(fixedPoint[0] - 0.5) < 0.0001 ||
-      Math.abs(fixedPoint[1] - 0.5) < 0.0001)
+    Math.abs(fixedPoint[0] - 0.5) < EPSILON ||
+    Math.abs(fixedPoint[1] - 0.5) < EPSILON
   ) {
     return fixedPoint.map((ratio) =>
-      Math.abs(ratio - 0.5) < 0.0001 ? 0.5001 : ratio,
-    ) as T extends null ? null : FixedPoint;
+      Math.abs(ratio - 0.5) < EPSILON ? 0.5001 : ratio,
+    ) as FixedPoint;
   }
-  return fixedPoint as any as T extends null ? null : FixedPoint;
+
+  return fixedPoint;
 };
 
 type Side =

packages/element/src/bounds.ts

@@ -680,8 +680,9 @@ export const getMinMaxXYFromCurvePathOps = (
   return [minX, minY, maxX, maxY];
 };
 
-export const getBoundsFromPoints = (
-  points: ExcalidrawFreeDrawElement["points"],
+export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
+  points: readonly P[],
+  padding: number = 0,
 ): Bounds => {
   let minX = Infinity;
   let minY = Infinity;
@@ -695,7 +696,7 @@ export const getBoundsFromPoints = (
     maxY = Math.max(maxY, y);
   }
 
-  return [minX, minY, maxX, maxY];
+  return [minX - padding, minY - padding, maxX + padding, maxY + padding];
 };
 
 const getFreeDrawElementAbsoluteCoords = (
@@ -709,6 +710,9 @@ const getFreeDrawElementAbsoluteCoords = (
   return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
 };
 
+const CARDINALITY_MARKER_SIZE = 20;
+const CROWFOOT_ARROWHEAD_SIZE = 15;
+
 /** @returns number in pixels */
 export const getArrowheadSize = (arrowhead: Arrowhead): number => {
   switch (arrowhead) {
@@ -717,10 +721,14 @@ export const getArrowheadSize = (arrowhead: Arrowhead): number => {
     case "diamond":
     case "diamond_outline":
       return 12;
-    case "crowfoot_many":
-    case "crowfoot_one":
-    case "crowfoot_one_or_many":
-      return 20;
+    case "cardinality_many":
+    case "cardinality_one_or_many":
+    case "cardinality_zero_or_many":
+      return CROWFOOT_ARROWHEAD_SIZE;
+    case "cardinality_one":
+    case "cardinality_exactly_one":
+    case "cardinality_zero_or_one":
+      return CARDINALITY_MARKER_SIZE;
     default:
       return 15;
   }
@@ -743,7 +751,12 @@ export const getArrowheadPoints = (
   shape: Drawable[],
   position: "start" | "end",
   arrowhead: Arrowhead,
+  offsetMultiplier = 0,
 ) => {
+  if (arrowhead === null) {
+    return null;
+  }
+
   if (shape.length < 1) {
     return null;
   }
@@ -824,29 +837,30 @@ export const getArrowheadPoints = (
   const lengthMultiplier =
     arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5;
   const minSize = Math.min(size, length * lengthMultiplier);
-  const xs = x2 - nx * minSize;
-  const ys = y2 - ny * minSize;
+  const tx = x2 - nx * minSize * offsetMultiplier;
+  const ty = y2 - ny * minSize * offsetMultiplier;
+  const xs = tx - nx * minSize;
+  const ys = ty - ny * minSize;
 
-  if (
-    arrowhead === "dot" ||
-    arrowhead === "circle" ||
-    arrowhead === "circle_outline"
-  ) {
-    const diameter = Math.hypot(ys - y2, xs - x2) + element.strokeWidth - 2;
-    return [x2, y2, diameter];
+  if (arrowhead === "circle" || arrowhead === "circle_outline") {
+    const diameter = Math.hypot(ys - ty, xs - tx) + element.strokeWidth - 2;
+    return [tx, ty, diameter];
   }
 
   const angle = getArrowheadAngle(arrowhead);
 
-  if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
+  if (
+    arrowhead === "cardinality_many" ||
+    arrowhead === "cardinality_one_or_many"
+  ) {
     // swap (xs, ys) with (x2, y2)
     const [x3, y3] = pointRotateRads(
-      pointFrom(x2, y2),
+      pointFrom(tx, ty),
       pointFrom(xs, ys),
       degreesToRadians(-angle as Degrees),
     );
     const [x4, y4] = pointRotateRads(
-      pointFrom(x2, y2),
+      pointFrom(tx, ty),
       pointFrom(xs, ys),
       degreesToRadians(angle),
     );
@@ -856,12 +870,12 @@ export const getArrowheadPoints = (
   // Return points
   const [x3, y3] = pointRotateRads(
     pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    pointFrom(tx, ty),
     ((-angle * Math.PI) / 180) as Radians,
   );
   const [x4, y4] = pointRotateRads(
     pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    pointFrom(tx, ty),
     degreesToRadians(angle),
   );
 
@@ -874,9 +888,9 @@ export const getArrowheadPoints = (
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 + minSize * 2, y2),
-        pointFrom(x2, y2),
-        Math.atan2(py - y2, px - x2) as Radians,
+        pointFrom(tx + minSize * 2, ty),
+        pointFrom(tx, ty),
+        Math.atan2(py - ty, px - tx) as Radians,
       );
     } else {
       const [px, py] =
@@ -885,16 +899,16 @@ export const getArrowheadPoints = (
           : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 - minSize * 2, y2),
-        pointFrom(x2, y2),
-        Math.atan2(y2 - py, x2 - px) as Radians,
+        pointFrom(tx - minSize * 2, ty),
+        pointFrom(tx, ty),
+        Math.atan2(ty - py, tx - px) as Radians,
       );
     }
 
-    return [x2, y2, x3, y3, ox, oy, x4, y4];
+    return [tx, ty, x3, y3, ox, oy, x4, y4];
   }
 
-  return [x2, y2, x3, y3, x4, y4];
+  return [tx, ty, x3, y3, x4, y4];
 };
 
 // TODO reuse shape.ts
@@ -1248,6 +1262,17 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
 ): boolean =>
   p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
 
+// TODO make pointInsideBounds inclusive and remove this function once we
+// test nothing is breaking
+export const pointInsideBoundsInclusive = <P extends GlobalPoint | LocalPoint>(
+  p: P,
+  bounds: Bounds,
+): boolean =>
+  p[0] >= bounds[0] &&
+  p[0] <= bounds[2] &&
+  p[1] >= bounds[1] &&
+  p[1] <= bounds[3];
+
 export const doBoundsIntersect = (
   bounds1: Bounds | null,
   bounds2: Bounds | null,
@@ -1262,13 +1287,21 @@ export const doBoundsIntersect = (
   return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
 };
 
+export const boundsContainBounds = (outerBounds: Bounds, innerBounds: Bounds) =>
+  [
+    pointFrom<GlobalPoint>(innerBounds[0], innerBounds[1]),
+    pointFrom<GlobalPoint>(innerBounds[0], innerBounds[3]),
+    pointFrom<GlobalPoint>(innerBounds[2], innerBounds[1]),
+    pointFrom<GlobalPoint>(innerBounds[2], innerBounds[3]),
+  ].every((point) => pointInsideBoundsInclusive(point, outerBounds));
+
 export const elementCenterPoint = (
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
   xOffset: number = 0,
   yOffset: number = 0,
 ) => {
-  if (isLinearElement(element)) {
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const [x, y] = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
 

packages/element/src/collision.ts

@@ -61,6 +61,8 @@ import { distanceToElement } from "./distance";
 
 import { getBindingGap } from "./binding";
 
+import { hasBackground } from "./comparisons";
+
 import type {
   ElementsMap,
   ExcalidrawArrowElement,
@@ -83,7 +85,7 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
   }
 
   const isDraggableFromInside =
-    !isTransparent(element.backgroundColor) ||
+    (hasBackground(element.type) && !isTransparent(element.backgroundColor)) ||
     hasBoundTextElement(element) ||
     isIframeLikeElement(element) ||
     isTextElement(element);
@@ -154,14 +156,11 @@ export const hitElementItself = ({
 
   // 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),
+  const hitBounds = isPointInRotatedBounds(
+    point,
+    bounds,
+    element.angle,
+    threshold,
   );
 
   // PERF: Bail out early if the point is not even in the
@@ -192,18 +191,32 @@ export const hitElementItself = ({
   return result;
 };
 
+const isPointInRotatedBounds = (
+  point: GlobalPoint,
+  bounds: Bounds,
+  angle: Radians,
+  tolerance = 0,
+) => {
+  const adjustedPoint =
+    angle === 0
+      ? point
+      : pointRotateRads(point, getCenterForBounds(bounds), -angle as Radians);
+
+  return isPointWithinBounds(
+    pointFrom(bounds[0] - tolerance, bounds[1] - tolerance),
+    adjustedPoint,
+    pointFrom(bounds[2] + tolerance, bounds[3] + tolerance),
+  );
+};
+
 export const hitElementBoundingBox = (
   point: GlobalPoint,
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
   tolerance = 0,
 ) => {
-  let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
-  x1 -= tolerance;
-  y1 -= tolerance;
-  x2 += tolerance;
-  y2 += tolerance;
-  return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2));
+  const bounds = getElementBounds(element, elementsMap, true);
+  return isPointInRotatedBounds(point, bounds, element.angle, tolerance);
 };
 
 export const hitElementBoundingBoxOnly = (
@@ -313,7 +326,10 @@ export const getAllHoveredElementAtPoint = (
     ) {
       candidateElements.push(element);
 
-      if (!isTransparent(element.backgroundColor)) {
+      if (
+        hasBackground(element.type) &&
+        !isTransparent(element.backgroundColor)
+      ) {
         break;
       }
     }
@@ -465,7 +481,12 @@ export const intersectElementWithLineSegment = (
     case "line":
     case "freedraw":
     case "arrow":
-      return intersectLinearOrFreeDrawWithLineSegment(element, line, onlyFirst);
+      return intersectLinearOrFreeDrawWithLineSegment(
+        element,
+        line,
+        elementsMap,
+        onlyFirst,
+      );
   }
 };
 
@@ -532,11 +553,15 @@ const lineIntersections = (
 const intersectLinearOrFreeDrawWithLineSegment = (
   element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
   segment: LineSegment<GlobalPoint>,
+  elementsMap: ElementsMap,
   onlyFirst = false,
 ): GlobalPoint[] => {
   // NOTE: This is the only one which return the decomposed elements
   // rotated! This is due to taking advantage of roughjs definitions.
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap,
+  );
   const intersections: GlobalPoint[] = [];
 
   for (const l of lines) {
@@ -564,7 +589,9 @@ const intersectLinearOrFreeDrawWithLineSegment = (
       continue;
     }
 
-    const hits = curveIntersectLineSegment(c, segment);
+    const hits = curveIntersectLineSegment(c, segment, {
+      iterLimit: 10,
+    });
 
     if (hits.length > 0) {
       intersections.push(...hits);

packages/element/src/distance.ts

@@ -48,7 +48,7 @@ export const distanceToElement = (
     case "line":
     case "arrow":
     case "freedraw":
-      return distanceToLinearOrFreeDraElement(element, p);
+      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
   }
 };
 
@@ -133,9 +133,13 @@ const distanceToEllipseElement = (
 
 const distanceToLinearOrFreeDraElement = (
   element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
   p: GlobalPoint,
 ) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap,
+  );
   return Math.min(
     ...lines.map((s) => distanceToLineSegment(p, s)),
     ...curves.map((a) => curvePointDistance(a, p)),

packages/element/src/duplicate.ts

@@ -111,6 +111,9 @@ export const duplicateElements = (
          * user interaction.
          */
         type: "everything";
+        // TODO remove/review this once we add frame children order migration
+        // and invariant checks
+        preserveFrameChildrenOrder?: boolean;
       }
     | {
         /**
@@ -170,6 +173,8 @@ export const duplicateElements = (
     opts.type === "in-place"
       ? opts.idsOfElementsToDuplicate
       : new Map(elements.map((el) => [el.id, el]));
+  const preserveFrameChildrenOrder =
+    opts.type === "everything" && opts.preserveFrameChildrenOrder;
 
   // For sanity
   if (opts.type === "in-place") {
@@ -250,6 +255,9 @@ export const duplicateElements = (
     elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
   };
 
+  // main
+  // ---------------------------------------------------------------------------
+
   const frameIdsToDuplicate = new Set(
     elements
       .filter(
@@ -274,7 +282,7 @@ export const duplicateElements = (
     if (groupId) {
       const groupElements = getElementsInGroup(elements, groupId).flatMap(
         (element) =>
-          isFrameLikeElement(element)
+          isFrameLikeElement(element) && !preserveFrameChildrenOrder
             ? [...getFrameChildren(elements, element.id), element]
             : [element],
       );
@@ -290,13 +298,25 @@ export const duplicateElements = (
     // frame duplication
     // -------------------------------------------------------------------------
 
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+    if (
+      !preserveFrameChildrenOrder &&
+      element.frameId &&
+      frameIdsToDuplicate.has(element.frameId)
+    ) {
       continue;
     }
 
     if (isFrameLikeElement(element)) {
       const frameId = element.id;
 
+      if (preserveFrameChildrenOrder) {
+        insertBeforeOrAfterIndex(
+          findLastIndex(elementsWithDuplicates, (el) => el.id === frameId),
+          copyElements(element),
+        );
+        continue;
+      }
+
       const frameChildren = getFrameChildren(elements, frameId);
 
       const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {

packages/element/src/elbowArrow.ts

@@ -915,6 +915,8 @@ export const updateElbowArrowPoints = (
   },
   options?: {
     isDragging?: boolean;
+    isBindingEnabled?: boolean;
+    isMidpointSnappingEnabled?: boolean;
   },
 ): ElementUpdate<ExcalidrawElbowArrowElement> => {
   if (arrow.points.length < 2) {
@@ -1202,6 +1204,8 @@ const getElbowArrowData = (
   options?: {
     isDragging?: boolean;
     zoom?: AppState["zoom"];
+    isBindingEnabled?: boolean;
+    isMidpointSnappingEnabled?: boolean;
   },
 ) => {
   const origStartGlobalPoint: GlobalPoint = pointTranslate<
@@ -1215,7 +1219,7 @@ const getElbowArrowData = (
 
   let hoveredStartElement = null;
   let hoveredEndElement = null;
-  if (options?.isDragging) {
+  if (options?.isDragging && options?.isBindingEnabled !== false) {
     const elements = Array.from(elementsMap.values());
     hoveredStartElement =
       getHoveredElement(
@@ -1255,6 +1259,8 @@ const getElbowArrowData = (
     hoveredStartElement,
     elementsMap,
     options?.isDragging,
+    options?.isBindingEnabled,
+    options?.isMidpointSnappingEnabled,
   );
   const endGlobalPoint = getGlobalPoint(
     {
@@ -1270,6 +1276,8 @@ const getElbowArrowData = (
     hoveredEndElement,
     elementsMap,
     options?.isDragging,
+    options?.isBindingEnabled,
+    options?.isMidpointSnappingEnabled,
   );
   const startHeading = getBindPointHeading(
     startGlobalPoint,
@@ -2116,8 +2124,8 @@ const normalizeArrowElementUpdate = (
     offsetY < -MAX_POS ||
     offsetY > MAX_POS ||
     offsetX + points[points.length - 1][0] < -MAX_POS ||
-    offsetY + points[points.length - 1][0] > MAX_POS ||
-    offsetX + points[points.length - 1][1] < -MAX_POS ||
+    offsetX + points[points.length - 1][0] > MAX_POS ||
+    offsetY + points[points.length - 1][1] < -MAX_POS ||
     offsetY + points[points.length - 1][1] > MAX_POS
   ) {
     console.error(
@@ -2213,14 +2221,18 @@ const getGlobalPoint = (
   element?: ExcalidrawBindableElement | null,
   elementsMap?: ElementsMap,
   isDragging?: boolean,
+  isBindingEnabled = true,
+  isMidpointSnappingEnabled = true,
 ): GlobalPoint => {
   if (isDragging) {
-    if (element && elementsMap) {
+    if (isBindingEnabled && element && elementsMap) {
       return bindPointToSnapToElementOutline(
         arrow,
         element,
         startOrEnd,
         elementsMap,
+        undefined,
+        isMidpointSnappingEnabled,
       );
     }
 

packages/element/src/embeddable.ts

@@ -56,7 +56,7 @@ const RE_REDDIT =
 const RE_REDDIT_EMBED =
   /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:www\.)?reddit\.com\/[^"']*)/i;
 
-const parseYouTubeTimestamp = (url: string): number => {
+const parseYouTubeLikeTimestamp = (url: string): number => {
   let timeParam: string | null | undefined;
 
   try {
@@ -85,11 +85,57 @@ const parseYouTubeTimestamp = (url: string): number => {
   return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
 };
 
+const parseGoogleDriveVideoLink = (
+  url: string,
+): { fileId: string; resourceKey?: string; timestamp?: number } | null => {
+  try {
+    const urlObj = new URL(url.startsWith("http") ? url : `https://${url}`);
+    const hostname = urlObj.hostname.replace(/^www\./, "");
+    if (hostname !== "drive.google.com") {
+      return null;
+    }
+
+    let fileId: string | null = null;
+    const pathMatch = urlObj.pathname.match(/^\/file\/d\/([^/]+)(?:\/|$)/);
+    if (pathMatch?.[1]) {
+      fileId = pathMatch[1];
+    } else if (urlObj.pathname === "/open" || urlObj.pathname === "/uc") {
+      // Shared Drive links can be emitted as:
+      // - /open?id=<fileId> (common "open in Drive" format)
+      // - /uc?...&id=<fileId> (download/export endpoint often seen in copied links)
+      fileId = urlObj.searchParams.get("id");
+    }
+
+    if (!fileId || !/^[a-zA-Z0-9_-]+$/.test(fileId)) {
+      return null;
+    }
+
+    // Some Drive share links include `resourcekey` for access to link-shared
+    // files; preserve it in the preview URL so embeds keep working.
+    const resourceKey = urlObj.searchParams.get("resourcekey");
+    const timestamp = parseYouTubeLikeTimestamp(urlObj.toString());
+
+    return {
+      fileId,
+      resourceKey:
+        resourceKey && /^[a-zA-Z0-9_-]+$/.test(resourceKey)
+          ? resourceKey
+          : undefined,
+      // Drive accepts YouTube-like `t` formats (e.g. `t=90`, `t=1m30s`);
+      // normalize to seconds for a stable preview URL.
+      timestamp: timestamp > 0 ? timestamp : undefined,
+    };
+  } catch (error) {
+    return null;
+  }
+};
+
 const ALLOWED_DOMAINS = new Set([
   "youtube.com",
   "youtu.be",
   "vimeo.com",
   "player.vimeo.com",
+  "drive.google.com",
   "figma.com",
   "link.excalidraw.com",
   "gist.github.com",
@@ -108,6 +154,7 @@ const ALLOW_SAME_ORIGIN = new Set([
   "youtu.be",
   "vimeo.com",
   "player.vimeo.com",
+  "drive.google.com",
   "figma.com",
   "twitter.com",
   "x.com",
@@ -142,7 +189,7 @@ export const getEmbedLink = (
   let aspectRatio = { w: 560, h: 840 };
   const ytLink = link.match(RE_YOUTUBE);
   if (ytLink?.[2]) {
-    const startTime = parseYouTubeTimestamp(originalLink);
+    const startTime = parseYouTubeLikeTimestamp(originalLink);
     const time = startTime > 0 ? `&start=${startTime}` : ``;
     const isPortrait = link.includes("shorts");
     type = "video";
@@ -201,6 +248,36 @@ export const getEmbedLink = (
     };
   }
 
+  const googleDriveVideo = parseGoogleDriveVideoLink(link);
+  if (googleDriveVideo) {
+    type = "video";
+    const searchParams = new URLSearchParams();
+    if (googleDriveVideo.resourceKey) {
+      searchParams.set("resourcekey", googleDriveVideo.resourceKey);
+    }
+    if (googleDriveVideo.timestamp) {
+      searchParams.set("t", `${googleDriveVideo.timestamp}`);
+    }
+
+    const search = searchParams.toString();
+    link = `https://drive.google.com/file/d/${googleDriveVideo.fileId}/preview${
+      search ? `?${search}` : ""
+    }`;
+    aspectRatio = { w: 560, h: 315 };
+    embeddedLinkCache.set(originalLink, {
+      link,
+      intrinsicSize: aspectRatio,
+      type,
+      sandbox: { allowSameOrigin },
+    });
+    return {
+      link,
+      intrinsicSize: aspectRatio,
+      type,
+      sandbox: { allowSameOrigin },
+    };
+  }
+
   const figmaLink = link.match(RE_FIGMA);
   if (figmaLink) {
     type = "generic";

packages/element/src/fractionalIndex.ts

@@ -1,7 +1,10 @@
-import { generateNKeysBetween } from "fractional-indexing";
-
 import { arrayToMap } from "@excalidraw/common";
 
+import {
+  validateOrderKey,
+  generateNKeysBetween,
+} from "@excalidraw/fractional-indexing";
+
 import { mutateElement, newElementWith } from "./mutateElement";
 import { getBoundTextElement } from "./textElement";
 import { hasBoundTextElement } from "./typeChecks";
@@ -382,6 +385,13 @@ const isValidFractionalIndex = (
     return false;
   }
 
+  try {
+    // Format validation
+    validateOrderKey(index);
+  } catch {
+    return false;
+  }
+
   if (predecessor && successor) {
     return predecessor < index && index < successor;
   }

packages/element/src/frame.ts

@@ -1,7 +1,6 @@
 import { arrayToMap } from "@excalidraw/common";
 import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
 import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
-import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";
 
 import type {
   AppClassProperties,
@@ -18,9 +17,13 @@ import {
   getElementLineSegments,
   getCommonBounds,
   getElementAbsoluteCoords,
+  doBoundsIntersect,
+  getElementBounds,
+  boundsContainBounds,
 } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getBoundTextElement, getContainerElement } from "./textElement";
+import { syncMovedIndices } from "./fractionalIndex";
 import {
   isFrameElement,
   isFrameLikeElement,
@@ -100,8 +103,9 @@ export const isElementContainingFrame = (
   frame: ExcalidrawFrameLikeElement,
   elementsMap: ElementsMap,
 ) => {
-  return getElementsWithinSelection([frame], element, elementsMap).some(
-    (e) => e.id === frame.id,
+  return boundsContainBounds(
+    getElementBounds(element, elementsMap),
+    getElementBounds(frame, elementsMap),
   );
 };
 
@@ -488,10 +492,44 @@ export const filterElementsEligibleAsFrameChildren = (
   return eligibleElements;
 };
 
+export const getCommonFrameId = (elements: readonly ExcalidrawElement[]) => {
+  let commonFrameId: ExcalidrawElement["frameId"] | undefined;
+
+  for (const element of elements) {
+    if (isFrameLikeElement(element) || !element.frameId) {
+      return null;
+    }
+
+    if (commonFrameId === undefined) {
+      commonFrameId = element.frameId;
+    } else if (commonFrameId !== element.frameId) {
+      return null;
+    }
+  }
+
+  return commonFrameId ?? null;
+};
+
+export const getFrameChildrenInsertionIndex = (
+  elements: readonly ExcalidrawElement[],
+  frameId: ExcalidrawFrameLikeElement["id"],
+): number | null => {
+  for (let index = elements.length - 1; index >= 0; index--) {
+    const element = elements[index];
+
+    if (element.id === frameId) {
+      return index;
+    } else if (element.frameId === frameId) {
+      return index + 1;
+    }
+  }
+
+  return null;
+};
+
 /**
- * Retains (or repairs for target frame) the ordering invriant where children
- * elements come right before the parent frame:
- * [el, el, child, child, frame, el]
+ * Adds elements and their bound elements to frame. Reorders added elements to
+ * be just below frame, or just above its highest child (whichever is higher).
  *
  * @returns mutated allElements (same data structure)
  */
@@ -499,19 +537,11 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
   allElements: T,
   elementsToAdd: NonDeletedExcalidrawElement[],
   frame: ExcalidrawFrameLikeElement,
-  appState: AppState,
 ): T => {
   const elementsMap = arrayToMap(allElements);
-  const currTargetFrameChildrenMap = new Map<ExcalidrawElement["id"], true>();
-  for (const element of allElements.values()) {
-    if (element.frameId === frame.id) {
-      currTargetFrameChildrenMap.set(element.id, true);
-    }
-  }
+  const commonFrameId = getCommonFrameId(elementsToAdd);
 
-  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
-
-  const finalElementsToAdd: ExcalidrawElement[] = [];
+  const finalElementsToAdd = new Set<ExcalidrawElement>();
 
   const otherFrames = new Set<ExcalidrawFrameLikeElement["id"]>();
 
@@ -522,7 +552,8 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
   }
 
   // - add bound text elements if not already in the array
-  // - filter out elements that are already in the frame
+  // - keep elements already in the frame so mixed selections can be reordered
+  //   together
   for (const element of omitGroupsContainingFrameLikes(
     allElements,
     elementsToAdd,
@@ -535,38 +566,68 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
       continue;
     }
 
-    // if the element is already in another frame (which is also in elementsToAdd),
-    // it means that frame and children are selected at the same time
-    // => keep original frame membership, do not add to the target frame
-    if (
-      element.frameId &&
-      appState.selectedElementIds[element.id] &&
-      appState.selectedElementIds[element.frameId]
-    ) {
+    if (element.frameId && element.frameId !== frame.id) {
       continue;
     }
 
-    if (!currTargetFrameChildrenMap.has(element.id)) {
-      finalElementsToAdd.push(element);
-    }
+    finalElementsToAdd.add(element);
 
     const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (
-      boundTextElement &&
-      !suppliedElementsToAddSet.has(boundTextElement.id) &&
-      !currTargetFrameChildrenMap.has(boundTextElement.id)
-    ) {
-      finalElementsToAdd.push(boundTextElement);
+    if (boundTextElement && !finalElementsToAdd.has(boundTextElement)) {
+      finalElementsToAdd.add(boundTextElement);
     }
   }
 
   for (const element of finalElementsToAdd) {
-    mutateElement(element, elementsMap, {
-      frameId: frame.id,
-    });
+    // we don't always need to update the element if it's already in the frame,
+    // but we still need to accumulate in finalElementsToAdd so we potentially
+    // reorder them if added together
+    if (element.frameId !== frame.id) {
+      mutateElement(element, elementsMap, {
+        frameId: frame.id,
+      });
+    }
   }
 
-  return allElements;
+  // (re)order elements to be just below the frame,
+  // or just above the highest child if that is higher
+  // (latter case is denormalized order until we migrate)
+  // ---------------------------------------------------------------------------
+
+  if (
+    !finalElementsToAdd.size ||
+    // if all elements to add already belong to the frame, then we don't want to
+    // reorder (case: we're dragging element children within the frame)
+    commonFrameId === frame.id
+  ) {
+    return allElements;
+  }
+
+  const otherElements = Array.from(allElements.values()).filter(
+    (element) => !finalElementsToAdd.has(element),
+  );
+  const insertionIndex = getFrameChildrenInsertionIndex(
+    otherElements,
+    frame.id,
+  );
+
+  if (insertionIndex === null) {
+    return allElements;
+  }
+
+  const reorderedElements = [
+    ...otherElements.slice(0, insertionIndex),
+    ...finalElementsToAdd,
+    ...otherElements.slice(insertionIndex),
+  ];
+
+  syncMovedIndices(reorderedElements, arrayToMap([...finalElementsToAdd]));
+
+  return (
+    Array.isArray(allElements)
+      ? reorderedElements
+      : new Map(reorderedElements.map((element) => [element.id, element]))
+  ) as T;
 };
 
 export const removeElementsFromFrame = (
@@ -620,13 +681,11 @@ export const replaceAllElementsInFrame = <T extends ExcalidrawElement>(
   allElements: readonly T[],
   nextElementsInFrame: ExcalidrawElement[],
   frame: ExcalidrawFrameLikeElement,
-  app: AppClassProperties,
 ): T[] => {
   return addElementsToFrame(
     removeAllElementsFromFrame(allElements, frame),
     nextElementsInFrame,
     frame,
-    app.state,
   ).slice();
 };
 
@@ -920,16 +979,17 @@ export const getFrameLikeTitle = (element: ExcalidrawFrameLikeElement) => {
 export const getElementsOverlappingFrame = (
   elements: readonly ExcalidrawElement[],
   frame: ExcalidrawFrameLikeElement,
+  elementsMap: ElementsMap,
 ) => {
-  return (
-    elementsOverlappingBBox({
-      elements,
-      bounds: frame,
-      type: "overlap",
-    })
-      // removes elements who are overlapping, but are in a different frame,
+  return elements.filter(
+    (el) =>
+      // exclude elements which are overlapping, but are in a different frame,
       // and thus invisible in target frame
-      .filter((el) => !el.frameId || el.frameId === frame.id)
+      (!el.frameId || el.frameId === frame.id) &&
+      doBoundsIntersect(
+        getElementBounds(el, elementsMap),
+        getElementBounds(frame, elementsMap),
+      ),
   );
 };
 

packages/element/src/index.ts

@@ -99,3 +99,4 @@ export * from "./typeChecks";
 export * from "./utils";
 export * from "./zindex";
 export * from "./arrows/helpers";
+export * from "./arrowheads";

packages/element/src/linearElementEditor.ts

@@ -9,7 +9,6 @@ import {
   vectorFromPoint,
   curveLength,
   curvePointAtLength,
-  lineSegment,
 } from "@excalidraw/math";
 
 import { getCurvePathOps } from "@excalidraw/utils/shape";
@@ -360,11 +359,20 @@ export class LinearElementEditor {
       linearElementEditor,
     );
 
-    LinearElementEditor.movePoints(element, app.scene, positions, {
-      startBinding: updates?.startBinding,
-      endBinding: updates?.endBinding,
-      moveMidPointsWithElement: updates?.moveMidPointsWithElement,
-    });
+    LinearElementEditor.movePoints(
+      element,
+      app.scene,
+      positions,
+      {
+        startBinding: updates?.startBinding,
+        endBinding: updates?.endBinding,
+        moveMidPointsWithElement: updates?.moveMidPointsWithElement,
+      },
+      {
+        isBindingEnabled: app.state.isBindingEnabled,
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled,
+      },
+    );
     // Set the suggested binding from the updates if available
     if (isBindingElement(element, false)) {
       if (isBindingEnabled(app.state)) {
@@ -419,6 +427,7 @@ export class LinearElementEditor {
                 "start",
                 elementsMap,
                 app.state.zoom,
+                app.state.isMidpointSnappingEnabled,
               )
             : linearElementEditor.initialState.altFocusPoint,
       },
@@ -467,16 +476,22 @@ export class LinearElementEditor {
       });
     }
 
-    invariant(
-      lastClickedPoint > -1 &&
-        selectedPointsIndices.includes(lastClickedPoint) &&
-        element.points[lastClickedPoint],
-      `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
-        selectedPointsIndices,
-      )}) points(0..${
-        element.points.length - 1
-      }) lastClickedPoint(${lastClickedPoint})`,
-    );
+    if (
+      lastClickedPoint < 0 ||
+      !selectedPointsIndices.includes(lastClickedPoint) ||
+      !element.points[lastClickedPoint]
+    ) {
+      console.error(
+        `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
+          selectedPointsIndices,
+        )}) points(0..${
+          element.points.length - 1
+        }) lastClickedPoint(${lastClickedPoint}) isElbowArrow: ${elbowed}`,
+      );
+
+      // Fall back to the actual last point as a last resort.
+      lastClickedPoint = element.points.length - 1;
+    }
 
     // point that's being dragged (out of all selected points)
     const draggingPoint = element.points[lastClickedPoint];
@@ -539,11 +554,20 @@ export class LinearElementEditor {
       linearElementEditor,
     );
 
-    LinearElementEditor.movePoints(element, app.scene, positions, {
-      startBinding: updates?.startBinding,
-      endBinding: updates?.endBinding,
-      moveMidPointsWithElement: updates?.moveMidPointsWithElement,
-    });
+    LinearElementEditor.movePoints(
+      element,
+      app.scene,
+      positions,
+      {
+        startBinding: updates?.startBinding,
+        endBinding: updates?.endBinding,
+        moveMidPointsWithElement: updates?.moveMidPointsWithElement,
+      },
+      {
+        isBindingEnabled: app.state.isBindingEnabled,
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled,
+      },
+    );
 
     // Set the suggested binding from the updates if available
     if (isBindingElement(element, false)) {
@@ -637,6 +661,7 @@ export class LinearElementEditor {
                 "start",
                 elementsMap,
                 app.state.zoom,
+                app.state.isMidpointSnappingEnabled,
               )
             : linearElementEditor.initialState.altFocusPoint,
       },
@@ -775,6 +800,7 @@ export class LinearElementEditor {
           element.points[index + 1],
           index,
           appState.zoom,
+          elementsMap,
         )
       ) {
         midpoints.push(null);
@@ -784,6 +810,7 @@ export class LinearElementEditor {
       const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(
         element,
         index + 1,
+        elementsMap,
       );
       midpoints.push(segmentMidPoint);
       index++;
@@ -871,6 +898,7 @@ export class LinearElementEditor {
     endPoint: P,
     index: number,
     zoom: Zoom,
+    elementsMap: ElementsMap,
   ) {
     if (isElbowArrow(element)) {
       if (index >= 0 && index < element.points.length) {
@@ -885,7 +913,10 @@ export class LinearElementEditor {
 
     let distance = pointDistance(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(
+        element,
+        elementsMap,
+      );
 
       invariant(
         lines.length === 0 && curves.length > 0,
@@ -905,6 +936,7 @@ export class LinearElementEditor {
   static getSegmentMidPoint(
     element: NonDeleted<ExcalidrawLinearElement>,
     index: number,
+    elementsMap: ElementsMap,
   ): GlobalPoint {
     if (isElbowArrow(element)) {
       invariant(
@@ -917,7 +949,10 @@ export class LinearElementEditor {
       return pointFrom<GlobalPoint>(element.x + p[0], element.y + p[1]);
     }
 
-    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(
+      element,
+      elementsMap,
+    );
 
     invariant(
       (lines.length === 0 && curves.length > 0) ||
@@ -1525,6 +1560,10 @@ export class LinearElementEditor {
       endBinding?: FixedPointBinding | null;
       moveMidPointsWithElement?: boolean | null;
     },
+    options?: {
+      isBindingEnabled?: boolean;
+      isMidpointSnappingEnabled?: boolean;
+    },
   ) {
     const { points } = element;
 
@@ -1593,6 +1632,8 @@ export class LinearElementEditor {
       otherUpdates,
       {
         isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging),
+        isBindingEnabled: options?.isBindingEnabled,
+        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled,
       },
     );
   }
@@ -1707,6 +1748,8 @@ export class LinearElementEditor {
       isDragging?: boolean;
       zoom?: AppState["zoom"];
       sceneElementsMap?: NonDeletedSceneElementsMap;
+      isBindingEnabled?: boolean;
+      isMidpointSnappingEnabled?: boolean;
     },
   ) {
     if (isElbowArrow(element)) {
@@ -1727,6 +1770,8 @@ export class LinearElementEditor {
       scene.mutateElement(element, updates, {
         informMutation: true,
         isDragging: options?.isDragging ?? false,
+        isBindingEnabled: options?.isBindingEnabled,
+        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled,
       });
     } else {
       // TODO do we need to get precise coords here just to calc centers?
@@ -1822,6 +1867,7 @@ export class LinearElementEditor {
       const midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
         element,
         index + 1,
+        elementsMap,
       );
 
       x = midSegmentMidpoint[0] - boundTextElement.width / 2;
@@ -2093,13 +2139,13 @@ const pointDraggingUpdates = (
 } => {
   const naiveDraggingPoints = new Map(
     selectedPointsIndices.map((pointIndex) => {
+      // NOTE: Avoid stale point index issue potentially caused by elbow
+      // arrows unpredictably changing the number of points during dragging
+      const point = element.points[pointIndex] ?? element.points.at(-1);
       return [
         pointIndex,
         {
-          point: pointFrom<LocalPoint>(
-            element.points[pointIndex][0] + deltaX,
-            element.points[pointIndex][1] + deltaY,
-          ),
+          point: pointFrom<LocalPoint>(point[0] + deltaX, point[1] + deltaY),
           isDragging: true,
         },
       ];
@@ -2146,14 +2192,16 @@ const pointDraggingUpdates = (
         suggestedBinding: suggestedBindingElement
           ? {
               element: suggestedBindingElement,
-              midPoint: snapToMid(
-                suggestedBindingElement,
-                elementsMap,
-                pointFrom<GlobalPoint>(
-                  scenePointerX - linearElementEditor.pointerOffset.x,
-                  scenePointerY - linearElementEditor.pointerOffset.y,
-                ),
-              ),
+              midPoint: app.state.isMidpointSnappingEnabled
+                ? snapToMid(
+                    suggestedBindingElement,
+                    elementsMap,
+                    pointFrom<GlobalPoint>(
+                      scenePointerX - linearElementEditor.pointerOffset.x,
+                      scenePointerY - linearElementEditor.pointerOffset.y,
+                    ),
+                  )
+                : undefined,
             }
           : null,
       },
@@ -2339,19 +2387,6 @@ const pointDraggingUpdates = (
         : updates.endBinding,
   };
 
-  // We need to use a custom intersector to ensure that if there is a big "jump"
-  // in the arrow's position, we can position it with outline avoidance
-  // pixel-perfectly and avoid "dancing" arrows.
-  // NOTE: Direction matters here, so we create two intersectors
-  const startCustomIntersector =
-    start.focusPoint && end.focusPoint
-      ? lineSegment(start.focusPoint, end.focusPoint)
-      : undefined;
-  const endCustomIntersector =
-    start.focusPoint && end.focusPoint
-      ? lineSegment(end.focusPoint, start.focusPoint)
-      : undefined;
-
   // Needed to handle a special case where an existing arrow is dragged over
   // the same element it is bound to on the other side
   const startIsDraggingOverEndElement =
@@ -2382,14 +2417,12 @@ const pointDraggingUpdates = (
     ? nextArrow.points[0]
     : endBindable
     ? updateBoundPoint(
-        element,
+        nextArrow,
         "endBinding",
         nextArrow.endBinding,
         endBindable,
         elementsMap,
-        {
-          customIntersector: endCustomIntersector,
-        },
+        endIsDragged,
       ) || nextArrow.points[nextArrow.points.length - 1]
     : nextArrow.points[nextArrow.points.length - 1];
 
@@ -2415,12 +2448,12 @@ const pointDraggingUpdates = (
       ? endLocalPoint
       : startBindable
       ? updateBoundPoint(
-          element,
+          nextArrow,
           "startBinding",
           nextArrow.startBinding,
           startBindable,
           elementsMap,
-          { customIntersector: startCustomIntersector },
+          startIsDragged,
         ) || nextArrow.points[0]
       : nextArrow.points[0];
 

packages/element/src/mutateElement.ts

@@ -40,6 +40,8 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   updates: ElementUpdate<TElement>,
   options?: {
     isDragging?: boolean;
+    isBindingEnabled?: boolean;
+    isMidpointSnappingEnabled?: boolean;
   },
 ) => {
   let didChange = false;

packages/element/src/selection.ts

@@ -1,16 +1,34 @@
-import { arrayToMap, isShallowEqual } from "@excalidraw/common";
+import { arrayToMap, isShallowEqual, type Bounds } from "@excalidraw/common";
+import {
+  lineSegment,
+  pointFrom,
+  pointRotateRads,
+  type GlobalPoint,
+} from "@excalidraw/math";
 
 import type {
   AppState,
+  BoxSelectionMode,
   InteractiveCanvasAppState,
 } from "@excalidraw/excalidraw/types";
 
-import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
+import {
+  boundsContainBounds,
+  doBoundsIntersect,
+  elementCenterPoint,
+  getElementAbsoluteCoords,
+  getElementBounds,
+  pointInsideBounds,
+} from "./bounds";
+import { intersectElementWithLineSegment } from "./collision";
 import { isElementInViewport } from "./sizeHelpers";
 import {
+  isArrowElement,
   isBoundToContainer,
   isFrameLikeElement,
+  isFreeDrawElement,
   isLinearElement,
+  isTextElement,
 } from "./typeChecks";
 import {
   elementOverlapsWithFrame,
@@ -20,14 +38,33 @@ import {
 
 import { LinearElementEditor } from "./linearElementEditor";
 import { selectGroupsForSelectedElements } from "./groups";
+import { getBoundTextElement } from "./textElement";
 
 import type {
   ElementsMap,
   ElementsMapOrArray,
   ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeleted,
   NonDeletedExcalidrawElement,
 } from "./types";
 
+const shouldIgnoreElementFromSelection = (
+  element: NonDeletedExcalidrawElement,
+) => element.locked || isBoundToContainer(element);
+
+const excludeElementsFromFrames = <T extends ExcalidrawElement>(
+  selectedElements: readonly T[],
+  framesInSelection: Set<ExcalidrawFrameLikeElement["id"]>,
+) => {
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
+};
+
 /**
  * Frames and their containing elements are not to be selected at the same time.
  * Given an array of selected elements, if there are frames and their containing elements
@@ -47,68 +84,286 @@ export const excludeElementsInFramesFromSelection = <
     }
   });
 
-  return selectedElements.filter((element) => {
-    if (element.frameId && framesInSelection.has(element.frameId)) {
-      return false;
-    }
-    return true;
-  });
+  return excludeElementsFromFrames(selectedElements, framesInSelection);
 };
 
 export const getElementsWithinSelection = (
   elements: readonly NonDeletedExcalidrawElement[],
   selection: NonDeletedExcalidrawElement,
   elementsMap: ElementsMap,
+  // TODO remove (this flag is effectively unused AFAIK)
   excludeElementsInFrames: boolean = true,
-) => {
-  const [selectionX1, selectionY1, selectionX2, selectionY2] =
+  boxSelectionMode: BoxSelectionMode = "contain",
+): NonDeletedExcalidrawElement[] => {
+  const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] =
     getElementAbsoluteCoords(selection, elementsMap);
+  const selectionX1 = Math.min(selectionStartX, selectionEndX);
+  const selectionY1 = Math.min(selectionStartY, selectionEndY);
+  const selectionX2 = Math.max(selectionStartX, selectionEndX);
+  const selectionY2 = Math.max(selectionStartY, selectionEndY);
+  const selectionBounds = [
+    selectionX1,
+    selectionY1,
+    selectionX2,
+    selectionY2,
+  ] as Bounds;
+  const selectionEdges = [
+    lineSegment<GlobalPoint>(
+      pointFrom(selectionX1, selectionY1),
+      pointFrom(selectionX2, selectionY1),
+    ),
+    lineSegment<GlobalPoint>(
+      pointFrom(selectionX2, selectionY1),
+      pointFrom(selectionX2, selectionY2),
+    ),
+    lineSegment<GlobalPoint>(
+      pointFrom(selectionX2, selectionY2),
+      pointFrom(selectionX1, selectionY2),
+    ),
+    lineSegment<GlobalPoint>(
+      pointFrom(selectionX1, selectionY2),
+      pointFrom(selectionX1, selectionY1),
+    ),
+  ];
 
-  let elementsInSelection = elements.filter((element) => {
-    let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
-      element,
-      elementsMap,
-    );
+  const framesInSelection = excludeElementsInFrames
+    ? new Set<NonDeletedExcalidrawElement["id"]>()
+    : null;
+  const groups: Record<string, NonDeletedExcalidrawElement[]> = {};
+  const elementsInSelection: Set<NonDeletedExcalidrawElement> = new Set();
 
-    const containingFrame = getContainingFrame(element, elementsMap);
-    if (containingFrame) {
-      const [fx1, fy1, fx2, fy2] = getElementBounds(
-        containingFrame,
+  for (const element of elements) {
+    if (shouldIgnoreElementFromSelection(element)) {
+      continue;
+    }
+
+    // Track only selectable top-level group members, so ignored elements such
+    // as bound text and locked elements don't affect group selection.
+    const groupId = element.groupIds.at(-1);
+    if (groupId) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      groups[groupId].push(element);
+    }
+
+    const strokeWidth = element.strokeWidth;
+    let labelAABB: Bounds | null = null;
+    let elementAABB = getElementBounds(element, elementsMap);
+
+    elementAABB = [
+      elementAABB[0] - strokeWidth / 2,
+      elementAABB[1] - strokeWidth / 2,
+      elementAABB[2] + strokeWidth / 2,
+      elementAABB[3] + strokeWidth / 2,
+    ] as Bounds;
+
+    // Whether the element bounds should include the bound text element bounds
+    const boundTextElement =
+      isArrowElement(element) && getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
+        element,
+        boundTextElement,
         elementsMap,
       );
-
-      elementX1 = Math.max(fx1, elementX1);
-      elementY1 = Math.max(fy1, elementY1);
-      elementX2 = Math.min(fx2, elementX2);
-      elementY2 = Math.min(fy2, elementY2);
+      labelAABB = [
+        x,
+        y,
+        x + boundTextElement.width,
+        y + boundTextElement.height,
+      ] as Bounds;
     }
 
-    return (
-      element.locked === false &&
-      element.type !== "selection" &&
-      !isBoundToContainer(element) &&
-      selectionX1 <= elementX1 &&
-      selectionY1 <= elementY1 &&
-      selectionX2 >= elementX2 &&
-      selectionY2 >= elementY2
-    );
-  });
+    // Clip element bounds by its containing frame (if any), since only the
+    // visible (frame-clipped) portion of the element is relevant for selection.
+    const associatedFrame = getContainingFrame(element, elementsMap);
+    if (
+      associatedFrame &&
+      elementOverlapsWithFrame(element, associatedFrame, elementsMap)
+    ) {
+      const frameAABB = getElementBounds(associatedFrame, elementsMap);
+      elementAABB = [
+        Math.max(elementAABB[0], frameAABB[0]),
+        Math.max(elementAABB[1], frameAABB[1]),
+        Math.min(elementAABB[2], frameAABB[2]),
+        Math.min(elementAABB[3], frameAABB[3]),
+      ] as Bounds;
 
-  elementsInSelection = excludeElementsInFrames
-    ? excludeElementsInFramesFromSelection(elementsInSelection)
-    : elementsInSelection;
-
-  elementsInSelection = elementsInSelection.filter((element) => {
-    const containingFrame = getContainingFrame(element, elementsMap);
-
-    if (containingFrame) {
-      return elementOverlapsWithFrame(element, containingFrame, elementsMap);
+      labelAABB = labelAABB
+        ? ([
+            Math.max(labelAABB[0], frameAABB[0]),
+            Math.max(labelAABB[1], frameAABB[1]),
+            Math.min(labelAABB[2], frameAABB[2]),
+            Math.min(labelAABB[3], frameAABB[3]),
+          ] as Bounds)
+        : null;
     }
 
-    return true;
-  });
+    const commonAABB = labelAABB
+      ? ([
+          Math.min(labelAABB[0], elementAABB[0]),
+          Math.min(labelAABB[1], elementAABB[1]),
+          Math.max(labelAABB[2], elementAABB[2]),
+          Math.max(labelAABB[3], elementAABB[3]),
+        ] as Bounds)
+      : elementAABB;
 
-  return elementsInSelection;
+    // ============== Evaluation ==============
+
+    // 1. If the selection box WRAPs the element's AABB, then add it to the
+    //    selection and move on, regardless of the selection mode.
+    //
+    //    PERF: This trick only works with axis-aligned box selection and the
+    //          current convex element shapes!
+    if (boundsContainBounds(selectionBounds, commonAABB)) {
+      if (framesInSelection && isFrameLikeElement(element)) {
+        framesInSelection.add(element.id);
+      }
+      elementsInSelection.add(element);
+      continue;
+    }
+
+    // 2. Handle the case where the label is overlapped by the selection box
+    if (
+      boxSelectionMode === "overlap" &&
+      labelAABB &&
+      doBoundsIntersect(selectionBounds, labelAABB)
+    ) {
+      elementsInSelection.add(element);
+      continue;
+    }
+
+    // 3. Handle the case where the selection is not wrapping the element, but
+    //    it does intersect the element's outline (non-AABB).
+    if (
+      boxSelectionMode === "overlap" &&
+      doBoundsIntersect(selectionBounds, elementAABB)
+    ) {
+      let hasIntersection = false;
+
+      // Preliminary check potential intersection imprecision
+      if (isLinearElement(element) || isFreeDrawElement(element)) {
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = element.points.some((point) => {
+          const rotatedPoint = pointRotateRads(
+            pointFrom<GlobalPoint>(element.x + point[0], element.y + point[1]),
+            center,
+            element.angle,
+          );
+
+          return pointInsideBounds(rotatedPoint, selectionBounds);
+        });
+      } else {
+        const nonRotatedElementBounds = getElementBounds(
+          element,
+          elementsMap,
+          true,
+        );
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = [
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[1],
+            ),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              nonRotatedElementBounds[2],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
+            ),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[3],
+            ),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              nonRotatedElementBounds[0],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
+            ),
+            center,
+            element.angle,
+          ),
+        ].some((point) => {
+          return pointInsideBounds(
+            pointRotateRads(point, center, element.angle),
+            selectionBounds,
+          );
+        });
+      }
+
+      if (!hasIntersection) {
+        hasIntersection = selectionEdges.some(
+          (selectionEdge) =>
+            intersectElementWithLineSegment(
+              element,
+              elementsMap,
+              selectionEdge,
+              strokeWidth / 2,
+              true, // Stop at first hit for better performance
+            ).length > 0,
+        );
+      }
+
+      if (hasIntersection) {
+        if (framesInSelection && isFrameLikeElement(element)) {
+          framesInSelection.add(element.id);
+        }
+
+        elementsInSelection.add(element);
+        continue;
+      }
+    }
+
+    // 4. We don't need to handle when the selection is inside the element
+    //    as it is separately handled in App.
+  }
+
+  if (framesInSelection) {
+    elementsInSelection.forEach((element) => {
+      if (element.frameId && framesInSelection.has(element.frameId)) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+
+  if (boxSelectionMode === "overlap") {
+    Array.from(elementsInSelection).forEach((element) => {
+      const groupId = element.groupIds.at(-1);
+      const group = groupId ? groups[groupId] : null;
+
+      group?.forEach((groupElement) => elementsInSelection.add(groupElement));
+    });
+  } else if (boxSelectionMode === "contain") {
+    elementsInSelection.forEach((element) => {
+      // note: currently we only support top-level group handling since
+      // we don't support box selecting while editing the group/subgroup
+      // see https://github.com/excalidraw/excalidraw/pull/11234#issuecomment-4387654451
+      const groupId = element.groupIds.at(-1);
+
+      const group = groupId ? groups[groupId] : null;
+
+      if (
+        group &&
+        !group.every((groupElement) => elementsInSelection.has(groupElement))
+      ) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+
+  // to maintain original order elements (namely for group selection)
+  return elements.filter((element) => elementsInSelection.has(element));
 };
 
 export const getVisibleAndNonSelectedElements = (
@@ -288,3 +543,19 @@ export const getSelectionStateForElements = (
     ),
   };
 };
+
+/**
+ * Returns editing or single-selected text element, if any.
+ */
+export const getActiveTextElement = (
+  selectedElements: readonly NonDeleted<ExcalidrawElement>[],
+  appState: Pick<AppState, "editingTextElement">,
+) => {
+  const activeTextElement =
+    appState.editingTextElement ||
+    (selectedElements.length === 1 &&
+      isTextElement(selectedElements[0]) &&
+      selectedElements[0]);
+
+  return activeTextElement || null;
+};

packages/element/src/shape.ts

@@ -57,8 +57,8 @@ import { headingForPointIsHorizontal } from "./heading";
 
 import { canChangeRoundness } from "./comparisons";
 import {
+  elementCenterPoint,
   getArrowheadPoints,
-  getCenterForBounds,
   getDiamondPoints,
   getElementAbsoluteCoords,
 } from "./bounds";
@@ -69,10 +69,10 @@ import type {
   NonDeletedExcalidrawElement,
   ExcalidrawSelectionElement,
   ExcalidrawLinearElement,
-  Arrowhead,
   ExcalidrawFreeDrawElement,
   ElementsMap,
   ExcalidrawLineElement,
+  Arrowhead,
 } from "./types";
 
 import type { Drawable, Options } from "roughjs/bin/core";
@@ -296,6 +296,82 @@ const modifyIframeLikeForRoughOptions = (
   return element;
 };
 
+const generateArrowheadCardinalityOne = (
+  generator: RoughGenerator,
+  arrowheadPoints: number[] | null,
+  lineOptions: Options,
+) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+
+  const [, , x3, y3, x4, y4] = arrowheadPoints;
+
+  return [generator.line(x3, y3, x4, y4, lineOptions)];
+};
+
+const generateArrowheadLinesToTip = (
+  generator: RoughGenerator,
+  arrowheadPoints: number[] | null,
+  lineOptions: Options,
+) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+
+  const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+
+  return [
+    generator.line(x3, y3, x2, y2, lineOptions),
+    generator.line(x4, y4, x2, y2, lineOptions),
+  ];
+};
+
+const getArrowheadLineOptions = (
+  element: ExcalidrawLinearElement,
+  options: Options,
+) => {
+  const lineOptions = { ...options };
+
+  if (element.strokeStyle === "dotted") {
+    // for dotted arrows caps, reduce gap to make it more legible
+    const dash = getDashArrayDotted(element.strokeWidth - 1);
+    lineOptions.strokeLineDash = [dash[0], dash[1] - 1];
+  } else {
+    // for solid/dashed, keep solid arrow cap
+    delete lineOptions.strokeLineDash;
+  }
+  lineOptions.roughness = Math.min(1, lineOptions.roughness || 0);
+
+  return lineOptions;
+};
+
+const generateArrowheadOutlineCircle = (
+  generator: RoughGenerator,
+  options: Options,
+  strokeColor: string,
+  arrowheadPoints: number[] | null,
+  fill: string,
+  diameterScale = 1,
+) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+
+  const [x, y, diameter] = arrowheadPoints;
+  const circleOptions = {
+    ...options,
+    fill,
+    fillStyle: "solid" as const,
+    stroke: strokeColor,
+    roughness: Math.min(0.5, options.roughness || 0),
+  };
+
+  delete circleOptions.strokeLineDash;
+
+  return [generator.circle(x, y, diameter * diameterScale, circleOptions)];
+};
+
 const getArrowheadShapes = (
   element: ExcalidrawLinearElement,
   shape: Drawable[],
@@ -306,63 +382,54 @@ const getArrowheadShapes = (
   canvasBackgroundColor: string,
   isDarkMode: boolean,
 ) => {
-  const arrowheadPoints = getArrowheadPoints(
-    element,
-    shape,
-    position,
-    arrowhead,
-  );
-
-  if (arrowheadPoints === null) {
+  if (arrowhead === null) {
     return [];
   }
 
-  const generateCrowfootOne = (
-    arrowheadPoints: number[] | null,
-    options: Options,
-  ) => {
-    if (arrowheadPoints === null) {
-      return [];
-    }
-
-    const [, , x3, y3, x4, y4] = arrowheadPoints;
-
-    return [generator.line(x3, y3, x4, y4, options)];
-  };
-
   const strokeColor = isDarkMode
     ? applyDarkModeFilter(element.strokeColor)
     : element.strokeColor;
+  const backgroundFillColor = isDarkMode
+    ? applyDarkModeFilter(canvasBackgroundColor)
+    : canvasBackgroundColor;
+  const cardinalityOneOrManyOffset = -0.25;
+  const cardinalityZeroCircleScale = 0.8;
 
   switch (arrowhead) {
-    case "dot":
     case "circle":
     case "circle_outline": {
-      const [x, y, diameter] = arrowheadPoints;
-
-      // always use solid stroke for arrowhead
-      delete options.strokeLineDash;
-
-      return [
-        generator.circle(x, y, diameter, {
-          ...options,
-          fill:
-            arrowhead === "circle_outline"
-              ? canvasBackgroundColor
-              : strokeColor,
-
-          fillStyle: "solid",
-          stroke: strokeColor,
-          roughness: Math.min(0.5, options.roughness || 0),
-        }),
-      ];
+      return generateArrowheadOutlineCircle(
+        generator,
+        options,
+        strokeColor,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        arrowhead === "circle_outline" ? backgroundFillColor : strokeColor,
+      );
     }
     case "triangle":
     case "triangle_outline": {
+      const arrowheadPoints = getArrowheadPoints(
+        element,
+        shape,
+        position,
+        arrowhead,
+      );
+
+      if (arrowheadPoints === null) {
+        return [];
+      }
+
       const [x, y, x2, y2, x3, y3] = arrowheadPoints;
+      const triangleOptions = {
+        ...options,
+        fill:
+          arrowhead === "triangle_outline" ? backgroundFillColor : strokeColor,
+        fillStyle: "solid" as const,
+        roughness: Math.min(1, options.roughness || 0),
+      };
 
       // always use solid stroke for arrowhead
-      delete options.strokeLineDash;
+      delete triangleOptions.strokeLineDash;
 
       return [
         generator.polygon(
@@ -372,24 +439,34 @@ const getArrowheadShapes = (
             [x3, y3],
             [x, y],
           ],
-          {
-            ...options,
-            fill:
-              arrowhead === "triangle_outline"
-                ? canvasBackgroundColor
-                : strokeColor,
-            fillStyle: "solid",
-            roughness: Math.min(1, options.roughness || 0),
-          },
+          triangleOptions,
         ),
       ];
     }
     case "diamond":
     case "diamond_outline": {
+      const arrowheadPoints = getArrowheadPoints(
+        element,
+        shape,
+        position,
+        arrowhead,
+      );
+
+      if (arrowheadPoints === null) {
+        return [];
+      }
+
       const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+      const diamondOptions = {
+        ...options,
+        fill:
+          arrowhead === "diamond_outline" ? backgroundFillColor : strokeColor,
+        fillStyle: "solid" as const,
+        roughness: Math.min(1, options.roughness || 0),
+      };
 
       // always use solid stroke for arrowhead
-      delete options.strokeLineDash;
+      delete diamondOptions.strokeLineDash;
 
       return [
         generator.polygon(
@@ -400,53 +477,117 @@ const getArrowheadShapes = (
             [x4, y4],
             [x, y],
           ],
-          {
-            ...options,
-            fill:
-              arrowhead === "diamond_outline"
-                ? canvasBackgroundColor
-                : strokeColor,
-            fillStyle: "solid",
-            roughness: Math.min(1, options.roughness || 0),
-          },
+          diamondOptions,
+        ),
+      ];
+    }
+    case "cardinality_one":
+      return generateArrowheadCardinalityOne(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options),
+      );
+    case "cardinality_many":
+      return generateArrowheadLinesToTip(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options),
+      );
+    case "cardinality_one_or_many": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+
+      return [
+        ...generateArrowheadLinesToTip(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          lineOptions,
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(
+            element,
+            shape,
+            position,
+            "cardinality_one",
+            cardinalityOneOrManyOffset,
+          ),
+          lineOptions,
+        ),
+      ];
+    }
+    case "cardinality_exactly_one": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+
+      return [
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          lineOptions,
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one"),
+          lineOptions,
+        ),
+      ];
+    }
+    case "cardinality_zero_or_one": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+
+      return [
+        ...generateArrowheadOutlineCircle(
+          generator,
+          options,
+          strokeColor,
+          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          backgroundFillColor,
+          cardinalityZeroCircleScale,
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          lineOptions,
+        ),
+      ];
+    }
+    case "cardinality_zero_or_many": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+
+      return [
+        ...generateArrowheadLinesToTip(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          lineOptions,
+        ),
+        ...generateArrowheadOutlineCircle(
+          generator,
+          options,
+          strokeColor,
+          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          backgroundFillColor,
+          cardinalityZeroCircleScale,
         ),
       ];
     }
-    case "crowfoot_one":
-      return generateCrowfootOne(arrowheadPoints, options);
     case "bar":
     case "arrow":
-    case "crowfoot_many":
-    case "crowfoot_one_or_many":
     default: {
-      const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-
-      if (element.strokeStyle === "dotted") {
-        // for dotted arrows caps, reduce gap to make it more legible
-        const dash = getDashArrayDotted(element.strokeWidth - 1);
-        options.strokeLineDash = [dash[0], dash[1] - 1];
-      } else {
-        // for solid/dashed, keep solid arrow cap
-        delete options.strokeLineDash;
-      }
-      options.roughness = Math.min(1, options.roughness || 0);
-      return [
-        generator.line(x3, y3, x2, y2, options),
-        generator.line(x4, y4, x2, y2, options),
-        ...(arrowhead === "crowfoot_one_or_many"
-          ? generateCrowfootOne(
-              getArrowheadPoints(element, shape, position, "crowfoot_one"),
-              options,
-            )
-          : []),
-      ];
+      return generateArrowheadLinesToTip(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options),
+      );
     }
   }
 };
 
 export const generateLinearCollisionShape = (
   element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-) => {
+  elementsMap: ElementsMap,
+): {
+  op: string;
+  data: number[];
+}[] => {
   const generator = new RoughGenerator();
   const options: Options = {
     seed: element.seed,
@@ -455,20 +596,7 @@ export const generateLinearCollisionShape = (
     roughness: 0,
     preserveVertices: true,
   };
-  const center = getCenterForBounds(
-    // Need a non-rotated center point
-    element.points.reduce(
-      (acc, point) => {
-        return [
-          Math.min(element.x + point[0], acc[0]),
-          Math.min(element.y + point[1], acc[1]),
-          Math.max(element.x + point[0], acc[2]),
-          Math.max(element.y + point[1], acc[3]),
-        ];
-      },
-      [Infinity, Infinity, -Infinity, -Infinity],
-    ),
-  );
+  const center = elementCenterPoint(element, elementsMap);
 
   switch (element.type) {
     case "line":

packages/element/src/sortElements.ts

@@ -1,59 +1,56 @@
-import { arrayToMapWithIndex } from "@excalidraw/common";
+import { arrayToMap } from "@excalidraw/common";
 
 import type { ExcalidrawElement } from "./types";
 
-const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
-  const origElements: ExcalidrawElement[] = elements.slice();
-  const sortedElements = new Set<ExcalidrawElement>();
-
-  const orderInnerGroups = (
-    elements: readonly ExcalidrawElement[],
-  ): ExcalidrawElement[] => {
-    const firstGroupSig = elements[0]?.groupIds?.join("");
-    const aGroup: ExcalidrawElement[] = [elements[0]];
-    const bGroup: ExcalidrawElement[] = [];
-    for (const element of elements.slice(1)) {
-      if (element.groupIds?.join("") === firstGroupSig) {
-        aGroup.push(element);
-      } else {
-        bGroup.push(element);
-      }
-    }
-    return bGroup.length ? [...aGroup, ...orderInnerGroups(bGroup)] : aGroup;
+const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
+  const groupIdAtLevel = (element: ExcalidrawElement, level: number) => {
+    return element.groupIds[element.groupIds.length - level - 1];
   };
 
-  const groupHandledElements = new Map<string, true>();
+  const orderLevel = (
+    levelElements: readonly ExcalidrawElement[],
+    level: number,
+  ): ExcalidrawElement[] => {
+    const buckets = new Map<string, ExcalidrawElement[]>();
+    // Slots preserve first-occurrence order: a groupId reserves its slot
+    // the first time one of its members is seen; loose elements occupy
+    // their own slot. Groups are then expanded (and recursed into) in place.
+    const slots: (ExcalidrawElement | string)[] = [];
 
-  origElements.forEach((element, idx) => {
-    if (groupHandledElements.has(element.id)) {
-      return;
-    }
-    if (element.groupIds?.length) {
-      const topGroup = element.groupIds[element.groupIds.length - 1];
-      const groupElements = origElements.slice(idx).filter((element) => {
-        const ret = element?.groupIds?.some((id) => id === topGroup);
-        if (ret) {
-          groupHandledElements.set(element!.id, true);
-        }
-        return ret;
-      });
-
-      for (const elem of orderInnerGroups(groupElements)) {
-        sortedElements.add(elem);
+    for (const element of levelElements) {
+      const groupId = groupIdAtLevel(element, level);
+      if (groupId === undefined) {
+        slots.push(element);
+        continue;
       }
-    } else {
-      sortedElements.add(element);
+      let bucket = buckets.get(groupId);
+      if (!bucket) {
+        bucket = [];
+        buckets.set(groupId, bucket);
+        slots.push(groupId);
+      }
+      bucket.push(element);
     }
-  });
+
+    return slots.flatMap((slot) =>
+      typeof slot === "string"
+        ? orderLevel(buckets.get(slot)!, level + 1)
+        : [slot],
+    );
+  };
+
+  // `groupIds` is stored innermost-first, so the outermost group is the
+  // last entry. We recurse from level 0 (outermost) inward.
+  const sortedElements = orderLevel(elements, 0);
 
   // if there's a bug which resulted in losing some of the elements, return
   // original instead as that's better than losing data
-  if (sortedElements.size !== elements.length) {
-    console.error("normalizeGroupElementOrder: lost some elements... bailing!");
+  if (sortedElements.length !== elements.length) {
+    console.error("defragmentGroups: lost some elements... bailing!");
     return elements;
   }
 
-  return [...sortedElements];
+  return sortedElements;
 };
 
 /**
@@ -68,39 +65,40 @@ const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
 const normalizeBoundElementsOrder = (
   elements: readonly ExcalidrawElement[],
 ) => {
-  const elementsMap = arrayToMapWithIndex(elements);
+  const elementsMap = arrayToMap(elements);
 
-  const origElements: (ExcalidrawElement | null)[] = elements.slice();
   const sortedElements = new Set<ExcalidrawElement>();
 
-  origElements.forEach((element, idx) => {
-    if (!element) {
-      return;
+  for (const element of elements) {
+    if (sortedElements.has(element)) {
+      continue;
     }
+
     if (element.boundElements?.length) {
       sortedElements.add(element);
-      origElements[idx] = null;
-      element.boundElements.forEach((boundElement) => {
+      for (const boundElement of element.boundElements) {
         const child = elementsMap.get(boundElement.id);
         if (child && boundElement.type === "text") {
-          sortedElements.add(child[0]);
-          origElements[child[1]] = null;
+          sortedElements.add(child);
         }
-      });
-    } else if (element.type === "text" && element.containerId) {
-      const parent = elementsMap.get(element.containerId);
-      if (!parent?.[0].boundElements?.find((x) => x.id === element.id)) {
-        sortedElements.add(element);
-        origElements[idx] = null;
-
-        // if element has a container and container lists it, skip this element
-        // as it'll be taken care of by the container
       }
-    } else {
-      sortedElements.add(element);
-      origElements[idx] = null;
+      continue;
     }
-  });
+
+    // if element has a container and container lists it, skip this element
+    // as it'll be taken care of by the container
+    if (
+      element.type === "text" &&
+      element.containerId &&
+      elementsMap
+        .get(element.containerId)
+        ?.boundElements?.some((el) => el.id === element.id)
+    ) {
+      continue;
+    }
+
+    sortedElements.add(element);
+  }
 
   // if there's a bug which resulted in losing some of the elements, return
   // original instead as that's better than losing data
@@ -117,5 +115,5 @@ const normalizeBoundElementsOrder = (
 export const normalizeElementOrder = (
   elements: readonly ExcalidrawElement[],
 ) => {
-  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
+  return normalizeBoundElementsOrder(defragmentGroups(elements));
 };

packages/element/src/textElement.ts

@@ -347,6 +347,7 @@ export const getContainerCenter = (
     midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
       container,
       index + 1,
+      elementsMap,
     );
   }
   return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -441,7 +442,8 @@ const VALID_CONTAINER_TYPES = new Set([
 
 export const isValidTextContainer = (element: {
   type: ExcalidrawElementType;
-}) => VALID_CONTAINER_TYPES.has(element.type);
+}): element is ExcalidrawTextContainer =>
+  VALID_CONTAINER_TYPES.has(element.type);
 
 export const computeContainerDimensionForBoundText = (
   dimension: number,

packages/element/src/textWrapping.ts

@@ -4,6 +4,22 @@ import { charWidth, getLineWidth } from "./textMeasurements";
 
 import type { FontString } from "./types";
 
+/**
+ * This module approximates browser-like soft wrapping for Excalidraw text.
+ *
+ * The flow is:
+ * 1. `parseTokens()` splits a hard line into breakable tokens using a unicode-aware regex.
+ * 2. `getWrappedTextLines()` reflows each hard line into one or more visual lines and
+ *    records where each visual line came from in the source text.
+ * 3. `wrapLine()` assembles tokens into lines, and `wrapWord()` handles a single token
+ *    that is wider than the available width.
+ * 4. `trimLine()` / `trimLineEndAtSoftBreak()` mirror browser behavior around trailing
+ *    whitespace so the rendered text stays consistent with what users see on canvas.
+ *
+ * Mostly, you'll want to use wrapText(). getWrappedTextLines() is for callers
+ * that need metadata such as mapping visual lines back to `originalText`
+ * for caret placement or future editor features.
+ */
 let cachedCjkRegex: RegExp | undefined;
 let cachedLineBreakRegex: RegExp | undefined;
 let cachedEmojiRegex: RegExp | undefined;
@@ -358,6 +374,10 @@ const Break = {
 
 /**
  * Breaks the line into the tokens based on the found line break opporutnities.
+ *
+ * Note: tokenization normalizes to NFC first so decomposed graphemes are treated as
+ * their composed variants for wrapping. Any code that needs exact source offsets should
+ * keep in mind that this assumes the input text is already NFC-normalized.
  */
 export const parseTokens = (line: string) => {
   const breakLineRegex = getLineBreakRegex();
@@ -370,56 +390,120 @@ export const parseTokens = (line: string) => {
 
 /**
  * Wraps the original text into the lines based on the given width.
+ *
+ * This is a convenience adapter over `getWrappedTextLines()` for call sites
+ * that only need the rendered wrapped string and not the source offsets.
  */
 export const wrapText = (
   text: string,
   font: FontString,
   maxWidth: number,
 ): string => {
+  return getWrappedTextLines(text, font, maxWidth)
+    .map((line) => line.text)
+    .join("\n");
+};
+
+/**
+ * A single rendered visual line produced from the original text.
+ *
+ * `start` and `end` are end-exclusive code-unit offsets into the original text, and do
+ * not include synthetic soft line breaks inserted by this module. If trailing whitespace
+ * was trimmed away at a wrap boundary, `end` points to the last rendered character.
+ */
+export type WrappedTextLine = {
+  text: string;
+  start: number;
+  end: number;
+};
+
+/**
+ * Splits only on existing hard line breaks and preserves original offsets.
+ */
+const getHardLineBreaks = (text: string): WrappedTextLine[] => {
+  let offset = 0;
+
+  return text.split("\n").map((line) => {
+    const start = offset;
+    const end = start + line.length;
+
+    offset = end + 1;
+
+    return {
+      text: line,
+      start,
+      end,
+    };
+  });
+};
+
+/**
+ * Returns the rendered visual lines together with their source offsets.
+ *
+ * This is the source-of-truth wrapping pipeline for callers that need more than the
+ * final wrapped string, for example caret placement or future editor/rich-text mapping.
+ */
+export const getWrappedTextLines = (
+  text: string,
+  font: FontString,
+  maxWidth: number,
+): WrappedTextLine[] => {
   // if maxWidth is not finite or NaN which can happen in case of bugs in
   // computation, we need to make sure we don't continue as we'll end up
   // in an infinite loop
   if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return text;
+    return getHardLineBreaks(text);
   }
 
-  const lines: Array<string> = [];
-  const originalLines = text.split("\n");
+  const lines: WrappedTextLine[] = [];
+  let offset = 0;
 
-  for (const originalLine of originalLines) {
-    const currentLineWidth = getLineWidth(originalLine, font);
+  for (const originalLine of text.split("\n")) {
+    const originalLineWidth = getLineWidth(originalLine, font);
 
-    if (currentLineWidth <= maxWidth) {
-      lines.push(originalLine);
-      continue;
+    if (originalLineWidth <= maxWidth) {
+      lines.push({
+        text: originalLine,
+        start: offset,
+        end: offset + originalLine.length,
+      });
+    } else {
+      lines.push(...wrapLine(originalLine, font, maxWidth, offset));
     }
 
-    const wrappedLine = wrapLine(originalLine, font, maxWidth);
-    lines.push(...wrappedLine);
+    offset += originalLine.length + 1;
   }
 
-  return lines.join("\n");
+  return lines;
 };
 
 /**
- * Wraps the original line into the lines based on the given width.
+ * Wraps a single hard line into one or more visual lines.
+ *
+ * The line-local offsets are tracked in original-text code units so
+ * we can map the visual line back to the source.
  */
 const wrapLine = (
   line: string,
   font: FontString,
   maxWidth: number,
-): string[] => {
-  const lines: Array<string> = [];
+  lineStart: number,
+): WrappedTextLine[] => {
+  const lines: WrappedTextLine[] = [];
   const tokens = parseTokens(line);
-  const tokenIterator = tokens[Symbol.iterator]();
 
   let currentLine = "";
+  let currentLineStart = lineStart;
+  let currentLineEnd = lineStart;
   let currentLineWidth = 0;
+  // Tracks the next token's code-unit position in the original source string.
+  let tokenOffset = lineStart;
+  let tokenIndex = 0;
 
-  let iterator = tokenIterator.next();
-
-  while (!iterator.done) {
-    const token = iterator.value;
+  while (tokenIndex < tokens.length) {
+    const token = tokens[tokenIndex];
+    const tokenStart = tokenOffset;
+    const tokenEnd = tokenStart + token.length;
     const testLine = currentLine + token;
 
     // cache single codepoint whitespace, CJK or emoji width calc. as kerning should not apply here
@@ -429,37 +513,59 @@ const wrapLine = (
 
     // build up the current line, skipping length check for possibly trailing whitespaces
     if (/\s/.test(token) || testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = tokenStart;
+      }
       currentLine = testLine;
+      currentLineEnd = tokenEnd;
       currentLineWidth = testLineWidth;
-      iterator = tokenIterator.next();
+      tokenOffset = tokenEnd;
+      tokenIndex++;
       continue;
     }
 
     // current line is empty => just the token (word) is longer than `maxWidth` and needs to be wrapped
     if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
+      const wrappedWord = wrapWord(token, font, maxWidth, tokenStart);
+      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? {
+        text: "",
+        start: tokenStart,
+        end: tokenStart,
+      };
       const precedingLines = wrappedWord.slice(0, -1);
 
       lines.push(...precedingLines);
 
       // trailing line of the wrapped word might still be joined with next token/s
-      currentLine = trailingLine;
-      currentLineWidth = getLineWidth(trailingLine, font);
-      iterator = tokenIterator.next();
+      currentLine = trailingLine.text;
+      currentLineStart = trailingLine.start;
+      currentLineEnd = trailingLine.end;
+      currentLineWidth = getLineWidth(trailingLine.text, font);
+      tokenOffset = tokenEnd;
+      tokenIndex++;
     } else {
       // push & reset, but don't iterate on the next token, as we didn't use it yet!
-      lines.push(currentLine.trimEnd());
+      lines.push(
+        trimLineEndAtSoftBreak(currentLine, currentLineStart, currentLineEnd),
+      );
 
       // purposefully not iterating and not setting `currentLine` to `token`, so that we could use a simple !currentLine check above
       currentLine = "";
+      currentLineStart = tokenStart;
+      currentLineEnd = tokenStart;
       currentLineWidth = 0;
     }
   }
 
   // iterator done, push the trailing line if exists
   if (currentLine) {
-    const trailingLine = trimLine(currentLine, font, maxWidth);
+    const trailingLine = trimLine(
+      currentLine,
+      currentLineStart,
+      currentLineEnd,
+      font,
+      maxWidth,
+    );
     lines.push(trailingLine);
   }
 
@@ -467,59 +573,100 @@ const wrapLine = (
 };
 
 /**
- * Wraps the word into the lines based on the given width.
+ * Wraps a single word that could not be placed on an empty line as-is.
  */
 const wrapWord = (
   word: string,
   font: FontString,
   maxWidth: number,
-): Array<string> => {
+  wordStart: number,
+): WrappedTextLine[] => {
   // multi-codepoint emojis are already broken apart and shouldn't be broken further
   if (getEmojiRegex().test(word)) {
-    return [word];
+    return [
+      {
+        text: word,
+        start: wordStart,
+        end: wordStart + word.length,
+      },
+    ];
   }
 
   satisfiesWordInvariant(word);
 
-  const lines: Array<string> = [];
+  const lines: WrappedTextLine[] = [];
   const chars = Array.from(word);
 
   let currentLine = "";
+  let currentLineStart = wordStart;
+  let currentLineEnd = wordStart;
   let currentLineWidth = 0;
+  let offset = wordStart;
 
   for (const char of chars) {
+    const charStart = offset;
+    const charEnd = charStart + char.length;
     const _charWidth = charWidth.calculate(char, font);
     const testLineWidth = currentLineWidth + _charWidth;
 
     if (testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = charStart;
+      }
       currentLine = currentLine + char;
+      currentLineEnd = charEnd;
       currentLineWidth = testLineWidth;
+      offset = charEnd;
       continue;
     }
 
     if (currentLine) {
-      lines.push(currentLine);
+      lines.push({
+        text: currentLine,
+        start: currentLineStart,
+        end: currentLineEnd,
+      });
     }
 
     currentLine = char;
+    currentLineStart = charStart;
+    currentLineEnd = charEnd;
     currentLineWidth = _charWidth;
+    offset = charEnd;
   }
 
   if (currentLine) {
-    lines.push(currentLine);
+    lines.push({
+      text: currentLine,
+      start: currentLineStart,
+      end: currentLineEnd,
+    });
   }
 
   return lines;
 };
 
 /**
- * Similarly to browsers, does not trim all trailing whitespaces, but only those exceeding the `maxWidth`.
+ * Trims trailing whitespace that is exceeding the `maxWidth`.
+ *
+ * Used for the trailing visual line of a hard line, where some trailing
+ * whitespace may still be visible if it fits into the available width.
  */
-const trimLine = (line: string, font: FontString, maxWidth: number) => {
+const trimLine = (
+  line: string,
+  start: number,
+  end: number,
+  font: FontString,
+  maxWidth: number,
+): WrappedTextLine => {
   const shouldTrimWhitespaces = getLineWidth(line, font) > maxWidth;
 
   if (!shouldTrimWhitespaces) {
-    return line;
+    return {
+      text: line,
+      start,
+      end,
+    };
   }
 
   // defensively default to `trimeEnd` in case the regex does not match
@@ -543,7 +690,30 @@ const trimLine = (line: string, font: FontString, maxWidth: number) => {
     trimmedLineWidth = testLineWidth;
   }
 
-  return trimmedLine;
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line.length - trimmedLine.length),
+  };
+};
+
+/**
+ * Used for internal soft-wrap boundaries, where trailing whitespace should not
+ * survive into the rendered line even though it still exists in the original
+ * text.
+ */
+const trimLineEndAtSoftBreak = (
+  line: string,
+  start: number,
+  end: number,
+): WrappedTextLine => {
+  const trimmedLine = line.trimEnd();
+
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line.length - trimmedLine.length),
+  };
 };
 
 /**

packages/element/src/typeChecks.ts

@@ -392,3 +392,23 @@ export const canBecomePolygon = (
     (points.length === 3 && !pointsEqual(points[0], points[points.length - 1]))
   );
 };
+
+export const isEligibleFrameChildType = (type: ElementOrToolType) => {
+  switch (type) {
+    case "rectangle":
+    case "diamond":
+    case "ellipse":
+    case "arrow":
+    case "line":
+    case "freedraw":
+    case "text":
+    case "image":
+    case "frame":
+    case "embeddable": {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+};

packages/element/src/types.ts

@@ -15,7 +15,7 @@ import type {
   ValueOf,
 } from "@excalidraw/common/utility-types";
 
-export type ChartType = "bar" | "line";
+export type ChartType = "bar" | "line" | "radar";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
 export type FontFamilyKeys = keyof typeof FONT_FAMILY;
 export type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys];
@@ -303,19 +303,32 @@ export type PointsPositionUpdates = Map<
   { point: LocalPoint; isDragging?: boolean }
 >;
 
+export type CardinalityArrowhead =
+  | "cardinality_one"
+  | "cardinality_many"
+  | "cardinality_one_or_many"
+  | "cardinality_exactly_one"
+  | "cardinality_zero_or_one"
+  | "cardinality_zero_or_many";
+
+export type ArrowheadLegacy =
+  | "dot"
+  | "crowfoot_one"
+  | "crowfoot_many"
+  | "crowfoot_one_or_many";
+
 export type Arrowhead =
   | "arrow"
   | "bar"
-  | "dot" // legacy. Do not use for new elements.
   | "circle"
   | "circle_outline"
   | "triangle"
   | "triangle_outline"
   | "diamond"
   | "diamond_outline"
-  | "crowfoot_one"
-  | "crowfoot_many"
-  | "crowfoot_one_or_many";
+  | CardinalityArrowhead;
+
+export type AnyArrowhead = Arrowhead | ArrowheadLegacy;
 
 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
   Readonly<{

packages/element/src/utils.ts

@@ -43,6 +43,11 @@ import { LinearElementEditor } from "./linearElementEditor";
 import { isRectangularElement } from "./typeChecks";
 import { maxBindingDistance_simple } from "./binding";
 
+import {
+  getGlobalFixedPointForBindableElement,
+  normalizeFixedPoint,
+} from "./binding";
+
 import type {
   ElementsMap,
   ExcalidrawArrowElement,
@@ -119,6 +124,7 @@ const setElementShapesCacheEntry = <T extends ExcalidrawElement>(
  */
 export function deconstructLinearOrFreeDrawElement(
   element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
 ): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
   const cachedShape = getElementShapesCacheEntry(element, 0);
 
@@ -126,10 +132,7 @@ export function deconstructLinearOrFreeDrawElement(
     return cachedShape;
   }
 
-  const ops = generateLinearCollisionShape(element) as {
-    op: string;
-    data: number[];
-  }[];
+  const ops = generateLinearCollisionShape(element, elementsMap);
   const lines = [];
   const curves = [];
 
@@ -654,20 +657,23 @@ export const projectFixedPointOntoDiagonal = (
   startOrEnd: "start" | "end",
   elementsMap: ElementsMap,
   zoom: AppState["zoom"],
+  isMidpointSnappingEnabled: boolean = true,
 ): GlobalPoint | null => {
   invariant(arrow.points.length >= 2, "Arrow must have at least two points");
   if (arrow.width < 3 && arrow.height < 3) {
     return null;
   }
 
-  const sideMidPoint = getSnapOutlineMidPoint(
-    point,
-    element,
-    elementsMap,
-    zoom,
-  );
-  if (sideMidPoint) {
-    return sideMidPoint;
+  if (isMidpointSnappingEnabled) {
+    const sideMidPoint = getSnapOutlineMidPoint(
+      point,
+      element,
+      elementsMap,
+      zoom,
+    );
+    if (sideMidPoint) {
+      return sideMidPoint;
+    }
   }
 
   // Do the projection onto the diagonals (or center lines
@@ -677,11 +683,35 @@ export const projectFixedPointOntoDiagonal = (
     elementsMap,
   );
 
-  const a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+  // To avoid working with stale arrow state, we use the opposite focus point
+  // of the current endpoint, which will always be unchanged during moving of
+  // the endpoint. This is only needed when the arrow has only two points.
+  let a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrow,
     startOrEnd === "start" ? 1 : arrow.points.length - 2,
     elementsMap,
   );
+  if (arrow.points.length === 2) {
+    const otherBinding =
+      startOrEnd === "start" ? arrow.endBinding : arrow.startBinding;
+    const otherBindable =
+      otherBinding &&
+      (elementsMap.get(otherBinding.elementId) as
+        | ExcalidrawBindableElement
+        | undefined);
+    const otherFocusPoint =
+      otherBinding &&
+      otherBindable &&
+      getGlobalFixedPointForBindableElement(
+        normalizeFixedPoint(otherBinding.fixedPoint),
+        otherBindable,
+        elementsMap,
+      );
+    if (otherFocusPoint) {
+      a = otherFocusPoint;
+    }
+  }
+
   const b = pointFromVector<GlobalPoint>(
     vectorScale(
       vectorFromPoint(point, a),

packages/element/tests/collision.test.tsx

@@ -1,4 +1,4 @@
-import { arrayToMap } from "@excalidraw/common";
+import { arrayToMap, reseed } from "@excalidraw/common";
 import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
@@ -12,6 +12,7 @@ import { hitElementItself } from "../src/collision";
 describe("check rotated elements can be hit:", () => {
   beforeEach(async () => {
     localStorage.clear();
+    reseed(7);
     await render(<Excalidraw handleKeyboardGlobally={true} />);
   });
 
@@ -56,6 +57,7 @@ describe("hitElementItself cache", () => {
     });
 
     localStorage.clear();
+    reseed(7);
     await render(<Excalidraw handleKeyboardGlobally={true} />);
   });
 

packages/element/tests/embeddable.test.ts

@@ -1,4 +1,4 @@
-import { getEmbedLink } from "../src/embeddable";
+import { embeddableURLValidator, getEmbedLink } from "../src/embeddable";
 
 describe("YouTube timestamp parsing", () => {
   it("should parse YouTube URLs with timestamp in seconds", () => {
@@ -151,3 +151,83 @@ describe("YouTube timestamp parsing", () => {
     }
   });
 });
+
+describe("Google Drive video embedding", () => {
+  it.each([
+    {
+      url: "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?usp=sharing",
+      expectedLink:
+        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
+    },
+    {
+      url: "https://drive.google.com/open?id=1AbCdEfGhIjKlMnOpQrStUvWxYz123456",
+      expectedLink:
+        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
+    },
+    {
+      url: "https://drive.google.com/uc?export=download&id=1AbCdEfGhIjKlMnOpQrStUvWxYz123456",
+      expectedLink:
+        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
+    },
+  ])("should normalize Google Drive link: $url", ({ url, expectedLink }) => {
+    const result = getEmbedLink(url);
+
+    expect(result).toBeTruthy();
+    expect(result?.type).toBe("video");
+    if (result?.type === "video" || result?.type === "generic") {
+      expect(result.link).toBe(expectedLink);
+    }
+    expect(result?.intrinsicSize).toEqual({ w: 560, h: 315 });
+  });
+
+  it("should preserve resourcekey when available", () => {
+    const url =
+      "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?resourcekey=0-abcdef123456";
+    const result = getEmbedLink(url);
+
+    expect(result).toBeTruthy();
+    expect(result?.type).toBe("video");
+    if (result?.type === "video" || result?.type === "generic") {
+      expect(result.link).toBe(
+        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?resourcekey=0-abcdef123456",
+      );
+    }
+  });
+
+  it("should preserve timestamp when available", () => {
+    const url =
+      "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?t=9";
+    const result = getEmbedLink(url);
+
+    expect(result).toBeTruthy();
+    expect(result?.type).toBe("video");
+    if (result?.type === "video" || result?.type === "generic") {
+      expect(result.link).toBe(
+        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?t=9",
+      );
+    }
+  });
+
+  it("should preserve resourcekey and timestamp together", () => {
+    const url =
+      "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?resourcekey=0-abcdef123456&t=9";
+    const result = getEmbedLink(url);
+
+    expect(result).toBeTruthy();
+    expect(result?.type).toBe("video");
+    if (result?.type === "video" || result?.type === "generic") {
+      expect(result.link).toBe(
+        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?resourcekey=0-abcdef123456&t=9",
+      );
+    }
+  });
+
+  it("should validate Google Drive domain by default", () => {
+    expect(
+      embeddableURLValidator(
+        "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view",
+        undefined,
+      ),
+    ).toBe(true);
+  });
+});

packages/element/tests/fractionalIndex.test.ts

@@ -1,9 +1,8 @@
 /* eslint-disable no-lone-blocks */
-import { generateKeyBetween } from "fractional-indexing";
-
 import { arrayToMap } from "@excalidraw/common";
 
 import {
+  InvalidFractionalIndexError,
   syncInvalidIndices,
   syncMovedIndices,
   validateFractionalIndices,
@@ -13,13 +12,34 @@ import { deepCopyElement } from "@excalidraw/element";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
+import {
+  generateKeyBetween,
+  validateOrderKey,
+} from "@excalidraw/fractional-indexing";
+
 import type {
   ElementsMap,
   ExcalidrawElement,
   FractionalIndex,
 } from "@excalidraw/element/types";
 
-import { InvalidFractionalIndexError } from "../src/fractionalIndex";
+describe("fractional index format validation", () => {
+  it("should reject malformed base62 order keys", () => {
+    expect(() => validateOrderKey("a!")).toThrow();
+    expect(() => validateOrderKey("a_")).toThrow();
+    expect(() => validateOrderKey("a1!")).toThrow();
+    expect(() => validateOrderKey("a1_")).toThrow();
+    expect(() => validateOrderKey("zd0032")).toThrow();
+  });
+
+  it("should accept valid base62 order keys", () => {
+    expect(() => validateOrderKey("Zz")).not.toThrow();
+    expect(() => validateOrderKey("a0")).not.toThrow();
+    expect(() => validateOrderKey("a1")).not.toThrow();
+    expect(() => validateOrderKey("a1V")).not.toThrow();
+    expect(() => validateOrderKey("z".padEnd(28, "z"))).not.toThrow();
+  });
+});
 
 describe("sync invalid indices with array order", () => {
   describe("should NOT sync empty array", () => {
@@ -104,6 +124,46 @@ describe("sync invalid indices with array order", () => {
     });
   });
 
+  describe("should sync when fractional index is malformed", () => {
+    // "zd0032" has head "z" which requires length 28 per getIntegerLength,
+    // but the string is far too short, so validateOrderKey throws for it
+    testInvalidIndicesSync({
+      elements: [{ id: "A", index: "zd0032" }],
+      expect: {
+        unchangedElements: [],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [
+        { id: "A", index: "a1" },
+        { id: "B", index: "zd0032" },
+        { id: "C", index: "a3" },
+      ],
+      expect: {
+        unchangedElements: ["A", "C"],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [{ id: "A", index: "a!" }],
+      expect: {
+        unchangedElements: [],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [
+        { id: "A", index: "a1" },
+        { id: "B", index: "a!" },
+        { id: "C", index: "a2" },
+      ],
+      expect: {
+        unchangedElements: ["A", "C"],
+      },
+    });
+  });
+
   describe("should sync when fractional indices are duplicated", () => {
     testInvalidIndicesSync({
       elements: [

packages/element/tests/frame.test.tsx

@@ -2,15 +2,24 @@ import {
   convertToExcalidrawElements,
   Excalidraw,
 } from "@excalidraw/excalidraw";
+import { arrayToMap } from "@excalidraw/common";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
+import { Keyboard, Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
+import { getTextEditor } from "@excalidraw/excalidraw/tests/queries/dom";
 import {
   getCloneByOrigId,
   render,
 } from "@excalidraw/excalidraw/tests/test-utils";
 
-import type { ExcalidrawElement } from "../src/types";
+import { getSelectedElements } from "@excalidraw/excalidraw/scene";
+
+import { elementOverlapsWithFrame } from "../src/frame";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+} from "../src/types";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -125,6 +134,250 @@ describe("adding elements to frames", () => {
     });
   });
 
+  it("should treat an element fully containing a frame as overlapping the frame", () => {
+    const containingRect = API.createElement({
+      type: "rectangle",
+      x: -50,
+      y: -50,
+      width: 250,
+      height: 250,
+    });
+
+    API.setElements([containingRect, frame]);
+
+    expect(
+      elementOverlapsWithFrame(
+        containingRect,
+        frame as ExcalidrawFrameLikeElement,
+        arrayToMap(h.elements),
+      ),
+    ).toBe(true);
+  });
+
+  it("should not add a newly created element to a frame behind a non-frame element", () => {
+    const cover = API.createElement({
+      id: "cover",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+    });
+
+    API.setElements([frame, cover]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== cover.id,
+    );
+
+    expect(createdElement?.frameId).toBe(null);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frame.id,
+      cover.id,
+      createdElement?.id,
+    ]);
+  });
+
+  it("should add a newly created element to a frame over a non-frame element", () => {
+    const cover = API.createElement({
+      id: "cover",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+    });
+
+    API.setElements([cover, frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== cover.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+  });
+
+  it("should highlight the target frame while creating a new element", () => {
+    API.setElements([frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+
+    expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+    mouse.upAt(40, 40);
+
+    expect(h.state.frameToHighlight).toBe(null);
+  });
+
+  it("should highlight the target frame while hovering with a creation tool", () => {
+    API.setElements([frame]);
+
+    UI.clickTool("rectangle");
+    mouse.moveTo(20, 20);
+
+    expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+    mouse.moveTo(200, 200);
+
+    expect(h.state.frameToHighlight).toBe(null);
+  });
+
+  it("should not add grid-snapped text outside the frame to the clicked frame", async () => {
+    const offsetFrame = API.createElement({
+      id: "offsetFrame",
+      type: "frame",
+      x: 10,
+      y: 0,
+      width: 150,
+      height: 150,
+    });
+
+    API.setElements([offsetFrame]);
+    API.setAppState({
+      gridModeEnabled: true,
+    });
+
+    UI.clickTool("text");
+    mouse.clickAt(12, 0);
+
+    await getTextEditor();
+
+    const createdText = h.elements.find(
+      (element) => element.id !== offsetFrame.id,
+    );
+
+    expect(createdText?.x).toBe(0);
+    expect(createdText?.y).toBe(0);
+    expect(createdText?.frameId).toBe(null);
+  });
+
+  it("should add a newly created element to a frame behind another frame", () => {
+    const lockedFrame = API.createElement({
+      id: "lockedFrame",
+      type: "frame",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      locked: true,
+    });
+
+    API.setElements([frame, lockedFrame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== lockedFrame.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+  });
+
+  it("should insert a newly created frame child just below its frame", () => {
+    const frameChildUnderCursor = API.createElement({
+      id: "frameChildUnderCursor",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+      frameId: frame.id,
+    });
+    const otherFrameChild = API.createElement({
+      id: "otherFrameChild",
+      type: "rectangle",
+      x: 100,
+      y: 20,
+      width: 20,
+      height: 20,
+      frameId: frame.id,
+    });
+
+    API.setElements([frameChildUnderCursor, otherFrameChild, frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) =>
+        element.id !== frame.id &&
+        element.id !== frameChildUnderCursor.id &&
+        element.id !== otherFrameChild.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frameChildUnderCursor.id,
+      otherFrameChild.id,
+      createdElement?.id,
+      frame.id,
+    ]);
+  });
+
+  it("should insert a newly created frame child above the highest frame child", () => {
+    const frameChildUnderCursor = API.createElement({
+      id: "frameChildUnderCursor",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+      frameId: frame.id,
+    });
+    const otherFrameChild = API.createElement({
+      id: "otherFrameChild",
+      type: "rectangle",
+      x: 100,
+      y: 20,
+      width: 20,
+      height: 20,
+      frameId: frame.id,
+    });
+
+    API.setElements([frame, frameChildUnderCursor, otherFrameChild]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) =>
+        element.id !== frame.id &&
+        element.id !== frameChildUnderCursor.id &&
+        element.id !== otherFrameChild.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frame.id,
+      frameChildUnderCursor.id,
+      otherFrameChild.id,
+      createdElement?.id,
+    ]);
+  });
+
   const commonTestCases = async (
     func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
   ) => {
@@ -415,6 +668,345 @@ describe("adding elements to frames", () => {
   describe("dragging elements into the frame", async () => {
     await commonTestCases(dragElementIntoFrame);
 
+    it("should add a dragged element fully containing the frame", () => {
+      const containingRect = API.createElement({
+        type: "rectangle",
+        x: 220,
+        y: 20,
+        width: 300,
+        height: 300,
+      });
+
+      API.setElements([frame, containingRect]);
+
+      dragElementIntoFrame(frame, containingRect);
+
+      expect(API.getElement(containingRect).frameId).toBe(frame.id);
+    });
+
+    it("should drag an element into a frame", () => {
+      API.setElements([rect2, frame]);
+
+      dragElementIntoFrame(frame, rect2);
+
+      expect(rect2.frameId).toBe(frame.id);
+    });
+
+    it("should layer a dragged element above the highest frame child", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frame, frameChild, rect2]);
+
+      dragElementIntoFrame(frame, rect2);
+
+      expect(rect2.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        frameChild.id,
+        rect2.id,
+      ]);
+      expect(rect2.index! > frameChild.index!).toBe(true);
+      expect(rect2.index! > frame.index!).toBe(true);
+    });
+
+    it("should preview a dragged element above the highest frame child before pointerup", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([rect2, frame, frameChild]);
+      API.setSelectedElements([rect2]);
+      API.updateElement(rect2, {
+        x: 10,
+        y: 10,
+      });
+
+      const getRenderableElementIds = (
+        selectedElementsAreBeingDragged: boolean,
+      ) => {
+        return h.app.renderer
+          .getRenderableElements({
+            zoom: h.state.zoom,
+            offsetLeft: 0,
+            offsetTop: 0,
+            scrollX: 0,
+            scrollY: 0,
+            height: 1000,
+            width: 1000,
+            editingTextElement: h.state.editingTextElement,
+            newElement: h.state.newElement,
+            selectedElements: getSelectedElements(h.elements, h.state),
+            selectedElementsAreBeingDragged,
+            frameToHighlight: frame as ExcalidrawFrameLikeElement,
+          })
+          .visibleElements.map((element) => element.id);
+      };
+
+      expect(h.elements.map((element) => element.id)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(getRenderableElementIds(false)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(getRenderableElementIds(true)).toEqual([
+        frame.id,
+        frameChild.id,
+        rect2.id,
+      ]);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(rect2.frameId).toBe(null);
+    });
+
+    it("should not preview reorder dragged elements already in the highlighted frame", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 40,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frameChild, frame, otherFrameChild]);
+      API.setSelectedElements([frameChild]);
+
+      const renderableElementIds = h.app.renderer
+        .getRenderableElements({
+          zoom: h.state.zoom,
+          offsetLeft: 0,
+          offsetTop: 0,
+          scrollX: 0,
+          scrollY: 0,
+          height: 1000,
+          width: 1000,
+          editingTextElement: h.state.editingTextElement,
+          newElement: h.state.newElement,
+          selectedElements: getSelectedElements(h.elements, h.state),
+          selectedElementsAreBeingDragged: true,
+          frameToHighlight: frame as ExcalidrawFrameLikeElement,
+        })
+        .visibleElements.map((element) => element.id);
+
+      expect(renderableElementIds).toEqual([
+        frameChild.id,
+        frame.id,
+        otherFrameChild.id,
+      ]);
+    });
+
+    it("should put a dragged mixed selection above the highest frame child", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+        boundElements: [{ id: "boundText", type: "text" }],
+      });
+      const boundText = API.createElement({
+        id: "boundText",
+        type: "text",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        containerId: frameChild.id,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 80,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const nonFrameElement = API.createElement({
+        id: "nonFrameElement",
+        type: "rectangle",
+        x: 155,
+        y: 10,
+        width: 20,
+        height: 20,
+      });
+
+      API.setElements([
+        frame,
+        frameChild,
+        boundText,
+        otherFrameChild,
+        nonFrameElement,
+      ]);
+      API.setSelectedElements([frameChild, nonFrameElement]);
+
+      mouse.downAt(
+        nonFrameElement.x + nonFrameElement.width / 2,
+        nonFrameElement.y + nonFrameElement.height / 2,
+      );
+      mouse.moveTo(frame.x + frame.width - 5, nonFrameElement.y + 10);
+      mouse.up();
+
+      expect(frameChild.frameId).toBe(frame.id);
+      expect(boundText.frameId).toBe(frame.id);
+      expect(nonFrameElement.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        otherFrameChild.id,
+        frameChild.id,
+        boundText.id,
+        nonFrameElement.id,
+      ]);
+    });
+
+    it("should not reorder dragged elements already in the highlighted frame", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 80,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frame, frameChild, otherFrameChild]);
+      API.setSelectedElements([frameChild]);
+
+      mouse.downAt(
+        frameChild.x + frameChild.width / 2,
+        frameChild.y + frameChild.height / 2,
+      );
+      mouse.moveTo(frameChild.x + frameChild.width / 2 + 5, frameChild.y + 10);
+      mouse.up();
+
+      expect(frameChild.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        frameChild.id,
+        otherFrameChild.id,
+      ]);
+    });
+
+    it("should not drag an element into a frame behind a non-frame element", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      API.setElements([frame, cover, rect2]);
+
+      mouse.clickAt(rect2.x, rect2.y);
+      mouse.downAt(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2);
+      mouse.moveTo(20, 20);
+      mouse.upAt(20, 20);
+
+      expect(rect2.frameId).toBe(null);
+    });
+
+    it("should drag an element into a frame over a non-frame element", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      API.setElements([cover, rect2, frame]);
+
+      mouse.clickAt(rect2.x, rect2.y);
+      mouse.downAt(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2);
+      mouse.moveTo(20, 20);
+      mouse.upAt(20, 20);
+
+      expect(rect2.frameId).toBe(frame.id);
+    });
+
+    it("should keep dragging a frame child over a non-frame element above its frame", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 100,
+        y: 20,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frameChild, frame, cover]);
+      API.setSelectedElements([frameChild]);
+
+      mouse.downAt(
+        frameChild.x + frameChild.width / 2,
+        frameChild.y + frameChild.height / 2,
+      );
+      mouse.moveTo(20, 20);
+
+      expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+      mouse.upAt(20, 20);
+
+      expect(frameChild.frameId).toBe(frame.id);
+    });
+
     it.skip("should drag element inside, duplicate it and keep it in frame", () => {
       API.setElements([frame, rect2]);
 

packages/element/tests/sortElements.test.ts

@@ -326,19 +326,59 @@ describe("normalizeElementsOrder", () => {
       ]),
       [
         "BA_rect1",
+        "CBA_rect3",
+        "CBA_rect7",
         "BA_rect5",
         "BA_rect6",
         "A_rect2",
         "A_rect5",
-        "CBA_rect3",
-        "CBA_rect7",
         "rect4",
         "X_rect8",
-        "X_rect11",
         "YX_rect10",
+        "X_rect11",
         "rect9",
       ],
     );
+    assertOrder(
+      normalizeElementOrder([
+        API.createElement({
+          id: "A_rect1",
+          type: "rectangle",
+          groupIds: ["A"],
+        }),
+        API.createElement({
+          id: "CBA_rect2",
+          type: "rectangle",
+          groupIds: ["C", "B", "A"],
+        }),
+        API.createElement({
+          id: "A_rect3",
+          type: "rectangle",
+          groupIds: ["A"],
+        }),
+      ]),
+      ["A_rect1", "CBA_rect2", "A_rect3"],
+    );
+    assertOrder(
+      normalizeElementOrder([
+        API.createElement({
+          id: "abcT_rect1",
+          type: "rectangle",
+          groupIds: ["ab", "c", "T"],
+        }),
+        API.createElement({
+          id: "abcT_rect2",
+          type: "rectangle",
+          groupIds: ["a", "bc", "T"],
+        }),
+        API.createElement({
+          id: "abcT_rect3",
+          type: "rectangle",
+          groupIds: ["ab", "c", "T"],
+        }),
+      ]),
+      ["abcT_rect1", "abcT_rect3", "abcT_rect2"],
+    );
   });
 
   // TODO

packages/element/tests/textWrapping.test.ts

@@ -1,4 +1,8 @@
-import { wrapText, parseTokens } from "../src/textWrapping";
+import {
+  getWrappedTextLines,
+  parseTokens,
+  wrapText,
+} from "../src/textWrapping";
 
 import type { FontString } from "../src/types";
 
@@ -102,6 +106,71 @@ describe("Test wrapText", () => {
     expect(res2).toBe(`\tA)\none\ntab\n- two\ntabs\n- 8\nspace\ns`);
   });
 
+  it("should retain original text offsets for wrapped lines", () => {
+    expect(getWrappedTextLines("Hello World!", font, 60)).toEqual([
+      {
+        text: "Hello",
+        start: 0,
+        end: 5,
+      },
+      {
+        text: "World!",
+        start: 6,
+        end: 12,
+      },
+    ]);
+  });
+
+  it("should exclude whitespace trimmed away at soft-wrap boundaries from line offsets", () => {
+    expect(getWrappedTextLines("  Hello  World", font, 90)).toEqual([
+      {
+        text: "  Hello",
+        start: 0,
+        end: 7,
+      },
+      {
+        text: "World",
+        start: 9,
+        end: 14,
+      },
+    ]);
+  });
+
+  it("should retain offsets when wrapping a single long token", () => {
+    expect(getWrappedTextLines("Excalidraw", font, 50)).toEqual([
+      {
+        text: "Excal",
+        start: 0,
+        end: 5,
+      },
+      {
+        text: "idraw",
+        start: 5,
+        end: 10,
+      },
+    ]);
+  });
+
+  it("should preserve empty hard lines in metadata", () => {
+    expect(getWrappedTextLines("A\n\nB", font, 100)).toEqual([
+      {
+        text: "A",
+        start: 0,
+        end: 1,
+      },
+      {
+        text: "",
+        start: 2,
+        end: 2,
+      },
+      {
+        text: "B",
+        start: 3,
+        end: 4,
+      },
+    ]);
+  });
+
   describe("When text is CJK", () => {
     it("should break each CJK character when width is very small", () => {
       // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"