@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/{prod/locales/en-ZXYG7GCR.json → dev/locales/en-V6KXFSCK.json}

@@ -46,6 +46,10 @@
     "arrowhead_triangle_outline": "Triangle (outline)",
     "arrowhead_diamond": "Diamond",
     "arrowhead_diamond_outline": "Diamond (outline)",
+    "arrowhead_crowfoot_many": "Crow's foot (many)",
+    "arrowhead_crowfoot_one": "Crow's foot (one)",
+    "arrowhead_crowfoot_one_or_many": "Crow's foot (one or many)",
+    "more_options": "More options",
     "arrowtypes": "Arrow type",
     "arrowtype_sharp": "Sharp arrow",
     "arrowtype_round": "Curved arrow",
@@ -157,8 +161,11 @@
     "zoomToFit": "Zoom to fit all elements",
     "installPWA": "Install Excalidraw locally (PWA)",
     "autoResize": "Enable text auto-resizing",
+    "imageCropping": "Image cropping",
+    "unCroppedDimension": "Uncropped dimension",
     "copyElementLink": "Copy link to object",
-    "linkToElement": "Link to object"
+    "linkToElement": "Link to object",
+    "wrapSelectionInFrame": "Wrap selection in frame"
   },
   "elementLink": {
     "title": "Link to object",

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { ExcalidrawElement } from "../element/types";
 import type { AppClassProperties, AppState, UIAppState } from "../types";
+export declare const alignActionsPredicate: (appState: UIAppState, app: AppClassProperties) => boolean;
 export declare const actionAlignTop: {
     name: "alignTop";
     label: string;
@@ -8,7 +9,7 @@ export declare const actionAlignTop: {
     trackEvent: {
         category: "element";
     };
-    predicate: (elements: readonly ExcalidrawElement[], appState: UIAppState, _: unknown, app: AppClassProperties) => boolean;
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, appProps: import("../types").ExcalidrawProps, app: AppClassProperties) => boolean;
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -26,7 +27,7 @@ export declare const actionAlignBottom: {
     trackEvent: {
         category: "element";
     };
-    predicate: (elements: readonly ExcalidrawElement[], appState: UIAppState, _: unknown, app: AppClassProperties) => boolean;
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, appProps: import("../types").ExcalidrawProps, app: AppClassProperties) => boolean;
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -44,7 +45,7 @@ export declare const actionAlignLeft: {
     trackEvent: {
         category: "element";
     };
-    predicate: (elements: readonly ExcalidrawElement[], appState: UIAppState, _: unknown, app: AppClassProperties) => boolean;
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, appProps: import("../types").ExcalidrawProps, app: AppClassProperties) => boolean;
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -62,7 +63,7 @@ export declare const actionAlignRight: {
     trackEvent: {
         category: "element";
     };
-    predicate: (elements: readonly ExcalidrawElement[], appState: UIAppState, _: unknown, app: AppClassProperties) => boolean;
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, appProps: import("../types").ExcalidrawProps, app: AppClassProperties) => boolean;
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -80,7 +81,7 @@ export declare const actionAlignVerticallyCentered: {
     trackEvent: {
         category: "element";
     };
-    predicate: (elements: readonly ExcalidrawElement[], appState: UIAppState, _: unknown, app: AppClassProperties) => boolean;
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, appProps: import("../types").ExcalidrawProps, app: AppClassProperties) => boolean;
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -97,7 +98,7 @@ export declare const actionAlignHorizontallyCentered: {
     trackEvent: {
         category: "element";
     };
-    predicate: (elements: readonly ExcalidrawElement[], appState: UIAppState, _: unknown, app: AppClassProperties) => boolean;
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, appProps: import("../types").ExcalidrawProps, app: AppClassProperties) => boolean;
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];

package/dist/excalidraw/actions/actionAlign.js

@@ -11,7 +11,7 @@ import { isSomeElementSelected } from "../scene";
 import { StoreAction } from "../store";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
-const alignActionsPredicate = (elements, appState, _, app) => {
+export const alignActionsPredicate = (appState, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
     return (selectedElements.length > 1 &&
         // TODO enable aligning frames when implemented properly
@@ -20,7 +20,7 @@ const alignActionsPredicate = (elements, appState, _, app) => {
 const alignSelectedElements = (elements, appState, app, alignment) => {
     const selectedElements = app.scene.getSelectedElements(appState);
     const elementsMap = arrayToMap(elements);
-    const updatedElements = alignElements(selectedElements, elementsMap, alignment);
+    const updatedElements = alignElements(selectedElements, elementsMap, alignment, app.scene);
     const updatedElementsMap = arrayToMap(updatedElements);
     return updateFrameMembershipOfSelectedElements(elements.map((element) => updatedElementsMap.get(element.id) || element), appState, app);
 };
@@ -29,7 +29,7 @@ export const actionAlignTop = register({
     label: "labels.alignTop",
     icon: AlignTopIcon,
     trackEvent: { category: "element" },
-    predicate: alignActionsPredicate,
+    predicate: (elements, appState, appProps, app) => alignActionsPredicate(appState, app),
     perform: (elements, appState, _, app) => {
         return {
             appState,
@@ -41,14 +41,14 @@ export const actionAlignTop = register({
         };
     },
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
-    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: AlignTopIcon, onClick: () => updateData(null), title: `${t("labels.alignTop")} — ${getShortcutKey("CtrlOrCmd+Shift+Up")}`, "aria-label": t("labels.alignTop"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(appState, app), type: "button", icon: AlignTopIcon, onClick: () => updateData(null), title: `${t("labels.alignTop")} — ${getShortcutKey("CtrlOrCmd+Shift+Up")}`, "aria-label": t("labels.alignTop"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
 });
 export const actionAlignBottom = register({
     name: "alignBottom",
     label: "labels.alignBottom",
     icon: AlignBottomIcon,
     trackEvent: { category: "element" },
-    predicate: alignActionsPredicate,
+    predicate: (elements, appState, appProps, app) => alignActionsPredicate(appState, app),
     perform: (elements, appState, _, app) => {
         return {
             appState,
@@ -60,14 +60,14 @@ export const actionAlignBottom = register({
         };
     },
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
-    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: AlignBottomIcon, onClick: () => updateData(null), title: `${t("labels.alignBottom")} — ${getShortcutKey("CtrlOrCmd+Shift+Down")}`, "aria-label": t("labels.alignBottom"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(appState, app), type: "button", icon: AlignBottomIcon, onClick: () => updateData(null), title: `${t("labels.alignBottom")} — ${getShortcutKey("CtrlOrCmd+Shift+Down")}`, "aria-label": t("labels.alignBottom"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
 });
 export const actionAlignLeft = register({
     name: "alignLeft",
     label: "labels.alignLeft",
     icon: AlignLeftIcon,
     trackEvent: { category: "element" },
-    predicate: alignActionsPredicate,
+    predicate: (elements, appState, appProps, app) => alignActionsPredicate(appState, app),
     perform: (elements, appState, _, app) => {
         return {
             appState,
@@ -79,14 +79,14 @@ export const actionAlignLeft = register({
         };
     },
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
-    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: AlignLeftIcon, onClick: () => updateData(null), title: `${t("labels.alignLeft")} — ${getShortcutKey("CtrlOrCmd+Shift+Left")}`, "aria-label": t("labels.alignLeft"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(appState, app), type: "button", icon: AlignLeftIcon, onClick: () => updateData(null), title: `${t("labels.alignLeft")} — ${getShortcutKey("CtrlOrCmd+Shift+Left")}`, "aria-label": t("labels.alignLeft"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
 });
 export const actionAlignRight = register({
     name: "alignRight",
     label: "labels.alignRight",
     icon: AlignRightIcon,
     trackEvent: { category: "element" },
-    predicate: alignActionsPredicate,
+    predicate: (elements, appState, appProps, app) => alignActionsPredicate(appState, app),
     perform: (elements, appState, _, app) => {
         return {
             appState,
@@ -98,14 +98,14 @@ export const actionAlignRight = register({
         };
     },
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
-    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: AlignRightIcon, onClick: () => updateData(null), title: `${t("labels.alignRight")} — ${getShortcutKey("CtrlOrCmd+Shift+Right")}`, "aria-label": t("labels.alignRight"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(appState, app), type: "button", icon: AlignRightIcon, onClick: () => updateData(null), title: `${t("labels.alignRight")} — ${getShortcutKey("CtrlOrCmd+Shift+Right")}`, "aria-label": t("labels.alignRight"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
 });
 export const actionAlignVerticallyCentered = register({
     name: "alignVerticallyCentered",
     label: "labels.centerVertically",
     icon: CenterVerticallyIcon,
     trackEvent: { category: "element" },
-    predicate: alignActionsPredicate,
+    predicate: (elements, appState, appProps, app) => alignActionsPredicate(appState, app),
     perform: (elements, appState, _, app) => {
         return {
             appState,
@@ -116,14 +116,14 @@ export const actionAlignVerticallyCentered = register({
             storeAction: StoreAction.CAPTURE,
         };
     },
-    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: CenterVerticallyIcon, onClick: () => updateData(null), title: t("labels.centerVertically"), "aria-label": t("labels.centerVertically"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(appState, app), type: "button", icon: CenterVerticallyIcon, onClick: () => updateData(null), title: t("labels.centerVertically"), "aria-label": t("labels.centerVertically"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
 });
 export const actionAlignHorizontallyCentered = register({
     name: "alignHorizontallyCentered",
     label: "labels.centerHorizontally",
     icon: CenterHorizontallyIcon,
     trackEvent: { category: "element" },
-    predicate: alignActionsPredicate,
+    predicate: (elements, appState, appProps, app) => alignActionsPredicate(appState, app),
     perform: (elements, appState, _, app) => {
         return {
             appState,
@@ -134,5 +134,5 @@ export const actionAlignHorizontallyCentered = register({
             storeAction: StoreAction.CAPTURE,
         };
     },
-    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: CenterHorizontallyIcon, onClick: () => updateData(null), title: t("labels.centerHorizontally"), "aria-label": t("labels.centerHorizontally"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(appState, app), type: "button", icon: CenterHorizontallyIcon, onClick: () => updateData(null), title: t("labels.centerHorizontally"), "aria-label": t("labels.centerHorizontally"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
 });

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

@@ -776,8 +776,13 @@ export declare const actionCut: {
             } & import("../types").ActiveTool;
             multiElement: null;
             activeEmbeddable: null;
-            selectedElementIds: {};
-            selectedGroupIds: {};
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
+            selectedGroupIds: {
+                [groupId: string]: boolean;
+            };
+            editingGroupId: string | null;
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
@@ -873,7 +878,6 @@ export declare const actionCut: {
             gridStep: number;
             gridModeEnabled: boolean;
             viewModeEnabled: boolean;
-            editingGroupId: string | null;
             width: number;
             height: number;
             offsetTop: number;

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

@@ -401,8 +401,13 @@ export declare const actionDeleteSelected: {
             } & import("../types").ActiveTool;
             multiElement: null;
             activeEmbeddable: null;
-            selectedElementIds: {};
-            selectedGroupIds: {};
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
+            selectedGroupIds: {
+                [groupId: string]: boolean;
+            };
+            editingGroupId: string | null;
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
@@ -498,7 +503,6 @@ export declare const actionDeleteSelected: {
             gridStep: number;
             gridModeEnabled: boolean;
             viewModeEnabled: boolean;
-            editingGroupId: string | null;
             width: number;
             height: number;
             offsetTop: number;

package/dist/excalidraw/actions/actionDeleteSelected.js

@@ -6,53 +6,122 @@ import { t } from "../i18n";
 import { register } from "./register";
 import { getNonDeletedElements } from "../element";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getElementsInGroup } from "../groups";
+import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
 import { isBoundToContainer, isElbowArrow, isFrameLikeElement, } from "../element/typeChecks";
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { mutateElbowArrow } from "../element/routing";
+import { getContainerElement } from "../element/textElement";
+import { getFrameChildren } from "../frame";
 const deleteSelectedElements = (elements, appState, app) => {
-    const elementsMap = app.scene.getNonDeletedElementsMap();
     const framesToBeDeleted = new Set(getSelectedElements(elements.filter((el) => isFrameLikeElement(el)), appState).map((el) => el.id));
-    return {
-        elements: elements.map((el) => {
-            if (appState.selectedElementIds[el.id]) {
-                if (el.boundElements) {
-                    el.boundElements.forEach((candidate) => {
-                        const bound = app.scene
-                            .getNonDeletedElementsMap()
-                            .get(candidate.id);
-                        if (bound && isElbowArrow(bound)) {
-                            mutateElement(bound, {
-                                startBinding: el.id === bound.startBinding?.elementId
-                                    ? null
-                                    : bound.startBinding,
-                                endBinding: el.id === bound.endBinding?.elementId
-                                    ? null
-                                    : bound.endBinding,
-                            });
-                            mutateElbowArrow(bound, elementsMap, bound.points);
-                        }
-                    });
+    const selectedElementIds = {};
+    const elementsMap = app.scene.getNonDeletedElementsMap();
+    const processedElements = new Set();
+    for (const frameId of framesToBeDeleted) {
+        const frameChildren = getFrameChildren(elements, frameId);
+        for (const el of frameChildren) {
+            if (processedElements.has(el.id)) {
+                continue;
+            }
+            if (isBoundToContainer(el)) {
+                const containerElement = getContainerElement(el, elementsMap);
+                if (containerElement) {
+                    selectedElementIds[containerElement.id] = true;
                 }
-                return newElementWith(el, { isDeleted: true });
             }
+            else {
+                selectedElementIds[el.id] = true;
+            }
+            processedElements.add(el.id);
+        }
+    }
+    let shouldSelectEditingGroup = true;
+    const nextElements = elements.map((el) => {
+        if (appState.selectedElementIds[el.id]) {
+            const boundElement = isBoundToContainer(el)
+                ? getContainerElement(el, elementsMap)
+                : null;
             if (el.frameId && framesToBeDeleted.has(el.frameId)) {
-                return newElementWith(el, { isDeleted: true });
+                shouldSelectEditingGroup = false;
+                selectedElementIds[el.id] = true;
+                return el;
+            }
+            if (boundElement?.frameId &&
+                framesToBeDeleted.has(boundElement?.frameId)) {
+                return el;
+            }
+            if (el.boundElements) {
+                el.boundElements.forEach((candidate) => {
+                    const bound = app.scene.getNonDeletedElementsMap().get(candidate.id);
+                    if (bound && isElbowArrow(bound)) {
+                        mutateElement(bound, {
+                            startBinding: el.id === bound.startBinding?.elementId
+                                ? null
+                                : bound.startBinding,
+                            endBinding: el.id === bound.endBinding?.elementId ? null : bound.endBinding,
+                        });
+                        mutateElement(bound, { points: bound.points });
+                    }
+                });
+            }
+            return newElementWith(el, { isDeleted: true });
+        }
+        // if deleting a frame, remove the children from it and select them
+        if (el.frameId && framesToBeDeleted.has(el.frameId)) {
+            shouldSelectEditingGroup = false;
+            if (!isBoundToContainer(el)) {
+                selectedElementIds[el.id] = true;
+            }
+            return newElementWith(el, { frameId: null });
+        }
+        if (isBoundToContainer(el) && appState.selectedElementIds[el.containerId]) {
+            return newElementWith(el, { isDeleted: true });
+        }
+        return el;
+    });
+    let nextEditingGroupId = appState.editingGroupId;
+    // select next eligible element in currently editing group or supergroup
+    if (shouldSelectEditingGroup && appState.editingGroupId) {
+        const elems = getElementsInGroup(nextElements, appState.editingGroupId).filter((el) => !el.isDeleted);
+        if (elems.length > 1) {
+            if (elems[0]) {
+                selectedElementIds[elems[0].id] = true;
+            }
+        }
+        else {
+            nextEditingGroupId = null;
+            if (elems[0]) {
+                selectedElementIds[elems[0].id] = true;
             }
-            if (isBoundToContainer(el) &&
-                appState.selectedElementIds[el.containerId]) {
-                return newElementWith(el, { isDeleted: true });
+            const lastElementInGroup = elems[0];
+            if (lastElementInGroup) {
+                const editingGroupIdx = lastElementInGroup.groupIds.findIndex((groupId) => {
+                    return groupId === appState.editingGroupId;
+                });
+                const superGroupId = lastElementInGroup.groupIds[editingGroupIdx + 1];
+                if (superGroupId) {
+                    const elems = getElementsInGroup(nextElements, superGroupId).filter((el) => !el.isDeleted);
+                    if (elems.length > 1) {
+                        nextEditingGroupId = superGroupId;
+                        elems.forEach((el) => {
+                            selectedElementIds[el.id] = true;
+                        });
+                    }
+                }
             }
-            return el;
-        }),
+        }
+    }
+    return {
+        elements: nextElements,
         appState: {
             ...appState,
-            selectedElementIds: {},
-            selectedGroupIds: {},
+            ...selectGroupsForSelectedElements({
+                selectedElementIds,
+                editingGroupId: nextEditingGroupId,
+            }, nextElements, appState, null),
         },
     };
 };
@@ -116,7 +185,7 @@ export const actionDeleteSelected = register({
                     ? null
                     : endBindingElement,
             };
-            LinearElementEditor.deletePoints(element, selectedPointsIndices, elementsMap);
+            LinearElementEditor.deletePoints(element, selectedPointsIndices);
             return {
                 elements,
                 appState: {
@@ -133,7 +202,7 @@ export const actionDeleteSelected = register({
             };
         }
         let { elements: nextElements, appState: nextAppState } = deleteSelectedElements(elements, appState, app);
-        fixBindingsAfterDeletion(nextElements, elements.filter(({ id }) => appState.selectedElementIds[id]));
+        fixBindingsAfterDeletion(nextElements, nextElements.filter((el) => el.isDeleted));
         nextAppState = handleGroupEditingState(nextAppState, nextElements);
         return {
             elements: nextElements,