@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

package/dist/excalidraw/element/linearElementEditor.js

@@ -4,11 +4,12 @@ import { getCurvePathOps, getElementPointsCoords, getMinMaxXYFromCurvePathOps, }
 import { mutateElement } from "./mutateElement";
 import { bindOrUnbindLinearElement, getHoveredElementForBinding, isBindingEnabled, } from "./binding";
 import { tupleToCoors } from "../utils";
-import { isBindingElement } from "./typeChecks";
+import { isBindingElement, isElbowArrow, isFixedPointBinding, } from "./typeChecks";
 import { KEYS, shouldRotateWithDiscreteAngle } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import { DRAGGING_THRESHOLD } from "../constants";
 import { ShapeCache } from "../scene/ShapeCache";
+import { mutateElbowArrow } from "./routing";
 const editorMidPointsCache = { version: null, points: [], zoom: null };
 export class LinearElementEditor {
     elementId;
@@ -25,7 +26,9 @@ export class LinearElementEditor {
     segmentMidPointHoveredCoords;
     constructor(element) {
         this.elementId = element.id;
-        LinearElementEditor.normalizePoints(element);
+        if (!arePointsEqual(element.points[0], [0, 0])) {
+            console.error("Linear element is not normalized", Error().stack);
+        }
         this.selectedPointsIndices = null;
         this.lastUncommittedPoint = null;
         this.isDragging = false;
@@ -35,6 +38,7 @@ export class LinearElementEditor {
         this.pointerDownState = {
             prevSelectedPointsIndices: null,
             lastClickedPoint: -1,
+            lastClickedIsEndPoint: false,
             origin: null,
             segmentMidpoint: {
                 value: null,
@@ -73,7 +77,8 @@ export class LinearElementEditor {
         }
         const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords(appState.draggingElement, elementsMap);
         const pointsSceneCoords = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);
-        const nextSelectedPoints = pointsSceneCoords.reduce((acc, point, index) => {
+        const nextSelectedPoints = pointsSceneCoords
+            .reduce((acc, point, index) => {
             if ((point[0] >= selectionX1 &&
                 point[0] <= selectionX2 &&
                 point[1] >= selectionY1 &&
@@ -82,7 +87,15 @@ export class LinearElementEditor {
                 acc.push(index);
             }
             return acc;
-        }, []);
+        }, [])
+            .filter((index) => {
+            if (isElbowArrow(element) &&
+                index !== 0 &&
+                index !== element.points.length - 1) {
+                return false;
+            }
+            return true;
+        });
         setState({
             editingLinearElement: {
                 ...editingLinearElement,
@@ -93,17 +106,35 @@ export class LinearElementEditor {
         });
     }
     /** @returns whether point was dragged */
-    static handlePointDragging(event, appState, scenePointerX, scenePointerY, maybeSuggestBinding, linearElementEditor, elementsMap) {
+    static handlePointDragging(event, appState, scenePointerX, scenePointerY, maybeSuggestBinding, linearElementEditor, scene) {
         if (!linearElementEditor) {
             return false;
         }
-        const { selectedPointsIndices, elementId } = linearElementEditor;
+        const { elementId } = linearElementEditor;
+        const elementsMap = scene.getNonDeletedElementsMap();
         const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
             return false;
         }
+        if (isElbowArrow(element) &&
+            !linearElementEditor.pointerDownState.lastClickedIsEndPoint &&
+            linearElementEditor.pointerDownState.lastClickedPoint !== 0) {
+            return false;
+        }
+        const selectedPointsIndices = isElbowArrow(element)
+            ? linearElementEditor.selectedPointsIndices
+                ?.reduce((startEnd, index) => (index === 0
+                ? [0, startEnd[1]]
+                : [startEnd[0], element.points.length - 1]), [false, false])
+                .filter((idx) => typeof idx === "number")
+            : linearElementEditor.selectedPointsIndices;
+        const lastClickedPoint = isElbowArrow(element)
+            ? linearElementEditor.pointerDownState.lastClickedPoint > 0
+                ? element.points.length - 1
+                : 0
+            : linearElementEditor.pointerDownState.lastClickedPoint;
         // point that's being dragged (out of all selected points)
-        const draggingPoint = element.points[linearElementEditor.pointerDownState.lastClickedPoint];
+        const draggingPoint = element.points[lastClickedPoint];
         if (selectedPointsIndices && draggingPoint) {
             if (shouldRotateWithDiscreteAngle(event) &&
                 selectedPointsIndices.length === 1 &&
@@ -115,18 +146,16 @@ export class LinearElementEditor {
                     {
                         index: selectedIndex,
                         point: [width + referencePoint[0], height + referencePoint[1]],
-                        isDragging: selectedIndex ===
-                            linearElementEditor.pointerDownState.lastClickedPoint,
+                        isDragging: selectedIndex === lastClickedPoint,
                     },
-                ]);
+                ], scene);
             }
             else {
                 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
+                    const newPointPosition = pointIndex === lastClickedPoint
                         ? 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,
@@ -135,10 +164,9 @@ export class LinearElementEditor {
                     return {
                         index: pointIndex,
                         point: newPointPosition,
-                        isDragging: pointIndex ===
-                            linearElementEditor.pointerDownState.lastClickedPoint,
+                        isDragging: pointIndex === lastClickedPoint,
                     };
-                }));
+                }), scene);
             }
             const boundTextElement = getBoundTextElement(element, elementsMap);
             if (boundTextElement) {
@@ -163,8 +191,9 @@ export class LinearElementEditor {
         }
         return false;
     }
-    static handlePointerUp(event, editingLinearElement, appState, app) {
-        const elementsMap = app.scene.getNonDeletedElementsMap();
+    static handlePointerUp(event, editingLinearElement, appState, scene) {
+        const elementsMap = scene.getNonDeletedElementsMap();
+        const elements = scene.getNonDeletedElements();
         const { elementId, selectedPointsIndices, isDragging, pointerDownState } = editingLinearElement;
         const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
@@ -183,10 +212,10 @@ export class LinearElementEditor {
                                     ? element.points[element.points.length - 1]
                                     : element.points[0],
                             },
-                        ]);
+                        ], scene);
                     }
                     const bindingElement = isBindingEnabled(appState)
