@dwelle/excalidraw 0.5.0-ca754ef → 0.5.0-cbb5d6b

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

@@ -0,0 +1,2 @@
+import { 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/index.d.ts

@@ -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 { 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 { 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/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…",

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

@@ -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, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
     atLeastOneVisibleElement: boolean;
     elementsMap: RenderableElementsMap;
     scrollBars?: undefined;

package/dist/excalidraw/renderer/interactiveScene.js

@@ -1,14 +1,14 @@
-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/collision";
+import { maxBindingGap, } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
 import oc from "open-color";
@@ -264,7 +264,7 @@ const renderTransformHandles = (context, renderConfig, appState, transformHandle
         }
     });
 };
-const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }) => {
+const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, device, }) => {
     if (canvas === null) {
         return { atLeastOneVisibleElement: false, elementsMap };
     }
@@ -403,7 +403,8 @@ 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");
+            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) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
@@ -421,8 +422,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/staticScene.js

@@ -1,12 +1,13 @@
 import { FRAME_STYLE } from "../constants";
 import { getElementAbsoluteCoords } from "../element";
 import { elementOverlapsWithFrame, getTargetFrame, isElementInFrame, } from "../frame";
-import { isEmbeddableElement, isIframeLikeElement, } from "../element/typeChecks";
+import { isEmbeddableElement, isIframeLikeElement, isTextElement, } from "../element/typeChecks";
 import { renderElement } from "../renderer/renderElement";
 import { createPlaceholderEmbeddableLabel } from "../element/embeddable";
 import { EXTERNAL_LINK_IMG, getLinkHandleFromCoords, } from "../components/hyperlink/helpers";
 import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
 import { throttleRAF } from "../utils";
