@excalidraw/excalidraw 0.17.1-3e334a6 → 0.17.1-4689a6b

package/dist/excalidraw/fractionalIndex.js

@@ -0,0 +1,241 @@
+import { generateNKeysBetween } from "fractional-indexing";
+import { mutateElement } from "./element/mutateElement";
+import { InvalidFractionalIndexError } from "./errors";
+/**
+ * Envisioned relation between array order and fractional indices:
+ *
+ * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.
+ * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure
+ * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)
+ * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.
+ * - it's necessary to always keep the fractional indices in sync with the array order
+ * - elements with invalid indices should be detected and synced, without altering the already valid indices
+ *
+ * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.
+ * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs
+ * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo
+ * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,
+ *   as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order
+ */
+/**
+ * Ensure that all elements have valid fractional indices.
+ *
+ * @throws `InvalidFractionalIndexError` if invalid index is detected.
+ */
+export const validateFractionalIndices = (indices) => {
+    for (const [i, index] of indices.entries()) {
+        const predecessorIndex = indices[i - 1];
+        const successorIndex = indices[i + 1];
+        if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {
+            throw new InvalidFractionalIndexError(`Fractional indices invariant for element has been compromised - ["${predecessorIndex}", "${index}", "${successorIndex}"] [predecessor, current, successor]`);
+        }
+    }
+};
+/**
+ * Order the elements based on the fractional indices.
+ * - when fractional indices are identical, break the tie based on the element id
+ * - when there is no fractional index in one of the elements, respect the order of the array
+ */
+export const orderByFractionalIndex = (elements) => {
+    return elements.sort((a, b) => {
+        // in case the indices are not the defined at runtime
+        if (isOrderedElement(a) && isOrderedElement(b)) {
+            if (a.index < b.index) {
+                return -1;
+            }
+            else if (a.index > b.index) {
+                return 1;
+            }
+            // break ties based on the element id
+            return a.id < b.id ? -1 : 1;
+        }
+        // defensively keep the array order
+        return 1;
+    });
+};
+/**
+ * Synchronizes invalid fractional indices of moved elements with the array order by mutating passed elements.
+ * If the synchronization fails or the result is invalid, it fallbacks to `syncInvalidIndices`.
+ */
+export const syncMovedIndices = (elements, movedElements) => {
+    try {
+        const indicesGroups = getMovedIndicesGroups(elements, movedElements);
+        // try generatating indices, throws on invalid movedElements
+        const elementsUpdates = generateIndices(elements, indicesGroups);
+        // ensure next indices are valid before mutation, throws on invalid ones
+        validateFractionalIndices(elements.map((x) => elementsUpdates.get(x)?.index || x.index));
+        // split mutation so we don't end up in an incosistent state
+        for (const [element, update] of elementsUpdates) {
+            mutateElement(element, update, false);
+        }
+    }
+    catch (e) {
+        // fallback to default sync
+        syncInvalidIndices(elements);
+    }
+    return elements;
+};
+/**
+ * Synchronizes all invalid fractional indices with the array order by mutating passed elements.
+ *
+ * WARN: in edge cases it could modify the elements which were not moved, as it's impossible to guess the actually moved elements from the elements array itself.
+ */
+export const syncInvalidIndices = (elements) => {
+    const indicesGroups = getInvalidIndicesGroups(elements);
+    const elementsUpdates = generateIndices(elements, indicesGroups);
+    for (const [element, update] of elementsUpdates) {
+        mutateElement(element, update, false);
+    }
+    return elements;
+};
+/**
+ * Get contiguous groups of indices of passed moved elements.
+ *
+ * NOTE: First and last elements within the groups are indices of lower and upper bounds.
+ */
+const getMovedIndicesGroups = (elements, movedElements) => {
+    const indicesGroups = [];
+    let i = 0;
+    while (i < elements.length) {
+        if (movedElements.has(elements[i].id) &&
+            !isValidFractionalIndex(elements[i]?.index, elements[i - 1]?.index, elements[i + 1]?.index)) {
+            const indicesGroup = [i - 1, i]; // push the lower bound index as the first item
+            while (++i < elements.length) {
+                if (!(movedElements.has(elements[i].id) &&
+                    !isValidFractionalIndex(elements[i]?.index, elements[i - 1]?.index, elements[i + 1]?.index))) {
+                    break;
+                }
+                indicesGroup.push(i);
+            }
+            indicesGroup.push(i); // push the upper bound index as the last item
+            indicesGroups.push(indicesGroup);
+        }
+        else {
+            i++;
+        }
+    }
+    return indicesGroups;
+};
+/**
+ * Gets contiguous groups of all invalid indices automatically detected inside the elements array.
+ *
+ * WARN: First and last items within the groups do NOT have to be contiguous, those are the found lower and upper bounds!
+ */
+const getInvalidIndicesGroups = (elements) => {
+    const indicesGroups = [];
+    // once we find lowerBound / upperBound, it cannot be lower than that, so we cache it for better perf.
+    let lowerBound = undefined;
+    let upperBound = undefined;
+    let lowerBoundIndex = -1;
+    let upperBoundIndex = 0;
+    /** @returns maybe valid lowerBound */
+    const getLowerBound = (index) => {
+        const lowerBound = elements[lowerBoundIndex]
+            ? elements[lowerBoundIndex].index
+            : undefined;
+        // we are already iterating left to right, therefore there is no need for additional looping
+        const candidate = elements[index - 1]?.index;
+        if ((!lowerBound && candidate) || // first lowerBound
+            (lowerBound && candidate && candidate > lowerBound) // next lowerBound
+        ) {
+            // WARN: candidate's index could be higher or same as the current element's index
+            return [candidate, index - 1];
+        }
+        // cache hit! take the last lower bound
+        return [lowerBound, lowerBoundIndex];
+    };
+    /** @returns always valid upperBound */
+    const getUpperBound = (index) => {
+        const upperBound = elements[upperBoundIndex]
+            ? elements[upperBoundIndex].index
+            : undefined;
+        // cache hit! don't let it find the upper bound again
+        if (upperBound && index < upperBoundIndex) {
+            return [upperBound, upperBoundIndex];
+        }
+        // set the current upperBoundIndex as the starting point
+        let i = upperBoundIndex;
+        while (++i < elements.length) {
+            const candidate = elements[i]?.index;
+            if ((!upperBound && candidate) || // first upperBound
+                (upperBound && candidate && candidate > upperBound) // next upperBound
+            ) {
+                return [candidate, i];
+            }
+        }
+        // we reached the end, sky is the limit
+        return [undefined, i];
+    };
+    let i = 0;
+    while (i < elements.length) {
+        const current = elements[i].index;
+        [lowerBound, lowerBoundIndex] = getLowerBound(i);
+        [upperBound, upperBoundIndex] = getUpperBound(i);
+        if (!isValidFractionalIndex(current, lowerBound, upperBound)) {
+            // push the lower bound index as the first item
+            const indicesGroup = [lowerBoundIndex, i];
+            while (++i < elements.length) {
+                const current = elements[i].index;
+                const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i);
+                const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i);
+                if (isValidFractionalIndex(current, nextLowerBound, nextUpperBound)) {
+                    break;
+                }
+                // assign bounds only for the moved elements
+                [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];
+                [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];
+                indicesGroup.push(i);
+            }
+            // push the upper bound index as the last item
+            indicesGroup.push(upperBoundIndex);
+            indicesGroups.push(indicesGroup);
+        }
+        else {
+            i++;
+        }
+    }
+    return indicesGroups;
+};
+const isValidFractionalIndex = (index, predecessor, successor) => {
+    if (!index) {
+        return false;
+    }
+    if (predecessor && successor) {
+        return predecessor < index && index < successor;
+    }
+    if (!predecessor && successor) {
+        // first element
+        return index < successor;
+    }
+    if (predecessor && !successor) {
+        // last element
+        return predecessor < index;
+    }
+    // only element in the array
+    return !!index;
+};
+const generateIndices = (elements, indicesGroups) => {
+    const elementsUpdates = new Map();
+    for (const indices of indicesGroups) {
+        const lowerBoundIndex = indices.shift();
+        const upperBoundIndex = indices.pop();
+        const fractionalIndices = generateNKeysBetween(elements[lowerBoundIndex]?.index, elements[upperBoundIndex]?.index, indices.length);
+        for (let i = 0; i < indices.length; i++) {
+            const element = elements[indices[i]];
+            elementsUpdates.set(element, {
+                index: fractionalIndices[i],
+            });
+        }
+    }
+    return elementsUpdates;
+};
+const isOrderedElement = (element) => {
+    // for now it's sufficient whether the index is there
+    // meaning, the element was already ordered in the past
+    // meaning, it is not a newly inserted element, not an unrestored element, etc.
+    // it does not have to mean that the index itself is valid
+    if (element.index) {
+        return true;
+    }
+    return false;
+};

