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

package/dist/excalidraw/actions/actionGroup.js

@@ -12,6 +12,8 @@ import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
 import { isBoundToContainer } from "../element/typeChecks";
 import { getElementsInResizingFrame, getFrameLikeElements, groupByFrameLikes, removeElementsFromFrame, replaceAllElementsInFrame, } from "../frame";
+import { syncMovedIndices } from "../fractionalIndex";
+import { StoreAction } from "../store";
 const allElementsInSameGroup = (elements) => {
     if (elements.length >= 2) {
         const groupIds = elements[0].groupIds;
@@ -42,7 +44,7 @@ export const actionGroup = register({
         });
         if (selectedElements.length < 2) {
             // nothing to group
-            return { appState, elements, commitToHistory: false };
+            return { appState, elements, storeAction: StoreAction.NONE };
         }
         // if everything is already grouped into 1 group, there is nothing to do
         const selectedGroupIds = getSelectedGroupIds(appState);
@@ -56,7 +58,7 @@ export const actionGroup = register({
             ]);
             if (combinedSet.size === elementIdsInGroup.size) {
                 // no incremental ids in the selected ids
-                return { appState, elements, commitToHistory: false };
+                return { appState, elements, storeAction: StoreAction.NONE };
             }
         }
         let nextElements = [...elements];
@@ -90,18 +92,14 @@ export const actionGroup = register({
         const elementsBeforeGroup = nextElements
             .slice(0, lastGroupElementIndex)
             .filter((updatedElement) => !isElementInGroup(updatedElement, newGroupId));
-        nextElements = [
-            ...elementsBeforeGroup,
-            ...elementsInGroup,
-            ...elementsAfterGroup,
-        ];
+        const reorderedElements = syncMovedIndices([...elementsBeforeGroup, ...elementsInGroup, ...elementsAfterGroup], arrayToMap(elementsInGroup));
         return {
             appState: {
                 ...appState,
                 ...selectGroup(newGroupId, { ...appState, selectedGroupIds: {} }, getNonDeletedElements(nextElements)),
             },
-            elements: nextElements,
-            commitToHistory: true,
+            elements: reorderedElements,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     predicate: (elements, appState, _, app) => enableActionGroup(elements, appState, app),
@@ -117,7 +115,7 @@ export const actionUngroup = register({
         const groupIds = getSelectedGroupIds(appState);
         const elementsMap = arrayToMap(elements);
         if (groupIds.length === 0) {
-            return { appState, elements, commitToHistory: false };
+            return { appState, elements, storeAction: StoreAction.NONE };
         }
         let nextElements = [...elements];
         const boundTextElementIds = [];
@@ -154,7 +152,7 @@ export const actionUngroup = register({
         return {
             appState: { ...appState, ...updateAppState },
             elements: nextElements,
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => event.shiftKey &&

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

@@ -1,6 +1,7 @@
-import { Action } from "./types";
-import History from "../history";
-type ActionCreator = (history: History) => Action;
+import type { Action } from "./types";
+import type { History } from "../history";
+import type { Store } from "../store";
+type ActionCreator = (history: History, store: Store) => Action;
 export declare const createUndoAction: ActionCreator;
 export declare const createRedoAction: ActionCreator;
 export {};

package/dist/excalidraw/actions/actionHistory.js

@@ -2,62 +2,61 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { UndoIcon, RedoIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
+import { HistoryChangedEvent } from "../history";
 import { KEYS } from "../keys";
-import { newElementWith } from "../element/mutateElement";
-import { fixBindingsAfterDeletion } from "../element/binding";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
-const writeData = (prevElements, appState, updater) => {
-    const commitToHistory = false;
+import { StoreAction } from "../store";
+import { useEmitter } from "../hooks/useEmitter";
+const writeData = (appState, updater) => {
     if (!appState.multiElement &&
         !appState.resizingElement &&
         !appState.editingElement &&
         !appState.draggingElement) {
-        const data = updater();
-        if (data === null) {
-            return { commitToHistory };
+        const result = updater();
+        if (!result) {
+            return { storeAction: StoreAction.NONE };
         }
-        const prevElementMap = arrayToMap(prevElements);
-        const nextElements = data.elements;
-        const nextElementMap = arrayToMap(nextElements);
-        const deletedElements = prevElements.filter((prevElement) => !nextElementMap.has(prevElement.id));
-        const elements = nextElements
-            .map((nextElement) => newElementWith(prevElementMap.get(nextElement.id) || nextElement, nextElement))
-            .concat(deletedElements.map((prevElement) => newElementWith(prevElement, { isDeleted: true })));
-        fixBindingsAfterDeletion(elements, deletedElements);
+        const [nextElementsMap, nextAppState] = result;
+        const nextElements = Array.from(nextElementsMap.values());
         return {
-            elements,
-            appState: { ...appState, ...data.appState },
-            commitToHistory,
-            syncHistory: true,
+            appState: nextAppState,
+            elements: nextElements,
+            storeAction: StoreAction.UPDATE,
         };
     }
-    return { commitToHistory };
+    return { storeAction: StoreAction.NONE };
 };
-export const createUndoAction = (history) => ({
+export const createUndoAction = (history, store) => ({
     name: "undo",
     label: "buttons.undo",
     icon: UndoIcon,
     trackEvent: { category: "history" },
     viewMode: false,
-    perform: (elements, appState) => writeData(elements, appState, () => history.undoOnce()),
+    perform: (elements, appState) => writeData(appState, () => history.undo(arrayToMap(elements), // TODO: #7348 refactor action manager to already include `SceneElementsMap`
+    appState, store.snapshot)),
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] &&
         event.key.toLowerCase() === KEYS.Z &&
         !event.shiftKey,
-    PanelComponent: ({ updateData, data }) => (_jsx(ToolButton, { type: "button", icon: UndoIcon, "aria-label": t("buttons.undo"), onClick: updateData, size: data?.size || "medium" })),
-    commitToHistory: () => false,
+    PanelComponent: ({ updateData, data }) => {
+        const { isUndoStackEmpty } = useEmitter(history.onHistoryChangedEmitter, new HistoryChangedEvent());
+        return (_jsx(ToolButton, { type: "button", icon: UndoIcon, "aria-label": t("buttons.undo"), onClick: updateData, size: data?.size || "medium", disabled: isUndoStackEmpty }));
+    },
 });
-export const createRedoAction = (history) => ({
+export const createRedoAction = (history, store) => ({
     name: "redo",
     label: "buttons.redo",
     icon: RedoIcon,
     trackEvent: { category: "history" },
     viewMode: false,
-    perform: (elements, appState) => writeData(elements, appState, () => history.redoOnce()),
+    perform: (elements, appState) => writeData(appState, () => history.redo(arrayToMap(elements), // TODO: #7348 refactor action manager to already include `SceneElementsMap`
+    appState, store.snapshot)),
     keyTest: (event) => (event[KEYS.CTRL_OR_CMD] &&
         event.shiftKey &&
         event.key.toLowerCase() === KEYS.Z) ||
         (isWindows && event.ctrlKey && !event.shiftKey && event.key === KEYS.Y),
-    PanelComponent: ({ updateData, data }) => (_jsx(ToolButton, { type: "button", icon: RedoIcon, "aria-label": t("buttons.redo"), onClick: updateData, size: data?.size || "medium" })),
-    commitToHistory: () => false,
+    PanelComponent: ({ updateData, data }) => {
+        const { isRedoStackEmpty } = useEmitter(history.onHistoryChangedEmitter, new HistoryChangedEvent());
+        return (_jsx(ToolButton, { type: "button", icon: RedoIcon, "aria-label": t("buttons.redo"), onClick: updateData, size: data?.size || "medium", disabled: isRedoStackEmpty }));
+    },
 });

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

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawLinearElement } from "../element/types";
+import type { ExcalidrawLinearElement } from "../element/types";
 export declare const actionToggleLinearEditor: {
     name: "toggleLinearEditor";
     category: string;
-    label: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, app: import("../types").AppClassProperties) => "labels.lineEditor.exit" | "labels.lineEditor.edit";
+    label: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, app: import("../types").AppClassProperties) => "labels.lineEditor.editArrow" | "labels.lineEditor.edit";
+    keywords: string[];
     trackEvent: {
         category: "element";
     };
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, _: 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): {
+    perform(elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties): {
         appState: {
             editingLinearElement: LinearElementEditor | null;
             contextMenu: {
@@ -162,8 +163,9 @@ export declare const actionToggleLinearEditor: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
+    PanelComponent: ({ appState, updateData, app }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
     keyTest?: undefined;
 };

package/dist/excalidraw/actions/actionLinearEditor.js

@@ -1,25 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { isLinearElement } from "../element/typeChecks";
+import { StoreAction } from "../store";
 import { register } from "./register";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import { lineEditorIcon } from "../components/icons";
 export const actionToggleLinearEditor = register({
     name: "toggleLinearEditor",
     category: DEFAULT_CATEGORIES.elements,
     label: (elements, appState, app) => {
         const selectedElement = app.scene.getSelectedElements({
             selectedElementIds: appState.selectedElementIds,
-            includeBoundTextElement: true,
         })[0];
-        return appState.editingLinearElement?.elementId === selectedElement?.id
-            ? "labels.lineEditor.exit"
+        return selectedElement?.type === "arrow"
+            ? "labels.lineEditor.editArrow"
             : "labels.lineEditor.edit";
     },
+    keywords: ["line"],
     trackEvent: {
         category: "element",
     },
     predicate: (elements, appState, _, app) => {
         const selectedElements = app.scene.getSelectedElements(appState);
-        if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
+        if (!appState.editingLinearElement &&
+            selectedElements.length === 1 &&
+            isLinearElement(selectedElements[0])) {
             return true;
         }
         return false;
@@ -37,7 +44,16 @@ export const actionToggleLinearEditor = register({
                 ...appState,
                 editingLinearElement,
             },
-            commitToHistory: false,
+            storeAction: StoreAction.CAPTURE,
         };
     },
+    PanelComponent: ({ appState, updateData, app }) => {
+        const selectedElement = app.scene.getSelectedElements({
+            selectedElementIds: appState.selectedElementIds,
+        })[0];
+        const label = t(selectedElement.type === "arrow"
+            ? "labels.lineEditor.editArrow"
+            : "labels.lineEditor.edit");
+        return (_jsx(ToolButton, { type: "button", icon: lineEditorIcon, title: label, "aria-label": label, onClick: () => updateData(null) }));
+    },
 });

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

@@ -3,8 +3,8 @@ export declare const actionLink: {
     name: "hyperlink";
     label: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
     icon: JSX.Element;
-    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => false | {
-        elements: readonly import("../element/types").ExcalidrawElement[];
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => false | {
+        elements: readonly import("../element/types").OrderedExcalidrawElement[];
         appState: {
             showHyperlinkPopup: "editor";
             openMenu: null;
@@ -157,15 +157,15 @@ export declare const actionLink: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: import("../store").StoreActionType;
     };
     trackEvent: {
         category: "hyperlink";
         action: string;
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState) => 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/actionLink.js

@@ -6,6 +6,7 @@ import { isEmbeddableElement } from "../element/typeChecks";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
+import { StoreAction } from "../store";
 import { getShortcutKey } from "../utils";
 import { register } from "./register";
 export const actionLink = register({
@@ -23,7 +24,7 @@ export const actionLink = register({
                 showHyperlinkPopup: "editor",
                 openMenu: null,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     trackEvent: { category: "hyperlink", action: "click" },

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

@@ -5,7 +5,7 @@ export declare const actionToggleCanvasMenu: {
     trackEvent: {
         category: "menu";
     };
-    perform: (_: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
+    perform: (_: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         appState: {
             openMenu: "canvas" | null;
             contextMenu: {
@@ -158,7 +158,7 @@ export declare const actionToggleCanvasMenu: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
     PanelComponent: ({ appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -170,7 +170,7 @@ export declare const actionToggleEditMenu: {
     trackEvent: {
         category: "menu";
     };
-    perform: (_elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         appState: {
             openMenu: "shape" | null;
             contextMenu: {
@@ -323,7 +323,7 @@ export declare const actionToggleEditMenu: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
     PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
@@ -338,7 +338,7 @@ export declare const actionShortcuts: {
         category: "menu";
         action: string;
     };
-    perform: (_elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, { focusContainer }: import("../types").AppClassProperties) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, { focusContainer }: import("../types").AppClassProperties) => {
         appState: {
             openDialog: {
                 name: "help";
@@ -482,9 +482,9 @@ export declare const actionShortcuts: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        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;
 };

package/dist/excalidraw/actions/actionMenu.js

@@ -5,6 +5,7 @@ import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
 import { KEYS } from "../keys";
+import { StoreAction } from "../store";
 export const actionToggleCanvasMenu = register({
     name: "toggleCanvasMenu",
     label: "buttons.menu",
@@ -14,7 +15,7 @@ export const actionToggleCanvasMenu = register({
             ...appState,
             openMenu: appState.openMenu === "canvas" ? null : "canvas",
         },
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
     }),
     PanelComponent: ({ appState, updateData }) => (_jsx(ToolButton, { type: "button", icon: HamburgerMenuIcon, "aria-label": t("buttons.menu"), onClick: updateData, selected: appState.openMenu === "canvas" })),
 });
@@ -27,7 +28,7 @@ export const actionToggleEditMenu = register({
             ...appState,
             openMenu: appState.openMenu === "shape" ? null : "shape",
         },
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
     }),
     PanelComponent: ({ elements, appState, updateData }) => (_jsx(ToolButton, { visible: showSelectedShapeActions(appState, getNonDeletedElements(elements)), type: "button", icon: palette, "aria-label": t("buttons.edit"), onClick: updateData, selected: appState.openMenu === "shape" })),
 });
@@ -50,7 +51,7 @@ export const actionShortcuts = register({
                         name: "help",
                     },
             },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     keyTest: (event) => event.key === KEYS.QUESTION_MARK,

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Collaborator } from "../types";
+import type { Collaborator } from "../types";
 export declare const actionGoToCollaborator: {
     name: "goToCollaborator";
     label: string;
@@ -7,7 +7,7 @@ export declare const actionGoToCollaborator: {
     trackEvent: {
         category: "collab";
     };
-    perform: (_elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, collaborator: Collaborator) => {
+    perform: (_elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, collaborator: Collaborator) => {
         appState: {
             userToFollow: null;
             contextMenu: {
@@ -160,7 +160,7 @@ export declare const actionGoToCollaborator: {
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     } | {
         appState: {
             userToFollow: {
@@ -317,7 +317,7 @@ export declare const actionGoToCollaborator: {
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
     PanelComponent: ({ updateData, data, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {

package/dist/excalidraw/actions/actionNavigate.js

@@ -3,6 +3,7 @@ import { getClientColor } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { eyeIcon, microphoneIcon, microphoneMutedIcon, } from "../components/icons";
 import { t } from "../i18n";
+import { StoreAction } from "../store";
 import { register } from "./register";
 import clsx from "clsx";
 export const actionGoToCollaborator = register({
@@ -19,7 +20,7 @@ export const actionGoToCollaborator = register({
                     ...appState,
                     userToFollow: null,
                 },
-                commitToHistory: false,
+                storeAction: StoreAction.NONE,
             };
         }
         return {
@@ -32,7 +33,7 @@ export const actionGoToCollaborator = register({
                 // Close mobile menu
                 openMenu: appState.openMenu === "canvas" ? null : appState.openMenu,
             },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     PanelComponent: ({ updateData, data, appState }) => {