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

package/dist/excalidraw/actions/actionClipboard.js

@@ -7,6 +7,7 @@ import { isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
+import { StoreAction } from "../store";
 export const actionCopy = register({
     name: "copy",
     label: "labels.copy",
@@ -23,7 +24,7 @@ export const actionCopy = register({
         }
         catch (error) {
             return {
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
                 appState: {
                     ...appState,
                     errorMessage: error.message,
@@ -31,7 +32,7 @@ export const actionCopy = register({
             };
         }
         return {
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     // don't supply a shortcut since we handle this conditionally via onCopy event
@@ -55,7 +56,7 @@ export const actionPaste = register({
             console.error(`actionPaste ${error.name}: ${error.message}`);
             if (isFirefox) {
                 return {
-                    commitToHistory: false,
+                    storeAction: StoreAction.NONE,
                     appState: {
                         ...appState,
                         errorMessage: t("hints.firefox_clipboard_write"),
@@ -63,7 +64,7 @@ export const actionPaste = register({
                 };
             }
             return {
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
                 appState: {
                     ...appState,
                     errorMessage: t("errors.asyncPasteFailedOnRead"),
@@ -76,7 +77,7 @@ export const actionPaste = register({
         catch (error) {
             console.error(error);
             return {
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
                 appState: {
                     ...appState,
                     errorMessage: t("errors.asyncPasteFailedOnParse"),
@@ -84,7 +85,7 @@ export const actionPaste = register({
             };
         }
         return {
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     // don't supply a shortcut since we handle this conditionally via onCopy event
@@ -109,7 +110,7 @@ export const actionCopyAsSvg = register({
     perform: async (elements, appState, _data, app) => {
         if (!app.canvas) {
             return {
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
             };
         }
         const { exportedElements, exportingFrame } = prepareElementsForExport(elements, appState, true);
@@ -120,7 +121,7 @@ export const actionCopyAsSvg = register({
                 name: app.getName(),
             });
             return {
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
             };
         }
         catch (error) {
@@ -130,7 +131,7 @@ export const actionCopyAsSvg = register({
                     ...appState,
                     errorMessage: error.message,
                 },
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
             };
         }
     },
@@ -147,7 +148,7 @@ export const actionCopyAsPng = register({
     perform: async (elements, appState, _data, app) => {
         if (!app.canvas) {
             return {
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
             };
         }
         const selectedElements = app.scene.getSelectedElements({
@@ -176,7 +177,7 @@ export const actionCopyAsPng = register({
                         }),
                     },
                 },
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
             };
         }
         catch (error) {
@@ -186,7 +187,7 @@ export const actionCopyAsPng = register({
                     ...appState,
                     errorMessage: error.message,
                 },
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
             };
         }
     },
@@ -220,7 +221,7 @@ export const copyText = register({
             throw new Error(t("errors.copyToSystemClipboardFailed"));
         }
         return {
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     predicate: (elements, appState, _, app) => {

package/dist/excalidraw/actions/actionDeleteSelected.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 { AppState } from "../types";
 import { LinearElementEditor } from "../element/linearElementEditor";
 export declare const actionDeleteSelected: {
     name: "deleteSelectedElements";
@@ -10,8 +10,8 @@ export declare const actionDeleteSelected: {
         category: "element";
         action: string;
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: import("../types").AppClassProperties) => false | {
-        elements: ExcalidrawElement[];
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: import("../types").AppClassProperties) => false | {
+        elements: import("../element/types").OrderedExcalidrawElement[];
         appState: {
             editingLinearElement: null;
             contextMenu: {
@@ -164,9 +164,9 @@ export declare const actionDeleteSelected: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: "capture";
     } | {
-        elements: readonly ExcalidrawElement[];
+        elements: readonly import("../element/types").OrderedExcalidrawElement[];
         appState: {
             editingLinearElement: {
                 selectedPointsIndices: number[];
@@ -347,7 +347,7 @@ export declare const actionDeleteSelected: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: "capture";
     } | {
         elements: ExcalidrawElement[];
         appState: {
@@ -495,10 +495,10 @@ export declare const actionDeleteSelected: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: boolean;
+        storeAction: "none" | "capture";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent, appState: AppState, elements: readonly ExcalidrawElement[]) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: AppState, elements: readonly ExcalidrawElement[]) => boolean;
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent, appState: AppState, elements: readonly ExcalidrawElement[]) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: AppState, elements: readonly ExcalidrawElement[]) => boolean) | undefined;
 };

package/dist/excalidraw/actions/actionDeleteSelected.js

@@ -12,6 +12,7 @@ import { fixBindingsAfterDeletion } from "../element/binding";
 import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
+import { StoreAction } from "../store";
 const deleteSelectedElements = (elements, appState) => {
     const framesToBeDeleted = new Set(getSelectedElements(elements.filter((el) => isFrameLikeElement(el)), appState).map((el) => el.id));
     return {
@@ -82,7 +83,7 @@ export const actionDeleteSelected = register({
                         ...nextAppState,
                         editingLinearElement: null,
                     },
-                    commitToHistory: false,
+                    storeAction: StoreAction.CAPTURE,
                 };
             }
             // We cannot do this inside `movePoint` because it is also called
@@ -108,7 +109,7 @@ export const actionDeleteSelected = register({
                             : [0],
                     },
                 },
-                commitToHistory: true,
+                storeAction: StoreAction.CAPTURE,
             };
         }
         let { elements: nextElements, appState: nextAppState } = deleteSelectedElements(elements, appState);
@@ -122,7 +123,9 @@ export const actionDeleteSelected = register({
                 multiElement: null,
                 activeEmbeddable: null,
             },
-            commitToHistory: isSomeElementSelected(getNonDeletedElements(elements), appState),
+            storeAction: isSomeElementSelected(getNonDeletedElements(elements), appState)
+                ? StoreAction.CAPTURE
+                : StoreAction.NONE,
         };
     },
     keyTest: (event, appState, elements) => (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) &&

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

@@ -1,21 +1,21 @@
 /// <reference types="react" />
-import { ExcalidrawElement } from "../element/types";
-import { AppClassProperties, AppState } from "../types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppClassProperties, AppState } from "../types";
 export declare const distributeHorizontally: {
     name: "distributeHorizontally";
     label: string;
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
-        commitToHistory: true;
+        storeAction: "capture";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     PanelComponent: ({ elements, appState, updateData, app }: 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 distributeVertically: {
     name: "distributeVertically";
@@ -23,13 +23,13 @@ export declare const distributeVertically: {
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
-        commitToHistory: true;
+        storeAction: "capture";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     PanelComponent: ({ elements, appState, updateData, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };

package/dist/excalidraw/actions/actionDistribute.js

@@ -8,6 +8,7 @@ import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
+import { StoreAction } from "../store";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 const enableActionGroup = (appState, app) => {
@@ -33,7 +34,7 @@ export const distributeHorizontally = register({
                 space: "between",
                 axis: "x",
             }),
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
@@ -50,7 +51,7 @@ export const distributeVertically = register({
                 space: "between",
                 axis: "y",
             }),
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,

package/dist/excalidraw/actions/actionDuplicateSelection.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 { AppState } from "../types";
 export declare const actionDuplicateSelection: {
     name: "duplicateSelection";
     label: string;
@@ -8,16 +8,15 @@ export declare const actionDuplicateSelection: {
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: import("../types").AppClassProperties) => false | {
-        commitToHistory: true;
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: import("../types").AppClassProperties) => false | {
+        storeAction: "capture";
         elements?: readonly ExcalidrawElement[] | null | undefined;
-        appState?: import("../utility-types").MarkOptional<AppState, "offsetTop" | "offsetLeft" | "width" | "height"> | null | undefined;
+        appState?: import("../utility-types").MarkOptional<AppState, "width" | "height" | "offsetTop" | "offsetLeft"> | null | undefined;
         files?: import("../types").BinaryFiles | null | undefined;
-        syncHistory?: boolean | undefined;
         replaceFiles?: boolean | undefined;
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };

package/dist/excalidraw/actions/actionDuplicateSelection.js

@@ -16,6 +16,8 @@ import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
 import { bindElementsToFramesAfterDuplication, getFrameChildren, } from "../frame";
 import { excludeElementsInFramesFromSelection, getSelectedElements, } from "../scene/selection";
+import { syncMovedIndices } from "../fractionalIndex";
+import { StoreAction } from "../store";
 export const actionDuplicateSelection = register({
     name: "duplicateSelection",
     label: "labels.duplicateSelection",
@@ -32,12 +34,12 @@ export const actionDuplicateSelection = register({
             return {
                 elements,
                 appState: ret.appState,
-                commitToHistory: true,
+                storeAction: StoreAction.CAPTURE,
             };
         }
         return {
             ...duplicateElements(elements, appState),
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.D,
@@ -51,11 +53,13 @@ const duplicateElements = (elements, appState) => {
     const newElements = [];
     const oldElements = [];
     const oldIdToDuplicatedId = new Map();
+    const duplicatedElementsMap = new Map();
     const duplicateAndOffsetElement = (element) => {
         const newElement = duplicateElement(appState.editingGroupId, groupIdMap, element, {
             x: element.x + GRID_SIZE / 2,
             y: element.y + GRID_SIZE / 2,
         });
+        duplicatedElementsMap.set(newElement.id, newElement);
         oldIdToDuplicatedId.set(element.id, newElement.id);
         oldElements.push(element);
         newElements.push(newElement);
@@ -159,7 +163,7 @@ const duplicateElements = (elements, appState) => {
         }
     }
     // step (3)
-    const finalElements = finalElementsReversed.reverse();
+    const finalElements = syncMovedIndices(finalElementsReversed.reverse(), arrayToMap(newElements));
     // ---------------------------------------------------------------------------
     bindTextToShapeAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);
     fixBindingsAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ExcalidrawElement } from "../element/types";
+import type { ExcalidrawElement } from "../element/types";
 export declare const actionToggleElementLock: {
     name: "toggleElementLock";
     label: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>, app: import("../types").AppClassProperties) => "labels.elementLock.unlock" | "labels.elementLock.lock" | "labels.elementLock.lockAll" | "labels.elementLock.unlockAll";
@@ -8,8 +8,8 @@ export declare const actionToggleElementLock: {
         category: "element";
     };
     predicate: (elements: readonly ExcalidrawElement[], appState: import("../types").AppState, _: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties) => false | {
-        elements: ExcalidrawElement[];
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties) => false | {
+        elements: import("../element/types").OrderedExcalidrawElement[];
         appState: {
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             contextMenu: {
@@ -162,11 +162,11 @@ export declare const actionToggleElementLock: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: "capture";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent, appState: import("../types").AppState, elements: readonly ExcalidrawElement[], app: import("../types").AppClassProperties) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: import("../types").AppState, elements: readonly ExcalidrawElement[], app: import("../types").AppClassProperties) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent, appState: import("../types").AppState, elements: readonly ExcalidrawElement[], app: import("../types").AppClassProperties) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: import("../types").AppState, elements: readonly ExcalidrawElement[], app: import("../types").AppClassProperties) => boolean) | undefined;
 };
 export declare const actionUnlockAllElements: {
     name: "unlockAllElements";
@@ -177,8 +177,8 @@ export declare const actionUnlockAllElements: {
     viewMode: false;
     icon: JSX.Element;
     predicate: (elements: readonly ExcalidrawElement[], appState: import("../types").AppState) => boolean;
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
-        elements: ExcalidrawElement[];
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
+        elements: import("../element/types").OrderedExcalidrawElement[];
         appState: {
             selectedElementIds: {
                 [k: string]: true;
@@ -331,7 +331,7 @@ export declare const actionUnlockAllElements: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: "capture";
     };
     label: string;
 } & {

package/dist/excalidraw/actions/actionElementLock.js

@@ -3,6 +3,7 @@ import { newElementWith } from "../element/mutateElement";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
+import { StoreAction } from "../store";
 import { arrayToMap } from "../utils";
 import { register } from "./register";
 const shouldLock = (elements) => elements.every((el) => !el.locked);
@@ -56,7 +57,7 @@ export const actionToggleElementLock = register({
                     ? null
                     : appState.selectedLinearElement,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event, appState, elements, app) => {
@@ -93,7 +94,7 @@ export const actionUnlockAllElements = register({
                 ...appState,
                 selectedElementIds: Object.fromEntries(lockedElements.map((el) => [el.id, true])),
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     label: "labels.elementLock.unlockAll",