@excalidraw/excalidraw 0.17.1-890ed9f → 0.17.1-96eeec5

package/dist/excalidraw/renderer/interactiveScene.js

@@ -1,18 +1,18 @@
-import { getElementAbsoluteCoords, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, getCommonBounds, } from "../element";
+import { getElementAbsoluteCoords, getTransformHandlesFromCoords, getTransformHandles, getCommonBounds, } from "../element";
 import { roundRect } from "../renderer/roundRect";
 import { getScrollBars, SCROLLBAR_COLOR, SCROLLBAR_WIDTH, } from "../scene/scrollbars";
 import { renderSelectionElement } from "../renderer/renderElement";
 import { getClientColor, renderRemoteCursors } from "../clients";
 import { isSelectedViaGroup, getSelectedGroupIds, getElementsInGroup, selectGroupsFromGivenElements, } from "../groups";
-import { OMIT_SIDES_FOR_FRAME, shouldShowBoundingBox, } from "../element/transformHandles";
+import { getOmitSidesForDevice, shouldShowBoundingBox, } from "../element/transformHandles";
 import { arrayToMap, throttleRAF } from "../utils";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
 import { renderSnaps } from "../renderer/renderSnaps";
-import { maxBindingGap, } from "../element/binding";
+import { maxBindingGap } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
 import oc from "open-color";
-import { isFrameLikeElement, isLinearElement } from "../element/typeChecks";
+import { isFrameLikeElement, isLinearElement, isTextElement, } from "../element/typeChecks";
 const renderLinearElementPointHighlight = (context, appState, elementsMap) => {
     const { elementId, hoverPointIndex } = appState.selectedLinearElement;
     if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
@@ -124,10 +124,11 @@ const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBindin
         fillCircle(context, x, y, threshold);
     });
 };
-const renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2) => {
+const renderSelectionBorder = (context, appState, elementProperties) => {
     const { angle, elementX1, elementY1, elementX2, elementY2, selectionColors, cx, cy, dashed, activeEmbeddable, } = elementProperties;
     const elementWidth = elementX2 - elementX1;
     const elementHeight = elementY2 - elementY1;
+    const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
     const linePadding = padding / appState.zoom.value;
     const lineWidth = 8 / appState.zoom.value;
     const spaceWidth = 4 / appState.zoom.value;
@@ -264,7 +265,23 @@ const renderTransformHandles = (context, renderConfig, appState, transformHandle
         }
     });
 };
