@excalidraw/excalidraw 0.17.1-1ed53b1 → 0.17.1-2f9526d

package/dist/excalidraw/element/index.js

@@ -1,6 +1,6 @@
 import { isInvisiblySmallElement } from "./sizeHelpers";
 import { isLinearElementType } from "./typeChecks";
-export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
+export { newElement, newTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";

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

@@ -2,7 +2,7 @@ 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

@@ -34,11 +34,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"];

package/dist/excalidraw/element/newElement.js

@@ -85,7 +85,7 @@ export const newTextElement = (opts) => {
     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,
@@ -98,18 +98,25 @@ export const newTextElement = (opts) => {
         height: metrics.height,
         containerId: opts.containerId || null,
         originalText: text,
+        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 +149,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),

package/dist/excalidraw/element/resizeElements.js

@@ -1,4 +1,4 @@
-import { MIN_FONT_SIZE, SHIFT_LOCKING_ANGLE } from "../constants";
+import { BOUND_TEXT_PADDING, MIN_FONT_SIZE, SHIFT_LOCKING_ANGLE, } from "../constants";
 import { rescalePoints } from "../points";
 import { rotate, centerPoint, rotatePoint } from "../math";
 import { getElementAbsoluteCoords, getCommonBounds, getResizedElementAbsoluteCoords, getCommonBoundingBox, } from "./bounds";
@@ -7,7 +7,7 @@ import { mutateElement } from "./mutateElement";
 import { getFontString } from "../utils";
 import { updateBoundElements } from "./binding";
 import Scene from "../scene/Scene";
-import { getApproxMinLineWidth, getBoundTextElement, getBoundTextElementId, getContainerElement, handleBindTextResize, getBoundTextMaxWidth, getApproxMinLineHeight, } from "./textElement";
+import { getApproxMinLineWidth, getBoundTextElement, getBoundTextElementId, getContainerElement, handleBindTextResize, getBoundTextMaxWidth, getApproxMinLineHeight, wrapText, measureText, getMinCharWidth, } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isInGroup } from "../groups";
 export const normalizeAngle = (angle) => {
@@ -27,12 +27,8 @@ export const transformElements = (originalElements, transformHandleType, selecte
             rotateSingleElement(element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle);
             updateBoundElements(element, elementsMap);
         }
-        else if (isTextElement(element) &&
-            (transformHandleType === "nw" ||
-                transformHandleType === "ne" ||
-                transformHandleType === "sw" ||
-                transformHandleType === "se")) {
-            resizeSingleTextElement(element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
+        else if (isTextElement(element) && transformHandleType) {
+            resizeSingleTextElement(originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
             updateBoundElements(element, elementsMap);
         }
         else if (transformHandleType) {
@@ -100,23 +96,25 @@ const measureFontSizeFromWidth = (element, elementsMap, nextWidth) => {
         size: nextFontSize,
     };
 };
-const resizeSingleTextElement = (element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY) => {
+const resizeSingleTextElement = (originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY) => {
     const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element, elementsMap);
     // rotation pointer with reverse angle
     const [rotatedX, rotatedY] = rotate(pointerX, pointerY, cx, cy, -element.angle);
     let scaleX = 0;
     let scaleY = 0;
-    if (transformHandleType.includes("e")) {
-        scaleX = (rotatedX - x1) / (x2 - x1);
-    }
-    if (transformHandleType.includes("w")) {
-        scaleX = (x2 - rotatedX) / (x2 - x1);
-    }
-    if (transformHandleType.includes("n")) {
-        scaleY = (y2 - rotatedY) / (y2 - y1);
-    }
-    if (transformHandleType.includes("s")) {
-        scaleY = (rotatedY - y1) / (y2 - y1);
+    if (transformHandleType !== "e" && transformHandleType !== "w") {
+        if (transformHandleType.includes("e")) {
+            scaleX = (rotatedX - x1) / (x2 - x1);
+        }
+        if (transformHandleType.includes("w")) {
+            scaleX = (x2 - rotatedX) / (x2 - x1);
+        }
+        if (transformHandleType.includes("n")) {
+            scaleY = (y2 - rotatedY) / (y2 - y1);
+        }
+        if (transformHandleType.includes("s")) {
+            scaleY = (rotatedY - y1) / (y2 - y1);
+        }
     }
     const scale = Math.max(scaleX, scaleY);
     if (scale > 0) {
@@ -171,6 +169,57 @@ const resizeSingleTextElement = (element, elementsMap, transformHandleType, shou
             y: nextY,
         });
     }
+    if (transformHandleType === "e" || transformHandleType === "w") {
+        const stateAtResizeStart = originalElements.get(element.id);
+        const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(stateAtResizeStart, stateAtResizeStart.width, stateAtResizeStart.height, true);
+        const startTopLeft = [x1, y1];
+        const startBottomRight = [x2, y2];
+        const startCenter = centerPoint(startTopLeft, startBottomRight);
+        const rotatedPointer = rotatePoint([pointerX, pointerY], startCenter, -stateAtResizeStart.angle);
+        const [esx1, , esx2] = getResizedElementAbsoluteCoords(element, element.width, element.height, true);
+        const boundsCurrentWidth = esx2 - esx1;
+        const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];
+        const minWidth = getMinCharWidth(getFontString(element)) + BOUND_TEXT_PADDING * 2;
+        let scaleX = atStartBoundsWidth / boundsCurrentWidth;
+        if (transformHandleType.includes("e")) {
+            scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;
+        }
+        if (transformHandleType.includes("w")) {
+            scaleX = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;
+        }
+        const newWidth = element.width * scaleX < minWidth ? minWidth : element.width * scaleX;
+        const text = wrapText(element.originalText, getFontString(element), Math.abs(newWidth));
+        const metrics = measureText(text, getFontString(element), element.lineHeight);
+        const eleNewHeight = metrics.height;
+        const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] = getResizedElementAbsoluteCoords(stateAtResizeStart, newWidth, eleNewHeight, true);
+        const newBoundsWidth = newBoundsX2 - newBoundsX1;
+        const newBoundsHeight = newBoundsY2 - newBoundsY1;
+        let newTopLeft = [...startTopLeft];
+        if (["n", "w", "nw"].includes(transformHandleType)) {
+            newTopLeft = [
+                startBottomRight[0] - Math.abs(newBoundsWidth),
+                startTopLeft[1],
+            ];
+        }
+        // adjust topLeft to new rotation point
+        const angle = stateAtResizeStart.angle;
+        const rotatedTopLeft = rotatePoint(newTopLeft, startCenter, angle);
+        const newCenter = [
+            newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
+            newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
+        ];
+        const rotatedNewCenter = rotatePoint(newCenter, startCenter, angle);
+        newTopLeft = rotatePoint(rotatedTopLeft, rotatedNewCenter, -angle);
+        const resizedElement = {
+            width: Math.abs(newWidth),
+            height: Math.abs(metrics.height),
+            x: newTopLeft[0],
+            y: newTopLeft[1],
+            text,
+            autoResize: false,
+        };
+        mutateElement(element, resizedElement);
+    }
 };
 export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleDirection, shouldResizeFromCenter, pointerX, pointerY) => {
     const stateAtResizeStart = originalElements.get(element.id);
@@ -541,7 +590,7 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
             handleBindTextResize(element, elementsMap, transformHandleType, true);
         }
     }
-    Scene.getScene(elementsAndUpdates[0].element)?.informMutation();
+    Scene.getScene(elementsAndUpdates[0].element)?.triggerUpdate();
 };
 const rotateMultipleElements = (originalElements, elements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY) => {
     let centerAngle = (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
@@ -574,7 +623,7 @@ const rotateMultipleElements = (originalElements, elements, elementsMap, pointer
             }, false);
         }
     });
