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

package/dist/excalidraw/history.js

@@ -1,190 +1,123 @@
-import { isLinearElement } from "./element/typeChecks";
-import { deepCopyElement } from "./element/newElement";
-const clearAppStatePropertiesForHistory = (appState) => {
-    return {
-        selectedElementIds: appState.selectedElementIds,
-        selectedGroupIds: appState.selectedGroupIds,
-        viewBackgroundColor: appState.viewBackgroundColor,
-        editingLinearElement: appState.editingLinearElement,
-        editingGroupId: appState.editingGroupId,
-        name: appState.name,
-    };
-};
-class History {
-    elementCache = new Map();
-    recording = true;
-    stateHistory = [];
+import { Emitter } from "./emitter";
+export class HistoryChangedEvent {
+    isUndoStackEmpty;
+    isRedoStackEmpty;
+    constructor(isUndoStackEmpty = true, isRedoStackEmpty = true) {
+        this.isUndoStackEmpty = isUndoStackEmpty;
+        this.isRedoStackEmpty = isRedoStackEmpty;
+    }
+}
+export class History {
+    onHistoryChangedEmitter = new Emitter();
+    undoStack = [];
     redoStack = [];
-    lastEntry = null;
-    hydrateHistoryEntry({ appState, elements, }) {
-        return {
-            appState: JSON.parse(appState),
-            elements: elements.map((dehydratedExcalidrawElement) => {
-                const element = this.elementCache
-                    .get(dehydratedExcalidrawElement.id)
-                    ?.get(dehydratedExcalidrawElement.versionNonce);
-                if (!element) {
-                    throw new Error(`Element not found: ${dehydratedExcalidrawElement.id}:${dehydratedExcalidrawElement.versionNonce}`);
-                }
-                return element;
-            }),
-        };
-    }
-    dehydrateHistoryEntry({ appState, elements, }) {
-        return {
-            appState: JSON.stringify(appState),
-            elements: elements.map((element) => {
-                if (!this.elementCache.has(element.id)) {
-                    this.elementCache.set(element.id, new Map());
-                }
-                const versions = this.elementCache.get(element.id);
-                if (!versions.has(element.versionNonce)) {
-                    versions.set(element.versionNonce, deepCopyElement(element));
-                }
-                return {
-                    id: element.id,
-                    versionNonce: element.versionNonce,
-                };
-            }),
-        };
-    }
-    getSnapshotForTest() {
-        return {
-            recording: this.recording,
-            stateHistory: this.stateHistory.map((dehydratedHistoryEntry) => this.hydrateHistoryEntry(dehydratedHistoryEntry)),
-            redoStack: this.redoStack.map((dehydratedHistoryEntry) => this.hydrateHistoryEntry(dehydratedHistoryEntry)),
-        };
+    get isUndoStackEmpty() {
+        return this.undoStack.length === 0;
+    }
+    get isRedoStackEmpty() {
+        return this.redoStack.length === 0;
     }
     clear() {
-        this.stateHistory.length = 0;
+        this.undoStack.length = 0;
         this.redoStack.length = 0;
-        this.lastEntry = null;
-        this.elementCache.clear();
-    }
-    generateEntry = (appState, elements) => this.dehydrateHistoryEntry({
-        appState: clearAppStatePropertiesForHistory(appState),
-        elements: elements.reduce((elements, element) => {
-            if (isLinearElement(element) &&
-                appState.multiElement &&
-                appState.multiElement.id === element.id) {
-                // don't store multi-point arrow if still has only one point
-                if (appState.multiElement &&
-                    appState.multiElement.id === element.id &&
-                    element.points.length < 2) {
-                    return elements;
-                }
-                elements.push({
-                    ...element,
-                    // don't store last point if not committed
-                    points: element.lastCommittedPoint !==
-                        element.points[element.points.length - 1]
-                        ? element.points.slice(0, -1)
-                        : element.points,
-                });
-            }
-            else {
-                elements.push(element);
+    }
+    /**
+     * Record a local change which will go into the history
+     */
+    record(elementsChange, appStateChange) {
+        const entry = HistoryEntry.create(appStateChange, elementsChange);
+        if (!entry.isEmpty()) {
+            // we have the latest changes, no need to `applyLatest`, which is done within `History.push`
+            this.undoStack.push(entry.inverse());
+            if (!entry.elementsChange.isEmpty()) {
+                // don't reset redo stack on local appState changes,
+                // as a simple click (unselect) could lead to losing all the redo entries
+                // only reset on non empty elements changes!
+                this.redoStack.length = 0;
             }
-            return elements;
-        }, []),
-    });
-    shouldCreateEntry(nextEntry) {
-        const { lastEntry } = this;
-        if (!lastEntry) {
-            return true;
-        }
-        if (nextEntry.elements.length !== lastEntry.elements.length) {
-            return true;
+            this.onHistoryChangedEmitter.trigger(new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty));
         }
-        // loop from right to left as changes are likelier to happen on new elements
-        for (let i = nextEntry.elements.length - 1; i > -1; i--) {
-            const prev = nextEntry.elements[i];
-            const next = lastEntry.elements[i];
-            if (!prev ||
-                !next ||
-                prev.id !== next.id ||
-                prev.versionNonce !== next.versionNonce) {
-                return true;
+    }
+    undo(elements, appState, snapshot) {
+        return this.perform(elements, appState, snapshot, () => History.pop(this.undoStack), (entry) => History.push(this.redoStack, entry, elements));
+    }
+    redo(elements, appState, snapshot) {
+        return this.perform(elements, appState, snapshot, () => History.pop(this.redoStack), (entry) => History.push(this.undoStack, entry, elements));
+    }
+    perform(elements, appState, snapshot, pop, push) {
+        try {
+            let historyEntry = pop();
+            if (historyEntry === null) {
+                return;
             }
-        }
-        // note: this is safe because entry's appState is guaranteed no excess props
-        let key;
-        for (key in nextEntry.appState) {
-            if (key === "editingLinearElement") {
-                if (nextEntry.appState[key]?.elementId ===
-                    lastEntry.appState[key]?.elementId) {
-                    continue;
+            let nextElements = elements;
+            let nextAppState = appState;
+            let containsVisibleChange = false;
+            // iterate through the history entries in case they result in no visible changes
+            while (historyEntry) {
+                try {
+                    [nextElements, nextAppState, containsVisibleChange] =
+                        historyEntry.applyTo(nextElements, nextAppState, snapshot);
                 }
+                finally {
+                    // make sure to always push / pop, even if the increment is corrupted
+                    push(historyEntry);
+                }
+                if (containsVisibleChange) {
+                    break;
+                }
+                historyEntry = pop();
             }
-            if (key === "selectedElementIds" || key === "selectedGroupIds") {
-                continue;
-            }
-            if (nextEntry.appState[key] !== lastEntry.appState[key]) {
-                return true;
-            }
+            return [nextElements, nextAppState];
         }
-        return false;
-    }
-    pushEntry(appState, elements) {
-        const newEntryDehydrated = this.generateEntry(appState, elements);
-        const newEntry = this.hydrateHistoryEntry(newEntryDehydrated);
-        if (newEntry) {
-            if (!this.shouldCreateEntry(newEntry)) {
-                return;
-            }
-            this.stateHistory.push(newEntryDehydrated);
-            this.lastEntry = newEntry;
-            // As a new entry was pushed, we invalidate the redo stack
-            this.clearRedoStack();
+        finally {
+            // trigger the history change event before returning completely
+            // also trigger it just once, no need doing so on each entry
+            this.onHistoryChangedEmitter.trigger(new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty));
         }
     }
-    clearRedoStack() {
-        this.redoStack.splice(0, this.redoStack.length);
-    }
-    redoOnce() {
-        if (this.redoStack.length === 0) {
+    static pop(stack) {
+        if (!stack.length) {
             return null;
         }
-        const entryToRestore = this.redoStack.pop();
-        if (entryToRestore !== undefined) {
-            this.stateHistory.push(entryToRestore);
-            return this.hydrateHistoryEntry(entryToRestore);
+        const entry = stack.pop();
+        if (entry !== undefined) {
+            return entry;
         }
         return null;
     }
-    undoOnce() {
-        if (this.stateHistory.length === 1) {
-            return null;
-        }
-        const currentEntry = this.stateHistory.pop();
-        const entryToRestore = this.stateHistory[this.stateHistory.length - 1];
-        if (currentEntry !== undefined) {
-            this.redoStack.push(currentEntry);
-            return this.hydrateHistoryEntry(entryToRestore);
-        }
-        return null;
+    static push(stack, entry, prevElements) {
+        const updatedEntry = entry.inverse().applyLatestChanges(prevElements);
+        return stack.push(updatedEntry);
+    }
+}
+export class HistoryEntry {
+    appStateChange;
+    elementsChange;
+    constructor(appStateChange, elementsChange) {
+        this.appStateChange = appStateChange;
+        this.elementsChange = elementsChange;
+    }
+    static create(appStateChange, elementsChange) {
+        return new HistoryEntry(appStateChange, elementsChange);
+    }
+    inverse() {
+        return new HistoryEntry(this.appStateChange.inverse(), this.elementsChange.inverse());
+    }
+    applyTo(elements, appState, snapshot) {
+        const [nextElements, elementsContainVisibleChange] = this.elementsChange.applyTo(elements, snapshot.elements);
+        const [nextAppState, appStateContainsVisibleChange] = this.appStateChange.applyTo(appState, nextElements);
+        const appliedVisibleChanges = elementsContainVisibleChange || appStateContainsVisibleChange;
+        return [nextElements, nextAppState, appliedVisibleChanges];
     }
     /**
-     * Updates history's `lastEntry` to latest app state. This is necessary
-     *  when doing undo/redo which itself doesn't commit to history, but updates
-     *  app state in a way that would break `shouldCreateEntry` which relies on
-     *  `lastEntry` to reflect last comittable history state.
-     * We can't update `lastEntry` from within history when calling undo/redo
-     *  because the action potentially mutates appState/elements before storing
-     *  it.
+     * Apply latest (remote) changes to the history entry, creates new instance of `HistoryEntry`.
      */
-    setCurrentState(appState, elements) {
-        this.lastEntry = this.hydrateHistoryEntry(this.generateEntry(appState, elements));
+    applyLatestChanges(elements) {
+        const updatedElementsChange = this.elementsChange.applyLatestChanges(elements);
+        return HistoryEntry.create(this.appStateChange, updatedElementsChange);
     }
-    // Suspicious that this is called so many places. Seems error-prone.
-    resumeRecording() {
-        this.recording = true;
-    }
-    record(state, elements) {
-        if (this.recording) {
-            this.pushEntry(state, elements);
-            this.recording = false;
-        }
+    isEmpty() {
+        return this.appStateChange.isEmpty() && this.elementsChange.isEmpty();
     }
 }
-export default History;

package/dist/excalidraw/hooks/useCreatePortalContainer.js

@@ -1,5 +1,6 @@
 import { useState, useLayoutEffect } from "react";
 import { useDevice, useExcalidrawContainer } from "../components/App";
+import { THEME } from "../constants";
 import { useUIAppState } from "../context/ui-appState";
 export const useCreatePortalContainer = (opts) => {
     const [div, setDiv] = useState(null);
@@ -11,7 +12,7 @@ export const useCreatePortalContainer = (opts) => {
             div.className = "";
             div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
             div.classList.toggle("excalidraw--mobile", device.editor.isMobile);
-            div.classList.toggle("theme--dark", theme === "dark");
+            div.classList.toggle("theme--dark", theme === THEME.DARK);
         }
     }, [div, theme, device.editor.isMobile, opts?.className]);
     useLayoutEffect(() => {

package/dist/excalidraw/hooks/useEmitter.d.ts

@@ -0,0 +1,2 @@
+import type { Emitter } from "../emitter";
+export declare const useEmitter: <TEvent extends unknown>(emitter: Emitter<[TEvent]>, initialState: TEvent) => TEvent;

package/dist/excalidraw/hooks/useEmitter.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+export const useEmitter = (emitter, initialState) => {
+    const [event, setEvent] = useState(initialState);
+    useEffect(() => {
+        const unsubscribe = emitter.on((event) => {
+            setEvent(event);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [emitter]);
+    return event;
+};

package/dist/excalidraw/hooks/useLibraryItemSvg.d.ts

@@ -1,4 +1,4 @@
-import { LibraryItem } from "../types";
+import type { LibraryItem } from "../types";
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
 export declare const libraryItemSvgsCache: import("jotai").PrimitiveAtom<SvgCache> & {
     init: SvgCache;

package/dist/excalidraw/i18n.d.ts

@@ -1,5 +1,5 @@
 import fallbackLangData from "./locales/en.json";
-import { NestedKeyOf } from "./utility-types";
+import type { NestedKeyOf } from "./utility-types";
 export interface Language {
     code: string;
     label: string;

package/dist/excalidraw/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import "./css/app.scss";
 import "./css/styles.scss";
 import "../../public/fonts/fonts.css";
-import { ExcalidrawProps } from "./types";
+import type { ExcalidrawProps } from "./types";
 import Footer from "./components/footer/FooterCenter";
 import MainMenu from "./components/main-menu/MainMenu";
 import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
@@ -11,6 +11,7 @@ export declare const Excalidraw: React.MemoExoticComponent<(props: ExcalidrawPro
 export { getSceneVersion, hashElementsVersion, hashString, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
+export { reconcileElements } from "./data/reconcile";
 export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/export";
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "./data/blob";
@@ -19,6 +20,7 @@ export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "./element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS, DEFAULT_LASER_COLOR, } from "./constants";
 export { mutateElement, newElementWith, bumpVersion, } from "./element/mutateElement";
+export { StoreAction } from "./store";
 export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "./utils";
 export { Sidebar } from "./components/Sidebar/Sidebar";

package/dist/excalidraw/index.js

@@ -98,6 +98,7 @@ Excalidraw.displayName = "Excalidraw";
 export { getSceneVersion, hashElementsVersion, hashString, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
+export { reconcileElements } from "./data/reconcile";
 export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/export";
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "./data/blob";
@@ -106,6 +107,7 @@ export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "./element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS, DEFAULT_LASER_COLOR, } from "./constants";
 export { mutateElement, newElementWith, bumpVersion, } from "./element/mutateElement";
+export { StoreAction } from "./store";
 export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "./utils";
 export { Sidebar } from "./components/Sidebar/Sidebar";

package/dist/excalidraw/jotai.d.ts

@@ -1,4 +1,4 @@
-import { PrimitiveAtom } from "jotai";
+import type { PrimitiveAtom } from "jotai";
 export declare const jotaiScope: unique symbol;
 export declare const jotaiStore: {
     get: <Value>(atom: import("jotai").Atom<Value>) => Awaited<Value> | undefined;

package/dist/excalidraw/laser-trails.d.ts

@@ -1,5 +1,6 @@
-import { AnimatedTrail, Trail } from "./animated-trail";
-import { AnimationFrameHandler } from "./animation-frame-handler";
+import type { Trail } from "./animated-trail";
+import { AnimatedTrail } from "./animated-trail";
+import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";
 export declare class LaserTrails implements Trail {
     private animationFrameHandler;

package/dist/excalidraw/locales/en.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",
@@ -147,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...",
@@ -180,6 +183,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 +564,6 @@
             "noMatch": "No matching commands..."
         },
         "itemNotAvailable": "Command is not available...",
-        "shortcutHint": "For Command palette, use {{shortcutOne}} or {{shortcutTwo}}"
+        "shortcutHint": "For Command palette, use {{shortcut}}"
     }
 }

package/dist/excalidraw/math.d.ts

@@ -1,5 +1,5 @@
-import { Point, Zoom } from "./types";
-import { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
+import type { Point, Zoom } from "./types";
+import type { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
 export declare const rotate: (x: number, y: number, cx: number, cy: number, angle: number) => [number, number];
 export declare const rotatePoint: (point: readonly [number, number], center: readonly [number, number], angle: number) => [number, number];
 export declare const adjustXYWithRotation: (sides: {

package/dist/excalidraw/mermaid.d.ts

@@ -0,0 +1,2 @@
+/** heuristically checks whether the text may be a mermaid diagram definition */
+export declare const isMaybeMermaidDefinition: (text: string) => boolean;

package/dist/excalidraw/mermaid.js

@@ -0,0 +1,28 @@
+/** heuristically checks whether the text may be a mermaid diagram definition */
+export const isMaybeMermaidDefinition = (text) => {
+    const chartTypes = [
+        "flowchart",
+        "sequenceDiagram",
+        "classDiagram",
+        "stateDiagram",
+        "stateDiagram-v2",
+        "erDiagram",
+        "journey",
+        "gantt",
+        "pie",
+        "quadrantChart",
+        "requirementDiagram",
+        "gitGraph",
+        "C4Context",
+        "mindmap",
+        "timeline",
+        "zenuml",
+        "sankey",
+        "xychart",
+        "block",
+    ];
+    const re = new RegExp(`^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes
+        .map((x) => `${x}(-beta)?`)
+        .join("|")}\\b`);
+    return re.test(text.trim());
+};

package/dist/excalidraw/points.d.ts

@@ -1,4 +1,4 @@
-import { Point } from "./types";
+import type { Point } from "./types";
 export declare const getSizeFromPoints: (points: readonly Point[]) => {
     width: number;
     height: number;

package/dist/excalidraw/queue.d.ts

@@ -1,4 +1,4 @@
-import { MaybePromise } from "./utility-types";
+import type { MaybePromise } from "./utility-types";
 type Job<T, TArgs extends unknown[]> = (...args: TArgs) => MaybePromise<T>;
 export declare class Queue {
     private jobs;

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

@@ -1,5 +1,5 @@
-import { StaticCanvasAppState, AppState } from "../types";
-import { StaticCanvasRenderConfig } from "../scene/types";
+import type { StaticCanvasAppState, AppState } from "../types";
+import type { StaticCanvasRenderConfig } from "../scene/types";
 export declare const fillCircle: (context: CanvasRenderingContext2D, cx: number, cy: number, radius: number, stroke?: boolean) => void;
 export declare const getNormalizedCanvasDimensions: (canvas: HTMLCanvasElement, scale: number) => [number, number];
 export declare const bootstrapCanvas: ({ canvas, scale, normalizedWidth, normalizedHeight, theme, isExporting, viewBackgroundColor, }: {

package/dist/excalidraw/renderer/helpers.js

@@ -1,4 +1,4 @@
-import { THEME_FILTER } from "../constants";
+import { THEME, THEME_FILTER } from "../constants";
 export const fillCircle = (context, cx, cy, radius, stroke = true) => {
     context.beginPath();
     context.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -15,7 +15,7 @@ export const bootstrapCanvas = ({ canvas, scale, normalizedWidth, normalizedHeig
     const context = canvas.getContext("2d");
     context.setTransform(1, 0, 0, 1, 0, 0);
     context.scale(scale, scale);
-    if (isExporting && theme === "dark") {
+    if (isExporting && theme === THEME.DARK) {
         context.filter = THEME_FILTER;
     }
     // Paint background

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

@@ -1,4 +1,4 @@
-import { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
+import type { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
 /** throttled to animation framerate */
 export declare const renderInteractiveSceneThrottled: {
     (config: InteractiveSceneRenderConfig): void;
@@ -9,7 +9,7 @@ export declare const renderInteractiveSceneThrottled: {
  * Interactive scene is the ui-canvas where we render bounding boxes, selections
  * and other ui stuff.
  */
-export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }: InteractiveSceneRenderConfig) => {
+export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
     atLeastOneVisibleElement: boolean;
     elementsMap: RenderableElementsMap;
     scrollBars?: undefined;