@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-1ed53b1

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { Theme } from "../element/types";
+import type { Theme } from "../element/types";
 import "../components/ToolIcon.scss";
 export declare const actionChangeProjectName: {
     name: "changeProjectName";
     label: string;
     trackEvent: false;
-    perform: (_elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
         appState: {
             name: any;
             contextMenu: {
@@ -158,7 +158,7 @@ export declare const actionChangeProjectName: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
     PanelComponent: ({ appState, updateData, appProps, data, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -171,7 +171,7 @@ export declare const actionChangeExportScale: {
         category: "export";
         action: string;
     };
-    perform: (_elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
         appState: {
             exportScale: any;
             contextMenu: {
@@ -324,7 +324,7 @@ export declare const actionChangeExportScale: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
     PanelComponent: ({ elements: allElements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -337,7 +337,7 @@ export declare const actionChangeExportBackground: {
         category: "export";
         action: string;
     };
-    perform: (_elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
         appState: {
             exportBackground: any;
             contextMenu: {
@@ -490,7 +490,7 @@ export declare const actionChangeExportBackground: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
     PanelComponent: ({ appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -503,7 +503,7 @@ export declare const actionChangeExportEmbedScene: {
         category: "export";
         action: string;
     };
-    perform: (_elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
         appState: {
             exportEmbedScene: any;
             contextMenu: {
@@ -656,7 +656,7 @@ export declare const actionChangeExportEmbedScene: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
     PanelComponent: ({ appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -670,8 +670,8 @@ export declare const actionSaveToActiveFile: {
         category: "export";
     };
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
-    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any, app: import("../types").AppClassProperties) => Promise<{
-        commitToHistory: false;
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any, app: import("../types").AppClassProperties) => Promise<{
+        storeAction: import("../store").StoreActionType;
         appState: {
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             toast: {
@@ -823,12 +823,12 @@ export declare const actionSaveToActiveFile: {
             followedBy: Set<import("../types").SocketId>;
         };
     } | {
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
         appState?: undefined;
     }>;
-    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 actionSaveFileToDisk: {
     name: "saveFileToDisk";
@@ -838,8 +838,8 @@ export declare const actionSaveFileToDisk: {
     trackEvent: {
         category: "export";
     };
-    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any, app: import("../types").AppClassProperties) => Promise<{
-        commitToHistory: false;
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any, app: import("../types").AppClassProperties) => Promise<{
+        storeAction: import("../store").StoreActionType;
         appState: {
             openDialog: null;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
@@ -980,13 +980,13 @@ export declare const actionSaveFileToDisk: {
             followedBy: Set<import("../types").SocketId>;
         };
     } | {
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
         appState?: undefined;
     }>;
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     PanelComponent: ({ updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionLoadScene: {
     name: "loadScene";
@@ -995,9 +995,14 @@ export declare const actionLoadScene: {
         category: "export";
     };
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
-    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties) => Promise<false | {
-        elements: import("../element/types").ExcalidrawElement[];
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties) => Promise<false | {
+        elements: import("../element/types").OrderedExcalidrawElement[];
         appState: {
+            viewModeEnabled: boolean;
+            zenModeEnabled: boolean;
+            objectsSnapModeEnabled: boolean;
+            theme: Theme;
+            name: string | null;
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
@@ -1056,7 +1061,6 @@ export declare const actionLoadScene: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -1095,10 +1099,7 @@ export declare const actionLoadScene: {
                 closable?: boolean | undefined;
                 duration?: number | undefined;
             } | null;
-            zenModeEnabled: boolean;
-            theme: Theme;
             gridSize: number | null;
-            viewModeEnabled: boolean;
             selectedGroupIds: {
                 [groupId: string]: boolean;
             };
@@ -1141,14 +1142,13 @@ export declare const actionLoadScene: {
                 x: number;
                 y: number;
             } | null;
-            objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
         files: import("../types").BinaryFiles;
-        commitToHistory: true;
+        storeAction: import("../store").StoreActionType;
     } | {
-        elements: readonly import("../element/types").ExcalidrawElement[];
+        elements: readonly import("../element/types").OrderedExcalidrawElement[];
         appState: {
             errorMessage: any;
             contextMenu: {
@@ -1302,11 +1302,11 @@ export declare const actionLoadScene: {
             followedBy: Set<import("../types").SocketId>;
         };
         files: import("../types").BinaryFiles;
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     }>;
-    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 actionExportWithDarkMode: {
     name: "exportWithDarkMode";
@@ -1315,7 +1315,7 @@ export declare const actionExportWithDarkMode: {
         category: "export";
         action: string;
     };
-    perform: (_elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any) => {
         appState: {
             exportWithDarkMode: any;
             contextMenu: {
@@ -1468,7 +1468,7 @@ export declare const actionExportWithDarkMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
     PanelComponent: ({ appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {

package/dist/excalidraw/actions/actionExport.js

@@ -18,12 +18,16 @@ import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import "../components/ToolIcon.scss";
+import { StoreAction } from "../store";
 export const actionChangeProjectName = register({
     name: "changeProjectName",
     label: "labels.fileTitle",
     trackEvent: false,
     perform: (_elements, appState, value) => {
-        return { appState: { ...appState, name: value }, commitToHistory: false };
+        return {
+            appState: { ...appState, name: value },
+            storeAction: StoreAction.NONE,
+        };
     },
     PanelComponent: ({ appState, updateData, appProps, data, app }) => (_jsx(ProjectName, { label: t("labels.fileTitle"), value: app.getName(), onChange: (name) => updateData(name), ignoreFocus: data?.ignoreFocus ?? false })),
 });
@@ -34,7 +38,7 @@ export const actionChangeExportScale = register({
     perform: (_elements, appState, value) => {
         return {
             appState: { ...appState, exportScale: value },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     PanelComponent: ({ elements: allElements, appState, updateData }) => {
@@ -57,7 +61,7 @@ export const actionChangeExportBackground = register({
     perform: (_elements, appState, value) => {
         return {
             appState: { ...appState, exportBackground: value },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     PanelComponent: ({ appState, updateData }) => (_jsx(CheckboxItem, { checked: appState.exportBackground, onChange: (checked) => updateData(checked), children: t("imageExportDialog.label.withBackground") })),
@@ -69,7 +73,7 @@ export const actionChangeExportEmbedScene = register({
     perform: (_elements, appState, value) => {
         return {
             appState: { ...appState, exportEmbedScene: value },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     PanelComponent: ({ appState, updateData }) => (_jsxs(CheckboxItem, { checked: appState.exportEmbedScene, onChange: (checked) => updateData(checked), children: [t("imageExportDialog.label.embedScene"), _jsx(Tooltip, { label: t("imageExportDialog.tooltip.embedScene"), long: true, children: _jsx("div", { className: "excalidraw-tooltip-icon", children: questionCircle }) })] })),
@@ -91,7 +95,7 @@ export const actionSaveToActiveFile = register({
                 ? await resaveAsImageWithScene(elements, appState, app.files, app.getName())
                 : await saveAsJSON(elements, appState, app.files, app.getName());
             return {
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
                 appState: {
                     ...appState,
                     fileHandle,
@@ -112,7 +116,7 @@ export const actionSaveToActiveFile = register({
             else {
                 console.warn(error);
             }
-            return { commitToHistory: false };
+            return { storeAction: StoreAction.NONE };
         }
     },
     keyTest: (event) => event.key === KEYS.S && event[KEYS.CTRL_OR_CMD] && !event.shiftKey,
@@ -130,7 +134,7 @@ export const actionSaveFileToDisk = register({
                 fileHandle: null,
             }, app.files, app.getName());
             return {
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
                 appState: {
                     ...appState,
                     openDialog: null,
@@ -146,7 +150,7 @@ export const actionSaveFileToDisk = register({
             else {
                 console.warn(error);
             }
-            return { commitToHistory: false };
+            return { storeAction: StoreAction.NONE };
         }
     },
     keyTest: (event) => event.key === KEYS.S && event.shiftKey && event[KEYS.CTRL_OR_CMD],
@@ -166,7 +170,7 @@ export const actionLoadScene = register({
                 elements: loadedElements,
                 appState: loadedAppState,
                 files,
-                commitToHistory: true,
+                storeAction: StoreAction.CAPTURE,
             };
         }
         catch (error) {
@@ -178,7 +182,7 @@ export const actionLoadScene = register({
                 elements,
                 appState: { ...appState, errorMessage: error.message },
                 files: app.files,
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
             };
         }
     },
@@ -191,7 +195,7 @@ export const actionExportWithDarkMode = register({
     perform: (_elements, appState, value) => {
         return {
             appState: { ...appState, exportWithDarkMode: value },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     PanelComponent: ({ appState, updateData }) => (_jsx("div", { style: {

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

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { AppState } from "../types";
+import type { AppState } from "../types";
 export declare const actionFinalize: {
     name: "finalize";
     label: string;
     trackEvent: false;
-    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<AppState>, _: any, { interactiveCanvas, focusContainer, scene }: import("../types").AppClassProperties) => {
-        elements: import("../element/types").ExcalidrawElement[] | undefined;
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+        elements: import("../element/types").OrderedExcalidrawElement[] | undefined;
         appState: {
             cursorButton: "up";
             editingLinearElement: null;
+            selectedLinearElement: null;
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
@@ -149,7 +150,6 @@ export declare const actionFinalize: {
             };
             pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
-            selectedLinearElement: LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
                 x: number;
@@ -159,9 +159,9 @@ export declare const actionFinalize: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: import("../store").StoreActionType;
     } | {
-        elements: readonly import("../element/types").ExcalidrawElement[];
+        elements: readonly import("../element/types").OrderedExcalidrawElement[];
         appState: {
             cursorButton: "up";
             activeTool: {
@@ -311,10 +311,10 @@ export declare const actionFinalize: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: boolean;
+        storeAction: import("../store").StoreActionType;
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent, appState: AppState) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: AppState) => boolean;
     PanelComponent: ({ appState, updateData, data }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent, appState: AppState) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: AppState) => boolean) | undefined;
 };

package/dist/excalidraw/actions/actionFinalize.js

@@ -9,15 +9,16 @@ import { register } from "./register";
 import { mutateElement } from "../element/mutateElement";
 import { isPathALoop } from "../math";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import Scene from "../scene/Scene";
 import { maybeBindLinearElement, bindOrUnbindLinearElement, } from "../element/binding";
 import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import { resetCursor } from "../cursor";
+import { StoreAction } from "../store";
 export const actionFinalize = register({
     name: "finalize",
     label: "",
     trackEvent: false,
-    perform: (elements, appState, _, { interactiveCanvas, focusContainer, scene }) => {
+    perform: (elements, appState, _, app) => {
+        const { interactiveCanvas, focusContainer, scene } = app;
         const elementsMap = scene.getNonDeletedElementsMap();
         if (appState.editingLinearElement) {
             const { elementId, startBindingElement, endBindingElement } = appState.editingLinearElement;
@@ -34,8 +35,9 @@ export const actionFinalize = register({
                         ...appState,
                         cursorButton: "up",
                         editingLinearElement: null,
+                        selectedLinearElement: null,
                     },
-                    commitToHistory: true,
+                    storeAction: StoreAction.CAPTURE,
                 };
             }
         }
@@ -66,6 +68,7 @@ export const actionFinalize = register({
                 }
             }
             if (isInvisiblySmallElement(multiPointElement)) {
+                // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
                 newElements = newElements.filter((el) => el.id !== multiPointElement.id);
             }
             // If the multi point line closes the loop,
@@ -88,7 +91,7 @@ export const actionFinalize = register({
                 !isLoop &&
                 multiPointElement.points.length > 1) {
                 const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(multiPointElement, -1, arrayToMap(elements));
-                maybeBindLinearElement(multiPointElement, appState, Scene.getScene(multiPointElement), { x, y }, elementsMap);
+                maybeBindLinearElement(multiPointElement, appState, { x, y }, app);
             }
         }
         if ((!appState.activeTool.locked &&
@@ -140,7 +143,8 @@ export const actionFinalize = register({
                     : appState.selectedLinearElement,
                 pendingImageElementId: null,
             },
-            commitToHistory: appState.activeTool.type === "freedraw",
+            // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event, appState) => (event.key === KEYS.ESCAPE &&

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppClassProperties, AppState } from "../types";
 export declare const actionFlipHorizontal: {
     name: "flipHorizontal";
     label: string;
@@ -8,14 +8,14 @@ export declare const actionFlipHorizontal: {
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         elements: ExcalidrawElement[];
         appState: Readonly<AppState>;
-        commitToHistory: true;
+        storeAction: import("../store").StoreActionType;
     };
-    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 actionFlipVertical: {
     name: "flipVertical";
@@ -24,12 +24,12 @@ export declare const actionFlipVertical: {
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         elements: ExcalidrawElement[];
         appState: Readonly<AppState>;
-        commitToHistory: true;
+        storeAction: import("../store").StoreActionType;
     };
-    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/actionFlip.js

@@ -5,9 +5,11 @@ import { resizeMultipleElements } from "../element/resizeElements";
 import { arrayToMap } from "../utils";
 import { CODES, KEYS } from "../keys";
 import { getCommonBoundingBox } from "../element/bounds";
-import { bindOrUnbindSelectedElements, isBindingEnabled, unbindLinearElements, } from "../element/binding";
+import { bindOrUnbindLinearElements, isBindingEnabled, } from "../element/binding";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { flipHorizontal, flipVertical } from "../components/icons";
+import { StoreAction } from "../store";
+import { isLinearElement } from "../element/typeChecks";
 export const actionFlipHorizontal = register({
     name: "flipHorizontal",
     label: "labels.flipHorizontal",
@@ -15,9 +17,9 @@ export const actionFlipHorizontal = register({
     trackEvent: { category: "element" },
     perform: (elements, appState, _, app) => {
         return {
-            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "horizontal"), appState, app),
+            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "horizontal", app), appState, app),
             appState,
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => event.shiftKey && event.code === CODES.H,
@@ -29,27 +31,25 @@ export const actionFlipVertical = register({
     trackEvent: { category: "element" },
     perform: (elements, appState, _, app) => {
         return {
-            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "vertical"), appState, app),
+            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "vertical", app), appState, app),
             appState,
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => event.shiftKey && event.code === CODES.V && !event[KEYS.CTRL_OR_CMD],
 });
-const flipSelectedElements = (elements, elementsMap, appState, flipDirection) => {
+const flipSelectedElements = (elements, elementsMap, appState, flipDirection, app) => {
     const selectedElements = getSelectedElements(getNonDeletedElements(elements), appState, {
         includeBoundTextElement: true,
         includeElementsInFrames: true,
     });
-    const updatedElements = flipElements(selectedElements, elements, elementsMap, appState, flipDirection);
+    const updatedElements = flipElements(selectedElements, elementsMap, appState, flipDirection, app);
     const updatedElementsMap = arrayToMap(updatedElements);
     return elements.map((element) => updatedElementsMap.get(element.id) || element);
 };
-const flipElements = (selectedElements, elements, elementsMap, appState, flipDirection) => {
+const flipElements = (selectedElements, elementsMap, appState, flipDirection, app) => {
     const { minX, minY, maxX, maxY } = getCommonBoundingBox(selectedElements);
-    resizeMultipleElements(elementsMap, selectedElements, elementsMap, "nw", true, flipDirection === "horizontal" ? maxX : minX, flipDirection === "horizontal" ? minY : maxY);
-    isBindingEnabled(appState)
-        ? bindOrUnbindSelectedElements(selectedElements, elements, elementsMap)
-        : unbindLinearElements(selectedElements, elementsMap);
+    resizeMultipleElements(elementsMap, selectedElements, elementsMap, "nw", true, true, flipDirection === "horizontal" ? maxX : minX, flipDirection === "horizontal" ? minY : maxY);
+    bindOrUnbindLinearElements(selectedElements.filter(isLinearElement), app, isBindingEnabled(appState), []);
     return selectedElements;
 };