-    Scene.getScene(elements[0])?.informMutation();
+    Scene.getScene(elements[0])?.triggerUpdate();
 };
 export const getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x, y) => {
     const [x1, y1, x2, y2] = selectedElements.length === 1

package/dist/excalidraw/element/resizeTest.js

@@ -28,10 +28,8 @@ export const resizeTest = (element, elementsMap, appState, x, y, zoom, pointerTy
     }
     if (canResizeFromSides(device)) {
         const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element, elementsMap);
-        // Note that for a text element, when "resized" from the side
-        // we should make it wrap/unwrap
-        if (element.type !== "text" &&
-            !(isLinearElement(element) && element.points.length <= 2)) {
+        // do not resize from the sides for linear elements with only two points
+        if (!(isLinearElement(element) && element.points.length <= 2)) {
             const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
             const sides = getSelectionBorders([x1 - SPACING, y1 - SPACING], [x2 + SPACING, y2 + SPACING], [cx, cy], angleToDegrees(element.angle));
             for (const [dir, side] of Object.entries(sides)) {

package/dist/excalidraw/element/textElement.js

@@ -24,12 +24,17 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap, infor
         angle: container?.angle ?? textElement.angle,
     };
     boundTextUpdates.text = textElement.text;
-    if (container) {
-        maxWidth = getBoundTextMaxWidth(container, textElement);
+    if (container || !textElement.autoResize) {
+        maxWidth = container
+            ? getBoundTextMaxWidth(container, textElement)
+            : textElement.width;
         boundTextUpdates.text = wrapText(textElement.originalText, getFontString(textElement), maxWidth);
     }
     const metrics = measureText(boundTextUpdates.text, getFontString(textElement), textElement.lineHeight);
-    boundTextUpdates.width = metrics.width;
+    // Note: only update width for unwrapped text and bound texts (which always have autoResize set to true)
+    if (textElement.autoResize) {
+        boundTextUpdates.width = metrics.width;
+    }
     boundTextUpdates.height = metrics.height;
     if (container) {
         const maxContainerHeight = getBoundTextMaxHeight(container, textElement);

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

@@ -2,11 +2,16 @@ import type { ExcalidrawElement, ExcalidrawTextElement } from "./types";
 import type App from "../components/App";
 export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }: {
     id: ExcalidrawElement["id"];
-    onChange?: ((text: string) => void) | undefined;
+    /**
+     * textWysiwyg only deals with `originalText`
+     *
+     * Note: `text`, which can be wrapped and therefore different from `originalText`,
+     *       is derived from `originalText`
+     */
+    onChange?: ((nextOriginalText: string) => void) | undefined;
     onSubmit: (data: {
-        text: string;
         viaKeyboard: boolean;
-        originalText: string;
+        nextOriginalText: string;
     }) => void;
     getViewportCoords: (x: number, y: number) => [number, number];
     element: ExcalidrawTextElement;

package/dist/excalidraw/element/textWysiwyg.js

@@ -53,8 +53,6 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             let maxWidth = updatedTextElement.width;
             let maxHeight = updatedTextElement.height;
             let textElementWidth = updatedTextElement.width;
-            // Set to element height by default since that's
-            // what is going to be used for unbounded text
             const textElementHeight = updatedTextElement.height;
             if (container && updatedTextElement.containerId) {
                 if (isArrowElement(container)) {
@@ -113,6 +111,9 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                 maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
                 textElementWidth = Math.min(textElementWidth, maxWidth);
             }
+            else {
+                textElementWidth += 0.5;
+            }
             // Make sure text editor height doesn't go beyond viewport
             const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
             Object.assign(editable.style, {
@@ -149,7 +150,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     editable.classList.add("excalidraw-wysiwyg");
     let whiteSpace = "pre";
     let wordBreak = "normal";
-    if (isBoundToContainer(element)) {
+    if (isBoundToContainer(element) || !element.autoResize) {
         whiteSpace = "pre-wrap";
         wordBreak = "break-word";
     }
@@ -334,10 +335,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         if (!updateElement) {
             return;
         }
-        let text = editable.value;
         const container = getContainerElement(updateElement, app.scene.getNonDeletedElementsMap());
         if (container) {
-            text = updateElement.text;
             if (editable.value.trim()) {
                 const boundTextElementId = getBoundTextElementId(container);
                 if (!boundTextElementId || boundTextElementId !== element.id) {
@@ -361,9 +360,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             redrawTextBoundingBox(updateElement, container, app.scene.getNonDeletedElementsMap());
         }
         onSubmit({
-            text,
             viaKeyboard: submittedViaKeyboard,
-            originalText: editable.value,
+            nextOriginalText: editable.value,
         });
     };
     const cleanup = () => {
@@ -441,7 +439,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         }
     };
     // handle updates of textElement properties of editing element
-    const unbindUpdate = Scene.getScene(element).addCallback(() => {
+    const unbindUpdate = Scene.getScene(element).onUpdate(() => {
         updateWysiwygStyle();
         const isColorPickerActive = !!document.activeElement?.closest(".color-picker-content");
         if (!isColorPickerActive) {

package/dist/excalidraw/element/transformHandles.js

@@ -1,6 +1,5 @@
 import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
-import { isTextElement } from ".";
 import { isFrameLikeElement, isLinearElement } from "./typeChecks";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, isAndroid, isIOS, } from "../constants";
 const transformHandleSizes = {
@@ -28,12 +27,6 @@ export const OMIT_SIDES_FOR_FRAME = {
     w: true,
     rotation: true,
 };
-const OMIT_SIDES_FOR_TEXT_ELEMENT = {
-    e: true,
-    s: true,
-    n: true,
-    w: true,
-};
 const OMIT_SIDES_FOR_LINE_SLASH = {
     e: true,
     s: true,
@@ -147,9 +140,6 @@ export const getTransformHandles = (element, zoom, elementsMap, pointerType = "m
             }
         }
     }
-    else if (isTextElement(element)) {
-        omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
-    }
     else if (isFrameLikeElement(element)) {
         omitSides = {
             ...omitSides,

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

@@ -154,6 +154,13 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
     verticalAlign: VerticalAlign;
     containerId: ExcalidrawGenericElement["id"] | null;
     originalText: string;
+    /**
+     * If `true` the width will fit the text. If `false`, the text will
+     * wrap to fit the width.
+     *
+     * @default true
+     */
+    autoResize: boolean;
     /**
      * Unitless line height (aligned to W3C). To get line height in px, multiply
      *  with font size (using `getLineHeightInPx` helper).

package/dist/excalidraw/locales/en.json

@@ -148,7 +148,9 @@
         "discordChat": "Discord chat",
         "zoomToFitViewport": "Zoom to fit in viewport",
         "zoomToFitSelection": "Zoom to fit selection",
-        "zoomToFit": "Zoom to fit all elements"
+        "zoomToFit": "Zoom to fit all elements",
+        "installPWA": "Install Excalidraw locally (PWA)",
+        "autoResize": "Enable text auto-resizing"
     },
     "library": {
         "noItems": "No items added yet...",

package/dist/excalidraw/scene/Fonts.d.ts

@@ -2,10 +2,8 @@ import type { ExcalidrawElement } from "../element/types";
 import type Scene from "./Scene";
 export declare class Fonts {
     private scene;
-    private onSceneUpdated;
-    constructor({ scene, onSceneUpdated, }: {
+    constructor({ scene }: {
         scene: Scene;
-        onSceneUpdated: () => void;
     });
     private static loadedFontFaces;
     /**

package/dist/excalidraw/scene/Fonts.js

@@ -1,15 +1,11 @@
-import { isTextElement, refreshTextDimensions } from "../element";
+import { isTextElement } from "../element";
 import { newElementWith } from "../element/mutateElement";
-import { getContainerElement } from "../element/textElement";
-import { isBoundToContainer } from "../element/typeChecks";
 import { getFontString } from "../utils";
 import { ShapeCache } from "./ShapeCache";
 export class Fonts {
     scene;
-    onSceneUpdated;
-    constructor({ scene, onSceneUpdated, }) {
+    constructor({ scene }) {
         this.scene = scene;
-        this.onSceneUpdated = onSceneUpdated;
     }
     // it's ok to track fonts across multiple instances only once, so let's use
     // a static member to reduce memory footprint
@@ -39,17 +35,15 @@ export class Fonts {
         }
         let didUpdate = false;
         this.scene.mapElements((element) => {
-            if (isTextElement(element) && !isBoundToContainer(element)) {
-                ShapeCache.delete(element);
+            if (isTextElement(element)) {
                 didUpdate = true;
-                return newElementWith(element, {
-                    ...refreshTextDimensions(element, getContainerElement(element, this.scene.getNonDeletedElementsMap()), this.scene.getNonDeletedElementsMap()),
-                });
+                ShapeCache.delete(element);
+                return newElementWith(element, {}, true);
             }
             return element;
         });
         if (didUpdate) {
-            this.onSceneUpdated();
+            this.scene.triggerUpdate();
         }
     };
     loadFontsForElements = async (elements) => {

package/dist/excalidraw/scene/Renderer.d.ts

@@ -14,7 +14,7 @@ export declare class Renderer {
         width: AppState["width"];
         editingElement: AppState["editingElement"];
         pendingImageElementId: AppState["pendingImageElementId"];
-        versionNonce: ReturnType<InstanceType<typeof Scene>["getVersionNonce"]>;
+        sceneNonce: ReturnType<InstanceType<typeof Scene>["getSceneNonce"]>;
     }) => {
         elementsMap: Map<string, NonDeletedExcalidrawElement> & import("../utility-types").MakeBrand<"NonDeletedElementsMap"> & import("../utility-types").MakeBrand<"RenderableElementsMap">;
         visibleElements: readonly NonDeletedExcalidrawElement[];

package/dist/excalidraw/scene/Renderer.js

@@ -45,9 +45,8 @@ export class Renderer {
             return elementsMap;
         };
         return memoize(({ zoom, offsetLeft, offsetTop, scrollX, scrollY, height, width, editingElement, pendingImageElementId, 
-        // unused but serves we cache on it to invalidate elements if they
-        // get mutated
-        versionNonce: _versionNonce, }) => {
+        // cache-invalidation nonce
+        sceneNonce: _sceneNonce, }) => {
             const elements = this.scene.getNonDeletedElements();
             const elementsMap = getRenderableElements({
                 elements,

package/dist/excalidraw/scene/Scene.d.ts

@@ -19,7 +19,14 @@ declare class Scene {
     private frames;
     private elementsMap;
     private selectedElementsCache;
-    private versionNonce;
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    private sceneNonce;
+    getSceneNonce(): number | undefined;
     getNonDeletedElementsMap(): Map<string, Ordered<NonDeletedExcalidrawElement>> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
     getElementsIncludingDeleted(): readonly OrderedExcalidrawElement[];
     getElementsMapIncludingDeleted(): Map<string, Ordered<ExcalidrawElement>> & import("../utility-types").MakeBrand<"SceneElementsMap">;
@@ -38,7 +45,6 @@ declare class Scene {
     }): NonDeleted<ExcalidrawElement>[];
     getNonDeletedFramesLikes(): readonly NonDeleted<ExcalidrawFrameLikeElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
-    getVersionNonce(): number | undefined;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;
     /**
      * A utility method to help with updating all scene elements, with the added
@@ -54,8 +60,8 @@ declare class Scene {
      */
     mapElements(iteratee: (element: ExcalidrawElement) => ExcalidrawElement): boolean;
     replaceAllElements(nextElements: ElementsMapOrArray): void;
-    informMutation(): void;
-    addCallback(cb: SceneStateCallback): SceneStateCallbackRemover;
+    triggerUpdate(): void;
+    onUpdate(cb: SceneStateCallback): SceneStateCallbackRemover;
     destroy(): void;
     insertElementAtIndex(element: ExcalidrawElement, index: number): void;
     insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;

package/dist/excalidraw/scene/Scene.js

@@ -72,7 +72,16 @@ class Scene {
         elements: null,
         cache: new Map(),
     };
-    versionNonce;
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    sceneNonce;
+    getSceneNonce() {
+        return this.sceneNonce;
+    }
     getNonDeletedElementsMap() {
         return this.nonDeletedElementsMap;
     }
@@ -118,9 +127,6 @@ class Scene {
     getElement(id) {
         return this.elementsMap.get(id) || null;
     }
-    getVersionNonce() {
-        return this.versionNonce;
-    }
     getNonDeletedElement(id) {
         const element = this.getElement(id);
         if (element && isNonDeletedElement(element)) {
@@ -179,15 +185,15 @@ class Scene {
         this.nonDeletedElementsMap = nonDeletedElements.elementsMap;
         this.frames = nextFrameLikes;
         this.nonDeletedFramesLikes = getNonDeletedElements(this.frames).elements;
-        this.informMutation();
+        this.triggerUpdate();
     }
-    informMutation() {
-        this.versionNonce = randomInteger();
+    triggerUpdate() {
+        this.sceneNonce = randomInteger();
         for (const callback of Array.from(this.callbacks)) {
             callback();
         }
     }
-    addCallback(cb) {
+    onUpdate(cb) {
         if (this.callbacks.has(cb)) {
             throw new Error();
         }

package/dist/excalidraw/scene/export.js

@@ -200,7 +200,7 @@ export const exportToSvg = async (elements, appState, files, opts) => {
     if (import.meta.env.VITE_IS_EXCALIDRAW_NPM_PACKAGE) {
         assetPath =
             window.EXCALIDRAW_ASSET_PATH ||
-                `https://unpkg.com/${import.meta.env.VITE_PKG_NAME}@${import.meta.env.PKG_VERSION}`;
+                `https://unpkg.com/${import.meta.env.VITE_PKG_NAME}@${import.meta.env.VITE_PKG_VERSION}`;
         if (assetPath?.startsWith("/")) {
             assetPath = assetPath.replace("/", `${window.location.origin}/`);
         }

package/dist/prod/{en-UQDDYCH7.json → en-OIPCBIOA.json}

@@ -148,7 +148,9 @@
     "discordChat": "Discord chat",
     "zoomToFitViewport": "Zoom to fit in viewport",
     "zoomToFitSelection": "Zoom to fit selection",
-    "zoomToFit": "Zoom to fit all elements"
+    "zoomToFit": "Zoom to fit all elements",
+    "installPWA": "Install Excalidraw locally (PWA)",
+    "autoResize": "Enable text auto-resizing"
   },
   "library": {
     "noItems": "No items added yet...",