@excalidraw/excalidraw 0.17.1-7441-4e2c539 → 0.17.1-a38e82f

package/dist/excalidraw/element/linearElementEditor.js

@@ -2,7 +2,6 @@ import { distance2d, rotate, isPathALoop, getGridPoint, rotatePoint, centerPoint
 import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
 import { getCurvePathOps, getElementPointsCoords, getMinMaxXYFromCurvePathOps, } from "./bounds";
 import { mutateElement } from "./mutateElement";
-import Scene from "../scene/Scene";
 import { bindOrUnbindLinearElement, getHoveredElementForBinding, isBindingEnabled, } from "./binding";
 import { tupleToCoors } from "../utils";
 import { isBindingElement } from "./typeChecks";
@@ -24,9 +23,8 @@ export class LinearElementEditor {
     endBindingElement;
     hoverPointIndex;
     segmentMidPointHoveredCoords;
-    constructor(element, scene) {
+    constructor(element) {
         this.elementId = element.id;
-        Scene.mapElementToScene(this.elementId, scene);
         LinearElementEditor.normalizePoints(element);
         this.selectedPointsIndices = null;
         this.lastUncommittedPoint = null;
@@ -55,26 +53,26 @@ export class LinearElementEditor {
      * @param id the `elementId` from the instance of this class (so that we can
      *  statically guarantee this method returns an ExcalidrawLinearElement)
      */
-    static getElement(id) {
-        const element = Scene.getScene(id)?.getNonDeletedElement(id);
+    static getElement(id, elementsMap) {
+        const element = elementsMap.get(id);
         if (element) {
             return element;
         }
         return null;
     }
-    static handleBoxSelection(event, appState, setState) {
+    static handleBoxSelection(event, appState, setState, elementsMap) {
         if (!appState.editingLinearElement ||
             appState.draggingElement?.type !== "selection") {
             return false;
         }
         const { editingLinearElement } = appState;
         const { selectedPointsIndices, elementId } = editingLinearElement;
-        const element = LinearElementEditor.getElement(elementId);
+        const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
             return false;
         }
-        const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords(appState.draggingElement);
-        const pointsSceneCoords = LinearElementEditor.getPointsGlobalCoordinates(element);
+        const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords(appState.draggingElement, elementsMap);
+        const pointsSceneCoords = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);
         const nextSelectedPoints = pointsSceneCoords.reduce((acc, point, index) => {
             if ((point[0] >= selectionX1 &&
                 point[0] <= selectionX2 &&
@@ -95,12 +93,12 @@ export class LinearElementEditor {
         });
     }
     /** @returns whether point was dragged */
-    static handlePointDragging(event, appState, scenePointerX, scenePointerY, maybeSuggestBinding, linearElementEditor) {
+    static handlePointDragging(event, appState, scenePointerX, scenePointerY, maybeSuggestBinding, linearElementEditor, elementsMap) {
         if (!linearElementEditor) {
             return false;
         }
         const { selectedPointsIndices, elementId } = linearElementEditor;
-        const element = LinearElementEditor.getElement(elementId);
+        const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
             return false;
         }
@@ -112,7 +110,7 @@ export class LinearElementEditor {
                 element.points.length > 1) {
                 const selectedIndex = selectedPointsIndices[0];
                 const referencePoint = element.points[selectedIndex === 0 ? 1 : selectedIndex - 1];
-                const [width, height] = LinearElementEditor._getShiftLockedDelta(element, referencePoint, [scenePointerX, scenePointerY], event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize);
+                const [width, height] = LinearElementEditor._getShiftLockedDelta(element, elementsMap, referencePoint, [scenePointerX, scenePointerY], event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize);
                 LinearElementEditor.movePoints(element, [
                     {
                         index: selectedIndex,
@@ -123,13 +121,13 @@ export class LinearElementEditor {
                 ]);
             }
             else {
-                const newDraggingPointPosition = LinearElementEditor.createPointAt(element, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize);
+                const newDraggingPointPosition = LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize);
                 const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
                 const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
                 LinearElementEditor.movePoints(element, selectedPointsIndices.map((pointIndex) => {
                     const newPointPosition = pointIndex ===
                         linearElementEditor.pointerDownState.lastClickedPoint
-                        ? LinearElementEditor.createPointAt(element, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize)
+                        ? LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize)
                         : [
                             element.points[pointIndex][0] + deltaX,
                             element.points[pointIndex][1] + deltaY,
@@ -142,20 +140,20 @@ export class LinearElementEditor {
                     };
                 }));
             }
-            const boundTextElement = getBoundTextElement(element);
+            const boundTextElement = getBoundTextElement(element, elementsMap);
             if (boundTextElement) {
-                handleBindTextResize(element, false);
+                handleBindTextResize(element, elementsMap, false);
             }
             // suggest bindings for first and last point if selected
             if (isBindingElement(element, false)) {
                 const coords = [];
                 const firstSelectedIndex = selectedPointsIndices[0];
                 if (firstSelectedIndex === 0) {
-                    coords.push(tupleToCoors(LinearElementEditor.getPointGlobalCoordinates(element, element.points[0])));
+                    coords.push(tupleToCoors(LinearElementEditor.getPointGlobalCoordinates(element, element.points[0], elementsMap)));
                 }
                 const lastSelectedIndex = selectedPointsIndices[selectedPointsIndices.length - 1];
                 if (lastSelectedIndex === element.points.length - 1) {
-                    coords.push(tupleToCoors(LinearElementEditor.getPointGlobalCoordinates(element, element.points[lastSelectedIndex])));
+                    coords.push(tupleToCoors(LinearElementEditor.getPointGlobalCoordinates(element, element.points[lastSelectedIndex], elementsMap)));
                 }
                 if (coords.length) {
                     maybeSuggestBinding(element, coords);
@@ -165,9 +163,9 @@ export class LinearElementEditor {
         }
         return false;
     }
-    static handlePointerUp(event, editingLinearElement, appState) {
+    static handlePointerUp(event, editingLinearElement, appState, elements, elementsMap) {
         const { elementId, selectedPointsIndices, isDragging, pointerDownState } = editingLinearElement;
-        const element = LinearElementEditor.getElement(elementId);
+        const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
             return editingLinearElement;
         }
@@ -187,7 +185,7 @@ export class LinearElementEditor {
                         ]);
                     }
                     const bindingElement = isBindingEnabled(appState)
-                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint)), Scene.getScene(element))
+                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), elements, elementsMap)
                         : null;
                     bindings[selectedPoint === 0 ? "startBindingElement" : "endBindingElement"] = bindingElement;
                 }
@@ -213,8 +211,8 @@ export class LinearElementEditor {
             pointerOffset: { x: 0, y: 0 },
         };
     }
-    static getEditorMidPoints = (element, appState) => {
-        const boundText = getBoundTextElement(element);
+    static getEditorMidPoints = (element, elementsMap, appState) => {
+        const boundText = getBoundTextElement(element, elementsMap);
         // Since its not needed outside editor unless 2 pointer lines or bound text
         if (!appState.editingLinearElement &&
             element.points.length > 2 &&
@@ -225,11 +223,11 @@ export class LinearElementEditor {
             editorMidPointsCache.zoom === appState.zoom.value) {
             return editorMidPointsCache.points;
         }
-        LinearElementEditor.updateEditorMidPointsCache(element, appState);
+        LinearElementEditor.updateEditorMidPointsCache(element, elementsMap, appState);
         return editorMidPointsCache.points;
     };
-    static updateEditorMidPointsCache = (element, appState) => {
-        const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+    static updateEditorMidPointsCache = (element, elementsMap, appState) => {
+        const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);
         let index = 0;
         const midpoints = [];
         while (index < points.length - 1) {
@@ -238,7 +236,7 @@ export class LinearElementEditor {
                 index++;
                 continue;
             }
-            const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(element, points[index], points[index + 1], index + 1);
+            const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(element, points[index], points[index + 1], index + 1, elementsMap);
             midpoints.push(segmentMidPoint);
             index++;
         }
@@ -246,17 +244,17 @@ export class LinearElementEditor {
         editorMidPointsCache.version = element.version;
         editorMidPointsCache.zoom = appState.zoom.value;
     };
-    static getSegmentMidpointHitCoords = (linearElementEditor, scenePointer, appState) => {
+    static getSegmentMidpointHitCoords = (linearElementEditor, scenePointer, appState, elementsMap) => {
         const { elementId } = linearElementEditor;
-        const element = LinearElementEditor.getElement(elementId);
+        const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
             return null;
         }
-        const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, appState.zoom, scenePointer.x, scenePointer.y);
+        const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, appState.zoom, scenePointer.x, scenePointer.y);
         if (clickedPointIndex >= 0) {
             return null;
         }
-        const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+        const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);
         if (points.length >= 3 && !appState.editingLinearElement) {
             return null;
         }
@@ -269,7 +267,7 @@ export class LinearElementEditor {
             }
         }
         let index = 0;
-        const midPoints = LinearElementEditor.getEditorMidPoints(element, appState);
+        const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);
         while (index < midPoints.length) {
             if (midPoints[index] !== null) {
                 const distance = distance2d(midPoints[index][0], midPoints[index][1], scenePointer.x, scenePointer.y);
@@ -288,24 +286,24 @@ export class LinearElementEditor {
         }
         return distance * zoom.value < LinearElementEditor.POINT_HANDLE_SIZE * 4;
     }
-    static getSegmentMidPoint(element, startPoint, endPoint, endPointIndex) {
+    static getSegmentMidPoint(element, startPoint, endPoint, endPointIndex, elementsMap) {
         let segmentMidPoint = centerPoint(startPoint, endPoint);
         if (element.points.length > 2 && element.roundness) {
             const controlPoints = getControlPointsForBezierCurve(element, element.points[endPointIndex]);
             if (controlPoints) {
                 const t = mapIntervalToBezierT(element, element.points[endPointIndex], 0.5);
                 const [tx, ty] = getBezierXY(controlPoints[0], controlPoints[1], controlPoints[2], controlPoints[3], t);
-                segmentMidPoint = LinearElementEditor.getPointGlobalCoordinates(element, [tx, ty]);
+                segmentMidPoint = LinearElementEditor.getPointGlobalCoordinates(element, [tx, ty], elementsMap);
             }
         }
         return segmentMidPoint;
     }
-    static getSegmentMidPointIndex(linearElementEditor, appState, midPoint) {
-        const element = LinearElementEditor.getElement(linearElementEditor.elementId);
+    static getSegmentMidPointIndex(linearElementEditor, appState, midPoint, elementsMap) {
+        const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);
         if (!element) {
             return -1;
         }
-        const midPoints = LinearElementEditor.getEditorMidPoints(element, appState);
+        const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);
         let index = 0;
         while (index < midPoints.length) {
             if (LinearElementEditor.arePointsEqual(midPoint, midPoints[index])) {
@@ -315,7 +313,7 @@ export class LinearElementEditor {
         }
         return -1;
     }
-    static handlePointerDown(event, appState, history, scenePointer, linearElementEditor) {
+    static handlePointerDown(event, appState, history, scenePointer, linearElementEditor, elements, elementsMap) {
         const ret = {
             didAddPoint: false,
             hitElement: null,
@@ -325,21 +323,21 @@ export class LinearElementEditor {
             return ret;
         }
         const { elementId } = linearElementEditor;
-        const element = LinearElementEditor.getElement(elementId);
+        const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
             return ret;
         }
-        const segmentMidpoint = LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, scenePointer, appState);
+        const segmentMidpoint = LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, scenePointer, appState, elementsMap);
         let segmentMidpointIndex = null;
         if (segmentMidpoint) {
-            segmentMidpointIndex = LinearElementEditor.getSegmentMidPointIndex(linearElementEditor, appState, segmentMidpoint);
+            segmentMidpointIndex = LinearElementEditor.getSegmentMidPointIndex(linearElementEditor, appState, segmentMidpoint, elementsMap);
         }
         if (event.altKey && appState.editingLinearElement) {
             if (linearElementEditor.lastUncommittedPoint == null) {
                 mutateElement(element, {
                     points: [
                         ...element.points,
-                        LinearElementEditor.createPointAt(element, scenePointer.x, scenePointer.y, event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize),
+                        LinearElementEditor.createPointAt(element, elementsMap, scenePointer.x, scenePointer.y, event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize),
                     ],
                 });
                 ret.didAddPoint = true;
@@ -359,12 +357,12 @@ export class LinearElementEditor {
                 },
                 selectedPointsIndices: [element.points.length - 1],
                 lastUncommittedPoint: null,
-                endBindingElement: getHoveredElementForBinding(scenePointer, Scene.getScene(element)),
+                endBindingElement: getHoveredElementForBinding(scenePointer, elements, elementsMap),
             };
             ret.didAddPoint = true;
             return ret;
         }
-        const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, appState.zoom, scenePointer.x, scenePointer.y);
+        const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, appState.zoom, scenePointer.x, scenePointer.y);
         // if we clicked on a point, set the element as hitElement otherwise
         // it would get deselected if the point is outside the hitbox area
         if (clickedPointIndex >= 0 || segmentMidpoint) {
@@ -378,10 +376,10 @@ export class LinearElementEditor {
             // the point).
             const { startBindingElement, endBindingElement } = linearElementEditor;
             if (isBindingEnabled(appState) && isBindingElement(element)) {
-                bindOrUnbindLinearElement(element, startBindingElement, endBindingElement);
+                bindOrUnbindLinearElement(element, startBindingElement, endBindingElement, elementsMap);
             }
         }
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2;
         const cy = (y1 + y2) / 2;
         const targetPoint = clickedPointIndex > -1 &&
@@ -426,12 +424,12 @@ export class LinearElementEditor {
         }
         return arePointsEqual(point1, point2);
     }
-    static handlePointerMove(event, scenePointerX, scenePointerY, appState) {
+    static handlePointerMove(event, scenePointerX, scenePointerY, appState, elementsMap) {
         if (!appState.editingLinearElement) {
             return null;
         }
         const { elementId, lastUncommittedPoint } = appState.editingLinearElement;
-        const element = LinearElementEditor.getElement(elementId);
+        const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
             return appState.editingLinearElement;
         }
@@ -449,14 +447,14 @@ export class LinearElementEditor {
         let newPoint;
         if (shouldRotateWithDiscreteAngle(event) && points.length >= 2) {
             const lastCommittedPoint = points[points.length - 2];
-            const [width, height] = LinearElementEditor._getShiftLockedDelta(element, lastCommittedPoint, [scenePointerX, scenePointerY], event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize);
+            const [width, height] = LinearElementEditor._getShiftLockedDelta(element, elementsMap, lastCommittedPoint, [scenePointerX, scenePointerY], event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize);
             newPoint = [
                 width + lastCommittedPoint[0],
                 height + lastCommittedPoint[1],
             ];
         }
         else {
-            newPoint = LinearElementEditor.createPointAt(element, scenePointerX - appState.editingLinearElement.pointerOffset.x, scenePointerY - appState.editingLinearElement.pointerOffset.y, event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize);
+            newPoint = LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - appState.editingLinearElement.pointerOffset.x, scenePointerY - appState.editingLinearElement.pointerOffset.y, event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize);
         }
         if (lastPoint === lastUncommittedPoint) {
             LinearElementEditor.movePoints(element, [
@@ -475,8 +473,8 @@ export class LinearElementEditor {
         };
     }
     /** scene coords */
-    static getPointGlobalCoordinates(element, point) {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    static getPointGlobalCoordinates(element, point, elementsMap) {
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2;
         const cy = (y1 + y2) / 2;
         let { x, y } = element;
@@ -484,8 +482,8 @@ export class LinearElementEditor {
         return [x, y];
     }
     /** scene coords */
-    static getPointsGlobalCoordinates(element) {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    static getPointsGlobalCoordinates(element, elementsMap) {
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2;
         const cy = (y1 + y2) / 2;
         return element.points.map((point) => {
@@ -494,11 +492,12 @@ export class LinearElementEditor {
             return [x, y];
         });
     }
-    static getPointAtIndexGlobalCoordinates(element, indexMaybeFromEnd) {
+    static getPointAtIndexGlobalCoordinates(element, indexMaybeFromEnd, // -1 for last element
+    elementsMap) {
         const index = indexMaybeFromEnd < 0
             ? element.points.length + indexMaybeFromEnd
             : indexMaybeFromEnd;
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2;
         const cy = (y1 + y2) / 2;
         const point = element.points[index];
@@ -507,15 +506,15 @@ export class LinearElementEditor {
             ? rotate(x + point[0], y + point[1], cx, cy, element.angle)
             : rotate(x, y, cx, cy, element.angle);
     }
-    static pointFromAbsoluteCoords(element, absoluteCoords) {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    static pointFromAbsoluteCoords(element, absoluteCoords, elementsMap) {
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2;
         const cy = (y1 + y2) / 2;
         const [x, y] = rotate(absoluteCoords[0], absoluteCoords[1], cx, cy, -element.angle);
         return [x - element.x, y - element.y];
     }
-    static getPointIndexUnderCursor(element, zoom, x, y) {
-        const pointHandles = LinearElementEditor.getPointsGlobalCoordinates(element);
+    static getPointIndexUnderCursor(element, elementsMap, zoom, x, y) {
+        const pointHandles = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);
         let idx = pointHandles.length;
         // loop from right to left because points on the right are rendered over
         // points on the left, thus should take precedence when clicking, if they
@@ -530,9 +529,9 @@ export class LinearElementEditor {
         }
         return -1;
     }
-    static createPointAt(element, scenePointerX, scenePointerY, gridSize) {
+    static createPointAt(element, elementsMap, scenePointerX, scenePointerY, gridSize) {
         const pointerOnGrid = getGridPoint(scenePointerX, scenePointerY, gridSize);
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2;
         const cy = (y1 + y2) / 2;
         const [rotatedX, rotatedY] = rotate(pointerOnGrid[0], pointerOnGrid[1], cx, cy, -element.angle);
@@ -560,12 +559,12 @@ export class LinearElementEditor {
     static normalizePoints(element) {
         mutateElement(element, LinearElementEditor.getNormalizedPoints(element));
     }
-    static duplicateSelectedPoints(appState) {
+    static duplicateSelectedPoints(appState, elementsMap) {
         if (!appState.editingLinearElement) {
             return false;
         }
         const { selectedPointsIndices, elementId } = appState.editingLinearElement;
-        const element = LinearElementEditor.getElement(elementId);
+        const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element || selectedPointsIndices === null) {
             return false;
         }
@@ -673,8 +672,8 @@ export class LinearElementEditor {
         });
         LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, otherUpdates);
     }
-    static shouldAddMidpoint(linearElementEditor, pointerCoords, appState) {
-        const element = LinearElementEditor.getElement(linearElementEditor.elementId);
+    static shouldAddMidpoint(linearElementEditor, pointerCoords, appState, elementsMap) {
+        const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);
         if (!element) {
             return false;
         }
@@ -693,8 +692,8 @@ export class LinearElementEditor {
         }
         return true;
     }
-    static addMidpoint(linearElementEditor, pointerCoords, appState, snapToGrid) {
-        const element = LinearElementEditor.getElement(linearElementEditor.elementId);
+    static addMidpoint(linearElementEditor, pointerCoords, appState, snapToGrid, elementsMap) {
+        const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);
         if (!element) {
             return;
         }
@@ -703,7 +702,7 @@ export class LinearElementEditor {
             pointerDownState: linearElementEditor.pointerDownState,
             selectedPointsIndices: linearElementEditor.selectedPointsIndices,
         };
-        const midpoint = LinearElementEditor.createPointAt(element, pointerCoords.x, pointerCoords.y, snapToGrid ? appState.gridSize : null);
+        const midpoint = LinearElementEditor.createPointAt(element, elementsMap, pointerCoords.x, pointerCoords.y, snapToGrid ? appState.gridSize : null);
         const points = [
             ...element.points.slice(0, segmentMidpoint.index),
             midpoint,
@@ -740,14 +739,14 @@ export class LinearElementEditor {
             y: element.y + rotated[1],
         });
     }
-    static _getShiftLockedDelta(element, referencePoint, scenePointer, gridSize) {
-        const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(element, referencePoint);
+    static _getShiftLockedDelta(element, elementsMap, referencePoint, scenePointer, gridSize) {
+        const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(element, referencePoint, elementsMap);
         const [gridX, gridY] = getGridPoint(scenePointer[0], scenePointer[1], gridSize);
         const { width, height } = getLockedLinearCursorAlignSize(referencePointCoords[0], referencePointCoords[1], gridX, gridY);
         return rotatePoint([width, height], [0, 0], -element.angle);
     }
-    static getBoundTextElementPosition = (element, boundTextElement) => {
-        const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+    static getBoundTextElementPosition = (element, boundTextElement, elementsMap) => {
+        const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);
         if (points.length < 2) {
             mutateElement(boundTextElement, { isDeleted: true });
         }
@@ -755,7 +754,7 @@ export class LinearElementEditor {
         let y = 0;
         if (element.points.length % 2 === 1) {
             const index = Math.floor(element.points.length / 2);
-            const midPoint = LinearElementEditor.getPointGlobalCoordinates(element, element.points[index]);
+            const midPoint = LinearElementEditor.getPointGlobalCoordinates(element, element.points[index], elementsMap);
             x = midPoint[0] - boundTextElement.width / 2;
             y = midPoint[1] - boundTextElement.height / 2;
         }
@@ -767,18 +766,18 @@ export class LinearElementEditor {
             }
             if (!midSegmentMidpoint ||
                 editorMidPointsCache.version !== element.version) {
-                midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(element, points[index], points[index + 1], index + 1);
+                midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(element, points[index], points[index + 1], index + 1, elementsMap);
             }
             x = midSegmentMidpoint[0] - boundTextElement.width / 2;
             y = midSegmentMidpoint[1] - boundTextElement.height / 2;
         }
         return { x, y };
     };
-    static getMinMaxXYWithBoundText = (element, elementBounds, boundTextElement) => {
+    static getMinMaxXYWithBoundText = (element, elementsMap, elementBounds, boundTextElement) => {
         let [x1, y1, x2, y2] = elementBounds;
         const cx = (x1 + x2) / 2;
         const cy = (y1 + y2) / 2;
-        const { x: boundTextX1, y: boundTextY1 } = LinearElementEditor.getBoundTextElementPosition(element, boundTextElement);
+        const { x: boundTextX1, y: boundTextY1 } = LinearElementEditor.getBoundTextElementPosition(element, boundTextElement, elementsMap);
         const boundTextX2 = boundTextX1 + boundTextElement.width;
         const boundTextY2 = boundTextY1 + boundTextElement.height;
         const topLeftRotatedPoint = rotatePoint([x1, y1], [cx, cy], element.angle);
@@ -815,7 +814,7 @@ export class LinearElementEditor {
         }
         return [x1, y1, x2, y2, cx, cy];
     };
-    static getElementAbsoluteCoords = (element, includeBoundText = false) => {
+    static getElementAbsoluteCoords = (element, elementsMap, includeBoundText = false) => {
         let coords;
         let x1;
         let y1;
@@ -851,9 +850,9 @@ export class LinearElementEditor {
         if (!includeBoundText) {
             return coords;
         }
-        const boundTextElement = getBoundTextElement(element);
+        const boundTextElement = getBoundTextElement(element, elementsMap);
         if (boundTextElement) {
-            coords = LinearElementEditor.getMinMaxXYWithBoundText(element, [x1, y1, x2, y2], boundTextElement);
+            coords = LinearElementEditor.getMinMaxXYWithBoundText(element, elementsMap, [x1, y1, x2, y2], boundTextElement);
         }
         return coords;
     };

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

@@ -1,13 +1,12 @@
-import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement } from "./types";
+import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement, ElementsMap } from "./types";
 import { AppState } from "../types";
 import { MarkOptional, Mutable } from "../utility-types";
-export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity">;
+export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity" | "customData">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;
 export declare const newEmbeddableElement: (opts: {
     type: "embeddable";
-    validated: ExcalidrawEmbeddableElement["validated"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawEmbeddableElement>;
 export declare const newIframeElement: (opts: {
     type: "iframe";
@@ -28,15 +27,14 @@ export declare const newTextElement: (opts: {
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
-export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
+export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, container: ExcalidrawTextContainer | null, elementsMap: ElementsMap, text?: string) => {
     x: number;
     y: number;
     width: number;
     height: number;
-    baseline: number;
     text: string;
 } | undefined;
-export declare const updateTextElement: (textElement: ExcalidrawTextElement, { text, isDeleted, originalText, }: {
+export declare const updateTextElement: (textElement: ExcalidrawTextElement, container: ExcalidrawTextContainer | null, elementsMap: ElementsMap, { text, isDeleted, originalText, }: {
     text: string;
     isDeleted?: boolean | undefined;
     originalText: string;

package/dist/excalidraw/element/newElement.js

@@ -5,7 +5,7 @@ import { getNewGroupIdsForDuplication } from "../groups";
 import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
-import { getContainerElement, measureText, normalizeText, wrapText, getBoundTextMaxWidth, getDefaultLineHeight, } from "./textElement";
+import { measureText, normalizeText, wrapText, getBoundTextMaxWidth, getDefaultLineHeight, } from "./textElement";
 import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, VERTICAL_ALIGN, } from "../constants";
 const _newElementBase = (type, { x, y, strokeColor = DEFAULT_ELEMENT_PROPS.strokeColor, backgroundColor = DEFAULT_ELEMENT_PROPS.backgroundColor, fillStyle = DEFAULT_ELEMENT_PROPS.fillStyle, strokeWidth = DEFAULT_ELEMENT_PROPS.strokeWidth, strokeStyle = DEFAULT_ELEMENT_PROPS.strokeStyle, roughness = DEFAULT_ELEMENT_PROPS.roughness, opacity = DEFAULT_ELEMENT_PROPS.opacity, width = 0, height = 0, angle = 0, groupIds = [], frameId = null, roundness = null, boundElements = null, link = null, locked = DEFAULT_ELEMENT_PROPS.locked, ...rest }) => {
     // assign type to guard against excess properties
@@ -35,15 +35,13 @@ const _newElementBase = (type, { x, y, strokeColor = DEFAULT_ELEMENT_PROPS.strok
         updated: getUpdatedTimestamp(),
         link,
         locked,
+        customData: rest.customData,
     };
     return element;
 };
 export const newElement = (opts) => _newElementBase(opts.type, opts);
 export const newEmbeddableElement = (opts) => {
-    return {
-        ..._newElementBase("embeddable", opts),
-        validated: opts.validated,
-    };
+    return _newElementBase("embeddable", opts);
 };
 export const newIframeElement = (opts) => {
     return {
@@ -97,15 +95,14 @@ export const newTextElement = (opts) => {
         y: opts.y - offsets.y,
         width: metrics.width,
         height: metrics.height,
-        baseline: metrics.baseline,
         containerId: opts.containerId || null,
         originalText: text,
         lineHeight,
     }, {});
     return textElement;
 };
-const getAdjustedDimensions = (element, nextText) => {
-    const { width: nextWidth, height: nextHeight, baseline: nextBaseline, } = measureText(nextText, getFontString(element), element.lineHeight);
+const getAdjustedDimensions = (element, elementsMap, nextText) => {
+    const { width: nextWidth, height: nextHeight } = measureText(nextText, getFontString(element), element.lineHeight);
     const { textAlign, verticalAlign } = element;
     let x;
     let y;
@@ -121,7 +118,7 @@ const getAdjustedDimensions = (element, nextText) => {
         y = element.y - offsets.y;
     }
     else {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const [nextX1, nextY1, nextX2, nextY2] = getResizedElementAbsoluteCoords(element, nextWidth, nextHeight, false);
         const deltaX1 = (x1 - nextX1) / 2;
         const deltaY1 = (y1 - nextY1) / 2;
@@ -136,27 +133,25 @@ const getAdjustedDimensions = (element, nextText) => {
     return {
         width: nextWidth,
         height: nextHeight,
-        baseline: nextBaseline,
         x: Number.isFinite(x) ? x : element.x,
         y: Number.isFinite(y) ? y : element.y,
     };
 };
-export const refreshTextDimensions = (textElement, text = textElement.text) => {
+export const refreshTextDimensions = (textElement, container, elementsMap, text = textElement.text) => {
     if (textElement.isDeleted) {
         return;
     }
-    const container = getContainerElement(textElement);
     if (container) {
-        text = wrapText(text, getFontString(textElement), getBoundTextMaxWidth(container));
+        text = wrapText(text, getFontString(textElement), getBoundTextMaxWidth(container, textElement));
     }
-    const dimensions = getAdjustedDimensions(textElement, text);
+    const dimensions = getAdjustedDimensions(textElement, elementsMap, text);
     return { text, ...dimensions };
 };
-export const updateTextElement = (textElement, { text, isDeleted, originalText, }) => {
+export const updateTextElement = (textElement, container, elementsMap, { text, isDeleted, originalText, }) => {
     return newElementWith(textElement, {
         originalText,
         isDeleted: isDeleted ?? textElement.isDeleted,
-        ...refreshTextDimensions(textElement, originalText),
+        ...refreshTextDimensions(textElement, container, elementsMap, originalText),
     });
 };
 export const newFreeDrawElement = (opts) => {

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

@@ -1,9 +1,9 @@
-import { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
+import { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, ElementsMap } from "./types";
 import { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
-import { AppState, PointerDownState } from "../types";
+import { PointerDownState } from "../types";
 export declare const normalizeAngle: (angle: number) => number;
-export declare const transformElements: (pointerDownState: PointerDownState, transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number, appState: AppState) => boolean;
-export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
-export declare const resizeMultipleElements: (pointerDownState: PointerDownState, selectedElements: readonly NonDeletedExcalidrawElement[], transformHandleType: "nw" | "ne" | "sw" | "se", shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
-export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
+export declare const transformElements: (originalElements: PointerDownState["originalElements"], transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
+export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
+export declare const resizeMultipleElements: (originalElements: PointerDownState["originalElements"], selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, transformHandleType: "nw" | "ne" | "sw" | "se", shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
+export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap, x: number, y: number) => [number, number];
 export declare const getResizeArrowDirection: (transformHandleType: MaybeTransformHandleType, element: NonDeleted<ExcalidrawLinearElement>) => "origin" | "end";