-                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), app)
+                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), elements, elementsMap)
                         : null;
                     bindings[selectedPoint === 0 ? "startBindingElement" : "endBindingElement"] = bindingElement;
                 }
@@ -314,8 +343,9 @@ export class LinearElementEditor {
         }
         return -1;
     }
-    static handlePointerDown(event, appState, store, scenePointer, linearElementEditor, app) {
-        const elementsMap = app.scene.getNonDeletedElementsMap();
+    static handlePointerDown(event, appState, store, scenePointer, linearElementEditor, scene) {
+        const elementsMap = scene.getNonDeletedElementsMap();
+        const elements = scene.getNonDeletedElements();
         const ret = {
             didAddPoint: false,
             hitElement: null,
@@ -335,7 +365,8 @@ export class LinearElementEditor {
             segmentMidpointIndex = LinearElementEditor.getSegmentMidPointIndex(linearElementEditor, appState, segmentMidpoint, elementsMap);
         }
         if (event.altKey && appState.editingLinearElement) {
-            if (linearElementEditor.lastUncommittedPoint == null) {
+            if (linearElementEditor.lastUncommittedPoint == null ||
+                !isElbowArrow(element)) {
                 mutateElement(element, {
                     points: [
                         ...element.points,
@@ -350,6 +381,7 @@ export class LinearElementEditor {
                 pointerDownState: {
                     prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
                     lastClickedPoint: -1,
+                    lastClickedIsEndPoint: false,
                     origin: { x: scenePointer.x, y: scenePointer.y },
                     segmentMidpoint: {
                         value: segmentMidpoint,
@@ -359,7 +391,7 @@ export class LinearElementEditor {
                 },
                 selectedPointsIndices: [element.points.length - 1],
                 lastUncommittedPoint: null,
-                endBindingElement: getHoveredElementForBinding(scenePointer, app),
+                endBindingElement: getHoveredElementForBinding(scenePointer, elements, elementsMap),
             };
             ret.didAddPoint = true;
             return ret;
@@ -378,7 +410,7 @@ export class LinearElementEditor {
             // the point).
             const { startBindingElement, endBindingElement } = linearElementEditor;
             if (isBindingEnabled(appState) && isBindingElement(element)) {
-                bindOrUnbindLinearElement(element, startBindingElement, endBindingElement, elementsMap);
+                bindOrUnbindLinearElement(element, startBindingElement, endBindingElement, elementsMap, scene);
             }
         }
         const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
@@ -400,6 +432,7 @@ export class LinearElementEditor {
             pointerDownState: {
                 prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
                 lastClickedPoint: clickedPointIndex,
+                lastClickedIsEndPoint: clickedPointIndex === element.points.length - 1,
                 origin: { x: scenePointer.x, y: scenePointer.y },
                 segmentMidpoint: {
                     value: segmentMidpoint,
@@ -426,11 +459,12 @@ export class LinearElementEditor {
         }
         return arePointsEqual(point1, point2);
     }
-    static handlePointerMove(event, scenePointerX, scenePointerY, appState, elementsMap) {
+    static handlePointerMove(event, scenePointerX, scenePointerY, appState, scene) {
         if (!appState.editingLinearElement) {
             return null;
         }
         const { elementId, lastUncommittedPoint } = appState.editingLinearElement;
+        const elementsMap = scene.getNonDeletedElementsMap();
         const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
             return appState.editingLinearElement;
@@ -439,7 +473,7 @@ export class LinearElementEditor {
         const lastPoint = points[points.length - 1];
         if (!event.altKey) {
             if (lastPoint === lastUncommittedPoint) {
-                LinearElementEditor.deletePoints(element, [points.length - 1]);
+                LinearElementEditor.deletePoints(element, [points.length - 1], scene);
             }
             return {
                 ...appState.editingLinearElement,
@@ -456,7 +490,9 @@ export class LinearElementEditor {
             ];
         }
         else {
-            newPoint = LinearElementEditor.createPointAt(element, elementsMap, 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] || isElbowArrow(element)
+                ? null
+                : appState.gridSize);
         }
         if (lastPoint === lastUncommittedPoint) {
             LinearElementEditor.movePoints(element, [
@@ -464,10 +500,10 @@ export class LinearElementEditor {
                     index: element.points.length - 1,
                     point: newPoint,
                 },
-            ]);
+            ], scene);
         }
         else {
-            LinearElementEditor.addPoints(element, appState, [{ point: newPoint }]);
+            LinearElementEditor.addPoints(element, appState, [{ point: newPoint }], scene);
         }
         return {
             ...appState.editingLinearElement,
@@ -509,6 +545,10 @@ export class LinearElementEditor {
             : rotate(x, y, cx, cy, element.angle);
     }
     static pointFromAbsoluteCoords(element, absoluteCoords, elementsMap) {
+        if (isElbowArrow(element)) {
+            // No rotation for elbow arrows
+            return [absoluteCoords[0] - element.x, absoluteCoords[1] - element.y];
+        }
         const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const cx = (x1 + x2) / 2;
         const cy = (y1 + y2) / 2;
@@ -561,11 +601,12 @@ export class LinearElementEditor {
     static normalizePoints(element) {
         mutateElement(element, LinearElementEditor.getNormalizedPoints(element));
     }
-    static duplicateSelectedPoints(appState, elementsMap) {
+    static duplicateSelectedPoints(appState, scene) {
         if (!appState.editingLinearElement) {
             return false;
         }
         const { selectedPointsIndices, elementId } = appState.editingLinearElement;
+        const elementsMap = scene.getNonDeletedElementsMap();
         const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element || selectedPointsIndices === null) {
             return false;
@@ -601,7 +642,7 @@ export class LinearElementEditor {
                     index: element.points.length - 1,
                     point: [lastPoint[0] + 30, lastPoint[1] + 30],
                 },
-            ]);
+            ], scene);
         }
         return {
             appState: {
@@ -613,7 +654,7 @@ export class LinearElementEditor {
             },
         };
     }
-    static deletePoints(element, pointIndices) {
+    static deletePoints(element, pointIndices, scene) {
         let offsetX = 0;
         let offsetY = 0;
         const isDeletingOriginPoint = pointIndices.includes(0);
@@ -634,15 +675,15 @@ export class LinearElementEditor {
             }
             return acc;
         }, []);
-        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, scene);
     }
-    static addPoints(element, appState, targetPoints) {
+    static addPoints(element, appState, targetPoints, scene) {
         const offsetX = 0;
         const offsetY = 0;
         const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
-        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, scene);
     }
-    static movePoints(element, targetPoints, otherUpdates) {
+    static movePoints(element, targetPoints, scene, otherUpdates, options) {
         const { points } = element;
         // in case we're moving start point, instead of modifying its position
         // which would break the invariant of it being at [0,0], we move
@@ -661,21 +702,31 @@ export class LinearElementEditor {
         const nextPoints = points.map((point, idx) => {
             const selectedPointData = targetPoints.find((p) => p.index === idx);
             if (selectedPointData) {
-                if (selectedOriginPoint) {
+                if (selectedPointData.index === 0) {
                     return point;
                 }
                 const deltaX = selectedPointData.point[0] - points[selectedPointData.index][0];
                 const deltaY = selectedPointData.point[1] - points[selectedPointData.index][1];
-                return [point[0] + deltaX, point[1] + deltaY];
+                return [
+                    point[0] + deltaX - offsetX,
+                    point[1] + deltaY - offsetY,
+                ];
             }
             return offsetX || offsetY
                 ? [point[0] - offsetX, point[1] - offsetY]
                 : point;
         });
-        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, otherUpdates);
+        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, scene, otherUpdates, {
+            isDragging: targetPoints.reduce((dragging, targetPoint) => dragging || targetPoint.isDragging === true, false),
+            changedElements: options?.changedElements,
+        });
     }
     static shouldAddMidpoint(linearElementEditor, pointerCoords, appState, elementsMap) {
         const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);
+        // Elbow arrows don't allow midpoints
+        if (element && isElbowArrow(element)) {
+            return false;
+        }
         if (!element) {
             return false;
         }
@@ -704,7 +755,7 @@ export class LinearElementEditor {
             pointerDownState: linearElementEditor.pointerDownState,
             selectedPointsIndices: linearElementEditor.selectedPointsIndices,
         };
-        const midpoint = LinearElementEditor.createPointAt(element, elementsMap, pointerCoords.x, pointerCoords.y, snapToGrid ? appState.gridSize : null);
+        const midpoint = LinearElementEditor.createPointAt(element, elementsMap, pointerCoords.x, pointerCoords.y, snapToGrid && !isElbowArrow(element) ? appState.gridSize : null);
         const points = [
             ...element.points.slice(0, segmentMidpoint.index),
             midpoint,
@@ -724,25 +775,51 @@ export class LinearElementEditor {
         ret.selectedPointsIndices = [segmentMidpoint.index];
         return ret;
     }
-    static _updatePoints(element, nextPoints, offsetX, offsetY, otherUpdates) {
-        const nextCoords = getElementPointsCoords(element, nextPoints);
-        const prevCoords = getElementPointsCoords(element, element.points);
-        const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;
-        const nextCenterY = (nextCoords[1] + nextCoords[3]) / 2;
-        const prevCenterX = (prevCoords[0] + prevCoords[2]) / 2;
-        const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;
-        const dX = prevCenterX - nextCenterX;
-        const dY = prevCenterY - nextCenterY;
-        const rotated = rotate(offsetX, offsetY, dX, dY, element.angle);
-        mutateElement(element, {
-            ...otherUpdates,
-            points: nextPoints,
-            x: element.x + rotated[0],
-            y: element.y + rotated[1],
-        });
+    static _updatePoints(element, nextPoints, offsetX, offsetY, scene, otherUpdates, options) {
+        if (isElbowArrow(element)) {
+            const bindings = {};
+            if (otherUpdates?.startBinding !== undefined) {
+                bindings.startBinding =
+                    otherUpdates.startBinding !== null &&
+                        isFixedPointBinding(otherUpdates.startBinding)
+                        ? otherUpdates.startBinding
+                        : null;
+            }
+            if (otherUpdates?.endBinding !== undefined) {
+                bindings.endBinding =
+                    otherUpdates.endBinding !== null &&
+                        isFixedPointBinding(otherUpdates.endBinding)
+                        ? otherUpdates.endBinding
+                        : null;
+            }
+            mutateElbowArrow(element, scene, nextPoints, [offsetX, offsetY], bindings, options);
+        }
+        else {
+            const nextCoords = getElementPointsCoords(element, nextPoints);
+            const prevCoords = getElementPointsCoords(element, element.points);
+            const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;
+            const nextCenterY = (nextCoords[1] + nextCoords[3]) / 2;
+            const prevCenterX = (prevCoords[0] + prevCoords[2]) / 2;
+            const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;
+            const dX = prevCenterX - nextCenterX;
+            const dY = prevCenterY - nextCenterY;
+            const rotated = rotate(offsetX, offsetY, dX, dY, element.angle);
+            mutateElement(element, {
+                ...otherUpdates,
+                points: nextPoints,
+                x: element.x + rotated[0],
+                y: element.y + rotated[1],
+            });
+        }
     }
     static _getShiftLockedDelta(element, elementsMap, referencePoint, scenePointer, gridSize) {
         const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(element, referencePoint, elementsMap);
+        if (isElbowArrow(element)) {
+            return [
+                scenePointer[0] - referencePointCoords[0],
+                scenePointer[1] - referencePointCoords[1],
+            ];
+        }
         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);

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

@@ -1,8 +1,8 @@
-import { ExcalidrawElement } from "./types";
-import { Mutable } from "../utility-types";
+import type { ExcalidrawElement } from "./types";
+import type { Mutable } from "../utility-types";
 export type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce" | "updated">;
 export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
-export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>) => TElement;
+export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>, force?: boolean) => TElement;
 /**
  * Mutates element, bumping `version`, `versionNonce`, and `updated`.
  *

package/dist/excalidraw/element/mutateElement.js

@@ -71,11 +71,13 @@ export const mutateElement = (element, updates, informMutation = true) => {
     element.versionNonce = randomInteger();
     element.updated = getUpdatedTimestamp();
     if (informMutation) {
-        Scene.getScene(element)?.informMutation();
+        Scene.getScene(element)?.triggerUpdate();
     }
     return element;
 };
-export const newElementWith = (element, updates) => {
+export const newElementWith = (element, updates, 
+/** pass `true` to always regenerate */
+force = false) => {
     let didChange = false;
     for (const key in updates) {
         const value = updates[key];
@@ -88,7 +90,7 @@ export const newElementWith = (element, updates) => {
             didChange = true;
         }
     }
-    if (!didChange) {
+    if (!didChange && !force) {
         return element;
     }
     return {

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

@@ -1,6 +1,6 @@
-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";
+import type { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement, ElementsMap, ExcalidrawArrowElement } from "./types";
+import type { AppState } from "../types";
+import type { MarkOptional, Mutable } from "../utility-types";
 export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "index" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity" | "customData">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
@@ -19,6 +19,7 @@ export declare const newMagicFrameElement: (opts: {
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawMagicFrameElement>;
 export declare const newTextElement: (opts: {
     text: string;
+    originalText?: string;
     fontSize?: number;
     fontFamily?: FontFamilyValues;
     textAlign?: TextAlign;
@@ -26,6 +27,7 @@ export declare const newTextElement: (opts: {
     containerId?: ExcalidrawTextContainer["id"] | null;
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
+    autoResize?: ExcalidrawTextElement["autoResize"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
 export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, container: ExcalidrawTextContainer | null, elementsMap: ElementsMap, text?: string) => {
     x: number;
@@ -34,11 +36,6 @@ export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement,
     height: number;
     text: string;
 } | undefined;
-export declare const updateTextElement: (textElement: ExcalidrawTextElement, container: ExcalidrawTextContainer | null, elementsMap: ElementsMap, { text, isDeleted, originalText, }: {
-    text: string;
-    isDeleted?: boolean | undefined;
-    originalText: string;
-}) => ExcalidrawTextElement;
 export declare const newFreeDrawElement: (opts: {
     type: "freedraw";
     points?: ExcalidrawFreeDrawElement["points"];
@@ -46,10 +43,15 @@ export declare const newFreeDrawElement: (opts: {
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawFreeDrawElement>;
 export declare const newLinearElement: (opts: {
     type: ExcalidrawLinearElement["type"];
-    startArrowhead?: Arrowhead | null;
-    endArrowhead?: Arrowhead | null;
     points?: ExcalidrawLinearElement["points"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawLinearElement>;
+export declare const newArrowElement: (opts: {
+    type: ExcalidrawArrowElement["type"];
+    startArrowhead?: Arrowhead | null;
+    endArrowhead?: Arrowhead | null;
+    points?: ExcalidrawArrowElement["points"];
+    elbowed?: boolean;
+} & ElementConstructorOpts) => NonDeleted<ExcalidrawArrowElement>;
 export declare const newImageElement: (opts: {
     type: ExcalidrawImageElement["type"];
     status?: ExcalidrawImageElement["status"];

package/dist/excalidraw/element/newElement.js

@@ -5,8 +5,9 @@ import { getNewGroupIdsForDuplication } from "../groups";
 import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
-import { measureText, normalizeText, wrapText, getBoundTextMaxWidth, getDefaultLineHeight, } from "./textElement";
+import { measureText, normalizeText, wrapText, getBoundTextMaxWidth, } from "./textElement";
 import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, VERTICAL_ALIGN, } from "../constants";
+import { getLineHeight } from "../fonts";
 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, index = null, roundness = null, boundElements = null, link = null, locked = DEFAULT_ELEMENT_PROPS.locked, ...rest }) => {
     // assign type to guard against excess properties
     const element = {
@@ -79,13 +80,13 @@ const getTextElementPositionOffsets = (opts, metrics) => {
 export const newTextElement = (opts) => {
     const fontFamily = opts.fontFamily || DEFAULT_FONT_FAMILY;
     const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
-    const lineHeight = opts.lineHeight || getDefaultLineHeight(fontFamily);
+    const lineHeight = opts.lineHeight || getLineHeight(fontFamily);
     const text = normalizeText(opts.text);
     const metrics = measureText(text, getFontString({ fontFamily, fontSize }), lineHeight);
     const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
     const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
     const offsets = getTextElementPositionOffsets({ textAlign, verticalAlign }, metrics);
-    const textElement = newElementWith({
+    const textElementProps = {
         ..._newElementBase("text", opts),
         text,
         fontSize,
@@ -97,19 +98,26 @@ export const newTextElement = (opts) => {
         width: metrics.width,
         height: metrics.height,
         containerId: opts.containerId || null,
-        originalText: text,
+        originalText: opts.originalText ?? text,
+        autoResize: opts.autoResize ?? true,
         lineHeight,
-    }, {});
+    };
+    const textElement = newElementWith(textElementProps, {});
     return textElement;
 };
 const getAdjustedDimensions = (element, elementsMap, nextText) => {
-    const { width: nextWidth, height: nextHeight } = measureText(nextText, getFontString(element), element.lineHeight);
+    let { width: nextWidth, height: nextHeight } = measureText(nextText, getFontString(element), element.lineHeight);
+    // wrapped text
+    if (!element.autoResize) {
+        nextWidth = element.width;
+    }
     const { textAlign, verticalAlign } = element;
     let x;
     let y;
     if (textAlign === "center" &&
         verticalAlign === VERTICAL_ALIGN.MIDDLE &&
-        !element.containerId) {
+        !element.containerId &&
+        element.autoResize) {
         const prevMetrics = measureText(element.text, getFontString(element), element.lineHeight);
         const offsets = getTextElementPositionOffsets(element, {
             width: nextWidth - prevMetrics.width,
@@ -142,19 +150,14 @@ export const refreshTextDimensions = (textElement, container, elementsMap, text
     if (textElement.isDeleted) {
         return;
     }
-    if (container) {
-        text = wrapText(text, getFontString(textElement), getBoundTextMaxWidth(container, textElement));
+    if (container || !textElement.autoResize) {
+        text = wrapText(text, getFontString(textElement), container
+            ? getBoundTextMaxWidth(container, textElement)
+            : textElement.width);
     }
     const dimensions = getAdjustedDimensions(textElement, elementsMap, text);
     return { text, ...dimensions };
 };
-export const updateTextElement = (textElement, container, elementsMap, { text, isDeleted, originalText, }) => {
-    return newElementWith(textElement, {
-        originalText,
-        isDeleted: isDeleted ?? textElement.isDeleted,
-        ...refreshTextDimensions(textElement, container, elementsMap, originalText),
-    });
-};
 export const newFreeDrawElement = (opts) => {
     return {
         ..._newElementBase(opts.type, opts),
@@ -165,6 +168,17 @@ export const newFreeDrawElement = (opts) => {
     };
 };
 export const newLinearElement = (opts) => {
+    return {
+        ..._newElementBase(opts.type, opts),
+        points: opts.points || [],
+        lastCommittedPoint: null,
+        startBinding: null,
+        endBinding: null,
+        startArrowhead: null,
+        endArrowhead: null,
+    };
+};
+export const newArrowElement = (opts) => {
     return {
         ..._newElementBase(opts.type, opts),
         points: opts.points || [],
@@ -173,6 +187,7 @@ export const newLinearElement = (opts) => {
         endBinding: null,
         startArrowhead: opts.startArrowhead || null,
         endArrowhead: opts.endArrowhead || null,
+        elbowed: opts.elbowed || false,
     };
 };
 export const newImageElement = (opts) => {

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

@@ -1,9 +1,18 @@
-import { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, ElementsMap } from "./types";
-import { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
-import { PointerDownState } from "../types";
+import type { ExcalidrawLinearElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, NonDeleted, ElementsMap } from "./types";
+import type { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
+import type { PointerDownState } from "../types";
+import Scene from "../scene/Scene";
 export declare const normalizeAngle: (angle: 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: TransformHandleDirection, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number) => void;
+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, scene: Scene) => boolean;
+export declare const rescalePointsInElement: (element: NonDeletedExcalidrawElement, width: number, height: number, normalizePoints: boolean) => {
+    points: (readonly [number, number])[];
+} | {
+    points?: undefined;
+};
+export declare const measureFontSizeFromWidth: (element: NonDeleted<ExcalidrawTextElement>, elementsMap: ElementsMap, nextWidth: number) => {
+    size: number;
+} | null;
+export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number, scene: Scene) => void;
+export declare const resizeMultipleElements: (originalElements: PointerDownState["originalElements"], selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, transformHandleType: TransformHandleDirection, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, scene: Scene) => 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";