@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-b7babe5

package/dist/excalidraw/element/bounds.js

@@ -6,10 +6,10 @@ import { rescalePoints } from "../points";
 import { getBoundTextElement, getContainerElement } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { ShapeCache } from "../scene/ShapeCache";
-import Scene from "../scene/Scene";
+import { arrayToMap } from "../utils";
 export class ElementBounds {
     static boundsCache = new WeakMap();
-    static getBounds(element) {
+    static getBounds(element, elementsMap) {
         const cachedBounds = ElementBounds.boundsCache.get(element);
         if (cachedBounds?.version &&
             cachedBounds.version === element.version &&
@@ -18,22 +18,16 @@ export class ElementBounds {
             !isBoundToContainer(element)) {
             return cachedBounds.bounds;
         }
-        const bounds = ElementBounds.calculateBounds(element);
-        // hack to ensure that downstream checks could retrieve element Scene
-        // so as to have correctly calculated bounds
-        // FIXME remove when we get rid of all the id:Scene / element:Scene mapping
-        const shouldCache = Scene.getScene(element);
-        if (shouldCache) {
-            ElementBounds.boundsCache.set(element, {
-                version: element.version,
-                bounds,
-            });
-        }
+        const bounds = ElementBounds.calculateBounds(element, elementsMap);
+        ElementBounds.boundsCache.set(element, {
+            version: element.version,
+            bounds,
+        });
         return bounds;
     }
-    static calculateBounds(element) {
+    static calculateBounds(element, elementsMap) {
         let bounds;
-        const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
+        const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element, elementsMap);
         if (isFreeDrawElement(element)) {
             const [minX, minY, maxX, maxY] = getBoundsFromPoints(element.points.map(([x, y]) => rotate(x, y, cx - element.x, cy - element.y, element.angle)));
             return [
@@ -44,7 +38,7 @@ export class ElementBounds {
             ];
         }
         else if (isLinearElement(element)) {
-            bounds = getLinearElementRotatedBounds(element, cx, cy);
+            bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
         }
         else if (element.type === "diamond") {
             const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
@@ -84,17 +78,19 @@ export class ElementBounds {
 //
 // If the element is created from right to left, the width is going to be negative
 // This set of functions retrieves the absolute position of the 4 points.
-export const getElementAbsoluteCoords = (element, includeBoundText = false) => {
+export const getElementAbsoluteCoords = (element, elementsMap, includeBoundText = false) => {
     if (isFreeDrawElement(element)) {
         return getFreeDrawElementAbsoluteCoords(element);
     }
     else if (isLinearElement(element)) {
-        return LinearElementEditor.getElementAbsoluteCoords(element, includeBoundText);
+        return LinearElementEditor.getElementAbsoluteCoords(element, elementsMap, includeBoundText);
     }
     else if (isTextElement(element)) {
-        const container = getContainerElement(element);
+        const container = elementsMap
+            ? getContainerElement(element, elementsMap)
+            : null;
         if (isArrowElement(container)) {
-            const coords = LinearElementEditor.getBoundTextElementPosition(container, element);
+            const coords = LinearElementEditor.getBoundTextElementPosition(container, element, elementsMap);
             return [
                 coords.x,
                 coords.y,
@@ -119,8 +115,8 @@ export const getElementAbsoluteCoords = (element, includeBoundText = false) => {
  * that can be used for visual collision detection (useful for frames)
  * as opposed to bounding box collision detection
  */
-export const getElementLineSegments = (element) => {
-    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
+export const getElementLineSegments = (element, elementsMap) => {
+    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element, elementsMap);
     const center = [cx, cy];
     if (isLinearElement(element) || isFreeDrawElement(element)) {
         const segments = [];
@@ -459,14 +455,14 @@ const generateLinearElementShape = (element) => {
     })();
     return generator[method](element.points, options);
 };
-const getLinearElementRotatedBounds = (element, cx, cy) => {
+const getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
+    const boundTextElement = getBoundTextElement(element, elementsMap);
     if (element.points.length < 2) {
         const [pointX, pointY] = element.points[0];
         const [x, y] = rotate(element.x + pointX, element.y + pointY, cx, cy, element.angle);
         let coords = [x, y, x, y];
-        const boundTextElement = getBoundTextElement(element);
         if (boundTextElement) {
-            const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(element, [x, y, x, y], boundTextElement);
+            const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(element, elementsMap, [x, y, x, y], boundTextElement);
             coords = [
                 coordsWithBoundText[0],
                 coordsWithBoundText[1],
@@ -483,9 +479,8 @@ const getLinearElementRotatedBounds = (element, cx, cy) => {
     const transformXY = (x, y) => rotate(element.x + x, element.y + y, cx, cy, element.angle);
     const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
     let coords = [res[0], res[1], res[2], res[3]];
-    const boundTextElement = getBoundTextElement(element);
     if (boundTextElement) {
-        const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(element, coords, boundTextElement);
+        const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(element, elementsMap, coords, boundTextElement);
         coords = [
             coordsWithBoundText[0],
             coordsWithBoundText[1],
@@ -495,8 +490,8 @@ const getLinearElementRotatedBounds = (element, cx, cy) => {
     }
     return coords;
 };
-export const getElementBounds = (element) => {
-    return ElementBounds.getBounds(element);
+export const getElementBounds = (element, elementsMap) => {
+    return ElementBounds.getBounds(element, elementsMap);
 };
 export const getCommonBounds = (elements) => {
     if (!elements.length) {
@@ -506,8 +501,9 @@ export const getCommonBounds = (elements) => {
     let maxX = -Infinity;
     let minY = Infinity;
     let maxY = -Infinity;
+    const elementsMap = arrayToMap(elements);
     elements.forEach((element) => {
-        const [x1, y1, x2, y2] = getElementBounds(element);
+        const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
         minX = Math.min(minX, x1);
         minY = Math.min(minY, y1);
         maxX = Math.max(maxX, x2);
@@ -577,15 +573,16 @@ export const getClosestElementBounds = (elements, from) => {
     }
     let minDistance = Infinity;
     let closestElement = elements[0];
+    const elementsMap = arrayToMap(elements);
     elements.forEach((element) => {
-        const [x1, y1, x2, y2] = getElementBounds(element);
+        const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
         const distance = distance2d((x1 + x2) / 2, (y1 + y2) / 2, from.x, from.y);
         if (distance < minDistance) {
             minDistance = distance;
             closestElement = element;
         }
     });
-    return getElementBounds(closestElement);
+    return getElementBounds(closestElement, elementsMap);
 };
 export const getCommonBoundingBox = (elements) => {
     const [minX, minY, maxX, maxY] = getCommonBounds(elements);

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

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

package/dist/excalidraw/element/collision.js

@@ -27,36 +27,36 @@ const isElementDraggableFromInside = (element) => {
     }
     return isDraggableFromInside || isImageElement(element);
 };
-export const hitTest = (element, appState, frameNameBoundsCache, x, y) => {
+export const hitTest = (element, appState, frameNameBoundsCache, x, y, elementsMap) => {
     // How many pixels off the shape boundary we still consider a hit
     const threshold = 10 / appState.zoom.value;
     const point = [x, y];
     if (isElementSelected(appState, element) &&
         shouldShowBoundingBox([element], appState)) {
-        return isPointHittingElementBoundingBox(element, point, threshold, frameNameBoundsCache);
+        return isPointHittingElementBoundingBox(element, elementsMap, point, threshold, frameNameBoundsCache);
     }
-    const boundTextElement = getBoundTextElement(element);
+    const boundTextElement = getBoundTextElement(element, elementsMap);
     if (boundTextElement) {
-        const isHittingBoundTextElement = hitTest(boundTextElement, appState, frameNameBoundsCache, x, y);
+        const isHittingBoundTextElement = hitTest(boundTextElement, appState, frameNameBoundsCache, x, y, elementsMap);
         if (isHittingBoundTextElement) {
             return true;
         }
     }
-    return isHittingElementNotConsideringBoundingBox(element, appState, frameNameBoundsCache, point);
+    return isHittingElementNotConsideringBoundingBox(element, appState, frameNameBoundsCache, point, elementsMap);
 };
-export const isHittingElementBoundingBoxWithoutHittingElement = (element, appState, frameNameBoundsCache, x, y) => {
+export const isHittingElementBoundingBoxWithoutHittingElement = (element, appState, frameNameBoundsCache, x, y, elementsMap) => {
     const threshold = 10 / appState.zoom.value;
     // So that bound text element hit is considered within bounding box of container even if its outside actual bounding box of element
     // eg for linear elements text can be outside the element bounding box
-    const boundTextElement = getBoundTextElement(element);
+    const boundTextElement = getBoundTextElement(element, elementsMap);
     if (boundTextElement &&
-        hitTest(boundTextElement, appState, frameNameBoundsCache, x, y)) {
+        hitTest(boundTextElement, appState, frameNameBoundsCache, x, y, elementsMap)) {
         return false;
     }
-    return (!isHittingElementNotConsideringBoundingBox(element, appState, frameNameBoundsCache, [x, y]) &&
-        isPointHittingElementBoundingBox(element, [x, y], threshold, frameNameBoundsCache));
+    return (!isHittingElementNotConsideringBoundingBox(element, appState, frameNameBoundsCache, [x, y], elementsMap) &&
+        isPointHittingElementBoundingBox(element, elementsMap, [x, y], threshold, frameNameBoundsCache));
 };
-export const isHittingElementNotConsideringBoundingBox = (element, appState, frameNameBoundsCache, point) => {
+export const isHittingElementNotConsideringBoundingBox = (element, appState, frameNameBoundsCache, point, elementsMap) => {
     const threshold = 10 / appState.zoom.value;
     const check = isTextElement(element)
         ? isStrictlyInside
@@ -65,6 +65,7 @@ export const isHittingElementNotConsideringBoundingBox = (element, appState, fra
             : isNearCheck;
     return hitTestPointAgainstElement({
         element,
+        elementsMap,
         point,
         threshold,
         check,
@@ -72,7 +73,7 @@ export const isHittingElementNotConsideringBoundingBox = (element, appState, fra
     });
 };
 const isElementSelected = (appState, element) => appState.selectedElementIds[element.id];
-export const isPointHittingElementBoundingBox = (element, [x, y], threshold, frameNameBoundsCache) => {
+export const isPointHittingElementBoundingBox = (element, elementsMap, [x, y], threshold, frameNameBoundsCache) => {
     // frames needs be checked differently so as to be able to drag it
     // by its frame, whether it has been selected or not
     // this logic here is not ideal
@@ -80,13 +81,14 @@ export const isPointHittingElementBoundingBox = (element, [x, y], threshold, fra
     if (isFrameLikeElement(element)) {
         return hitTestPointAgainstElement({
             element,
+            elementsMap,
             point: [x, y],
             threshold,
             check: isInsideCheck,
             frameNameBoundsCache,
         });
     }
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const elementCenterX = (x1 + x2) / 2;
     const elementCenterY = (y1 + y2) / 2;
     // reverse rotate to take element's angle into account.
@@ -96,12 +98,13 @@ export const isPointHittingElementBoundingBox = (element, [x, y], threshold, fra
         rotatedY > y1 - threshold &&
         rotatedY < y2 + threshold);
 };
-export const bindingBorderTest = (element, { x, y }) => {
+export const bindingBorderTest = (element, { x, y }, elementsMap) => {
     const threshold = maxBindingGap(element, element.width, element.height);
     const check = isOutsideCheck;
     const point = [x, y];
     return hitTestPointAgainstElement({
         element,
+        elementsMap,
         point,
         threshold,
         check,
@@ -124,13 +127,13 @@ const hitTestPointAgainstElement = (args) => {
         case "text":
         case "diamond":
         case "ellipse":
-            const distance = distanceToBindableElement(args.element, args.point);
+            const distance = distanceToBindableElement(args.element, args.point, args.elementsMap);
             return args.check(distance, args.threshold);
         case "freedraw": {
-            if (!args.check(distanceToRectangle(args.element, args.point), args.threshold)) {
+            if (!args.check(distanceToRectangle(args.element, args.point, args.elementsMap), args.threshold)) {
                 return false;
             }
-            return hitTestFreeDrawElement(args.element, args.point, args.threshold);
+            return hitTestFreeDrawElement(args.element, args.point, args.threshold, args.elementsMap);
         }
         case "arrow":
         case "line":
@@ -141,7 +144,7 @@ const hitTestPointAgainstElement = (args) => {
         case "frame":
         case "magicframe": {
             // check distance to frame element first
-            if (args.check(distanceToBindableElement(args.element, args.point), args.threshold)) {
+            if (args.check(distanceToBindableElement(args.element, args.point, args.elementsMap), args.threshold)) {
                 return true;
             }
             const frameNameBounds = args.frameNameBoundsCache?.get(args.element);
@@ -152,7 +155,7 @@ const hitTestPointAgainstElement = (args) => {
         }
     }
 };
-export const distanceToBindableElement = (element, point) => {
+export const distanceToBindableElement = (element, point, elementsMap) => {
     switch (element.type) {
         case "rectangle":
         case "image":
@@ -161,11 +164,11 @@ export const distanceToBindableElement = (element, point) => {
         case "embeddable":
         case "frame":
         case "magicframe":
-            return distanceToRectangle(element, point);
+            return distanceToRectangle(element, point, elementsMap);
         case "diamond":
-            return distanceToDiamond(element, point);
+            return distanceToDiamond(element, point, elementsMap);
         case "ellipse":
-            return distanceToEllipse(element, point);
+            return distanceToEllipse(element, point, elementsMap);
     }
 };
 const isStrictlyInside = (distance, threshold) => {
@@ -180,25 +183,25 @@ const isNearCheck = (distance, threshold) => {
 const isOutsideCheck = (distance, threshold) => {
     return 0 <= distance && distance < threshold;
 };
-const distanceToRectangle = (element, point) => {
-    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+const distanceToRectangle = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
     return Math.max(GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)), GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)));
 };
 const distanceToRectangleBox = (box, point) => {
     const [, pointRel, hwidth, hheight] = pointRelativeToDivElement(point, box);
     return Math.max(GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)), GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)));
 };
-const distanceToDiamond = (element, point) => {
-    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+const distanceToDiamond = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
     const side = GALine.equation(hheight, hwidth, -hheight * hwidth);
     return GAPoint.distanceToLine(pointRel, side);
 };
-const distanceToEllipse = (element, point) => {
-    const [pointRel, tangent] = ellipseParamsForTest(element, point);
+const distanceToEllipse = (element, point, elementsMap) => {
+    const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);
     return -GALine.sign(tangent) * GAPoint.distanceToLine(pointRel, tangent);
 };
-const ellipseParamsForTest = (element, point) => {
-    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+const ellipseParamsForTest = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
     const [px, py] = GAPoint.toTuple(pointRel);
     // We're working in positive quadrant, so start with `t = 45deg`, `tx=cos(t)`
     let tx = 0.707;
@@ -228,7 +231,7 @@ const ellipseParamsForTest = (element, point) => {
     const tangent = GALine.orthogonalThrough(pointRel, closestPoint);
     return [pointRel, tangent];
 };
-const hitTestFreeDrawElement = (element, point, threshold) => {
+const hitTestFreeDrawElement = (element, point, threshold, elementsMap) => {
     // Check point-distance-to-line-segment for every segment in the
     // element's points (its input points, not its outline points).
     // This is... okay? It's plenty fast, but the GA library may
@@ -241,7 +244,7 @@ const hitTestFreeDrawElement = (element, point, threshold) => {
     }
     else {
         // Counter-rotate the point around center before testing
-        const [minX, minY, maxX, maxY] = getElementAbsoluteCoords(element);
+        const [minX, minY, maxX, maxY] = getElementAbsoluteCoords(element, elementsMap);
         const rotatedPoint = rotatePoint(point, [minX + (maxX - minX) / 2, minY + (maxY - minY) / 2], -element.angle);
         x = rotatedPoint[0] - element.x;
         y = rotatedPoint[1] - element.y;
@@ -285,7 +288,7 @@ const hitTestLinear = (args) => {
     if (!ShapeCache.get(element)) {
         return false;
     }
-    const [point, pointAbs, hwidth, hheight] = pointRelativeToElement(args.element, args.point);
+    const [point, pointAbs, hwidth, hheight] = pointRelativeToElement(args.element, args.point, args.elementsMap);
     const side1 = GALine.equation(0, 1, -hheight);
     const side2 = GALine.equation(1, 0, -hwidth);
     if (!isInsideCheck(GAPoint.distanceToLine(pointAbs, side1), threshold) ||
@@ -318,9 +321,9 @@ const hitTestLinear = (args) => {
 // Rectangles, diamonds and ellipses are symmetrical over axes,
 // and other elements have a rectangular boundary,
 // so we only need to perform hit tests for the positive quadrant.
-const pointRelativeToElement = (element, pointTuple) => {
+const pointRelativeToElement = (element, pointTuple, elementsMap) => {
     const point = GAPoint.from(pointTuple);
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const center = coordsCenter(x1, y1, x2, y2);
     // GA has angle orientation opposite to `rotate`
     const rotate = GATransform.rotation(center, element.angle);
@@ -348,18 +351,18 @@ const pointRelativeToDivElement = (pointTuple, rectangle) => {
     return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
 };
 // Returns point in absolute coordinates
-export const pointInAbsoluteCoords = (element, 
+export const pointInAbsoluteCoords = (element, elementsMap, 
 // Point relative to the element position
 point) => {
     const [x, y] = point;
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const cx = (x2 - x1) / 2;
     const cy = (y2 - y1) / 2;
     const [rotatedX, rotatedY] = rotate(x, y, cx, cy, element.angle);
     return [element.x + rotatedX, element.y + rotatedY];
 };
-const relativizationToElementCenter = (element) => {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+const relativizationToElementCenter = (element, elementsMap) => {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const center = coordsCenter(x1, y1, x2, y2);
     // GA has angle orientation opposite to `rotate`
     const rotate = GATransform.rotation(center, element.angle);
@@ -378,8 +381,8 @@ export const determineFocusDistance = (element,
 // Point on the line, in absolute coordinates
 a, 
 // Another point on the line, in absolute coordinates (closer to element)
-b) => {
-    const relateToCenter = relativizationToElementCenter(element);
+b, elementsMap) => {
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
     const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
     const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
     const line = GALine.through(aRel, bRel);
@@ -414,13 +417,13 @@ b) => {
 export const determineFocusPoint = (element, 
 // The oriented, relative distance from the center of `element` of the
 // returned focusPoint
-focus, adjecentPoint) => {
+focus, adjecentPoint, elementsMap) => {
     if (focus === 0) {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const center = coordsCenter(x1, y1, x2, y2);
         return GAPoint.toTuple(center);
     }
-    const relateToCenter = relativizationToElementCenter(element);
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
     const adjecentPointRel = GATransform.apply(relateToCenter, GAPoint.from(adjecentPoint));
     const reverseRelateToCenter = GA.reverse(relateToCenter);
     let point;
@@ -449,8 +452,8 @@ a,
 // Another point on the line, in absolute coordinates
 b, 
 // If given, the element is inflated by this value
-gap = 0) => {
-    const relateToCenter = relativizationToElementCenter(element);
+gap = 0, elementsMap) => {
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
     const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
     const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
     const line = GALine.through(aRel, bRel);

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

@@ -0,0 +1,11 @@
+import { ExcalidrawTextContainer } from "./types";
+export declare const originalContainerCache: {
+    [id: ExcalidrawTextContainer["id"]]: {
+        height: ExcalidrawTextContainer["height"];
+    } | undefined;
+};
+export declare const updateOriginalContainerCache: (id: ExcalidrawTextContainer["id"], height: ExcalidrawTextContainer["height"]) => {
+    height: ExcalidrawTextContainer["height"];
+};
+export declare const resetOriginalContainerCache: (id: ExcalidrawTextContainer["id"]) => void;
+export declare const getOriginalContainerHeightFromCache: (id: ExcalidrawTextContainer["id"]) => number | null;

package/dist/excalidraw/element/containerCache.js

@@ -0,0 +1,14 @@
+export const originalContainerCache = {};
+export const updateOriginalContainerCache = (id, height) => {
+    const data = originalContainerCache[id] || (originalContainerCache[id] = { height });
+    data.height = height;
+    return data;
+};
+export const resetOriginalContainerCache = (id) => {
+    if (originalContainerCache[id]) {
+        delete originalContainerCache[id];
+    }
+};
+export const getOriginalContainerHeightFromCache = (id) => {
+    return originalContainerCache[id]?.height ?? null;
+};

package/dist/excalidraw/element/dragElements.js

@@ -3,9 +3,8 @@ import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { getBoundTextElement } from "./textElement";
-import { isSelectedViaGroup } from "../groups";
 import { getGridPoint } from "../math";
-import { isArrowElement, isBoundToContainer, isFrameLikeElement, } from "./typeChecks";
+import { isArrowElement, isFrameLikeElement } from "./typeChecks";
 export const dragSelectedElements = (pointerDownState, selectedElements, offset, appState, scene, snapOffset, gridSize) => {
     // we do not want a frame and its elements to be selected at the same time
     // but when it happens (due to some bug), we want to avoid updating element
@@ -15,33 +14,25 @@ export const dragSelectedElements = (pointerDownState, selectedElements, offset,
         .filter((e) => isFrameLikeElement(e))
         .map((f) => f.id);
     if (frames.length > 0) {
-        const elementsInFrames = scene
-            .getNonDeletedElements()
-            .filter((e) => !isBoundToContainer(e))
-            .filter((e) => e.frameId !== null)
-            .filter((e) => frames.includes(e.frameId));
-        elementsInFrames.forEach((element) => elementsToUpdate.add(element));
+        for (const element of scene.getNonDeletedElements()) {
+            if (element.frameId !== null && frames.includes(element.frameId)) {
+                elementsToUpdate.add(element);
+            }
+        }
     }
     const commonBounds = getCommonBounds(Array.from(elementsToUpdate).map((el) => pointerDownState.originalElements.get(el.id) ?? el));
     const adjustedOffset = calculateOffset(commonBounds, offset, snapOffset, gridSize);
     elementsToUpdate.forEach((element) => {
         updateElementCoords(pointerDownState, element, adjustedOffset);
-        // update coords of bound text only if we're dragging the container directly
-        // (we don't drag the group that it's part of)
         if (
-        // Don't update coords of arrow label since we calculate its position during render
-        !isArrowElement(element) &&
-            // container isn't part of any group
-            // (perf optim so we don't check `isSelectedViaGroup()` in every case)
-            (!element.groupIds.length ||
-                // container is part of a group, but we're dragging the container directly
-                (appState.editingGroupId && !isSelectedViaGroup(appState, element)))) {
-            const textElement = getBoundTextElement(element);
+        // skip arrow labels since we calculate its position during render
+        !isArrowElement(element)) {
+            const textElement = getBoundTextElement(element, scene.getNonDeletedElementsMap());
             if (textElement) {
                 updateElementCoords(pointerDownState, textElement, adjustedOffset);
             }
         }
-        updateBoundElements(element, {
+        updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
             simultaneouslyUpdated: Array.from(elementsToUpdate),
         });
     });

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import { ExcalidrawProps } from "../types";
-import { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData, NonDeletedExcalidrawElement } from "./types";
+import { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData } from "./types";
 export declare const createSrcDoc: (body: string) => string;
 export declare const getEmbedLink: (link: string | null | undefined) => IframeData | null;
-export declare const isIframeLikeOrItsLabel: (element: NonDeletedExcalidrawElement) => Boolean;
 export declare const createPlaceholderEmbeddableLabel: (element: ExcalidrawIframeLikeElement) => ExcalidrawElement;
 export declare const actionSetEmbeddableAsActiveTool: {
     name: "setEmbeddableAsActiveTool";
@@ -26,13 +25,13 @@ export declare const actionSetEmbeddableAsActiveTool: {
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
-                element: NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                element: import("./types").NonDeletedExcalidrawElement;
+                state: "hover" | "active";
             } | null;
-            draggingElement: NonDeletedExcalidrawElement | null;
-            resizingElement: NonDeletedExcalidrawElement | null;
+            draggingElement: import("./types").NonDeletedExcalidrawElement | null;
+            resizingElement: import("./types").NonDeletedExcalidrawElement | null;
             multiElement: import("./types").NonDeleted<import("./types").ExcalidrawLinearElement> | null;
-            selectionElement: NonDeletedExcalidrawElement | null;
+            selectionElement: import("./types").NonDeletedExcalidrawElement | null;
             isBindingEnabled: boolean;
             startBoundElement: import("./types").NonDeleted<import("./types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
@@ -45,7 +44,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
             };
             editingFrame: string | null;
             elementsToHighlight: import("./types").NonDeleted<ExcalidrawElement>[] | null;
-            editingElement: NonDeletedExcalidrawElement | null;
+            editingElement: import("./types").NonDeletedExcalidrawElement | null;
             editingLinearElement: import("./linearElementEditor").LinearElementEditor | null;
             penMode: boolean;
             penDetected: boolean;
@@ -71,7 +70,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -84,14 +83,14 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
@@ -148,7 +147,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("./linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -164,5 +163,5 @@ export declare const actionSetEmbeddableAsActiveTool: {
 } & {
     keyTest?: undefined;
 };
-export declare const extractSrc: (htmlString: string) => string;
+export declare const maybeParseEmbedSrc: (str: string) => string;
 export declare const embeddableURLValidator: (url: string | null | undefined, validateEmbeddable: ExcalidrawProps["validateEmbeddable"]) => boolean;