@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-b7babe5

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

@@ -17,7 +17,7 @@ export declare const actionChangeProjectName: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -77,14 +77,14 @@ export declare const actionChangeProjectName: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -141,7 +141,7 @@ export declare const actionChangeProjectName: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -154,7 +154,7 @@ export declare const actionChangeProjectName: {
         };
         commitToHistory: false;
     };
-    PanelComponent: ({ appState, updateData, appProps, data }: import("./types").PanelComponentProps) => JSX.Element;
+    PanelComponent: ({ appState, updateData, appProps, data, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
     keyTest?: undefined;
 };
@@ -177,7 +177,7 @@ export declare const actionChangeExportScale: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -224,7 +224,7 @@ export declare const actionChangeExportScale: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -237,14 +237,14 @@ export declare const actionChangeExportScale: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -301,7 +301,7 @@ export declare const actionChangeExportScale: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -337,7 +337,7 @@ export declare const actionChangeExportBackground: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -384,7 +384,7 @@ export declare const actionChangeExportBackground: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -397,14 +397,14 @@ export declare const actionChangeExportBackground: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -461,7 +461,7 @@ export declare const actionChangeExportBackground: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -497,7 +497,7 @@ export declare const actionChangeExportEmbedScene: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -544,7 +544,7 @@ export declare const actionChangeExportEmbedScene: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -557,14 +557,14 @@ export declare const actionChangeExportEmbedScene: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -621,7 +621,7 @@ export declare const actionChangeExportEmbedScene: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -661,7 +661,7 @@ export declare const actionSaveToActiveFile: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -709,7 +709,7 @@ export declare const actionSaveToActiveFile: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -722,14 +722,14 @@ export declare const actionSaveToActiveFile: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -780,7 +780,7 @@ export declare const actionSaveToActiveFile: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -823,7 +823,7 @@ export declare const actionSaveFileToDisk: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -871,7 +871,7 @@ export declare const actionSaveFileToDisk: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -932,7 +932,7 @@ export declare const actionSaveFileToDisk: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -971,7 +971,7 @@ export declare const actionLoadScene: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -1019,7 +1019,7 @@ export declare const actionLoadScene: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -1032,14 +1032,14 @@ export declare const actionLoadScene: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -1092,7 +1092,7 @@ export declare const actionLoadScene: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -1118,7 +1118,7 @@ export declare const actionLoadScene: {
             isLoading: boolean;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -1166,7 +1166,7 @@ export declare const actionLoadScene: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -1179,14 +1179,14 @@ export declare const actionLoadScene: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -1243,7 +1243,7 @@ export declare const actionLoadScene: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -1280,7 +1280,7 @@ export declare const actionExportWithDarkMode: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -1327,7 +1327,7 @@ export declare const actionExportWithDarkMode: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -1340,14 +1340,14 @@ export declare const actionExportWithDarkMode: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -1404,7 +1404,7 @@ export declare const actionExportWithDarkMode: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {

package/dist/excalidraw/actions/actionExport.js

@@ -24,7 +24,7 @@ export const actionChangeProjectName = register({
     perform: (_elements, appState, value) => {
         return { appState: { ...appState, name: value }, commitToHistory: false };
     },
-    PanelComponent: ({ appState, updateData, appProps, data }) => (_jsx(ProjectName, { label: t("labels.fileTitle"), value: appState.name || "Unnamed", onChange: (name) => updateData(name), isNameEditable: typeof appProps.name === "undefined" && !appState.viewModeEnabled, ignoreFocus: data?.ignoreFocus ?? false })),
+    PanelComponent: ({ appState, updateData, appProps, data, app }) => (_jsx(ProjectName, { label: t("labels.fileTitle"), value: app.getName(), onChange: (name) => updateData(name), ignoreFocus: data?.ignoreFocus ?? false })),
 });
 export const actionChangeExportScale = register({
     name: "changeExportScale",
@@ -82,8 +82,8 @@ export const actionSaveToActiveFile = register({
         const fileHandleExists = !!appState.fileHandle;
         try {
             const { fileHandle } = isImageFileHandle(appState.fileHandle)
-                ? await resaveAsImageWithScene(elements, appState, app.files)
-                : await saveAsJSON(elements, appState, app.files);
+                ? await resaveAsImageWithScene(elements, appState, app.files, app.getName())
+                : await saveAsJSON(elements, appState, app.files, app.getName());
             return {
                 commitToHistory: false,
                 appState: {
@@ -120,7 +120,7 @@ export const actionSaveFileToDisk = register({
             const { fileHandle } = await saveAsJSON(elements, {
                 ...appState,
                 fileHandle: null,
-            }, app.files);
+            }, app.files, app.getName());
             return {
                 commitToHistory: false,
                 appState: {

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

@@ -19,7 +19,7 @@ export declare const actionFinalize: {
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
                 element: import("../element/types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                state: "hover" | "active";
             } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -65,7 +65,7 @@ export declare const actionFinalize: {
             scrollX: number;
             scrollY: number;
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -78,14 +78,14 @@ export declare const actionFinalize: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -142,7 +142,7 @@ export declare const actionFinalize: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -217,7 +217,7 @@ export declare const actionFinalize: {
             scrollX: number;
             scrollY: number;
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -230,14 +230,14 @@ export declare const actionFinalize: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
@@ -290,7 +290,7 @@ export declare const actionFinalize: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
                 x: number;

package/dist/excalidraw/actions/actionFinalize.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { updateActiveTool } from "../utils";
+import { arrayToMap, updateActiveTool } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@@ -17,12 +17,13 @@ export const actionFinalize = register({
     name: "finalize",
     trackEvent: false,
     perform: (elements, appState, _, { interactiveCanvas, focusContainer, scene }) => {
+        const elementsMap = scene.getNonDeletedElementsMap();
         if (appState.editingLinearElement) {
             const { elementId, startBindingElement, endBindingElement } = appState.editingLinearElement;
-            const element = LinearElementEditor.getElement(elementId);
+            const element = LinearElementEditor.getElement(elementId, elementsMap);
             if (element) {
                 if (isBindingElement(element)) {
-                    bindOrUnbindLinearElement(element, startBindingElement, endBindingElement);
+                    bindOrUnbindLinearElement(element, startBindingElement, endBindingElement, elementsMap);
                 }
                 return {
                     elements: element.points.length < 2 || isInvisiblySmallElement(element)
@@ -85,8 +86,8 @@ export const actionFinalize = register({
             if (isBindingElement(multiPointElement) &&
                 !isLoop &&
                 multiPointElement.points.length > 1) {
-                const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(multiPointElement, -1);
-                maybeBindLinearElement(multiPointElement, appState, Scene.getScene(multiPointElement), { x, y });
+                const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(multiPointElement, -1, arrayToMap(elements));
+                maybeBindLinearElement(multiPointElement, appState, Scene.getScene(multiPointElement), { x, y }, elementsMap);
             }
         }
         if ((!appState.activeTool.locked &&
@@ -134,7 +135,7 @@ export const actionFinalize = register({
                     : appState.selectedElementIds,
                 // To select the linear element when user has finished mutipoint editing
                 selectedLinearElement: multiPointElement && isLinearElement(multiPointElement)
-                    ? new LinearElementEditor(multiPointElement, scene)
+                    ? new LinearElementEditor(multiPointElement)
                     : appState.selectedLinearElement,
                 pendingImageElementId: null,
             },

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

@@ -7,7 +7,7 @@ export declare const actionFlipHorizontal: {
         category: "element";
     };
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
-        elements: import("../scene/Scene").ExcalidrawElementsIncludingDeleted;
+        elements: ExcalidrawElement[];
         appState: Readonly<AppState>;
         commitToHistory: true;
     };
@@ -22,7 +22,7 @@ export declare const actionFlipVertical: {
         category: "element";
     };
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
-        elements: import("../scene/Scene").ExcalidrawElementsIncludingDeleted;
+        elements: ExcalidrawElement[];
         appState: Readonly<AppState>;
         commitToHistory: true;
     };

package/dist/excalidraw/actions/actionFlip.js

@@ -12,7 +12,7 @@ export const actionFlipHorizontal = register({
     trackEvent: { category: "element" },
     perform: (elements, appState, _, app) => {
         return {
-            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, appState, "horizontal"), appState, app),
+            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "horizontal"), appState, app),
             appState,
             commitToHistory: true,
         };
@@ -25,7 +25,7 @@ export const actionFlipVertical = register({
     trackEvent: { category: "element" },
     perform: (elements, appState, _, app) => {
         return {
-            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, appState, "vertical"), appState, app),
+            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "vertical"), appState, app),
             appState,
             commitToHistory: true,
         };
@@ -33,20 +33,20 @@ export const actionFlipVertical = register({
     keyTest: (event) => event.shiftKey && event.code === CODES.V && !event[KEYS.CTRL_OR_CMD],
     contextItemLabel: "labels.flipVertical",
 });
-const flipSelectedElements = (elements, appState, flipDirection) => {
+const flipSelectedElements = (elements, elementsMap, appState, flipDirection) => {
     const selectedElements = getSelectedElements(getNonDeletedElements(elements), appState, {
         includeBoundTextElement: true,
         includeElementsInFrames: true,
     });
-    const updatedElements = flipElements(selectedElements, appState, flipDirection);
+    const updatedElements = flipElements(selectedElements, elements, elementsMap, appState, flipDirection);
     const updatedElementsMap = arrayToMap(updatedElements);
     return elements.map((element) => updatedElementsMap.get(element.id) || element);
 };
-const flipElements = (elements, appState, flipDirection) => {
-    const { minX, minY, maxX, maxY } = getCommonBoundingBox(elements);
-    resizeMultipleElements({ originalElements: arrayToMap(elements) }, elements, "nw", true, flipDirection === "horizontal" ? maxX : minX, flipDirection === "horizontal" ? minY : maxY);
-    (isBindingEnabled(appState)
-        ? bindOrUnbindSelectedElements
-        : unbindLinearElements)(elements);
-    return elements;
+const flipElements = (selectedElements, elements, elementsMap, appState, flipDirection) => {
+    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);
+    return selectedElements;
 };