-const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }) => {
+const renderTextBox = (text, context, appState, selectionColor) => {
+    context.save();
+    const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
+    const width = text.width + padding * 2;
+    const height = text.height + padding * 2;
+    const cx = text.x + width / 2;
+    const cy = text.y + height / 2;
+    const shiftX = -(width / 2 + padding);
+    const shiftY = -(height / 2 + padding);
+    context.translate(cx + appState.scrollX, cy + appState.scrollY);
+    context.rotate(text.angle);
+    context.lineWidth = 1 / appState.zoom.value;
+    context.strokeStyle = selectionColor;
+    context.strokeRect(shiftX, shiftY, width, height);
+    context.restore();
+};
+const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }) => {
     if (canvas === null) {
         return { atLeastOneVisibleElement: false, elementsMap };
     }
@@ -295,12 +312,18 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
     // Paint selection element
     if (appState.selectionElement) {
         try {
-            renderSelectionElement(appState.selectionElement, context, appState);
+            renderSelectionElement(appState.selectionElement, context, appState, renderConfig.selectionColor);
         }
         catch (error) {
             console.error(error);
         }
     }
+    if (appState.editingElement && isTextElement(appState.editingElement)) {
+        const textElement = allElementsMap.get(appState.editingElement.id);
+        if (textElement && !textElement.autoResize) {
+            renderTextBox(textElement, context, appState, renderConfig.selectionColor);
+        }
+    }
     if (appState.isBindingEnabled) {
         appState.suggestedBindings
             .filter((binding) => binding != null)
@@ -403,8 +426,12 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
         context.translate(appState.scrollX, appState.scrollY);
         if (selectedElements.length === 1) {
             context.fillStyle = oc.white;
-            const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse");
-            if (!appState.viewModeEnabled && showBoundingBox) {
+            const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse", // when we render we don't know which pointer type so use mouse,
+            getOmitSidesForDevice(device));
+            if (!appState.viewModeEnabled &&
+                showBoundingBox &&
+                // do not show transform handles when text is being edited
+                !isTextElement(appState.editingElement)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
         }
@@ -421,8 +448,8 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
             context.lineWidth = lineWidth;
             context.setLineDash(initialLineDash);
             const transformHandles = getTransformHandlesFromCoords([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, "mouse", isFrameSelected
-                ? OMIT_SIDES_FOR_FRAME
-                : OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);
+                ? { ...getOmitSidesForDevice(device), rotation: true }
+                : getOmitSidesForDevice(device));
             if (selectedElements.some((element) => !element.locked)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, 0);
             }

package/dist/excalidraw/renderer/renderElement.d.ts

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
+import type { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import { StaticCanvasRenderConfig, RenderableElementsMap } from "../scene/types";
-import { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
+import type { StaticCanvasRenderConfig, RenderableElementsMap, InteractiveCanvasRenderConfig } from "../scene/types";
+import type { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
 export declare const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 export declare const getRenderOpacity: (element: ExcalidrawElement, containingFrame: ExcalidrawFrameLikeElement | null, elementsPendingErasure: ElementsPendingErasure) => number;
 export interface ExcalidrawElementWithCanvas {
@@ -17,7 +17,7 @@ export interface ExcalidrawElementWithCanvas {
 }
 export declare const DEFAULT_LINK_SIZE = 14;
 export declare const elementWithCanvasCache: WeakMap<ExcalidrawElement, ExcalidrawElementWithCanvas>;
-export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;
+export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState, selectionColor: InteractiveCanvasRenderConfig["selectionColor"]) => void;
 export declare const renderElement: (element: NonDeletedExcalidrawElement, elementsMap: RenderableElementsMap, allElementsMap: NonDeletedSceneElementsMap, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;

package/dist/excalidraw/renderer/renderElement.js

@@ -24,7 +24,7 @@ const shouldResetImageFilter = (element, renderConfig, appState) => {
         !isPendingImageElement(element, renderConfig) &&
         renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg);
 };
-const getCanvasPadding = (element) => element.type === "freedraw" ? element.strokeWidth * 12 : 20;
+const getCanvasPadding = (element) => element.type === "freedraw" ? element.strokeWidth * 12 : 200;
 export const getRenderOpacity = (element, containingFrame, elementsPendingErasure) => {
     // multiplying frame opacity with element opacity to combine them
     // (e.g. frame 50% and element 50% opacity should result in 25% opacity)
@@ -119,7 +119,7 @@ const IMAGE_PLACEHOLDER_IMG = document.createElement("img");
 IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(`<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#888" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>`)}`;
 const IMAGE_ERROR_PLACEHOLDER_IMG = document.createElement("img");
 IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(`<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`)}`;
-const drawImagePlaceholder = (element, context, zoomValue) => {
+const drawImagePlaceholder = (element, context) => {
     context.fillStyle = "#E7E7E7";
     context.fillRect(0, 0, element.width, element.height);
     const imageMinWidthOrHeight = Math.min(element.width, element.height);
@@ -176,7 +176,7 @@ const drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {
                 context.drawImage(img, 0 /* hardcoded for the selection box*/, 0, element.width, element.height);
             }
             else {
-                drawImagePlaceholder(element, context, appState.zoom.value);
+                drawImagePlaceholder(element, context);
             }
             break;
         }
@@ -323,7 +323,7 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
     context.restore();
     // Clear the nested element we appended to the DOM
 };
-export const renderSelectionElement = (element, context, appState) => {
+export const renderSelectionElement = (element, context, appState, selectionColor) => {
     context.save();
     context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
     context.fillStyle = "rgba(0, 0, 200, 0.04)";
@@ -334,7 +334,7 @@ export const renderSelectionElement = (element, context, appState) => {
     const offset = 0.5 / appState.zoom.value;
     context.fillRect(offset, offset, element.width, element.height);
     context.lineWidth = 1 / appState.zoom.value;
-    context.strokeStyle = " rgb(105, 101, 219)";
+    context.strokeStyle = selectionColor;
     context.strokeRect(offset, offset, element.width, element.height);
     context.restore();
 };

package/dist/excalidraw/renderer/renderSnaps.d.ts

@@ -1,2 +1,2 @@
-import { InteractiveCanvasAppState } from "../types";
+import type { InteractiveCanvasAppState } from "../types";
 export declare const renderSnaps: (context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;

package/dist/excalidraw/renderer/staticScene.d.ts

@@ -1,4 +1,4 @@
-import { StaticSceneRenderConfig } from "../scene/types";
+import type { StaticSceneRenderConfig } from "../scene/types";
 /** throttled to animation framerate */
 export declare const renderStaticSceneThrottled: {
     (config: StaticSceneRenderConfig): void;

package/dist/excalidraw/renderer/staticScene.js

@@ -142,7 +142,7 @@ const _renderStaticScene = ({ canvas, rc, elementsMap, allElementsMap, visibleEl
             else {
                 renderElement(element, elementsMap, allElementsMap, rc, context, renderConfig, appState);
             }
-            const boundTextElement = getBoundTextElement(element, allElementsMap);
+            const boundTextElement = getBoundTextElement(element, elementsMap);
             if (boundTextElement) {
                 renderElement(boundTextElement, elementsMap, allElementsMap, rc, context, renderConfig, appState);
             }

package/dist/excalidraw/renderer/staticSvgScene.d.ts

@@ -1,5 +1,5 @@
-import { RoughSVG } from "roughjs/bin/svg";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
-import { BinaryFiles } from "../types";
+import type { RoughSVG } from "roughjs/bin/svg";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
+import type { BinaryFiles } from "../types";
 export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], elementsMap: RenderableElementsMap, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, renderConfig: SVGRenderConfig) => void;

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

@@ -1,11 +1,9 @@
-import { ExcalidrawElement } from "../element/types";
+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 { newElementWith } from "../element/mutateElement";
+import { isTextElement } from "../element";
 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
@@ -38,18 +34,19 @@ export class Fonts {
             return false;
         }
         let didUpdate = false;
-        this.scene.mapElements((element) => {
-            if (isTextElement(element) && !isBoundToContainer(element)) {
-                ShapeCache.delete(element);
+        const elementsMap = this.scene.getNonDeletedElementsMap();
+        for (const element of this.scene.getNonDeletedElements()) {
+            if (isTextElement(element)) {
                 didUpdate = true;
-                return newElementWith(element, {
-                    ...refreshTextDimensions(element, getContainerElement(element, this.scene.getNonDeletedElementsMap()), this.scene.getNonDeletedElementsMap()),
-                });
+                ShapeCache.delete(element);
+                const container = getContainerElement(element, elementsMap);
+                if (container) {
+                    ShapeCache.delete(container);
+                }
             }
-            return element;
-        });
+        }
         if (didUpdate) {
-            this.onSceneUpdated();
+            this.scene.triggerUpdate();
         }
     };
     loadFontsForElements = async (elements) => {

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

@@ -1,6 +1,6 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-import Scene from "./Scene";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { AppState } from "../types";
+import type Scene from "./Scene";
 export declare class Renderer {
     private scene;
     constructor(scene: Scene);
@@ -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

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray, OrderedExcalidrawElement, Ordered } from "../element/types";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { AppState } from "../types";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray, OrderedExcalidrawElement, Ordered } from "../element/types";
+import type { LinearElementEditor } from "../element/linearElementEditor";
+import type { AppState } from "../types";
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
 type SceneStateCallback = () => void;
@@ -10,6 +10,9 @@ declare class Scene {
     private static sceneMapByElement;
     private static sceneMapById;
     static mapElementToScene(elementKey: ElementKey, scene: Scene): void;
+    /**
+     * @deprecated pass down `app.scene` and use it directly
+     */
     static getScene(elementKey: ElementKey): Scene | null;
     private callbacks;
     private nonDeletedElements;
@@ -19,10 +22,17 @@ declare class Scene {
     private frames;
     private elementsMap;
     private selectedElementsCache;
-    private versionNonce;
-    getElementsMapIncludingDeleted(): Map<string, Ordered<ExcalidrawElement>> & import("../utility-types").MakeBrand<"SceneElementsMap">;
+    /**
+     * 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">;
     getNonDeletedElements(): readonly Ordered<NonDeletedExcalidrawElement>[];
     getFramesIncludingDeleted(): readonly ExcalidrawFrameLikeElement[];
     getSelectedElements(opts: {
@@ -38,7 +48,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 +63,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

@@ -50,6 +50,9 @@ class Scene {
             this.sceneMapById.set(elementKey.id, scene);
         }
     }
+    /**
+     * @deprecated pass down `app.scene` and use it directly
+     */
     static getScene(elementKey) {
         if (isIdKey(elementKey)) {
             return this.sceneMapById.get(elementKey) || null;
@@ -72,9 +75,15 @@ class Scene {
         elements: null,
         cache: new Map(),
     };
-    versionNonce;
-    getElementsMapIncludingDeleted() {
-        return this.elementsMap;
+    /**
+     * 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;
@@ -82,6 +91,9 @@ class Scene {
     getElementsIncludingDeleted() {
         return this.elements;
     }
+    getElementsMapIncludingDeleted() {
+        return this.elementsMap;
+    }
     getNonDeletedElements() {
         return this.nonDeletedElements;
     }
@@ -118,9 +130,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 +188,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/Shape.d.ts

@@ -1,7 +1,7 @@
 import type { Drawable, Options } from "roughjs/bin/core";
 import type { RoughGenerator } from "roughjs/bin/generator";
 import type { ExcalidrawElement, NonDeletedExcalidrawElement, ExcalidrawSelectionElement } from "../element/types";
-import { EmbedsValidationStatus } from "../types";
+import type { EmbedsValidationStatus } from "../types";
 export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
 /**
  * Generates the roughjs shape for given element.

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

@@ -1,7 +1,7 @@
-import { Drawable } from "roughjs/bin/core";
-import { ExcalidrawElement } from "../element/types";
-import { ElementShape, ElementShapes } from "./types";
-import { AppState, EmbedsValidationStatus } from "../types";
+import type { Drawable } from "roughjs/bin/core";
+import type { ExcalidrawElement } from "../element/types";
+import type { ElementShape, ElementShapes } from "./types";
+import type { AppState, EmbedsValidationStatus } from "../types";
 export declare class ShapeCache {
     private static rg;
     private static cache;

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

@@ -1,5 +1,5 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { ElementOrToolType } from "../types";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { ElementOrToolType } from "../types";
 export declare const hasBackground: (type: ElementOrToolType) => boolean;
 export declare const hasStrokeColor: (type: ElementOrToolType) => boolean;
 export declare const hasStrokeWidth: (type: ElementOrToolType) => boolean;

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

@@ -1,5 +1,5 @@
-import { ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles } from "../types";
+import type { ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles } from "../types";
 export declare const exportToCanvas: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, { exportBackground, exportPadding, viewBackgroundColor, exportingFrame, }: {
     exportBackground: boolean;
     exportPadding?: number | undefined;

package/dist/excalidraw/scene/export.js

@@ -1,5 +1,5 @@
 import rough from "roughjs/bin/rough";
-import { getCommonBounds, getElementAbsoluteCoords, } from "../element/bounds";
+import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
 import { renderSceneToSvg } from "../renderer/staticSvgScene";
 import { arrayToMap, distance, getFontString, toBrandedType } from "../utils";
 import { DEFAULT_EXPORT_PADDING, FONT_FAMILY, FRAME_STYLE, SVG_NS, THEME, THEME_FILTER, } from "../constants";
@@ -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/excalidraw/scene/scroll.d.ts

@@ -1,5 +1,5 @@
-import { AppState, PointerCoords, Zoom } from "../types";
-import { ExcalidrawElement } from "../element/types";
+import type { AppState, PointerCoords, Zoom } from "../types";
+import type { ExcalidrawElement } from "../element/types";
 export declare const centerScrollOn: ({ scenePoint, viewportDimensions, zoom, }: {
     scenePoint: PointerCoords;
     viewportDimensions: {

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

@@ -1,6 +1,6 @@
-import { InteractiveCanvasAppState } from "../types";
-import { ScrollBars } from "./types";
-import { ExcalidrawElement } from "../element/types";
+import type { InteractiveCanvasAppState } from "../types";
+import type { ScrollBars } from "./types";
+import type { ExcalidrawElement } from "../element/types";
 export declare const SCROLLBAR_MARGIN = 4;
 export declare const SCROLLBAR_WIDTH = 6;
 export declare const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";

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

@@ -1,5 +1,5 @@
-import { ElementsMap, ElementsMapOrArray, ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
-import { AppState, InteractiveCanvasAppState } from "../types";
+import type { ElementsMap, ElementsMapOrArray, ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
+import type { AppState, InteractiveCanvasAppState } from "../types";
 /**
  * Frames and their containing elements are not to be selected at the same time.
  * Given an array of selected elements, if there are frames and their containing elements

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

@@ -1,8 +1,8 @@
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import { Drawable } from "roughjs/bin/core";
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../element/types";
-import { AppClassProperties, AppState, EmbedsValidationStatus, ElementsPendingErasure, InteractiveCanvasAppState, StaticCanvasAppState, SocketId, UserIdleState } from "../types";
-import { MakeBrand } from "../utility-types";
+import type { Drawable } from "roughjs/bin/core";
+import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../element/types";
+import type { AppClassProperties, AppState, EmbedsValidationStatus, ElementsPendingErasure, InteractiveCanvasAppState, StaticCanvasAppState, SocketId, UserIdleState, Device } from "../types";
+import type { MakeBrand } from "../utility-types";
 export type RenderableElementsMap = NonDeletedElementsMap & MakeBrand<"RenderableElementsMap">;
 export type StaticCanvasRenderConfig = {
     canvasBackgroundColor: AppState["viewBackgroundColor"];
@@ -33,7 +33,7 @@ export type InteractiveCanvasRenderConfig = {
     remotePointerUserStates: Map<SocketId, UserIdleState>;
     remotePointerUsernames: Map<SocketId, string>;
     remotePointerButton: Map<SocketId, string | undefined>;
-    selectionColor?: string;
+    selectionColor: string;
     renderScrollbars?: boolean;
 };
 export type RenderInteractiveSceneCallback = {
@@ -56,18 +56,17 @@ export type InteractiveSceneRenderConfig = {
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
+    allElementsMap: NonDeletedSceneElementsMap;
     scale: number;
     appState: InteractiveCanvasAppState;
     renderConfig: InteractiveCanvasRenderConfig;
+    device: Device;
     callback: (data: RenderInteractiveSceneCallback) => void;
 };
 export type SceneScroll = {
     scrollX: number;
     scrollY: number;
 };
-export interface Scene {
-    elements: ExcalidrawTextElement[];
-}
 export type ExportType = "png" | "clipboard" | "clipboard-svg" | "backend" | "svg";
 export type ScrollBars = {
     horizontal: {

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

@@ -1,4 +1,4 @@
-import { AppState, NormalizedZoomValue } from "../types";
+import type { AppState, NormalizedZoomValue } from "../types";
 export declare const getNormalizedZoom: (zoom: number) => NormalizedZoomValue;
 export declare const getStateForZoom: ({ viewportX, viewportY, nextZoom, }: {
     viewportX: number;

package/dist/excalidraw/shapes.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { type GeometricShape } from "../utils/geometry/shape";
+import type { ElementsMap, ExcalidrawElement } from "./element/types";
 export declare const SHAPES: readonly [{
     readonly icon: JSX.Element;
     readonly value: "selection";
@@ -61,3 +63,8 @@ export declare const SHAPES: readonly [{
     readonly fillable: false;
 }];
 export declare const findShapeByKey: (key: string) => "text" | "image" | "selection" | "rectangle" | "diamond" | "ellipse" | "arrow" | "line" | "freedraw" | "eraser" | null;
+/**
+ * get the pure geometric shape of an excalidraw element
+ * which is then used for hit detection
+ */
+export declare const getElementShape: (element: ExcalidrawElement, elementsMap: ElementsMap) => GeometricShape;