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

package/dist/excalidraw/actions/actionHistory.js

@@ -39,8 +39,8 @@ export const createUndoAction = (history, store) => ({
         event.key.toLowerCase() === KEYS.Z &&
         !event.shiftKey,
     PanelComponent: ({ updateData, data }) => {
-        const { isUndoStackEmpty } = useEmitter(history.onHistoryChangedEmitter, new HistoryChangedEvent());
-        return (_jsx(ToolButton, { type: "button", icon: UndoIcon, "aria-label": t("buttons.undo"), onClick: updateData, size: data?.size || "medium", disabled: isUndoStackEmpty }));
+        const { isUndoStackEmpty } = useEmitter(history.onHistoryChangedEmitter, new HistoryChangedEvent(history.isUndoStackEmpty, history.isRedoStackEmpty));
+        return (_jsx(ToolButton, { type: "button", icon: UndoIcon, "aria-label": t("buttons.undo"), onClick: updateData, size: data?.size || "medium", disabled: isUndoStackEmpty, "data-testid": "button-undo" }));
     },
 });
 export const createRedoAction = (history, store) => ({
@@ -56,7 +56,7 @@ export const createRedoAction = (history, store) => ({
         event.key.toLowerCase() === KEYS.Z) ||
         (isWindows && event.ctrlKey && !event.shiftKey && event.key === KEYS.Y),
     PanelComponent: ({ updateData, data }) => {
-        const { isRedoStackEmpty } = useEmitter(history.onHistoryChangedEmitter, new HistoryChangedEvent());
-        return (_jsx(ToolButton, { type: "button", icon: RedoIcon, "aria-label": t("buttons.redo"), onClick: updateData, size: data?.size || "medium", disabled: isRedoStackEmpty }));
+        const { isRedoStackEmpty } = useEmitter(history.onHistoryChangedEmitter, new HistoryChangedEvent(history.isUndoStackEmpty, history.isRedoStackEmpty));
+        return (_jsx(ToolButton, { type: "button", icon: RedoIcon, "aria-label": t("buttons.redo"), onClick: updateData, size: data?.size || "medium", disabled: isRedoStackEmpty, "data-testid": "button-redo" }));
     },
 });

package/dist/excalidraw/actions/actionLinearEditor.d.ts

@@ -163,7 +163,7 @@ export declare const actionToggleLinearEditor: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ appState, updateData, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {

package/dist/excalidraw/actions/actionLink.d.ts

@@ -157,7 +157,7 @@ export declare const actionLink: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     trackEvent: {
         category: "hyperlink";

package/dist/excalidraw/actions/actionMenu.d.ts

@@ -158,7 +158,7 @@ export declare const actionToggleCanvasMenu: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     PanelComponent: ({ appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -323,7 +323,7 @@ export declare const actionToggleEditMenu: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -482,7 +482,7 @@ export declare const actionShortcuts: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {

package/dist/excalidraw/actions/actionNavigate.d.ts

@@ -160,7 +160,7 @@ export declare const actionGoToCollaborator: {
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     } | {
         appState: {
             userToFollow: {
@@ -317,7 +317,7 @@ export declare const actionGoToCollaborator: {
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     PanelComponent: ({ updateData, data, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {

package/dist/excalidraw/actions/actionProperties.d.ts

@@ -179,7 +179,7 @@ export declare const actionChangeFillStyle: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -343,7 +343,7 @@ export declare const actionChangeStrokeWidth: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -507,7 +507,7 @@ export declare const actionChangeSloppiness: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -671,7 +671,7 @@ export declare const actionChangeStrokeStyle: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -835,7 +835,7 @@ export declare const actionChangeOpacity: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -999,7 +999,7 @@ export declare const actionChangeFontSize: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -1164,7 +1164,7 @@ export declare const actionDecreaseFontSize: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
@@ -1329,7 +1329,7 @@ export declare const actionIncreaseFontSize: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
@@ -1493,7 +1493,7 @@ export declare const actionChangeFontFamily: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -1657,7 +1657,7 @@ export declare const actionChangeTextAlign: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -1823,7 +1823,7 @@ export declare const actionChangeVerticalAlign: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -1987,7 +1987,7 @@ export declare const actionChangeRoundness: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -2154,7 +2154,7 @@ export declare const actionChangeArrowhead: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {

package/dist/excalidraw/actions/actionProperties.js

@@ -60,7 +60,7 @@ export const getFormValue = function (elements, appState, getAttribute, isReleva
     return ret;
 };
 const offsetElementAfterFontResize = (prevElement, nextElement) => {
-    if (isBoundToContainer(nextElement)) {
+    if (isBoundToContainer(nextElement) || !nextElement.autoResize) {
         return nextElement;
     }
     return mutateElement(nextElement, {

package/dist/excalidraw/actions/actionSelectAll.d.ts

@@ -162,7 +162,7 @@ export declare const actionSelectAll: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {

package/dist/excalidraw/actions/actionStyles.d.ts

@@ -158,7 +158,7 @@ export declare const actionCopyStyles: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
@@ -173,7 +173,10 @@ export declare const actionPasteStyles: {
     };
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, formData: any, app: import("../types").AppClassProperties) => {
         elements: readonly import("../element/types").OrderedExcalidrawElement[];
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
+    } | {
+        elements: import("../element/types").OrderedExcalidrawElement[];
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {

package/dist/excalidraw/actions/actionTextAutoResize.d.ts

@@ -0,0 +1,17 @@
+import type { AppClassProperties } from "../types";
+export declare const actionTextAutoResize: {
+    name: "autoResize";
+    label: string;
+    icon: null;
+    trackEvent: {
+        category: "element";
+    };
+    predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, _: unknown, app: AppClassProperties) => boolean;
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: AppClassProperties) => {
+        appState: Readonly<import("../types").AppState>;
+        elements: import("../element/types").OrderedExcalidrawElement[];
+        storeAction: "capture";
+    };
+} & {
+    keyTest?: undefined;
+};

package/dist/excalidraw/actions/actionTextAutoResize.js

@@ -0,0 +1,38 @@
+import { isTextElement } from "../element";
+import { newElementWith } from "../element/mutateElement";
+import { measureText } from "../element/textElement";
+import { getSelectedElements } from "../scene";
+import { StoreAction } from "../store";
+import { getFontString } from "../utils";
+import { register } from "./register";
+export const actionTextAutoResize = register({
+    name: "autoResize",
+    label: "labels.autoResize",
+    icon: null,
+    trackEvent: { category: "element" },
+    predicate: (elements, appState, _, app) => {
+        const selectedElements = getSelectedElements(elements, appState);
+        return (selectedElements.length === 1 &&
+            isTextElement(selectedElements[0]) &&
+            !selectedElements[0].autoResize);
+    },
+    perform: (elements, appState, _, app) => {
+        const selectedElements = getSelectedElements(elements, appState);
+        return {
+            appState,
+            elements: elements.map((element) => {
+                if (element.id === selectedElements[0].id && isTextElement(element)) {
+                    const metrics = measureText(element.originalText, getFontString(element), element.lineHeight);
+                    return newElementWith(element, {
+                        autoResize: true,
+                        width: metrics.width,
+                        height: metrics.height,
+                        text: element.originalText,
+                    });
+                }
+                return element;
+            }),
+            storeAction: StoreAction.CAPTURE,
+        };
+    },
+});

package/dist/excalidraw/actions/actionToggleGridMode.d.ts

@@ -163,7 +163,7 @@ export declare const actionToggleGridMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: AppState) => boolean;
     predicate: (element: readonly import("../element/types").ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps) => boolean;

package/dist/excalidraw/actions/actionToggleObjectsSnapMode.d.ts

@@ -161,7 +161,7 @@ export declare const actionToggleObjectsSnapMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps) => boolean;

package/dist/excalidraw/actions/actionToggleStats.d.ts

@@ -161,7 +161,7 @@ export declare const actionToggleStats: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;

package/dist/excalidraw/actions/actionToggleViewMode.d.ts

@@ -162,7 +162,7 @@ export declare const actionToggleViewMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps) => boolean;

package/dist/excalidraw/actions/actionToggleZenMode.d.ts

@@ -162,7 +162,7 @@ export declare const actionToggleZenMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps) => boolean;

package/dist/excalidraw/actions/actionZindex.d.ts

@@ -10,7 +10,7 @@ export declare const actionSendBackward: {
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         elements: readonly import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyPriority: number;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
@@ -29,7 +29,7 @@ export declare const actionBringForward: {
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         elements: readonly import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyPriority: number;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
@@ -48,7 +48,7 @@ export declare const actionSendToBack: {
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         elements: readonly import("../element/types").ExcalidrawElement[] | import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
@@ -66,7 +66,7 @@ export declare const actionBringToFront: {
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         elements: readonly import("../element/types").ExcalidrawElement[] | import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;

package/dist/excalidraw/actions/types.d.ts

@@ -15,7 +15,7 @@ export type ActionResult = {
 type ActionFn = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
-export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/dist/excalidraw/change.js

@@ -858,15 +858,22 @@ export class ElementsChange {
         if (!flags.containsZindexDifference) {
             return elements;
         }
-        const previous = Array.from(elements.values());
-        const reordered = orderByFractionalIndex([...previous]);
-        if (!flags.containsVisibleDifference &&
-            Delta.isRightDifferent(previous, reordered, true)) {
+        const unordered = Array.from(elements.values());
+        const ordered = orderByFractionalIndex([...unordered]);
+        const moved = Delta.getRightDifferences(unordered, ordered, true).reduce((acc, arrayIndex) => {
+            const candidate = unordered[Number(arrayIndex)];
+            if (candidate && changed.has(candidate.id)) {
+                acc.set(candidate.id, candidate);
+            }
+            return acc;
+        }, new Map());
+        if (!flags.containsVisibleDifference && moved.size) {
             // we found a difference in order!
             flags.containsVisibleDifference = true;
         }
-        // let's synchronize all invalid indices of moved elements
-        return arrayToMap(syncMovedIndices(reordered, changed));
+        // synchronize all elements that were actually moved
+        // could fallback to synchronizing all invalid indices
+        return arrayToMap(syncMovedIndices(ordered, moved));
     }
     /**
      * It is necessary to post process the partials in case of reference values,

package/dist/excalidraw/components/Actions.js

@@ -140,7 +140,7 @@ export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
 };
 export const ZoomActions = ({ renderAction, zoom, }) => (_jsx(Stack.Col, { gap: 1, className: "zoom-actions", children: _jsxs(Stack.Row, { align: "center", children: [renderAction("zoomOut"), renderAction("resetZoom"), renderAction("zoomIn")] }) }));
 export const UndoRedoActions = ({ renderAction, className, }) => (_jsxs("div", { className: `undo-redo-buttons ${className}`, children: [_jsx("div", { className: "undo-button-container", children: _jsx(Tooltip, { label: t("buttons.undo"), children: renderAction("undo") }) }), _jsx("div", { className: "redo-button-container", children: _jsxs(Tooltip, { label: t("buttons.redo"), children: [" ", renderAction("redo")] }) })] }));
-export const ExitZenModeAction = ({ actionManager, showExitZenModeBtn, }) => (_jsx("button", { className: clsx("disable-zen-mode", {
+export const ExitZenModeAction = ({ actionManager, showExitZenModeBtn, }) => (_jsx("button", { type: "button", className: clsx("disable-zen-mode", {
         "disable-zen-mode--visible": showExitZenModeBtn,
     }), onClick: () => actionManager.executeAction(actionToggleZenMode), children: t("buttons.exitZenMode") }));
 export const FinalizeAction = ({ renderAction, className, }) => (_jsx("div", { className: `finalize-button ${className}`, children: renderAction("finalize", { size: "small" }) }));

package/dist/excalidraw/components/App.d.ts

@@ -342,10 +342,10 @@ declare class App extends React.Component<AppProps, AppState> {
         elements?: SceneData["elements"];
         appState?: Pick<AppState, K> | null | undefined;
         collaborators?: SceneData["collaborators"];
-        /** @default StoreAction.CAPTURE */
+        /** @default StoreAction.NONE */
         storeAction?: SceneData["storeAction"];
     }) => void;
-    private onSceneUpdated;
+    private triggerRender;
     /**
      * @returns whether the menu was toggled on or off
      */