+import { getBoundTextElement } from "../element/textElement";
 const strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height) => {
     const BOLD_LINE_FREQUENCY = 5;
     const GridLineColor = {
@@ -120,21 +121,31 @@ const _renderStaticScene = ({ canvas, rc, elementsMap, allElementsMap, visibleEl
         .forEach((element) => {
         try {
             const frameId = element.frameId || appState.frameToHighlight?.id;
+            if (isTextElement(element) &&
+                element.containerId &&
+                elementsMap.has(element.containerId)) {
+                // will be rendered with the container
+                return;
+            }
+            context.save();
             if (frameId &&
                 appState.frameRendering.enabled &&
                 appState.frameRendering.clip) {
-                context.save();
                 const frame = getTargetFrame(element, elementsMap, appState);
                 // TODO do we need to check isElementInFrame here?
                 if (frame && isElementInFrame(element, elementsMap, appState)) {
                     frameClip(frame, context, renderConfig, appState);
                 }
                 renderElement(element, elementsMap, allElementsMap, rc, context, renderConfig, appState);
-                context.restore();
             }
             else {
                 renderElement(element, elementsMap, allElementsMap, rc, context, renderConfig, appState);
             }
+            const boundTextElement = getBoundTextElement(element, elementsMap);
+            if (boundTextElement) {
+                renderElement(boundTextElement, elementsMap, allElementsMap, rc, context, renderConfig, appState);
+            }
+            context.restore();
             if (!isExporting) {
                 renderLinkIcon(element, context, appState, elementsMap);
             }

package/dist/excalidraw/renderer/staticSvgScene.js

@@ -361,8 +361,18 @@ export const renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, re
         .filter((el) => !isIframeLikeElement(el))
         .forEach((element) => {
         if (!element.isDeleted) {
+            if (isTextElement(element) &&
+                element.containerId &&
+                elementsMap.has(element.containerId)) {
+                // will be rendered with the container
+                return;
+            }
             try {
                 renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);
+                const boundTextElement = getBoundTextElement(element, elementsMap);
+                if (boundTextElement) {
+                    renderElementToSvg(boundTextElement, elementsMap, rsvg, svgRoot, files, boundTextElement.x + renderConfig.offsetX, boundTextElement.y + renderConfig.offsetY, renderConfig);
+                }
             }
             catch (error) {
                 console.error(error);

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

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray } from "../element/types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray, OrderedExcalidrawElement, Ordered } from "../element/types";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { AppState } from "../types";
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
@@ -20,10 +20,10 @@ declare class Scene {
     private elementsMap;
     private selectedElementsCache;
     private versionNonce;
-    getElementsMapIncludingDeleted(): Map<string, ExcalidrawElement> & import("../utility-types").MakeBrand<"SceneElementsMap">;
-    getNonDeletedElementsMap(): Map<string, NonDeletedExcalidrawElement> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
-    getElementsIncludingDeleted(): readonly ExcalidrawElement[];
-    getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
+    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: {
         selectedElementIds: AppState["selectedElementIds"];
@@ -59,7 +59,8 @@ declare class Scene {
     destroy(): void;
     insertElementAtIndex(element: ExcalidrawElement, index: number): void;
     insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;
-    addNewElement: (element: ExcalidrawElement) => void;
+    insertElement: (element: ExcalidrawElement) => void;
+    insertElements: (elements: ExcalidrawElement[]) => void;
     getElementIndex(elementId: string): number;
     getContainerElement: (element: (ExcalidrawElement & {
         containerId: ExcalidrawElement["id"] | null;

package/dist/excalidraw/scene/Scene.js

@@ -2,7 +2,10 @@ import { isNonDeletedElement } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { getSelectedElements } from "./selection";
 import { randomInteger } from "../random";
+import { syncInvalidIndices, syncMovedIndices, validateFractionalIndices, } from "../fractionalIndex";
+import { arrayToMap } from "../utils";
 import { toBrandedType } from "../utils";
+import { ENV } from "../constants";
 const getNonDeletedElements = (allElements) => {
     const elementsMap = new Map();
     const elements = [];
@@ -59,6 +62,7 @@ class Scene {
     callbacks = new Set();
     nonDeletedElements = [];
     nonDeletedElementsMap = toBrandedType(new Map());
+    // ideally all elements within the scene should be wrapped around with `Ordered` type, but right now there is no real benefit doing so
     elements = [];
     nonDeletedFramesLikes = [];
     frames = [];
@@ -69,15 +73,15 @@ class Scene {
         cache: new Map(),
     };
     versionNonce;
-    getElementsMapIncludingDeleted() {
-        return this.elementsMap;
-    }
     getNonDeletedElementsMap() {
         return this.nonDeletedElementsMap;
     }
     getElementsIncludingDeleted() {
         return this.elements;
     }
+    getElementsMapIncludingDeleted() {
+        return this.elementsMap;
+    }
     getNonDeletedElements() {
         return this.nonDeletedElements;
     }
@@ -151,12 +155,17 @@ class Scene {
         return didChange;
     }
     replaceAllElements(nextElements) {
-        this.elements =
-            // ts doesn't like `Array.isArray` of `instanceof Map`
-            nextElements instanceof Array
-                ? nextElements
-                : Array.from(nextElements.values());
+        const _nextElements = 
+        // ts doesn't like `Array.isArray` of `instanceof Map`
+        nextElements instanceof Array
+            ? nextElements
+            : Array.from(nextElements.values());
         const nextFrameLikes = [];
+        if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+            // throw on invalid indices in test / dev to potentially detect cases were we forgot to sync moved elements
+            validateFractionalIndices(_nextElements.map((x) => x.index));
+        }
+        this.elements = syncInvalidIndices(_nextElements);
         this.elementsMap.clear();
         this.elements.forEach((element) => {
             if (isFrameLikeElement(element)) {
@@ -191,8 +200,8 @@ class Scene {
         };
     }
     destroy() {
-        this.nonDeletedElements = [];
         this.elements = [];
+        this.nonDeletedElements = [];
         this.nonDeletedFramesLikes = [];
         this.frames = [];
         this.elementsMap.clear();
@@ -217,6 +226,7 @@ class Scene {
             element,
             ...this.elements.slice(index),
         ];
+        syncMovedIndices(nextElements, arrayToMap([element]));
         this.replaceAllElements(nextElements);
     }
     insertElementsAtIndex(elements, index) {
@@ -228,15 +238,20 @@ class Scene {
             ...elements,
             ...this.elements.slice(index),
         ];
+        syncMovedIndices(nextElements, arrayToMap(elements));
         this.replaceAllElements(nextElements);
     }
-    addNewElement = (element) => {
-        if (element.frameId) {
-            this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
-        }
-        else {
-            this.replaceAllElements([...this.elements, element]);
-        }
+    insertElement = (element) => {
+        const index = element.frameId
+            ? this.getElementIndex(element.frameId)
+            : this.elements.length;
+        this.insertElementAtIndex(element, index);
+    };
+    insertElements = (elements) => {
+        const index = elements[0].frameId
+            ? this.getElementIndex(elements[0].frameId)
+            : this.elements.length;
+        this.insertElementsAtIndex(elements, index);
     };
     getElementIndex(elementId) {
         return this.elements.findIndex((element) => element.id === elementId);

package/dist/excalidraw/scene/export.js

@@ -11,6 +11,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) => {
@@ -300,7 +301,7 @@ export const exportToCanvas = async ({ data, config, }) => {
         canvas,
         rc: rough.canvas(canvas),
         elementsMap: toBrandedType(arrayToMap(elementsForRender)),
-        allElementsMap: toBrandedType(arrayToMap(elements)),
+        allElementsMap: toBrandedType(arrayToMap(syncInvalidIndices(elements))),
         visibleElements: elementsForRender,
         appState: {
             ...appState,