@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/actions/actionProperties.js

@@ -9,7 +9,7 @@ import { FontPicker } from "../components/FontPicker/FontPicker";
 // TODO barnabasmolnar/editor-redesign
 // TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
 // ArrowHead icons
-import { ArrowheadArrowIcon, ArrowheadBarIcon, ArrowheadCircleIcon, ArrowheadTriangleIcon, ArrowheadNoneIcon, StrokeStyleDashedIcon, StrokeStyleDottedIcon, TextAlignTopIcon, TextAlignBottomIcon, TextAlignMiddleIcon, FillHachureIcon, FillCrossHatchIcon, FillSolidIcon, SloppinessArchitectIcon, SloppinessArtistIcon, SloppinessCartoonistIcon, StrokeWidthBaseIcon, StrokeWidthBoldIcon, StrokeWidthExtraBoldIcon, FontSizeSmallIcon, FontSizeMediumIcon, FontSizeLargeIcon, FontSizeExtraLargeIcon, EdgeSharpIcon, EdgeRoundIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FillZigZagIcon, ArrowheadTriangleOutlineIcon, ArrowheadCircleOutlineIcon, ArrowheadDiamondIcon, ArrowheadDiamondOutlineIcon, fontSizeIcon, sharpArrowIcon, roundArrowIcon, elbowArrowIcon, } from "../components/icons";
+import { ArrowheadArrowIcon, ArrowheadBarIcon, ArrowheadCircleIcon, ArrowheadTriangleIcon, ArrowheadNoneIcon, StrokeStyleDashedIcon, StrokeStyleDottedIcon, TextAlignTopIcon, TextAlignBottomIcon, TextAlignMiddleIcon, FillHachureIcon, FillCrossHatchIcon, FillSolidIcon, SloppinessArchitectIcon, SloppinessArtistIcon, SloppinessCartoonistIcon, StrokeWidthBaseIcon, StrokeWidthBoldIcon, StrokeWidthExtraBoldIcon, FontSizeSmallIcon, FontSizeMediumIcon, FontSizeLargeIcon, FontSizeExtraLargeIcon, EdgeSharpIcon, EdgeRoundIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FillZigZagIcon, ArrowheadTriangleOutlineIcon, ArrowheadCircleOutlineIcon, ArrowheadDiamondIcon, ArrowheadDiamondOutlineIcon, fontSizeIcon, sharpArrowIcon, roundArrowIcon, elbowArrowIcon, ArrowheadCrowfootIcon, ArrowheadCrowfootOneIcon, ArrowheadCrowfootOneOrManyIcon, } from "../components/icons";
 import { ARROW_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, FONT_FAMILY, ROUNDNESS, STROKE_WIDTH, VERTICAL_ALIGN, } from "../constants";
 import { getNonDeletedElements, isTextElement, redrawTextBoundingBox, } from "../element";
 import { mutateElement, newElementWith } from "../element/mutateElement";
@@ -24,10 +24,10 @@ import { arrayToMap, getFontFamilyString, getShortcutKey, tupleToCoors, } from "
 import { register } from "./register";
 import { StoreAction } from "../store";
 import { Fonts, getLineHeight } from "../fonts";
