@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/actions/actionDeleteSelected.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { KEYS } from "../keys";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import { register } from "./register";
+import { getNonDeletedElements } from "../element";
+import { newElementWith } from "../element/mutateElement";
+import { getElementsInGroup } from "../groups";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { fixBindingsAfterDeletion } from "../element/binding";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
+import { updateActiveTool } from "../utils";
+import { TrashIcon } from "../components/icons";
+const deleteSelectedElements = (elements, appState) => {
+    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]) {
+                return newElementWith(el, { isDeleted: true });
+            }
+            if (el.frameId && framesToBeDeleted.has(el.frameId)) {
+                return newElementWith(el, { isDeleted: true });
+            }
+            if (isBoundToContainer(el) &&
+                appState.selectedElementIds[el.containerId]) {
+                return newElementWith(el, { isDeleted: true });
+            }
+            return el;
+        }),
+        appState: {
+            ...appState,
+            selectedElementIds: {},
+            selectedGroupIds: {},
+        },
+    };
+};
+const handleGroupEditingState = (appState, elements) => {
+    if (appState.editingGroupId) {
+        const siblingElements = getElementsInGroup(getNonDeletedElements(elements), appState.editingGroupId);
+        if (siblingElements.length) {
+            return {
+                ...appState,
+                selectedElementIds: { [siblingElements[0].id]: true },
+            };
+        }
+    }
+    return appState;
+};
+export const actionDeleteSelected = register({
+    name: "deleteSelectedElements",
+    trackEvent: { category: "element", action: "delete" },
+    perform: (elements, appState) => {
+        if (appState.editingLinearElement) {
+            const { elementId, selectedPointsIndices, startBindingElement, endBindingElement, } = appState.editingLinearElement;
+            const element = LinearElementEditor.getElement(elementId);
+            if (!element) {
+                return false;
+            }
+            // case: no point selected → do nothing, as deleting the whole element
+            // is most likely a mistake, where you wanted to delete a specific point
+            // but failed to select it (or you thought it's selected, while it was
+            // only in a hover state)
+            if (selectedPointsIndices == null) {
+                return false;
+            }
+            // case: deleting last remaining point
+            if (element.points.length < 2) {
+                const nextElements = elements.map((el) => {
+                    if (el.id === element.id) {
+                        return newElementWith(el, { isDeleted: true });
+                    }
+                    return el;
+                });
+                const nextAppState = handleGroupEditingState(appState, nextElements);
+                return {
+                    elements: nextElements,
+                    appState: {
+                        ...nextAppState,
+                        editingLinearElement: null,
+                    },
+                    commitToHistory: false,
+                };
+            }
+            // We cannot do this inside `movePoint` because it is also called
+            // when deleting the uncommitted point (which hasn't caused any binding)
+            const binding = {
+                startBindingElement: selectedPointsIndices?.includes(0)
+                    ? null
+                    : startBindingElement,
+                endBindingElement: selectedPointsIndices?.includes(element.points.length - 1)
+                    ? null
+                    : endBindingElement,
+            };
+            LinearElementEditor.deletePoints(element, selectedPointsIndices);
+            return {
+                elements,
+                appState: {
+                    ...appState,
+                    editingLinearElement: {
+                        ...appState.editingLinearElement,
+                        ...binding,
+                        selectedPointsIndices: selectedPointsIndices?.[0] > 0
+                            ? [selectedPointsIndices[0] - 1]
+                            : [0],
+                    },
+                },
+                commitToHistory: true,
+            };
+        }
+        let { elements: nextElements, appState: nextAppState } = deleteSelectedElements(elements, appState);
+        fixBindingsAfterDeletion(nextElements, elements.filter(({ id }) => appState.selectedElementIds[id]));
+        nextAppState = handleGroupEditingState(nextAppState, nextElements);
+        return {
+            elements: nextElements,
+            appState: {
+                ...nextAppState,
+                activeTool: updateActiveTool(appState, { type: "selection" }),
+                multiElement: null,
+                activeEmbeddable: null,
+            },
+            commitToHistory: isSomeElementSelected(getNonDeletedElements(elements), appState),
+        };
+    },
+    contextItemLabel: "labels.delete",
+    keyTest: (event, appState, elements) => (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) &&
+        !event[KEYS.CTRL_OR_CMD],
+    PanelComponent: ({ elements, appState, updateData }) => (_jsx(ToolButton, { type: "button", icon: TrashIcon, title: t("labels.delete"), "aria-label": t("labels.delete"), onClick: () => updateData(null), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});

package/dist/packages/excalidraw/actions/actionDistribute.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DistributeHorizontallyIcon, DistributeVerticallyIcon, } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
+import { distributeElements } from "../distribute";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
+import { t } from "../i18n";
+import { CODES, KEYS } from "../keys";
+import { isSomeElementSelected } from "../scene";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { register } from "./register";
+const enableActionGroup = (appState, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    return (selectedElements.length > 1 &&
+        // TODO enable distributing frames when implemented properly
+        !selectedElements.some((el) => isFrameLikeElement(el)));
+};
+const distributeSelectedElements = (elements, appState, app, distribution) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    const updatedElements = distributeElements(selectedElements, distribution);
+    const updatedElementsMap = arrayToMap(updatedElements);
+    return updateFrameMembershipOfSelectedElements(elements.map((element) => updatedElementsMap.get(element.id) || element), appState, app);
+};
+export const distributeHorizontally = register({
+    name: "distributeHorizontally",
+    trackEvent: { category: "element" },
+    perform: (elements, appState, _, app) => {
+        return {
+            appState,
+            elements: distributeSelectedElements(elements, appState, app, {
+                space: "between",
+                axis: "x",
+            }),
+            commitToHistory: true,
+        };
+    },
+    keyTest: (event) => !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !enableActionGroup(appState, app), type: "button", icon: DistributeHorizontallyIcon, onClick: () => updateData(null), title: `${t("labels.distributeHorizontally")} — ${getShortcutKey("Alt+H")}`, "aria-label": t("labels.distributeHorizontally"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});
+export const distributeVertically = register({
+    name: "distributeVertically",
+    trackEvent: { category: "element" },
+    perform: (elements, appState, _, app) => {
+        return {
+            appState,
+            elements: distributeSelectedElements(elements, appState, app, {
+                space: "between",
+                axis: "y",
+            }),
+            commitToHistory: true,
+        };
+    },
+    keyTest: (event) => !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !enableActionGroup(appState, app), type: "button", icon: DistributeVerticallyIcon, onClick: () => updateData(null), title: `${t("labels.distributeVertically")} — ${getShortcutKey("Alt+V")}`, "aria-label": t("labels.distributeVertically"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});

package/dist/packages/excalidraw/actions/actionDuplicateSelection.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KEYS } from "../keys";
+import { register } from "./register";
+import { duplicateElement, getNonDeletedElements } from "../element";
+import { isSomeElementSelected } from "../scene";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { selectGroupsForSelectedElements, getSelectedGroupForElement, getElementsInGroup, } from "../groups";
+import { fixBindingsAfterDuplication } from "../element/binding";
+import { GRID_SIZE } from "../constants";
+import { bindTextToShapeAfterDuplication, getBoundTextElement, } from "../element/textElement";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
+import { normalizeElementOrder } from "../element/sortElements";
+import { DuplicateIcon } from "../components/icons";
+import { bindElementsToFramesAfterDuplication, getFrameChildren, } from "../frame";
+import { excludeElementsInFramesFromSelection, getSelectedElements, } from "../scene/selection";
+export const actionDuplicateSelection = register({
+    name: "duplicateSelection",
+    trackEvent: { category: "element" },
+    perform: (elements, appState) => {
+        // duplicate selected point(s) if editing a line
+        if (appState.editingLinearElement) {
+            const ret = LinearElementEditor.duplicateSelectedPoints(appState);
+            if (!ret) {
+                return false;
+            }
+            return {
+                elements,
+                appState: ret.appState,
+                commitToHistory: true,
+            };
+        }
+        return {
+            ...duplicateElements(elements, appState),
+            commitToHistory: true,
+        };
+    },
+    contextItemLabel: "labels.duplicateSelection",
+    keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.D,
+    PanelComponent: ({ elements, appState, updateData }) => (_jsx(ToolButton, { type: "button", icon: DuplicateIcon, title: `${t("labels.duplicateSelection")} — ${getShortcutKey("CtrlOrCmd+D")}`, "aria-label": t("labels.duplicateSelection"), onClick: () => updateData(null), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});
+const duplicateElements = (elements, appState) => {
+    // ---------------------------------------------------------------------------
+    // step (1)
+    const sortedElements = normalizeElementOrder(elements);
+    const groupIdMap = new Map();
+    const newElements = [];
+    const oldElements = [];
+    const oldIdToDuplicatedId = new Map();
+    const duplicateAndOffsetElement = (element) => {
+        const newElement = duplicateElement(appState.editingGroupId, groupIdMap, element, {
+            x: element.x + GRID_SIZE / 2,
+            y: element.y + GRID_SIZE / 2,
+        });
+        oldIdToDuplicatedId.set(element.id, newElement.id);
+        oldElements.push(element);
+        newElements.push(newElement);
+        return newElement;
+    };
+    const idsOfElementsToDuplicate = arrayToMap(getSelectedElements(sortedElements, appState, {
+        includeBoundTextElement: true,
+        includeElementsInFrames: true,
+    }));
+    // Ids of elements that have already been processed so we don't push them
+    // into the array twice if we end up backtracking when retrieving
+    // discontiguous group of elements (can happen due to a bug, or in edge
+    // cases such as a group containing deleted elements which were not selected).
+    //
+    // This is not enough to prevent duplicates, so we do a second loop afterwards
+    // to remove them.
+    //
+    // For convenience we mark even the newly created ones even though we don't
+    // loop over them.
+    const processedIds = new Map();
+    const markAsProcessed = (elements) => {
+        for (const element of elements) {
+            processedIds.set(element.id, true);
+        }
+        return elements;
+    };
+    const elementsWithClones = [];
+    let index = -1;
+    while (++index < sortedElements.length) {
+        const element = sortedElements[index];
+        if (processedIds.get(element.id)) {
+            continue;
+        }
+        const boundTextElement = getBoundTextElement(element);
+        const isElementAFrameLike = isFrameLikeElement(element);
+        if (idsOfElementsToDuplicate.get(element.id)) {
+            // if a group or a container/bound-text or frame, duplicate atomically
+            if (element.groupIds.length || boundTextElement || isElementAFrameLike) {
+                const groupId = getSelectedGroupForElement(appState, element);
+                if (groupId) {
+                    // TODO:
+                    // remove `.flatMap...`
+                    // if the elements in a frame are grouped when the frame is grouped
+                    const groupElements = getElementsInGroup(sortedElements, groupId).flatMap((element) => isFrameLikeElement(element)
+                        ? [...getFrameChildren(elements, element.id), element]
+                        : [element]);
+                    elementsWithClones.push(...markAsProcessed([
+                        ...groupElements,
+                        ...groupElements.map((element) => duplicateAndOffsetElement(element)),
+                    ]));
+                    continue;
+                }
+                if (boundTextElement) {
+                    elementsWithClones.push(...markAsProcessed([
+                        element,
+                        boundTextElement,
+                        duplicateAndOffsetElement(element),
+                        duplicateAndOffsetElement(boundTextElement),
+                    ]));
+                    continue;
+                }
+                if (isElementAFrameLike) {
+                    const elementsInFrame = getFrameChildren(sortedElements, element.id);
+                    elementsWithClones.push(...markAsProcessed([
+                        ...elementsInFrame,
+                        element,
+                        ...elementsInFrame.map((e) => duplicateAndOffsetElement(e)),
+                        duplicateAndOffsetElement(element),
+                    ]));
+                    continue;
+                }
+            }
+            // since elements in frames have a lower z-index than the frame itself,
+            // they will be looped first and if their frames are selected as well,
+            // they will have been copied along with the frame atomically in the
+            // above branch, so we must skip those elements here
+            //
+            // now, for elements do not belong any frames or elements whose frames
+            // are selected (or elements that are left out from the above
+            // steps for whatever reason) we (should at least) duplicate them here
+            if (!element.frameId || !idsOfElementsToDuplicate.has(element.frameId)) {
+                elementsWithClones.push(...markAsProcessed([element, duplicateAndOffsetElement(element)]));
+            }
+        }
+        else {
+            elementsWithClones.push(...markAsProcessed([element]));
+        }
+    }
+    // step (2)
+    // second pass to remove duplicates. We loop from the end as it's likelier
+    // that the last elements are in the correct order (contiguous or otherwise).
+    // Thus we need to reverse as the last step (3).
+    const finalElementsReversed = [];
+    const finalElementIds = new Map();
+    index = elementsWithClones.length;
+    while (--index >= 0) {
+        const element = elementsWithClones[index];
+        if (!finalElementIds.get(element.id)) {
+            finalElementIds.set(element.id, true);
+            finalElementsReversed.push(element);
+        }
+    }
+    // step (3)
+    const finalElements = finalElementsReversed.reverse();
+    // ---------------------------------------------------------------------------
+    bindTextToShapeAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);
+    fixBindingsAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);
+    bindElementsToFramesAfterDuplication(finalElements, oldElements, oldIdToDuplicatedId);
+    const nextElementsToSelect = excludeElementsInFramesFromSelection(newElements);
+    return {
+        elements: finalElements,
+        appState: {
+            ...appState,
+            ...selectGroupsForSelectedElements({
+                editingGroupId: appState.editingGroupId,
+                selectedElementIds: nextElementsToSelect.reduce((acc, element) => {
+                    if (!isBoundToContainer(element)) {
+                        acc[element.id] = true;
+                    }
+                    return acc;
+                }, {}),
+            }, getNonDeletedElements(finalElements), appState, null),
+        },
+    };
+};

package/dist/packages/excalidraw/actions/actionElementLock.js

@@ -0,0 +1,89 @@
+import { newElementWith } from "../element/mutateElement";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { KEYS } from "../keys";
+import { arrayToMap } from "../utils";
+import { register } from "./register";
+const shouldLock = (elements) => elements.every((el) => !el.locked);
+export const actionToggleElementLock = register({
+    name: "toggleElementLock",
+    trackEvent: { category: "element" },
+    predicate: (elements, appState, _, app) => {
+        const selectedElements = app.scene.getSelectedElements(appState);
+        return !selectedElements.some((element) => element.locked && element.frameId);
+    },
+    perform: (elements, appState, _, app) => {
+        const selectedElements = app.scene.getSelectedElements({
+            selectedElementIds: appState.selectedElementIds,
+            includeBoundTextElement: true,
+            includeElementsInFrames: true,
+        });
+        if (!selectedElements.length) {
+            return false;
+        }
+        const nextLockState = shouldLock(selectedElements);
+        const selectedElementsMap = arrayToMap(selectedElements);
+        return {
+            elements: elements.map((element) => {
+                if (!selectedElementsMap.has(element.id)) {
+                    return element;
+                }
+                return newElementWith(element, { locked: nextLockState });
+            }),
+            appState: {
+                ...appState,
+                selectedLinearElement: nextLockState
+                    ? null
+                    : appState.selectedLinearElement,
+            },
+            commitToHistory: true,
+        };
+    },
+    contextItemLabel: (elements, appState, app) => {
+        const selected = app.scene.getSelectedElements({
+            selectedElementIds: appState.selectedElementIds,
+            includeBoundTextElement: false,
+        });
+        if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
+            return selected[0].locked
+                ? "labels.elementLock.unlock"
+                : "labels.elementLock.lock";
+        }
+        return shouldLock(selected)
+            ? "labels.elementLock.lockAll"
+            : "labels.elementLock.unlockAll";
+    },
+    keyTest: (event, appState, elements, app) => {
+        return (event.key.toLocaleLowerCase() === KEYS.L &&
+            event[KEYS.CTRL_OR_CMD] &&
+            event.shiftKey &&
+            app.scene.getSelectedElements({
+                selectedElementIds: appState.selectedElementIds,
+                includeBoundTextElement: false,
+            }).length > 0);
+    },
+});
+export const actionUnlockAllElements = register({
+    name: "unlockAllElements",
+    trackEvent: { category: "canvas" },
+    viewMode: false,
+    predicate: (elements) => {
+        return elements.some((element) => element.locked);
+    },
+    perform: (elements, appState) => {
+        const lockedElements = elements.filter((el) => el.locked);
+        return {
+            elements: elements.map((element) => {
+                if (element.locked) {
+                    return newElementWith(element, { locked: false });
+                }
+                return element;
+            }),
+            appState: {
+                ...appState,
+                selectedElementIds: Object.fromEntries(lockedElements.map((el) => [el.id, true])),
+            },
+            commitToHistory: true,
+        };
+    },
+    contextItemLabel: "labels.elementLock.unlockAll",
+});

package/dist/packages/excalidraw/actions/actionExport.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { questionCircle, saveAs } from "../components/icons";
+import { ProjectName } from "../components/ProjectName";
+import { ToolButton } from "../components/ToolButton";
+import { Tooltip } from "../components/Tooltip";
+import { DarkModeToggle } from "../components/DarkModeToggle";
+import { loadFromJSON, saveAsJSON } from "../data";
+import { resaveAsImageWithScene } from "../data/resave";
+import { t } from "../i18n";
+import { useDevice } from "../components/App";
+import { KEYS } from "../keys";
+import { register } from "./register";
+import { CheckboxItem } from "../components/CheckboxItem";
+import { getExportSize } from "../scene/export";
+import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { getNonDeletedElements } from "../element";
+import { isImageFileHandle } from "../data/blob";
+import { nativeFileSystemSupported } from "../data/filesystem";
+import "../components/ToolIcon.scss";
+export const actionChangeProjectName = register({
+    name: "changeProjectName",
+    trackEvent: false,
+    perform: (_elements, appState, value) => {
+        return { appState: { ...appState, name: value }, commitToHistory: false };
+    },
+    PanelComponent: ({ appState, updateData, appProps, data }) => (_jsx(ProjectName, { label: t("labels.fileTitle"), value: appState.name || "Unnamed", onChange: (name) => updateData(name), isNameEditable: typeof appProps.name === "undefined" && !appState.viewModeEnabled, ignoreFocus: data?.ignoreFocus ?? false })),
+});
+export const actionChangeExportScale = register({
+    name: "changeExportScale",
+    trackEvent: { category: "export", action: "scale" },
+    perform: (_elements, appState, value) => {
+        return {
+            appState: { ...appState, exportScale: value },
+            commitToHistory: false,
+        };
+    },
+    PanelComponent: ({ elements: allElements, appState, updateData }) => {
+        const elements = getNonDeletedElements(allElements);
+        const exportSelected = isSomeElementSelected(elements, appState);
+        const exportedElements = exportSelected
+            ? getSelectedElements(elements, appState)
+            : elements;
+        return (_jsx(_Fragment, { children: EXPORT_SCALES.map((s) => {
+                const [width, height] = getExportSize(exportedElements, DEFAULT_EXPORT_PADDING, s);
+                const scaleButtonTitle = `${t("imageExportDialog.label.scale")} ${s}x (${width}x${height})`;
+                return (_jsx(ToolButton, { size: "small", type: "radio", icon: `${s}x`, name: "export-canvas-scale", title: scaleButtonTitle, "aria-label": scaleButtonTitle, id: "export-canvas-scale", checked: s === appState.exportScale, onChange: () => updateData(s) }, s));
+            }) }));
+    },
+});
+export const actionChangeExportBackground = register({
+    name: "changeExportBackground",
+    trackEvent: { category: "export", action: "toggleBackground" },
+    perform: (_elements, appState, value) => {
+        return {
+            appState: { ...appState, exportBackground: value },
+            commitToHistory: false,
+        };
+    },
+    PanelComponent: ({ appState, updateData }) => (_jsx(CheckboxItem, { checked: appState.exportBackground, onChange: (checked) => updateData(checked), children: t("imageExportDialog.label.withBackground") })),
+});
+export const actionChangeExportEmbedScene = register({
+    name: "changeExportEmbedScene",
+    trackEvent: { category: "export", action: "embedScene" },
+    perform: (_elements, appState, value) => {
+        return {
+            appState: { ...appState, exportEmbedScene: value },
+            commitToHistory: false,
+        };
+    },
+    PanelComponent: ({ appState, updateData }) => (_jsxs(CheckboxItem, { checked: appState.exportEmbedScene, onChange: (checked) => updateData(checked), children: [t("imageExportDialog.label.embedScene"), _jsx(Tooltip, { label: t("imageExportDialog.tooltip.embedScene"), long: true, children: _jsx("div", { className: "excalidraw-tooltip-icon", children: questionCircle }) })] })),
+});
+export const actionSaveToActiveFile = register({
+    name: "saveToActiveFile",
+    trackEvent: { category: "export" },
+    predicate: (elements, appState, props, app) => {
+        return (!!app.props.UIOptions.canvasActions.saveToActiveFile &&
+            !!appState.fileHandle &&
+            !appState.viewModeEnabled);
+    },
+    perform: async (elements, appState, value, app) => {
+        const fileHandleExists = !!appState.fileHandle;
+        try {
+            const { fileHandle } = isImageFileHandle(appState.fileHandle)
+                ? await resaveAsImageWithScene(elements, appState, app.files)
+                : await saveAsJSON(elements, appState, app.files);
+            return {
+                commitToHistory: false,
+                appState: {
+                    ...appState,
+                    fileHandle,
+                    toast: fileHandleExists
+                        ? {
+                            message: fileHandle?.name
+                                ? t("toast.fileSavedToFilename").replace("{filename}", `"${fileHandle.name}"`)
+                                : t("toast.fileSaved"),
+                        }
+                        : null,
+                },
+            };
+        }
+        catch (error) {
+            if (error?.name !== "AbortError") {
+                console.error(error);
+            }
+            else {
+                console.warn(error);
+            }
+            return { commitToHistory: false };
+        }
+    },
+    keyTest: (event) => event.key === KEYS.S && event[KEYS.CTRL_OR_CMD] && !event.shiftKey,
+});
+export const actionSaveFileToDisk = register({
+    name: "saveFileToDisk",
+    viewMode: true,
+    trackEvent: { category: "export" },
+    perform: async (elements, appState, value, app) => {
+        try {
+            const { fileHandle } = await saveAsJSON(elements, {
+                ...appState,
+                fileHandle: null,
+            }, app.files);
+            return {
+                commitToHistory: false,
+                appState: {
+                    ...appState,
+                    openDialog: null,
+                    fileHandle,
+                    toast: { message: t("toast.fileSaved") },
+                },
+            };
+        }
+        catch (error) {
+            if (error?.name !== "AbortError") {
+                console.error(error);
+            }
+            else {
+                console.warn(error);
+            }
+            return { commitToHistory: false };
+        }
+    },
+    keyTest: (event) => event.key === KEYS.S && event.shiftKey && event[KEYS.CTRL_OR_CMD],
+    PanelComponent: ({ updateData }) => (_jsx(ToolButton, { type: "button", icon: saveAs, title: t("buttons.saveAs"), "aria-label": t("buttons.saveAs"), showAriaLabel: useDevice().editor.isMobile, hidden: !nativeFileSystemSupported, onClick: () => updateData(null), "data-testid": "save-as-button" })),
+});
+export const actionLoadScene = register({
+    name: "loadScene",
+    trackEvent: { category: "export" },
+    predicate: (elements, appState, props, app) => {
+        return (!!app.props.UIOptions.canvasActions.loadScene && !appState.viewModeEnabled);
+    },
+    perform: async (elements, appState, _, app) => {
+        try {
+            const { elements: loadedElements, appState: loadedAppState, files, } = await loadFromJSON(appState, elements);
+            return {
+                elements: loadedElements,
+                appState: loadedAppState,
+                files,
+                commitToHistory: true,
+            };
+        }
+        catch (error) {
+            if (error?.name === "AbortError") {
+                console.warn(error);
+                return false;
+            }
+            return {
+                elements,
+                appState: { ...appState, errorMessage: error.message },
+                files: app.files,
+                commitToHistory: false,
+            };
+        }
+    },
+    keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
+});
+export const actionExportWithDarkMode = register({
+    name: "exportWithDarkMode",
+    trackEvent: { category: "export", action: "toggleTheme" },
+    perform: (_elements, appState, value) => {
+        return {
+            appState: { ...appState, exportWithDarkMode: value },
+            commitToHistory: false,
+        };
+    },
+    PanelComponent: ({ appState, updateData }) => (_jsx("div", { style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            marginTop: "-45px",
+            marginBottom: "10px",
+        }, children: _jsx(DarkModeToggle, { value: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT, onChange: (theme) => {
+                updateData(theme === THEME.DARK);
+            }, title: t("imageExportDialog.label.darkMode") }) })),
+});