c54a099010
* Remove width/height from the ".excalidraw" container so it will sized automatically. * updated all ref calculation to ".excalidraw" instead of parent since now ".excalidraw" will get resized * Remove props width/height as its not needed anymore. * Resize handler is also not needed anymore. * Position absolute canvas due to #3379 (comment) * move css to style and remove one extra rerendering * factor out mock logic for test * set height, width so as to avoid unnecessary updates of regression snap * better mock * better type checking and omit width,height from getDefaultAppState and also restore * revert * default to window dimensions in constructor * update docs * update * update * tweaks
126 lines
2.9 KiB
TypeScript
126 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import { ExcalidrawElement } from "../element/types";
|
|
import { AppState, ExcalidrawProps } from "../types";
|
|
|
|
/** if false, the action should be prevented */
|
|
export type ActionResult =
|
|
| {
|
|
elements?: readonly ExcalidrawElement[] | null;
|
|
appState?: MarkOptional<
|
|
AppState,
|
|
"offsetTop" | "offsetLeft" | "width" | "height"
|
|
> | null;
|
|
commitToHistory: boolean;
|
|
syncHistory?: boolean;
|
|
}
|
|
| false;
|
|
|
|
type ActionFn = (
|
|
elements: readonly ExcalidrawElement[],
|
|
appState: Readonly<AppState>,
|
|
formData: any,
|
|
app: { canvas: HTMLCanvasElement | null },
|
|
) => ActionResult | Promise<ActionResult>;
|
|
|
|
export type UpdaterFn = (res: ActionResult) => void;
|
|
export type ActionFilterFn = (action: Action) => void;
|
|
|
|
export type ActionName =
|
|
| "copy"
|
|
| "cut"
|
|
| "paste"
|
|
| "copyAsPng"
|
|
| "copyAsSvg"
|
|
| "sendBackward"
|
|
| "bringForward"
|
|
| "sendToBack"
|
|
| "bringToFront"
|
|
| "copyStyles"
|
|
| "selectAll"
|
|
| "pasteStyles"
|
|
| "gridMode"
|
|
| "zenMode"
|
|
| "stats"
|
|
| "changeStrokeColor"
|
|
| "changeBackgroundColor"
|
|
| "changeFillStyle"
|
|
| "changeStrokeWidth"
|
|
| "changeSloppiness"
|
|
| "changeStrokeStyle"
|
|
| "changeArrowhead"
|
|
| "changeOpacity"
|
|
| "changeFontSize"
|
|
| "toggleCanvasMenu"
|
|
| "toggleEditMenu"
|
|
| "undo"
|
|
| "redo"
|
|
| "finalize"
|
|
| "changeProjectName"
|
|
| "changeExportBackground"
|
|
| "changeExportEmbedScene"
|
|
| "changeShouldAddWatermark"
|
|
| "saveScene"
|
|
| "saveAsScene"
|
|
| "loadScene"
|
|
| "duplicateSelection"
|
|
| "deleteSelectedElements"
|
|
| "changeViewBackgroundColor"
|
|
| "clearCanvas"
|
|
| "zoomIn"
|
|
| "zoomOut"
|
|
| "resetZoom"
|
|
| "zoomToFit"
|
|
| "zoomToSelection"
|
|
| "changeFontFamily"
|
|
| "changeTextAlign"
|
|
| "toggleFullScreen"
|
|
| "toggleShortcuts"
|
|
| "group"
|
|
| "ungroup"
|
|
| "goToCollaborator"
|
|
| "addToLibrary"
|
|
| "changeSharpness"
|
|
| "alignTop"
|
|
| "alignBottom"
|
|
| "alignLeft"
|
|
| "alignRight"
|
|
| "alignVerticallyCentered"
|
|
| "alignHorizontallyCentered"
|
|
| "distributeHorizontally"
|
|
| "distributeVertically"
|
|
| "flipHorizontal"
|
|
| "flipVertical"
|
|
| "viewMode"
|
|
| "exportWithDarkMode";
|
|
|
|
export interface Action {
|
|
name: ActionName;
|
|
PanelComponent?: React.FC<{
|
|
elements: readonly ExcalidrawElement[];
|
|
appState: AppState;
|
|
updateData: (formData?: any) => void;
|
|
appProps: ExcalidrawProps;
|
|
id?: string;
|
|
}>;
|
|
perform: ActionFn;
|
|
keyPriority?: number;
|
|
keyTest?: (
|
|
event: KeyboardEvent,
|
|
appState: AppState,
|
|
elements: readonly ExcalidrawElement[],
|
|
) => boolean;
|
|
contextItemLabel?: string;
|
|
contextItemPredicate?: (
|
|
elements: readonly ExcalidrawElement[],
|
|
appState: AppState,
|
|
) => boolean;
|
|
checked?: (appState: Readonly<AppState>) => boolean;
|
|
}
|
|
|
|
export interface ActionsManagerInterface {
|
|
actions: Record<ActionName, Action>;
|
|
registerAction: (action: Action) => void;
|
|
handleKeyDown: (event: KeyboardEvent) => boolean;
|
|
renderAction: (name: ActionName) => React.ReactElement | null;
|
|
}
|