-import { bindLinearElement, bindPointToSnapToElementOutline, calculateFixedPointForElbowArrowBinding, getHoveredElementForBinding, } from "../element/binding";
-import { mutateElbowArrow } from "../element/routing";
+import { bindLinearElement, bindPointToSnapToElementOutline, calculateFixedPointForElbowArrowBinding, getHoveredElementForBinding, updateBoundElements, } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { pointFrom, vector } from "../../math";
+import { pointFrom } from "../../math";
+import { Range } from "../components/Range";
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 export const changeProperty = (elements, appState, callback, includeBoundText = false) => {
     const selectedElementIds = arrayToMap(getSelectedElements(elements, appState, {
@@ -83,20 +83,30 @@ const offsetElementAfterFontResize = (prevElement, nextElement) => {
 };
 const changeFontSize = (elements, appState, app, getNewFontSize, fallbackValue) => {
     const newFontSizes = new Set();
+    const updatedElements = changeProperty(elements, appState, (oldElement) => {
+        if (isTextElement(oldElement)) {
+            const newFontSize = getNewFontSize(oldElement);
+            newFontSizes.add(newFontSize);
+            let newElement = newElementWith(oldElement, {
+                fontSize: newFontSize,
+            });
+            redrawTextBoundingBox(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());
+            newElement = offsetElementAfterFontResize(oldElement, newElement);
+            return newElement;
+        }
+        return oldElement;
+    }, true);
+    // Update arrow elements after text elements have been updated
+    const updatedElementsMap = arrayToMap(updatedElements);
+    getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+    }).forEach((element) => {
+        if (isTextElement(element)) {
+            updateBoundElements(element, updatedElementsMap);
+        }
+    });
     return {
-        elements: changeProperty(elements, appState, (oldElement) => {
-            if (isTextElement(oldElement)) {
-                const newFontSize = getNewFontSize(oldElement);
-                newFontSizes.add(newFontSize);
-                let newElement = newElementWith(oldElement, {
-                    fontSize: newFontSize,
-                });
-                redrawTextBoundingBox(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());
-                newElement = offsetElementAfterFontResize(oldElement, newElement);
-                return newElement;
-            }
-            return oldElement;
-        }, true),
+        elements: updatedElements,
         appState: {
             ...appState,
             // update state only if we've set all select text elements to
@@ -315,7 +325,7 @@ export const actionChangeOpacity = register({
             storeAction: StoreAction.CAPTURE,
         };
     },
-    PanelComponent: ({ elements, appState, updateData }) => (_jsxs("label", { className: "control-label", children: [t("labels.opacity"), _jsx("input", { type: "range", min: "0", max: "100", step: "10", onChange: (event) => updateData(+event.target.value), value: getFormValue(elements, appState, (element) => element.opacity, true, appState.currentItemOpacity) ?? undefined })] })),
+    PanelComponent: ({ elements, appState, updateData }) => (_jsx(Range, { updateData: updateData, elements: elements, appState: appState, testId: "opacity" })),
 });
 export const actionChangeFontSize = register({
     name: "changeFontSize",
@@ -817,58 +827,64 @@ const getArrowheadOptions = (flip) => {
             icon: _jsx(ArrowheadArrowIcon, { flip: flip }),
         },
         {
-            value: "bar",
-            text: t("labels.arrowhead_bar"),
+            value: "triangle",
+            text: t("labels.arrowhead_triangle"),
+            icon: _jsx(ArrowheadTriangleIcon, { flip: flip }),
             keyBinding: "e",
-            icon: _jsx(ArrowheadBarIcon, { flip: flip }),
         },
         {
-            value: "dot",
-            text: t("labels.arrowhead_circle"),
-            keyBinding: null,
-            icon: _jsx(ArrowheadCircleIcon, { flip: flip }),
-            showInPicker: false,
+            value: "triangle_outline",
+            text: t("labels.arrowhead_triangle_outline"),
+            icon: _jsx(ArrowheadTriangleOutlineIcon, { flip: flip }),
+            keyBinding: "r",
         },
         {
             value: "circle",
             text: t("labels.arrowhead_circle"),
-            keyBinding: "r",
+            keyBinding: "a",
             icon: _jsx(ArrowheadCircleIcon, { flip: flip }),
-            showInPicker: false,
         },
         {
             value: "circle_outline",
             text: t("labels.arrowhead_circle_outline"),
-            keyBinding: null,
+            keyBinding: "s",
             icon: _jsx(ArrowheadCircleOutlineIcon, { flip: flip }),
-            showInPicker: false,
-        },
-        {
-            value: "triangle",
-            text: t("labels.arrowhead_triangle"),
-            icon: _jsx(ArrowheadTriangleIcon, { flip: flip }),
-            keyBinding: "t",
-        },
-        {
-            value: "triangle_outline",
-            text: t("labels.arrowhead_triangle_outline"),
-            icon: _jsx(ArrowheadTriangleOutlineIcon, { flip: flip }),
-            keyBinding: null,
-            showInPicker: false,
         },
         {
             value: "diamond",
             text: t("labels.arrowhead_diamond"),
             icon: _jsx(ArrowheadDiamondIcon, { flip: flip }),
-            keyBinding: null,
-            showInPicker: false,
+            keyBinding: "d",
         },
         {
             value: "diamond_outline",
             text: t("labels.arrowhead_diamond_outline"),
             icon: _jsx(ArrowheadDiamondOutlineIcon, { flip: flip }),
-            keyBinding: null,
-            showInPicker: false,
+            keyBinding: "f",
+        },
+        {
+            value: "bar",
+            text: t("labels.arrowhead_bar"),
+            keyBinding: "z",
+            icon: _jsx(ArrowheadBarIcon, { flip: flip }),
+        },
+        {
+            value: "crowfoot_one",
+            text: t("labels.arrowhead_crowfoot_one"),
+            icon: _jsx(ArrowheadCrowfootOneIcon, { flip: flip }),
+            keyBinding: "c",
+        },
+        {
+            value: "crowfoot_many",
+            text: t("labels.arrowhead_crowfoot_many"),
+            icon: _jsx(ArrowheadCrowfootIcon, { flip: flip }),
+            keyBinding: "x",
+        },
+        {
+            value: "crowfoot_one_or_many",
+            text: t("labels.arrowhead_crowfoot_one_or_many"),
+            icon: _jsx(ArrowheadCrowfootOneOrManyIcon, { flip: flip }),
+            keyBinding: "v",
         },
     ];
 };
@@ -909,9 +925,9 @@ export const actionChangeArrowhead = register({
         const isRTL = getLanguage().rtl;
         return (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.arrowheads") }), _jsxs("div", { className: "iconSelectList buttonList", children: [_jsx(IconPicker, { label: "arrowhead_start", options: getArrowheadOptions(!isRTL), value: getFormValue(elements, appState, (element) => isLinearElement(element) && canHaveArrowheads(element.type)
                                 ? element.startArrowhead
-                                : appState.currentItemStartArrowhead, true, appState.currentItemStartArrowhead), onChange: (value) => updateData({ position: "start", type: value }) }), _jsx(IconPicker, { label: "arrowhead_end", group: "arrowheads", options: getArrowheadOptions(!!isRTL), value: getFormValue(elements, appState, (element) => isLinearElement(element) && canHaveArrowheads(element.type)
+                                : appState.currentItemStartArrowhead, true, appState.currentItemStartArrowhead), onChange: (value) => updateData({ position: "start", type: value }), numberOfOptionsToAlwaysShow: 4 }), _jsx(IconPicker, { label: "arrowhead_end", group: "arrowheads", options: getArrowheadOptions(!!isRTL), value: getFormValue(elements, appState, (element) => isLinearElement(element) && canHaveArrowheads(element.type)
                                 ? element.endArrowhead
-                                : appState.currentItemEndArrowhead, true, appState.currentItemEndArrowhead), onChange: (value) => updateData({ position: "end", type: value }) })] })] }));
+                                : appState.currentItemEndArrowhead, true, appState.currentItemEndArrowhead), onChange: (value) => updateData({ position: "end", type: value }), numberOfOptionsToAlwaysShow: 4 })] })] }));
     },
 });
 export const actionChangeArrowType = register({
@@ -919,76 +935,89 @@ export const actionChangeArrowType = register({
     label: "Change arrow types",
     trackEvent: false,
     perform: (elements, appState, value, app) => {
-        return {
-            elements: changeProperty(elements, appState, (el) => {
-                if (!isArrowElement(el)) {
-                    return el;
-                }
-                const newElement = newElementWith(el, {
-                    roundness: value === ARROW_TYPE.round
+        const newElements = changeProperty(elements, appState, (el) => {
+            if (!isArrowElement(el)) {
+                return el;
+            }
+            const newElement = newElementWith(el, {
+                roundness: value === ARROW_TYPE.round
+                    ? {
+                        type: ROUNDNESS.PROPORTIONAL_RADIUS,
+                    }
+                    : null,
+                elbowed: value === ARROW_TYPE.elbow,
+                points: value === ARROW_TYPE.elbow || el.elbowed
+                    ? [el.points[0], el.points[el.points.length - 1]]
+                    : el.points,
+            });
+            if (isElbowArrow(newElement)) {
+                const elementsMap = app.scene.getNonDeletedElementsMap();
+                app.dismissLinearEditor();
+                const startGlobalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, 0, elementsMap);
+                const endGlobalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, -1, elementsMap);
+                const startHoveredElement = !newElement.startBinding &&
+                    getHoveredElementForBinding(tupleToCoors(startGlobalPoint), elements, elementsMap, appState.zoom, false, true);
+                const endHoveredElement = !newElement.endBinding &&
+                    getHoveredElementForBinding(tupleToCoors(endGlobalPoint), elements, elementsMap, appState.zoom, false, true);
+                const startElement = startHoveredElement
+                    ? startHoveredElement
+                    : newElement.startBinding &&
+                        elementsMap.get(newElement.startBinding.elementId);
+                const endElement = endHoveredElement
+                    ? endHoveredElement
+                    : newElement.endBinding &&
+                        elementsMap.get(newElement.endBinding.elementId);
+                const finalStartPoint = startHoveredElement
+                    ? bindPointToSnapToElementOutline(startGlobalPoint, endGlobalPoint, startHoveredElement, elementsMap)
+                    : startGlobalPoint;
+                const finalEndPoint = endHoveredElement
+                    ? bindPointToSnapToElementOutline(endGlobalPoint, startGlobalPoint, endHoveredElement, elementsMap)
+                    : endGlobalPoint;
+                startHoveredElement &&
+                    bindLinearElement(newElement, startHoveredElement, "start", elementsMap);
+                endHoveredElement &&
+                    bindLinearElement(newElement, endHoveredElement, "end", elementsMap);
+                mutateElement(newElement, {
+                    points: [finalStartPoint, finalEndPoint].map((p) => pointFrom(p[0] - newElement.x, p[1] - newElement.y)),
+                    ...(startElement && newElement.startBinding
                         ? {
-                            type: ROUNDNESS.PROPORTIONAL_RADIUS,
+                            startBinding: {
+                                // @ts-ignore TS cannot discern check above
+                                ...newElement.startBinding,
+                                ...calculateFixedPointForElbowArrowBinding(newElement, startElement, "start", elementsMap),
+                            },
                         }
-                        : null,
-                    elbowed: value === ARROW_TYPE.elbow,
-                    points: value === ARROW_TYPE.elbow || el.elbowed
-                        ? [el.points[0], el.points[el.points.length - 1]]
-                        : el.points,
+                        : {}),
+                    ...(endElement && newElement.endBinding
+                        ? {
+                            endBinding: {
+                                // @ts-ignore TS cannot discern check above
+                                ...newElement.endBinding,
+                                ...calculateFixedPointForElbowArrowBinding(newElement, endElement, "end", elementsMap),
+                            },
+                        }
+                        : {}),
                 });
-                if (isElbowArrow(newElement)) {
-                    const elementsMap = app.scene.getNonDeletedElementsMap();
-                    app.dismissLinearEditor();
-                    const startGlobalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, 0, elementsMap);
-                    const endGlobalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, -1, elementsMap);
-                    const startHoveredElement = !newElement.startBinding &&
-                        getHoveredElementForBinding(tupleToCoors(startGlobalPoint), elements, elementsMap, true);
-                    const endHoveredElement = !newElement.endBinding &&
-                        getHoveredElementForBinding(tupleToCoors(endGlobalPoint), elements, elementsMap, true);
-                    const startElement = startHoveredElement
-                        ? startHoveredElement
-                        : newElement.startBinding &&
-                            elementsMap.get(newElement.startBinding.elementId);
-                    const endElement = endHoveredElement
-                        ? endHoveredElement
-                        : newElement.endBinding &&
-                            elementsMap.get(newElement.endBinding.elementId);
-                    const finalStartPoint = startHoveredElement
-                        ? bindPointToSnapToElementOutline(startGlobalPoint, endGlobalPoint, startHoveredElement, elementsMap)
-                        : startGlobalPoint;
-                    const finalEndPoint = endHoveredElement
-                        ? bindPointToSnapToElementOutline(endGlobalPoint, startGlobalPoint, endHoveredElement, elementsMap)
-                        : endGlobalPoint;
-                    startHoveredElement &&
-                        bindLinearElement(newElement, startHoveredElement, "start", elementsMap);
-                    endHoveredElement &&
-                        bindLinearElement(newElement, endHoveredElement, "end", elementsMap);
-                    mutateElbowArrow(newElement, elementsMap, [finalStartPoint, finalEndPoint].map((p) => pointFrom(p[0] - newElement.x, p[1] - newElement.y)), vector(0, 0), {
-                        ...(startElement && newElement.startBinding
-                            ? {
-                                startBinding: {
-                                    // @ts-ignore TS cannot discern check above
-                                    ...newElement.startBinding,
-                                    ...calculateFixedPointForElbowArrowBinding(newElement, startElement, "start", elementsMap),
-                                },
-                            }
-                            : {}),
-                        ...(endElement && newElement.endBinding
-                            ? {
-                                endBinding: {
-                                    // @ts-ignore TS cannot discern check above
-                                    ...newElement.endBinding,
-                                    ...calculateFixedPointForElbowArrowBinding(newElement, endElement, "end", elementsMap),
-                                },
-                            }
-                            : {}),
-                    });
-                }
-                return newElement;
-            }),
-            appState: {
-                ...appState,
-                currentItemArrowType: value,
-            },
+                LinearElementEditor.updateEditorMidPointsCache(newElement, elementsMap, app.state);
+            }
+            return newElement;
+        });
+        const newState = {
+            ...appState,
+            currentItemArrowType: value,
+        };
+        // Change the arrow type and update any other state settings for
+        // the arrow.
+        const selectedId = appState.selectedLinearElement?.elementId;
+        if (selectedId) {
+            const selected = newElements.find((el) => el.id === selectedId);
+            if (selected) {
+                newState.selectedLinearElement = new LinearElementEditor(selected);
+            }
+        }
+        return {
+            elements: newElements,
+            appState: newState,
             storeAction: StoreAction.CAPTURE,
         };
     },

package/dist/excalidraw/actions/actionSelectAll.js

@@ -4,7 +4,6 @@ import { selectGroupsForSelectedElements } from "../groups";
 import { getNonDeletedElements, isTextElement } from "../element";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { excludeElementsInFramesFromSelection } from "../scene/selection";
 import { selectAllIcon } from "../components/icons";
 import { StoreAction } from "../store";
 export const actionSelectAll = register({
@@ -17,9 +16,11 @@ export const actionSelectAll = register({
         if (appState.editingLinearElement) {
             return false;
         }
-        const selectedElementIds = excludeElementsInFramesFromSelection(elements.filter((element) => !element.isDeleted &&
+        const selectedElementIds = elements
+            .filter((element) => !element.isDeleted &&
             !(isTextElement(element) && element.containerId) &&
-            !element.locked)).reduce((map, element) => {
+            !element.locked)
+            .reduce((map, element) => {
             map[element.id] = true;
             return map;
         }, {});

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

@@ -1,4 +1,4 @@
 import type { SubtypeOf } from "../utility-types";
 import type { ActionName } from "./types";
-export type ShortcutName = SubtypeOf<ActionName, "toggleTheme" | "loadScene" | "clearCanvas" | "cut" | "copy" | "paste" | "copyStyles" | "pasteStyles" | "selectAll" | "deleteSelectedElements" | "duplicateSelection" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyAsPng" | "group" | "ungroup" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "addToLibrary" | "viewMode" | "flipHorizontal" | "flipVertical" | "hyperlink" | "toggleElementLock" | "resetZoom" | "zoomOut" | "zoomIn" | "zoomToFit" | "zoomToFitSelectionInViewport" | "zoomToFitSelection" | "toggleEraserTool" | "toggleHandTool" | "setFrameAsActiveTool" | "saveFileToDisk" | "saveToActiveFile" | "toggleShortcuts"> | "saveScene" | "imageExport" | "commandPalette" | "searchMenu";
+export type ShortcutName = SubtypeOf<ActionName, "toggleTheme" | "loadScene" | "clearCanvas" | "cut" | "copy" | "paste" | "copyStyles" | "pasteStyles" | "selectAll" | "deleteSelectedElements" | "duplicateSelection" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyAsPng" | "group" | "ungroup" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "addToLibrary" | "viewMode" | "flipHorizontal" | "flipVertical" | "hyperlink" | "toggleElementLock" | "resetZoom" | "zoomOut" | "zoomIn" | "zoomToFit" | "zoomToFitSelectionInViewport" | "zoomToFitSelection" | "toggleEraserTool" | "toggleHandTool" | "setFrameAsActiveTool" | "saveFileToDisk" | "saveToActiveFile" | "toggleShortcuts" | "wrapSelectionInFrame"> | "saveScene" | "imageExport" | "commandPalette" | "searchMenu";
 export declare const getShortcutFromShortcutName: (name: ShortcutName, idx?: number) => string;

package/dist/excalidraw/actions/shortcuts.js

@@ -60,6 +60,7 @@ const shortcutMap = {
     saveToActiveFile: [getShortcutKey("CtrlOrCmd+S")],
     toggleShortcuts: [getShortcutKey("?")],
     searchMenu: [getShortcutKey("CtrlOrCmd+F")],
+    wrapSelectionInFrame: [],
 };
 export const getShortcutFromShortcutName = (name, idx = 0) => {
     const shortcuts = shortcutMap[name];

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

@@ -14,7 +14,7 @@ export type ActionResult = {
 type ActionFn = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
-export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor" | "wrapSelectionInFrame";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/dist/excalidraw/align.d.ts

@@ -1,6 +1,7 @@
 import type { ElementsMap, ExcalidrawElement } from "./element/types";
+import type Scene from "./scene/Scene";
 export interface Alignment {
     position: "start" | "center" | "end";
     axis: "x" | "y";
 }
-export declare const alignElements: (selectedElements: ExcalidrawElement[], elementsMap: ElementsMap, alignment: Alignment) => ExcalidrawElement[];
+export declare const alignElements: (selectedElements: ExcalidrawElement[], elementsMap: ElementsMap, alignment: Alignment, scene: Scene) => ExcalidrawElement[];

package/dist/excalidraw/align.js

@@ -1,15 +1,24 @@
-import { newElementWith } from "./element/mutateElement";
+import { mutateElement } from "./element/mutateElement";
 import { getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";
-export const alignElements = (selectedElements, elementsMap, alignment) => {
+import { updateBoundElements } from "./element/binding";
+export const alignElements = (selectedElements, elementsMap, alignment, scene) => {
     const groups = getMaximumGroups(selectedElements, elementsMap);
     const selectionBoundingBox = getCommonBoundingBox(selectedElements);
     return groups.flatMap((group) => {
         const translation = calculateTranslation(group, selectionBoundingBox, alignment);
-        return group.map((element) => newElementWith(element, {
-            x: element.x + translation.x,
-            y: element.y + translation.y,
-        }));
+        return group.map((element) => {
+            // update element
+            const updatedEle = mutateElement(element, {
+                x: element.x + translation.x,
+                y: element.y + translation.y,
+            });
+            // update bound elements
+            updateBoundElements(element, scene.getNonDeletedElementsMap(), {
+                simultaneouslyUpdated: group,
+            });
+            return updatedEle;
+        });
     });
 };
 const calculateTranslation = (group, selectionBoundingBox, { axis, position }) => {

package/dist/excalidraw/clipboard.d.ts

@@ -21,8 +21,17 @@ export declare const probablySupportsClipboardWriteText: boolean;
 export declare const probablySupportsClipboardBlob: boolean;
 export declare const createPasteEvent: ({ types, files, }: {
     types?: {
-        "text/html"?: string | undefined;
-        "text/plain"?: string | undefined;
+        "text/plain"?: string | File | undefined;
+        "text/html"?: string | File | undefined;
+        "image/svg+xml"?: string | File | undefined;
+        "image/png"?: string | File | undefined;
+        "image/jpeg"?: string | File | undefined;
+        "image/gif"?: string | File | undefined;
+        "image/webp"?: string | File | undefined;
+        "image/bmp"?: string | File | undefined;
+        "image/x-icon"?: string | File | undefined;
+        "image/avif"?: string | File | undefined;
+        "image/jfif"?: string | File | undefined;
     } | undefined;
     files?: File[] | undefined;
 }) => ClipboardEvent;
@@ -31,12 +40,25 @@ export declare const serializeAsClipboardJSON: ({ elements, files, }: {
     files: BinaryFiles | null;
 }) => string;
 export declare const copyToClipboard: (elements: readonly NonDeletedExcalidrawElement[], files: BinaryFiles | null, clipboardEvent?: ClipboardEvent | null) => Promise<void>;
+/**
+ * Reads OS clipboard programmatically. May not work on all browsers.
+ * Will prompt user for permission if not granted.
+ */
 export declare const readSystemClipboard: () => Promise<{
-    "text/html"?: string | undefined;
-    "text/plain"?: string | undefined;
+    "text/plain"?: string | File | undefined;
+    "text/html"?: string | File | undefined;
+    "image/svg+xml"?: string | File | undefined;
+    "image/png"?: string | File | undefined;
+    "image/jpeg"?: string | File | undefined;
+    "image/gif"?: string | File | undefined;
+    "image/webp"?: string | File | undefined;
+    "image/bmp"?: string | File | undefined;
+    "image/x-icon"?: string | File | undefined;
+    "image/avif"?: string | File | undefined;
+    "image/jfif"?: string | File | undefined;
 }>;
 /**
- * Attempts to parse clipboard. Prefers system clipboard.
+ * Attempts to parse clipboard event.
  */
 export declare const parseClipboard: (event: ClipboardEvent, isPlainPaste?: boolean) => Promise<ClipboardData>;
 export declare const copyBlobToClipboardAsPng: (blob: Blob | Promise<Blob>) => Promise<void>;