@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-22b3927

package/dist/excalidraw/scene/export.js

@@ -1,8 +1,8 @@
 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_FILTER, } from "../constants";
+import { DEFAULT_EXPORT_PADDING, FONT_FAMILY, FRAME_STYLE, SVG_NS, THEME, THEME_FILTER, } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { serializeAsJSON } from "../data/json";
 import { getInitializedImageElements, updateImageCache, } from "../element/image";
@@ -10,6 +10,7 @@ import { getElementsOverlappingFrame, getFrameLikeElements, getFrameLikeTitle, g
 import { newTextElement } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { isFrameElement, isFrameLikeElement } from "../element/typeChecks";
+import { syncInvalidIndices } from "../fractionalIndex";
 import { renderStaticScene } from "../renderer/staticScene";
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 const truncateText = (element, maxWidth) => {
@@ -128,7 +129,7 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
         canvas,
         rc: rough.canvas(canvas),
         elementsMap: toBrandedType(arrayToMap(elementsForRender)),
-        allElementsMap: toBrandedType(arrayToMap(elements)),
+        allElementsMap: toBrandedType(arrayToMap(syncInvalidIndices(elements))),
         visibleElements: elementsForRender,
         scale,
         appState: {
@@ -139,7 +140,7 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
             scrollY: -minY + exportPadding,
             zoom: defaultAppState.zoom,
             shouldCacheIgnoreZoom: false,
-            theme: appState.exportWithDarkMode ? "dark" : "light",
+            theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
         },
         renderConfig: {
             canvasBackgroundColor: viewBackgroundColor,
@@ -199,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, ExcalidrawTextElement, 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,9 +56,11 @@ 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 = {

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/snapping.d.ts

@@ -1,7 +1,7 @@
-import { Bounds } from "./element/bounds";
-import { MaybeTransformHandleType } from "./element/transformHandles";
-import { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
-import { AppState, KeyboardModifiersObject, Point } from "./types";
+import type { Bounds } from "./element/bounds";
+import type { MaybeTransformHandleType } from "./element/transformHandles";
+import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
+import type { AppState, KeyboardModifiersObject, Point } from "./types";
 export declare const getSnapDistance: (zoomValue: number) => number;
 type Vector2D = {
     x: number;

package/dist/excalidraw/snapping.js

@@ -835,5 +835,6 @@ export const isActiveToolNonLinearSnappable = (activeToolType) => {
         activeToolType === TOOL_TYPE.diamond ||
         activeToolType === TOOL_TYPE.frame ||
         activeToolType === TOOL_TYPE.magicframe ||
-        activeToolType === TOOL_TYPE.image);
+        activeToolType === TOOL_TYPE.image ||
+        activeToolType === TOOL_TYPE.text);
 };

package/dist/excalidraw/store.d.ts

@@ -0,0 +1,129 @@
+import { AppStateChange, ElementsChange } from "./change";
+import type { OrderedExcalidrawElement } from "./element/types";
+import { Emitter } from "./emitter";
+import type { AppState, ObservedAppState } from "./types";
+import type { ValueOf } from "./utility-types";
+export declare const getObservedAppState: (appState: AppState) => ObservedAppState;
+export declare const StoreAction: {
+    /**
+     * Immediately undoable.
+     *
+     * Use for updates which should be captured.
+     * Should be used for most of the local updates.
+     *
+     * These updates will _immediately_ make it to the local undo / redo stacks.
+     */
+    readonly CAPTURE: "capture";
+    /**
+     * Never undoable.
+     *
+     * Use for updates which should never be recorded, such as remote updates
+     * or scene initialization.
+     *
+     * These updates will _never_ make it to the local undo / redo stacks.
+     */
+    readonly UPDATE: "update";
+    /**
+     * Eventually undoable.
+     *
+     * Use for updates which should not be captured immediately - likely
+     * exceptions which are part of some async multi-step process. Otherwise, all
+     * such updates would end up being captured with the next
+     * `StoreAction.CAPTURE` - triggered either by the next `updateScene`
+     * or internally by the editor.
+     *
+     * These updates will _eventually_ make it to the local undo / redo stacks.
+     */
+    readonly NONE: "none";
+};
+export type StoreActionType = ValueOf<typeof StoreAction>;
+/**
+ * Represent an increment to the Store.
+ */
+declare class StoreIncrementEvent {
+    readonly elementsChange: ElementsChange;
+    readonly appStateChange: AppStateChange;
+    constructor(elementsChange: ElementsChange, appStateChange: AppStateChange);
+}
+/**
+ * Store which captures the observed changes and emits them as `StoreIncrementEvent` events.
+ *
+ * @experimental this interface is experimental and subject to change.
+ */
+export interface IStore {
+    onStoreIncrementEmitter: Emitter<[StoreIncrementEvent]>;
+    get snapshot(): Snapshot;
+    set snapshot(snapshot: Snapshot);
+    /**
+     * Use to schedule update of the snapshot, useful on updates for which we don't need to calculate increments (i.e. remote updates).
+     */
+    shouldUpdateSnapshot(): void;
+    /**
+     * Use to schedule calculation of a store increment.
+     */
+    shouldCaptureIncrement(): void;
+    /**
+     * Based on the scheduled operation, either only updates store snapshot or also calculates increment and emits the result as a `StoreIncrementEvent`.
+     *
+     * @emits StoreIncrementEvent when increment is calculated.
+     */
+    commit(elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined): void;
+    /**
+     * Clears the store instance.
+     */
+    clear(): void;
+    /**
+     * Filters out yet uncomitted elements from `nextElements`, which are part of in-progress local async actions (ephemerals) and thus were not yet commited to the snapshot.
+     *
+     * This is necessary in updates in which we receive reconciled elements, already containing elements which were not yet captured by the local store (i.e. collab).
+     */
+    filterUncomittedElements(prevElements: Map<string, OrderedExcalidrawElement>, nextElements: Map<string, OrderedExcalidrawElement>): Map<string, OrderedExcalidrawElement>;
+}
+export declare class Store implements IStore {
+    readonly onStoreIncrementEmitter: Emitter<[StoreIncrementEvent]>;
+    private scheduledActions;
+    private _snapshot;
+    get snapshot(): Snapshot;
+    set snapshot(snapshot: Snapshot);
+    shouldCaptureIncrement: () => void;
+    shouldUpdateSnapshot: () => void;
+    private scheduleAction;
+    commit: (elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined) => void;
+    captureIncrement: (elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined) => void;
+    updateSnapshot: (elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined) => void;
+    filterUncomittedElements: (prevElements: Map<string, OrderedExcalidrawElement>, nextElements: Map<string, OrderedExcalidrawElement>) => Map<string, OrderedExcalidrawElement>;
+    clear: () => void;
+    private satisfiesScheduledActionsInvariant;
+}
+export declare class Snapshot {
+    readonly elements: Map<string, OrderedExcalidrawElement>;
+    readonly appState: ObservedAppState;
+    readonly meta: {
+        didElementsChange: boolean;
+        didAppStateChange: boolean;
+        isEmpty?: boolean;
+    };
+    private constructor();
+    static empty(): Snapshot;
+    isEmpty(): boolean | undefined;
+    /**
+     * Efficiently clone the existing snapshot, only if we detected changes.
+     *
+     * @returns same instance if there are no changes detected, new instance otherwise.
+     */
+    maybeClone(elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined): Snapshot;
+    private maybeCreateAppStateSnapshot;
+    private detectChangedAppState;
+    private maybeCreateElementsSnapshot;
+    /**
+     * Detect if there any changed elements.
+     *
+     * NOTE: we shouldn't just use `sceneVersionNonce` instead, as we need to call this before the scene updates.
+     */
+    private detectChangedElements;
+    /**
+     * Perform structural clone, cloning only elements that changed.
+     */
+    private createElementsSnapshot;
+}
+export {};

package/dist/excalidraw/store.js

@@ -0,0 +1,296 @@
+import { getDefaultAppState } from "./appState";
+import { AppStateChange, ElementsChange } from "./change";
+import { ENV } from "./constants";
+import { newElementWith } from "./element/mutateElement";
+import { deepCopyElement } from "./element/newElement";
+import { Emitter } from "./emitter";
+import { isShallowEqual } from "./utils";
+// hidden non-enumerable property for runtime checks
+const hiddenObservedAppStateProp = "__observedAppState";
+export const getObservedAppState = (appState) => {
+    const observedAppState = {
+        name: appState.name,
+        editingGroupId: appState.editingGroupId,
+        viewBackgroundColor: appState.viewBackgroundColor,
+        selectedElementIds: appState.selectedElementIds,
+        selectedGroupIds: appState.selectedGroupIds,
+        editingLinearElementId: appState.editingLinearElement?.elementId || null,
+        selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
+    };
+    Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
+        value: true,
+        enumerable: false,
+    });
+    return observedAppState;
+};
+const isObservedAppState = (appState) => !!Reflect.get(appState, hiddenObservedAppStateProp);
+export const StoreAction = {
+    /**
+     * Immediately undoable.
+     *
+     * Use for updates which should be captured.
+     * Should be used for most of the local updates.
+     *
+     * These updates will _immediately_ make it to the local undo / redo stacks.
+     */
+    CAPTURE: "capture",
+    /**
+     * Never undoable.
+     *
+     * Use for updates which should never be recorded, such as remote updates
+     * or scene initialization.
+     *
+     * These updates will _never_ make it to the local undo / redo stacks.
+     */
+    UPDATE: "update",
+    /**
+     * Eventually undoable.
+     *
+     * Use for updates which should not be captured immediately - likely
+     * exceptions which are part of some async multi-step process. Otherwise, all
+     * such updates would end up being captured with the next
+     * `StoreAction.CAPTURE` - triggered either by the next `updateScene`
+     * or internally by the editor.
+     *
+     * These updates will _eventually_ make it to the local undo / redo stacks.
+     */
+    NONE: "none",
+};
+/**
+ * Represent an increment to the Store.
+ */
+class StoreIncrementEvent {
+    elementsChange;
+    appStateChange;
+    constructor(elementsChange, appStateChange) {
+        this.elementsChange = elementsChange;
+        this.appStateChange = appStateChange;
+    }
+}
+export class Store {
+    onStoreIncrementEmitter = new Emitter();
+    scheduledActions = new Set();
+    _snapshot = Snapshot.empty();
+    get snapshot() {
+        return this._snapshot;
+    }
+    set snapshot(snapshot) {
+        this._snapshot = snapshot;
+    }
+    // TODO: Suspicious that this is called so many places. Seems error-prone.
+    shouldCaptureIncrement = () => {
+        this.scheduleAction(StoreAction.CAPTURE);
+    };
+    shouldUpdateSnapshot = () => {
+        this.scheduleAction(StoreAction.UPDATE);
+    };
+    scheduleAction = (action) => {
+        this.scheduledActions.add(action);
+        this.satisfiesScheduledActionsInvariant();
+    };
+    commit = (elements, appState) => {
+        try {
+            // Capture has precedence since it also performs update
+            if (this.scheduledActions.has(StoreAction.CAPTURE)) {
+                this.captureIncrement(elements, appState);
+            }
+            else if (this.scheduledActions.has(StoreAction.UPDATE)) {
+                this.updateSnapshot(elements, appState);
+            }
+        }
+        finally {
+            this.satisfiesScheduledActionsInvariant();
+            // Defensively reset all scheduled actions, potentially cleans up other runtime garbage
+            this.scheduledActions = new Set();
+        }
+    };
+    captureIncrement = (elements, appState) => {
+        const prevSnapshot = this.snapshot;
+        const nextSnapshot = this.snapshot.maybeClone(elements, appState);
+        // Optimisation, don't continue if nothing has changed
+        if (prevSnapshot !== nextSnapshot) {
+            // Calculate and record the changes based on the previous and next snapshot
+            const elementsChange = nextSnapshot.meta.didElementsChange
+                ? ElementsChange.calculate(prevSnapshot.elements, nextSnapshot.elements)
+                : ElementsChange.empty();
+            const appStateChange = nextSnapshot.meta.didAppStateChange
+                ? AppStateChange.calculate(prevSnapshot.appState, nextSnapshot.appState)
+                : AppStateChange.empty();
+            if (!elementsChange.isEmpty() || !appStateChange.isEmpty()) {
+                // Notify listeners with the increment
+                this.onStoreIncrementEmitter.trigger(new StoreIncrementEvent(elementsChange, appStateChange));
+            }
+            // Update snapshot
+            this.snapshot = nextSnapshot;
+        }
+    };
+    updateSnapshot = (elements, appState) => {
+        const nextSnapshot = this.snapshot.maybeClone(elements, appState);
+        if (this.snapshot !== nextSnapshot) {
+            // Update snapshot
+            this.snapshot = nextSnapshot;
+        }
+    };
+    filterUncomittedElements = (prevElements, nextElements) => {
+        for (const [id, prevElement] of prevElements.entries()) {
+            const nextElement = nextElements.get(id);
+            if (!nextElement) {
+                // Nothing to care about here, elements were forcefully deleted
+                continue;
+            }
+            const elementSnapshot = this.snapshot.elements.get(id);
+            // Checks for in progress async user action
+            if (!elementSnapshot) {
+                // Detected yet uncomitted local element
+                nextElements.delete(id);
+            }
+            else if (elementSnapshot.version < prevElement.version) {
+                // Element was already commited, but the snapshot version is lower than current current local version
+                nextElements.set(id, elementSnapshot);
+            }
+        }
+        return nextElements;
+    };
+    clear = () => {
+        this.snapshot = Snapshot.empty();
+        this.scheduledActions = new Set();
+    };
+    satisfiesScheduledActionsInvariant = () => {
+        if (!(this.scheduledActions.size >= 0 && this.scheduledActions.size <= 3)) {
+            const message = `There can be at most three store actions scheduled at the same time, but there are "${this.scheduledActions.size}".`;
+            console.error(message, this.scheduledActions.values());
+            if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+                throw new Error(message);
+            }
+        }
+    };
+}
+export class Snapshot {
+    elements;
+    appState;
+    meta;
+    constructor(elements, appState, meta = {
+        didElementsChange: false,
+        didAppStateChange: false,
+        isEmpty: false,
+    }) {
+        this.elements = elements;
+        this.appState = appState;
+        this.meta = meta;
+    }
+    static empty() {
+        return new Snapshot(new Map(), getObservedAppState(getDefaultAppState()), { didElementsChange: false, didAppStateChange: false, isEmpty: true });
+    }
+    isEmpty() {
+        return this.meta.isEmpty;
+    }
+    /**
+     * Efficiently clone the existing snapshot, only if we detected changes.
+     *
+     * @returns same instance if there are no changes detected, new instance otherwise.
+     */
+    maybeClone(elements, appState) {
+        const nextElementsSnapshot = this.maybeCreateElementsSnapshot(elements);
+        const nextAppStateSnapshot = this.maybeCreateAppStateSnapshot(appState);
+        let didElementsChange = false;
+        let didAppStateChange = false;
+        if (this.elements !== nextElementsSnapshot) {
+            didElementsChange = true;
+        }
+        if (this.appState !== nextAppStateSnapshot) {
+            didAppStateChange = true;
+        }
+        if (!didElementsChange && !didAppStateChange) {
+            return this;
+        }
+        const snapshot = new Snapshot(nextElementsSnapshot, nextAppStateSnapshot, {
+            didElementsChange,
+            didAppStateChange,
+        });
+        return snapshot;
+    }
+    maybeCreateAppStateSnapshot(appState) {
+        if (!appState) {
+            return this.appState;
+        }
+        // Not watching over everything from the app state, just the relevant props
+        const nextAppStateSnapshot = !isObservedAppState(appState)
+            ? getObservedAppState(appState)
+            : appState;
+        const didAppStateChange = this.detectChangedAppState(nextAppStateSnapshot);
+        if (!didAppStateChange) {
+            return this.appState;
+        }
+        return nextAppStateSnapshot;
+    }
+    detectChangedAppState(nextObservedAppState) {
+        return !isShallowEqual(this.appState, nextObservedAppState, {
+            selectedElementIds: isShallowEqual,
+            selectedGroupIds: isShallowEqual,
+        });
+    }
+    maybeCreateElementsSnapshot(elements) {
+        if (!elements) {
+            return this.elements;
+        }
+        const didElementsChange = this.detectChangedElements(elements);
+        if (!didElementsChange) {
+            return this.elements;
+        }
+        const elementsSnapshot = this.createElementsSnapshot(elements);
+        return elementsSnapshot;
+    }
+    /**
+     * Detect if there any changed elements.
+     *
+     * NOTE: we shouldn't just use `sceneVersionNonce` instead, as we need to call this before the scene updates.
+     */
+    detectChangedElements(nextElements) {
+        if (this.elements === nextElements) {
+            return false;
+        }
+        if (this.elements.size !== nextElements.size) {
+            return true;
+        }
+        // loop from right to left as changes are likelier to happen on new elements
+        const keys = Array.from(nextElements.keys());
+        for (let i = keys.length - 1; i >= 0; i--) {
+            const prev = this.elements.get(keys[i]);
+            const next = nextElements.get(keys[i]);
+            if (!prev ||
+                !next ||
+                prev.id !== next.id ||
+                prev.versionNonce !== next.versionNonce) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Perform structural clone, cloning only elements that changed.
+     */
+    createElementsSnapshot(nextElements) {
+        const clonedElements = new Map();
+        for (const [id, prevElement] of this.elements.entries()) {
+            // Clone previous elements, never delete, in case nextElements would be just a subset of previous elements
+            // i.e. during collab, persist or whenenever isDeleted elements get cleared
+            if (!nextElements.get(id)) {
+                // When we cannot find the prev element in the next elements, we mark it as deleted
+                clonedElements.set(id, newElementWith(prevElement, { isDeleted: true }));
+            }
+            else {
+                clonedElements.set(id, prevElement);
+            }
+        }
+        for (const [id, nextElement] of nextElements.entries()) {
+            const prevElement = clonedElements.get(id);
+            // At this point our elements are reconcilled already, meaning the next element is always newer
+            if (!prevElement || // element was added
+                (prevElement && prevElement.versionNonce !== nextElement.versionNonce) // element was updated
+            ) {
+                clonedElements.set(id, deepCopyElement(nextElement));
+            }
+        }
+        return clonedElements;
+    }
+}

package/dist/excalidraw/types.d.ts

@@ -1,23 +1,24 @@
-import React from "react";
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement } from "./element/types";
-import { Action } from "./actions/types";
-import { Point as RoughPoint } from "roughjs/bin/geometry";
-import { LinearElementEditor } from "./element/linearElementEditor";
-import { SuggestedBinding } from "./element/binding";
-import { ImportedDataState } from "./data/types";
+import type React from "react";
+import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement } from "./element/types";
+import type { Action } from "./actions/types";
+import type { Point as RoughPoint } from "roughjs/bin/geometry";
+import type { LinearElementEditor } from "./element/linearElementEditor";
+import type { SuggestedBinding } from "./element/binding";
+import type { ImportedDataState } from "./data/types";
 import type App from "./components/App";
 import type { throttleRAF } from "./utils";
-import { Spreadsheet } from "./charts";
-import { Language } from "./i18n";
-import { ClipboardData } from "./clipboard";
-import { isOverScrollBars } from "./scene/scrollbars";
-import { MaybeTransformHandleType } from "./element/transformHandles";
-import Library from "./data/library";
+import type { Spreadsheet } from "./charts";
+import type { Language } from "./i18n";
+import type { ClipboardData } from "./clipboard";
+import type { isOverScrollBars } from "./scene/scrollbars";
+import type { MaybeTransformHandleType } from "./element/transformHandles";
+import type Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
-import { ContextMenuItems } from "./components/ContextMenu";
-import { SnapLine } from "./snapping";
-import { Merge, MaybePromise, ValueOf } from "./utility-types";
+import type { ContextMenuItems } from "./components/ContextMenu";
+import type { SnapLine } from "./snapping";
+import type { Merge, MaybePromise, ValueOf } from "./utility-types";
+import type { StoreActionType } from "./store";
 export type Point = Readonly<RoughPoint>;
 export type SocketId = string & {
     _brand: "SocketId";
@@ -133,7 +134,20 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     collaborators: AppState["collaborators"];
     snapLines: AppState["snapLines"];
     zenModeEnabled: AppState["zenModeEnabled"];
+    editingElement: AppState["editingElement"];
 }>;
+export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
+export type ObservedStandaloneAppState = {
+    name: AppState["name"];
+    viewBackgroundColor: AppState["viewBackgroundColor"];
+};
+export type ObservedElementsAppState = {
+    editingGroupId: AppState["editingGroupId"];
+    selectedElementIds: AppState["selectedElementIds"];
+    selectedGroupIds: AppState["selectedGroupIds"];
+    editingLinearElementId: LinearElementEditor["elementId"] | null;
+    selectedLinearElementId: LinearElementEditor["elementId"] | null;
+};
 export interface AppState {
     contextMenu: {
         items: ContextMenuItems;
@@ -331,7 +345,7 @@ export type OnUserFollowedPayload = {
     action: "FOLLOW" | "UNFOLLOW";
 };
 export interface ExcalidrawProps {
-    onChange?: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
+    onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
     initialData?: MaybePromise<ExcalidrawInitialDataState | null>;
     excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
     isCollaborating?: boolean;
@@ -377,7 +391,7 @@ export type SceneData = {
     elements?: ImportedDataState["elements"];
     appState?: ImportedDataState["appState"];
     collaborators?: Map<SocketId, Collaborator>;
-    commitToHistory?: boolean;
+    storeAction?: StoreActionType;
 };
 export declare enum UserIdleState {
     ACTIVE = "active",
@@ -449,6 +463,7 @@ export type AppClassProperties = {
     setOpenDialog: App["setOpenDialog"];
     insertEmbeddableElement: App["insertEmbeddableElement"];
     onMagicframeToolSelect: App["onMagicframeToolSelect"];
+    getElementShape: App["getElementShape"];
     getName: App["getName"];
 };
 export type PointerDownState = Readonly<{
@@ -550,7 +565,7 @@ export type Device = Readonly<{
     };
     isTouchScreen: boolean;
 }>;
-type FrameNameBounds = {
+export type FrameNameBounds = {
     x: number;
     y: number;
     width: number;