@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-1ed53b1

package/dist/excalidraw/store.js

@@ -0,0 +1,269 @@
+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 = {
+    CAPTURE: "capture",
+    UPDATE: "update",
+    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";
@@ -134,6 +135,18 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     snapLines: AppState["snapLines"];
     zenModeEnabled: AppState["zenModeEnabled"];
 }>;
+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 +344,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 +390,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 +462,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 +564,7 @@ export type Device = Readonly<{
     };
     isTouchScreen: boolean;
 }>;
-type FrameNameBounds = {
+export type FrameNameBounds = {
     x: number;
     y: number;
     width: number;

package/dist/excalidraw/utils.d.ts

@@ -1,7 +1,7 @@
-import { EVENT } from "./constants";
-import { FontFamilyValues, FontString } from "./element/types";
-import { ActiveTool, AppState, ToolType, UnsubscribeCallback, Zoom } from "./types";
-import { MaybePromise } from "./utility-types";
+import type { EVENT } from "./constants";
+import type { FontFamilyValues, FontString } from "./element/types";
+import type { ActiveTool, AppState, ToolType, UnsubscribeCallback, Zoom } from "./types";
+import type { MaybePromise } from "./utility-types";
 export declare const setDateTimeForTests: (dateTime: string) => void;
 export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
@@ -160,7 +160,14 @@ export declare const arrayToMap: <T extends string | {
 export declare const arrayToMapWithIndex: <T extends {
     id: string;
 }>(elements: readonly T[]) => Map<string, [element: T, index: number]>;
+/**
+ * Transform array into an object, use only when array order is irrelevant.
+ */
+export declare const arrayToObject: <T>(array: readonly T[], groupBy?: ((value: T) => string) | undefined) => {
+    [key: string]: T;
+};
 export declare const isTestEnv: () => boolean;
+export declare const isDevEnv: () => boolean;
 export declare const wrapEvent: <T extends Event>(name: EVENT, nativeEvent: T) => CustomEvent<{
     nativeEvent: T;
 }>;

package/dist/excalidraw/utils.js

@@ -445,7 +445,15 @@ export const arrayToMapWithIndex = (elements) => elements.reduce((acc, element,
     acc.set(element.id, [element, idx]);
     return acc;
 }, new Map());
+/**
+ * Transform array into an object, use only when array order is irrelevant.
+ */
+export const arrayToObject = (array, groupBy) => array.reduce((acc, value) => {
+    acc[groupBy ? groupBy(value) : String(value)] = value;
+    return acc;
+}, {});
 export const isTestEnv = () => import.meta.env.MODE === "test";
+export const isDevEnv = () => import.meta.env.MODE === "development";
 export const wrapEvent = (name, nativeEvent) => {
     return new CustomEvent(name, {
         detail: {

package/dist/excalidraw/zindex.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement } from "./element/types";
-import { AppState } from "./types";
-export declare const moveOneLeft: (allElements: readonly ExcalidrawElement[], appState: AppState) => ExcalidrawElement[];
-export declare const moveOneRight: (allElements: readonly ExcalidrawElement[], appState: AppState) => ExcalidrawElement[];
+import type { ExcalidrawElement } from "./element/types";
+import type { AppState } from "./types";
+export declare const moveOneLeft: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[];
+export declare const moveOneRight: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[];
 export declare const moveAllLeft: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[] | ExcalidrawElement[];
 export declare const moveAllRight: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[] | ExcalidrawElement[];

package/dist/excalidraw/zindex.js

@@ -1,5 +1,5 @@
-import { bumpVersion } from "./element/mutateElement";
 import { isFrameLikeElement } from "./element/typeChecks";
+import { syncMovedIndices } from "./fractionalIndex";
 import { getElementsInGroup } from "./groups";
 import { getSelectedElements } from "./scene";
 import Scene from "./scene/Scene";
@@ -173,9 +173,9 @@ containingFrame) => {
 const getTargetElementsMap = (elements, indices) => {
     return indices.reduce((acc, index) => {
         const element = elements[index];
-        acc[element.id] = element;
+        acc.set(element.id, element);
         return acc;
-    }, {});
+    }, new Map());
 };
 const shiftElementsByOne = (elements, appState, direction) => {
     const indicesToMove = getIndicesToMove(elements, appState);
@@ -226,12 +226,8 @@ const shiftElementsByOne = (elements, appState, direction) => {
                     ...trailingElements,
                 ];
     });
-    return elements.map((element) => {
-        if (targetElementsMap[element.id]) {
-            return bumpVersion(element);
-        }
-        return element;
-    });
+    syncMovedIndices(elements, targetElementsMap);
+    return elements;
 };
 const shiftElementsToEnd = (elements, appState, direction, containingFrame, elementsToBeMoved) => {
     const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
@@ -279,12 +275,10 @@ const shiftElementsToEnd = (elements, appState, direction, containingFrame, elem
             displacedElements.push(elements[index]);
         }
     }
-    const targetElements = Object.values(targetElementsMap).map((element) => {
-        return bumpVersion(element);
-    });
+    const targetElements = Array.from(targetElementsMap.values());
     const leadingElements = elements.slice(0, leadingIndex);
     const trailingElements = elements.slice(trailingIndex + 1);
-    return direction === "left"
+    const nextElements = direction === "left"
         ? [
             ...leadingElements,
             ...targetElements,
@@ -297,6 +291,8 @@ const shiftElementsToEnd = (elements, appState, direction, containingFrame, elem
             ...targetElements,
             ...trailingElements,
         ];
+    syncMovedIndices(nextElements, targetElementsMap);
+    return nextElements;
 };
 function shiftElementsAccountingForFrames(allElements, appState, direction, shiftFunction) {
     const elementsToMove = arrayToMap(getSelectedElements(allElements, appState, {

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

@@ -87,7 +87,7 @@
     "group": "Group selection",
     "ungroup": "Ungroup selection",
     "collaborators": "Collaborators",
-    "showGrid": "Show grid",
+    "toggleGrid": "Toggle grid",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
     "libraryLoadingMessage": "Loading library…",
@@ -110,6 +110,7 @@
     "showStroke": "Show stroke color picker",
     "showBackground": "Show background color picker",
     "toggleTheme": "Toggle light/dark theme",
+    "theme": "Theme",
     "personalLib": "Personal Library",
     "excalidrawLib": "Excalidraw Library",
     "decreaseFontSize": "Decrease font size",
@@ -128,7 +129,7 @@
     },
     "lineEditor": {
       "edit": "Edit line",
-      "exit": "Exit line editor"
+      "editArrow": "Edit arrow"
     },
     "elementLock": {
       "lock": "Lock",
@@ -180,6 +181,7 @@
     "fullScreen": "Full screen",
     "darkMode": "Dark mode",
     "lightMode": "Light mode",
+    "systemMode": "System mode",
     "zenMode": "Zen mode",
     "objectsSnapMode": "Snap to objects",
     "exitZenMode": "Exit zen mode",
@@ -560,6 +562,6 @@
       "noMatch": "No matching commands..."
     },
     "itemNotAvailable": "Command is not available...",
-    "shortcutHint": "For Command palette, use {{shortcutOne}} or {{shortcutTwo}}"
+    "shortcutHint": "For Command palette, use {{shortcut}}"
   }
 }