@marcosnbj/excalidraw/types/actions/types.d.ts

Excalidraw as a React component

import React from "react";
import { ExcalidrawElement } from "../element/types";
import { AppClassProperties, AppState, ExcalidrawProps, BinaryFiles } from "../types";
import { MarkOptional } from "../utility-types";
export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
/** if false, the action should be prevented */
export type ActionResult = {
    elements?: readonly ExcalidrawElement[] | null;
    appState?: MarkOptional<AppState, "offsetTop" | "offsetLeft" | "width" | "height"> | null;
    files?: BinaryFiles | null;
    commitToHistory: boolean;
    syncHistory?: boolean;
    replaceFiles?: boolean;
} | false;
type ActionFn = (elements: readonly ExcalidrawElement[], 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" | "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";
export type PanelComponentProps = {
    elements: readonly ExcalidrawElement[];
    appState: AppState;
    updateData: (formData?: any) => void;
    appProps: ExcalidrawProps;
    data?: Record<string, any>;
    app: AppClassProperties;
};
export interface Action {
    name: ActionName;
    PanelComponent?: React.FC<PanelComponentProps>;
    perform: ActionFn;
    keyPriority?: number;
    keyTest?: (event: React.KeyboardEvent | KeyboardEvent, appState: AppState, elements: readonly ExcalidrawElement[], app: AppClassProperties) => boolean;
    contextItemLabel?: string | ((elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, app: AppClassProperties) => string);
    predicate?: (elements: readonly ExcalidrawElement[], appState: AppState, appProps: ExcalidrawProps, app: AppClassProperties) => boolean;
    checked?: (appState: Readonly<AppState>) => boolean;
    trackEvent: false | {
        category: "toolbar" | "element" | "canvas" | "export" | "history" | "menu" | "collab" | "hyperlink";
        action?: string;
        predicate?: (appState: Readonly<AppState>, elements: readonly ExcalidrawElement[], value: any) => boolean;
    };
    /** if set to `true`, allow action to be performed in viewMode.
     *  Defaults to `false` */
    viewMode?: boolean;
}
export {};