package/dist/excalidraw/frame.d.ts

@@ -2,7 +2,7 @@ import { ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawFrameLike
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import type { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 import { ReadonlySetLike } from "./utility-types";
-export declare const bindElementsToFramesAfterDuplication: (nextElements: ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
+export declare const bindElementsToFramesAfterDuplication: (nextElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare function isElementIntersectingFrame(element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap): boolean;
 export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => ExcalidrawElement[];
 export declare const isElementContainingFrame: (elements: readonly ExcalidrawElement[], element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => boolean;

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/locales/en.json

@@ -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",
@@ -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",

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.js

@@ -8,7 +8,7 @@ import { OMIT_SIDES_FOR_FRAME, shouldShowBoundingBox, } from "../element/transfo
 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";

package/dist/excalidraw/renderer/renderElement.js

@@ -4,7 +4,7 @@ import { distance, getFontString, isRTL } from "../utils";
 import { getCornerRadius, isRightAngle } from "../math";
 import rough from "roughjs/bin/rough";
 import { getDefaultAppState } from "../appState";
-import { BOUND_TEXT_PADDING, ELEMENT_READY_TO_ERASE_OPACITY, FRAME_STYLE, MIME_TYPES, } from "../constants";
+import { BOUND_TEXT_PADDING, ELEMENT_READY_TO_ERASE_OPACITY, FRAME_STYLE, MIME_TYPES, THEME, } from "../constants";
 import { getStroke } from "perfect-freehand";
 import { getBoundTextElement, getContainerCoords, getContainerElement, getLineHeightInPx, getBoundTextMaxHeight, getBoundTextMaxWidth, getVerticalOffset, } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
@@ -19,7 +19,7 @@ const defaultAppState = getDefaultAppState();
 const isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) &&
     !renderConfig.imageCache.has(element.fileId);
 const shouldResetImageFilter = (element, renderConfig, appState) => {
-    return (appState.theme === "dark" &&
+    return (appState.theme === THEME.DARK &&
         isInitializedImageElement(element) &&
         !isPendingImageElement(element, renderConfig) &&
         renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg);
@@ -352,7 +352,7 @@ export const renderElement = (element, elementsMap, allElementsMap, rc, context,
                 // TODO change later to only affect AI frames
                 if (isMagicFrameElement(element)) {
                     context.strokeStyle =
-                        appState.theme === "light" ? "#7affd7" : "#1d8264";
+                        appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
                 }
                 if (FRAME_STYLE.radius && context.roundRect) {
                     context.beginPath();

package/dist/excalidraw/renderer/renderSnaps.js

@@ -1,3 +1,4 @@
+import { THEME } from "../constants";
 const SNAP_COLOR_LIGHT = "#ff6b6b";
 const SNAP_COLOR_DARK = "#ff0000";
 const SNAP_WIDTH = 1;
@@ -9,7 +10,7 @@ export const renderSnaps = (context, appState) => {
     // in dark mode, we need to adjust the color to account for color inversion.
     // Don't change if zen mode, because we draw only crosses, we want the
     // colors to be more visible
-    const snapColor = appState.theme === "light" || appState.zenModeEnabled
+    const snapColor = appState.theme === THEME.LIGHT || appState.zenModeEnabled
         ? SNAP_COLOR_LIGHT
         : SNAP_COLOR_DARK;
     // in zen mode make the cross more visible since we don't draw the lines

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[];
+    getElementsMapIncludingDeleted(): Map<string, Ordered<ExcalidrawElement>> & import("../utility-types").MakeBrand<"SceneElementsMap">;
+    getNonDeletedElementsMap(): Map<string, Ordered<NonDeletedExcalidrawElement>> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
+    getElementsIncludingDeleted(): readonly OrderedExcalidrawElement[];
+    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 = [];
@@ -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

@@ -2,7 +2,7 @@ import rough from "roughjs/bin/rough";
 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,

package/dist/excalidraw/types.d.ts

@@ -1,5 +1,5 @@
 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 { 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 { Action } from "./actions/types";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -331,7 +331,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;
@@ -449,6 +449,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 +551,7 @@ export type Device = Readonly<{
     };
     isTouchScreen: boolean;
 }>;
-type FrameNameBounds = {
+export type FrameNameBounds = {
     x: number;
     y: number;
     width: number;

package/dist/excalidraw/utils.d.ts

@@ -161,6 +161,7 @@ export declare const arrayToMapWithIndex: <T extends {
     id: string;
 }>(elements: readonly T[]) => Map<string, [element: T, index: number]>;
 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

@@ -446,6 +446,7 @@ export const arrayToMapWithIndex = (elements) => elements.reduce((acc, element,
     return acc;
 }, new Map());
 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[];
+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/{dev/en-N2RZZLK5.json → prod/en-CVBEBUBY.json}

@@ -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",
@@ -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",