@excalidraw/excalidraw 0.17.1-890ed9f → 0.17.1-96eeec5

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

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import { ExcalidrawElement } from "../element/types";
-import { AppState, NormalizedZoomValue } from "../types";
-import { SceneBounds } from "../element/bounds";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppState, NormalizedZoomValue } from "../types";
+import type { SceneBounds } from "../element/bounds";
 export declare const actionChangeViewBackgroundColor: {
     name: "changeViewBackgroundColor";
     label: string;
     paletteName: string;
     trackEvent: false;
     predicate: (elements: readonly ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
-    perform: (_: readonly ExcalidrawElement[], appState: Readonly<AppState>, value: any) => {
+    perform: (_: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, value: any) => {
         appState: any;
-        commitToHistory: boolean;
+        storeAction: "none" | "capture";
     };
     PanelComponent: ({ elements, appState, updateData, appProps }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -25,8 +25,8 @@ export declare const actionClearCanvas: {
         category: "canvas";
     };
     predicate: (elements: readonly ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
-        elements: ExcalidrawElement[];
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+        elements: import("../element/types").OrderedExcalidrawElement[];
         appState: {
             files: {};
             theme: import("../element/types").Theme;
@@ -35,7 +35,10 @@ export declare const actionClearCanvas: {
             exportBackground: boolean;
             exportEmbedScene: boolean;
             gridSize: number | null;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             pasteDialog: {
                 shown: false;
                 data: null;
@@ -47,6 +50,10 @@ export declare const actionClearCanvas: {
                 lastActiveTool: import("../types").ActiveTool | null;
                 locked: boolean;
             } & import("../types").ActiveTool;
+            viewModeEnabled: boolean;
+            zenModeEnabled: boolean;
+            objectsSnapModeEnabled: boolean;
+            name: string | null;
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
@@ -97,7 +104,6 @@ export declare const actionClearCanvas: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -136,8 +142,6 @@ export declare const actionClearCanvas: {
                 closable?: boolean | undefined;
                 duration?: number | undefined;
             } | null;
-            zenModeEnabled: boolean;
-            viewModeEnabled: boolean;
             selectedGroupIds: {
                 [groupId: string]: boolean;
             };
@@ -172,11 +176,10 @@ export declare const actionClearCanvas: {
                 x: number;
                 y: number;
             } | null;
-            objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: "capture";
     };
 } & {
     keyTest?: undefined;
@@ -189,7 +192,7 @@ export declare const actionZoomIn: {
     trackEvent: {
         category: "canvas";
     };
-    perform: (_elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
         appState: {
             userToFollow: null;
             scrollX: number;
@@ -322,7 +325,10 @@ export declare const actionZoomIn: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -342,12 +348,12 @@ export declare const actionZoomIn: {
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: "none";
     };
-    PanelComponent: ({ updateData }: import("./types").PanelComponentProps) => JSX.Element;
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionZoomOut: {
     name: "zoomOut";
@@ -357,7 +363,7 @@ export declare const actionZoomOut: {
     trackEvent: {
         category: "canvas";
     };
-    perform: (_elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
         appState: {
             userToFollow: null;
             scrollX: number;
@@ -490,7 +496,10 @@ export declare const actionZoomOut: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -510,12 +519,12 @@ export declare const actionZoomOut: {
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: "none";
     };
-    PanelComponent: ({ updateData }: import("./types").PanelComponentProps) => JSX.Element;
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionResetZoom: {
     name: "resetZoom";
@@ -525,7 +534,7 @@ export declare const actionResetZoom: {
     trackEvent: {
         category: "canvas";
     };
-    perform: (_elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
         appState: {
             userToFollow: null;
             scrollX: number;
@@ -658,7 +667,10 @@ export declare const actionResetZoom: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -678,12 +690,12 @@ export declare const actionResetZoom: {
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: "none";
     };
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const zoomToFitBounds: ({ bounds, appState, fitToViewport, viewportZoomFactor, }: {
     bounds: SceneBounds;
@@ -824,7 +836,10 @@ export declare const zoomToFitBounds: ({ bounds, appState, fitToViewport, viewpo
             isSpeaking?: boolean | undefined;
             isMuted?: boolean | undefined;
         }>>;
-        showStats: boolean;
+        stats: {
+            open: boolean;
+            panels: number;
+        };
         currentChartType: import("../element/types").ChartType;
         pasteDialog: {
             shown: false;
@@ -845,7 +860,7 @@ export declare const zoomToFitBounds: ({ bounds, appState, fitToViewport, viewpo
         userToFollow: import("../types").UserToFollow | null;
         followedBy: Set<import("../types").SocketId>;
     };
-    commitToHistory: boolean;
+    storeAction: "none";
 };
 export declare const zoomToFit: ({ targetElements, appState, fitToViewport, viewportZoomFactor, }: {
     targetElements: readonly ExcalidrawElement[];
@@ -986,7 +1001,10 @@ export declare const zoomToFit: ({ targetElements, appState, fitToViewport, view
             isSpeaking?: boolean | undefined;
             isMuted?: boolean | undefined;
         }>>;
-        showStats: boolean;
+        stats: {
+            open: boolean;
+            panels: number;
+        };
         currentChartType: import("../element/types").ChartType;
         pasteDialog: {
             shown: false;
@@ -1007,7 +1025,7 @@ export declare const zoomToFit: ({ targetElements, appState, fitToViewport, view
         userToFollow: import("../types").UserToFollow | null;
         followedBy: Set<import("../types").SocketId>;
     };
-    commitToHistory: boolean;
+    storeAction: "none";
 };
 export declare const actionZoomToFitSelectionInViewport: {
     name: "zoomToFitSelectionInViewport";
@@ -1016,7 +1034,7 @@ export declare const actionZoomToFitSelectionInViewport: {
     trackEvent: {
         category: "canvas";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
         appState: {
             scrollX: number;
             scrollY: number;
@@ -1148,7 +1166,10 @@ export declare const actionZoomToFitSelectionInViewport: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -1169,11 +1190,11 @@ export declare const actionZoomToFitSelectionInViewport: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: boolean;
+        storeAction: "none";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionZoomToFitSelection: {
     name: "zoomToFitSelection";
@@ -1182,7 +1203,7 @@ export declare const actionZoomToFitSelection: {
     trackEvent: {
         category: "canvas";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
         appState: {
             scrollX: number;
             scrollY: number;
@@ -1314,7 +1335,10 @@ export declare const actionZoomToFitSelection: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -1335,11 +1359,11 @@ export declare const actionZoomToFitSelection: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: boolean;
+        storeAction: "none";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionZoomToFit: {
     name: "zoomToFit";
@@ -1349,7 +1373,7 @@ export declare const actionZoomToFit: {
     trackEvent: {
         category: "canvas";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>) => {
         appState: {
             scrollX: number;
             scrollY: number;
@@ -1481,7 +1505,10 @@ export declare const actionZoomToFit: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -1502,11 +1529,11 @@ export declare const actionZoomToFit: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: boolean;
+        storeAction: "none";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionToggleTheme: {
     name: "toggleTheme";
@@ -1517,7 +1544,7 @@ export declare const actionToggleTheme: {
     trackEvent: {
         category: "canvas";
     };
-    perform: (_: readonly ExcalidrawElement[], appState: Readonly<AppState>, value: any) => {
+    perform: (_: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, value: any) => {
         appState: {
             theme: any;
             contextMenu: {
@@ -1649,7 +1676,10 @@ export declare const actionToggleTheme: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -1670,12 +1700,12 @@ export declare const actionToggleTheme: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: "none";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     predicate: (elements: readonly ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionToggleEraserTool: {
     name: "toggleEraserTool";
@@ -1683,7 +1713,7 @@ export declare const actionToggleEraserTool: {
     trackEvent: {
         category: "toolbar";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>) => {
         appState: {
             selectedElementIds: {};
             selectedGroupIds: {};
@@ -1808,7 +1838,10 @@ export declare const actionToggleEraserTool: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -1829,11 +1862,11 @@ export declare const actionToggleEraserTool: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: "capture";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionToggleHandTool: {
     name: "toggleHandTool";
@@ -1844,7 +1877,7 @@ export declare const actionToggleHandTool: {
     };
     icon: JSX.Element;
     viewMode: false;
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
         appState: {
             selectedElementIds: {};
             selectedGroupIds: {};
@@ -1969,7 +2002,10 @@ export declare const actionToggleHandTool: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -1990,9 +2026,9 @@ export declare const actionToggleHandTool: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: "capture";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };

package/dist/excalidraw/actions/actionCanvas.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { handIcon, MoonIcon, SunIcon, TrashIcon, zoomAreaIcon, ZoomInIcon, ZoomOutIcon, ZoomResetIcon, } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { CURSOR_TYPE, MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
+import { CURSOR_TYPE, MAX_ZOOM, MIN_ZOOM, THEME, ZOOM_STEP, } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
@@ -16,6 +16,7 @@ import { newElementWith } from "../element/mutateElement";
 import { getDefaultAppState, isEraserActive, isHandToolActive, } from "../appState";
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import { setCursor } from "../cursor";
+import { StoreAction } from "../store";
 export const actionChangeViewBackgroundColor = register({
     name: "changeViewBackgroundColor",
     label: "labels.canvasBackground",
@@ -28,7 +29,9 @@ export const actionChangeViewBackgroundColor = register({
     perform: (_, appState, value) => {
         return {
             appState: { ...appState, ...value },
-            commitToHistory: !!value.viewBackgroundColor,
+            storeAction: !!value.viewBackgroundColor
+                ? StoreAction.CAPTURE
+                : StoreAction.NONE,
         };
     },
     PanelComponent: ({ elements, appState, updateData, appProps }) => {
@@ -59,13 +62,13 @@ export const actionClearCanvas = register({
                 exportBackground: appState.exportBackground,
                 exportEmbedScene: appState.exportEmbedScene,
                 gridSize: appState.gridSize,
-                showStats: appState.showStats,
+                stats: appState.stats,
                 pasteDialog: appState.pasteDialog,
                 activeTool: appState.activeTool.type === "image"
                     ? { ...appState.activeTool, type: "selection" }
                     : appState.activeTool,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
 });
@@ -86,10 +89,10 @@ export const actionZoomIn = register({
                 }, appState),
                 userToFollow: null,
             },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
-    PanelComponent: ({ updateData }) => (_jsx(ToolButton, { type: "button", className: "zoom-in-button zoom-button", icon: ZoomInIcon, title: `${t("buttons.zoomIn")} — ${getShortcutKey("CtrlOrCmd++")}`, "aria-label": t("buttons.zoomIn"), onClick: () => {
+    PanelComponent: ({ updateData, appState }) => (_jsx(ToolButton, { type: "button", className: "zoom-in-button zoom-button", icon: ZoomInIcon, title: `${t("buttons.zoomIn")} — ${getShortcutKey("CtrlOrCmd++")}`, "aria-label": t("buttons.zoomIn"), disabled: appState.zoom.value >= MAX_ZOOM, onClick: () => {
             updateData(null);
         } })),
     keyTest: (event) => (event.code === CODES.EQUAL || event.code === CODES.NUM_ADD) &&
@@ -112,10 +115,10 @@ export const actionZoomOut = register({
                 }, appState),
                 userToFollow: null,
             },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
-    PanelComponent: ({ updateData }) => (_jsx(ToolButton, { type: "button", className: "zoom-out-button zoom-button", icon: ZoomOutIcon, title: `${t("buttons.zoomOut")} — ${getShortcutKey("CtrlOrCmd+-")}`, "aria-label": t("buttons.zoomOut"), onClick: () => {
+    PanelComponent: ({ updateData, appState }) => (_jsx(ToolButton, { type: "button", className: "zoom-out-button zoom-button", icon: ZoomOutIcon, title: `${t("buttons.zoomOut")} — ${getShortcutKey("CtrlOrCmd+-")}`, "aria-label": t("buttons.zoomOut"), disabled: appState.zoom.value <= MIN_ZOOM, onClick: () => {
             updateData(null);
         } })),
     keyTest: (event) => (event.code === CODES.MINUS || event.code === CODES.NUM_SUBTRACT) &&
@@ -138,7 +141,7 @@ export const actionResetZoom = register({
                 }, appState),
                 userToFollow: null,
             },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     PanelComponent: ({ updateData, appState }) => (_jsx(Tooltip, { label: t("buttons.resetZoom"), style: { height: "100%" }, children: _jsxs(ToolButton, { type: "button", className: "reset-zoom-button zoom-button", title: t("buttons.resetZoom"), "aria-label": t("buttons.resetZoom"), onClick: () => {
@@ -171,7 +174,7 @@ export const zoomToFitBounds = ({ bounds, appState, fitToViewport = false, viewp
         newZoomValue =
             Math.min(appState.width / commonBoundsWidth, appState.height / commonBoundsHeight) * Math.min(1, Math.max(viewportZoomFactor, 0.1));
         // Apply clamping to newZoomValue to be between 10% and 3000%
-        newZoomValue = Math.min(Math.max(newZoomValue, 0.1), 30.0);
+        newZoomValue = Math.min(Math.max(newZoomValue, MIN_ZOOM), MAX_ZOOM);
         let appStateWidth = appState.width;
         if (appState.openSidebar) {
             const sidebarDOMElem = document.querySelector(".sidebar");
@@ -207,7 +210,7 @@ export const zoomToFitBounds = ({ bounds, appState, fitToViewport = false, viewp
             scrollY,
             zoom: { value: newZoomValue },
         },
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
     };
 };
 export const zoomToFit = ({ targetElements, appState, fitToViewport, viewportZoomFactor, }) => {
@@ -303,7 +306,7 @@ export const actionToggleTheme = register({
                 ...appState,
                 theme: value || (appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT),
             },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
@@ -339,7 +342,7 @@ export const actionToggleEraserTool = register({
                 activeEmbeddable: null,
                 activeTool,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => event.key === KEYS.E,
@@ -376,7 +379,7 @@ export const actionToggleHandTool = register({
                 activeEmbeddable: null,
                 activeTool,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => !event.altKey && !event[KEYS.CTRL_OR_CMD] && event.key === KEYS.H,