@excalidraw/element 0.18.0-2a82821 → 0.18.0-2b1c2a9

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

@@ -14,10 +14,10 @@ export type ActionResult = {
 type ActionFn<TData = any> = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: TData | undefined, 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" | "arrowBinding" | "midpointSnapping" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeFreedrawMode" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeArrowProperties" | "changeOpacity" | "changeFontSize" | "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" | "deselect" | "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" | "toggleLassoTool" | "toggleShapeSwitch" | "togglePolygon";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "arrowBinding" | "midpointSnapping" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeBucketFillBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeSloppiness" | "changeFreedrawMode" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeArrowProperties" | "changeOpacity" | "changeFontSize" | "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" | "deselect" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor" | "wrapSelectionInFrame" | "toggleShapeSwitch" | "togglePolygon";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
-    appState: AppState;
+    appState: UIAppState;
     updateData: <T = any>(formData?: T) => void;
     appProps: ExcalidrawProps;
     data?: Record<string, any>;
@@ -26,7 +26,7 @@ export type PanelComponentProps = {
 };
 export interface Action<TData = any> {
     name: ActionName;
-    label: string | ((elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, app: AppClassProperties) => string);
+    label: string | ((elements: readonly ExcalidrawElement[], appState: Readonly<UIAppState>, app: AppClassProperties) => string);
     keywords?: string[];
     icon?: React.ReactNode | ((appState: UIAppState, elements: readonly ExcalidrawElement[]) => React.ReactNode);
     PanelComponent?: React.FC<PanelComponentProps>;
@@ -34,7 +34,7 @@ export interface Action<TData = any> {
     keyPriority?: number;
     keyTest?: (event: React.KeyboardEvent | KeyboardEvent, appState: AppState, elements: readonly ExcalidrawElement[], app: AppClassProperties) => boolean;
     predicate?: (elements: readonly ExcalidrawElement[], appState: AppState, appProps: ExcalidrawProps, app: AppClassProperties) => boolean;
-    checked?: (appState: Readonly<AppState>) => boolean;
+    checked?: (appState: Readonly<UIAppState>) => boolean;
     trackEvent: false | {
         category: "toolbar" | "element" | "canvas" | "export" | "history" | "menu" | "collab" | "hyperlink" | "search_menu" | "shape_switch";
         action?: string;
@@ -43,5 +43,9 @@ export interface Action<TData = any> {
     /** if set to `true`, allow action to be performed in viewMode.
      *  Defaults to `false` */
     viewMode?: boolean;
+    /** if set to `true`, the action counts as canvas navigation and remains
+     *  available in the non-interactive editor when
+     *  `interaction: { enabled: { navigation: true } }`. Defaults to `false` */
+    navigation?: boolean;
 }
 export {};

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

@@ -24,12 +24,13 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     selectedLinearElement?: import("@excalidraw/element").LinearElementEditor | null | undefined;
     isBindingEnabled?: boolean | undefined;
     isMidpointSnappingEnabled?: boolean | undefined;
+    gridModeEnabled?: boolean | undefined;
     zenModeEnabled?: boolean | undefined;
     shouldCacheIgnoreZoom?: boolean | undefined;
     exportScale?: number | undefined;
     currentItemArrowType?: "round" | "sharp" | "elbow" | undefined;
-    bindMode?: import("@excalidraw/element/types").BindMode | undefined;
     gridSize?: number | undefined;
+    bindMode?: import("@excalidraw/element/types").BindMode | undefined;
     showWelcomeScreen?: boolean | undefined;
     boxSelectionMode?: import("./types").BoxSelectionMode | undefined;
     bindingPreference?: "enabled" | "disabled" | undefined;
@@ -69,7 +70,6 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
         [id: string]: true;
     } | undefined;
     gridStep?: number | undefined;
-    gridModeEnabled?: boolean | undefined;
     stats?: {
         open: boolean;
         panels: number;
@@ -78,21 +78,26 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     lockedMultiSelections?: {
         [groupId: string]: true;
     } | undefined;
+    colorTopPicks?: {
+        elementStroke: readonly string[] | null;
+        elementBackground: readonly string[] | null;
+        bucketFill: readonly string[] | null;
+    } | undefined;
 };
 export declare const cleanAppStateForExport: (appState: Partial<AppState>) => {
     viewBackgroundColor?: string | undefined;
+    gridModeEnabled?: boolean | undefined;
     gridSize?: number | undefined;
     gridStep?: number | undefined;
-    gridModeEnabled?: boolean | undefined;
     lockedMultiSelections?: {
         [groupId: string]: true;
     } | undefined;
 };
 export declare const clearAppStateForDatabase: (appState: Partial<AppState>) => {
     viewBackgroundColor?: string | undefined;
+    gridModeEnabled?: boolean | undefined;
     gridSize?: number | undefined;
     gridStep?: number | undefined;
-    gridModeEnabled?: boolean | undefined;
     lockedMultiSelections?: {
         [groupId: string]: true;
     } | undefined;

package/dist/types/excalidraw/components/Actions.d.ts

@@ -1,15 +1,22 @@
-import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
+import type { NonDeletedElementsMap, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
 import "./Actions.scss";
-import type { AppClassProperties, AppProps, UIAppState, Zoom, AppState } from "../types";
+import type { AppClassProperties, UIAppState, AppState } from "../types";
 import type { ActionManager } from "../actions/manager";
-export declare const canChangeStrokeColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
-export declare const canChangeBackgroundColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
+export { canChangeStrokeColor, canChangeBackgroundColor, } from "./shapeActionPredicates";
+/**
+ * Full styles panel: the wide, always-expanded layout used on desktop when the
+ * UI is in "full" mode.
+ */
 export declare const SelectedShapeActions: ({ appState, elementsMap, renderAction, app, }: {
     appState: UIAppState;
     elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
     renderAction: ActionManager["renderAction"];
     app: AppClassProperties;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Compact styles panel — the collapsed, popover-driven layout used on tablets
+ * and on desktop when the UI is in "compact" mode.
+ */
 export declare const CompactShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, }: {
     appState: UIAppState;
     elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
@@ -17,6 +24,11 @@ export declare const CompactShapeActions: ({ appState, elementsMap, renderAction
     app: AppClassProperties;
     setAppState: React.Component<any, AppState>["setState"];
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Mobile styles panel — the horizontal action bar used on phones, with an
+ * overflow measurement that promotes duplicate/delete out of the popover when
+ * there is room.
+ */
 export declare const MobileShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, }: {
     appState: UIAppState;
     elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
@@ -24,15 +36,8 @@ export declare const MobileShapeActions: ({ appState, elementsMap, renderAction,
     app: AppClassProperties;
     setAppState: React.Component<any, AppState>["setState"];
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const ShapesSwitcher: ({ activeTool, setAppState, app, UIOptions, }: {
-    activeTool: UIAppState["activeTool"];
-    setAppState: React.Component<any, AppState>["setState"];
-    app: AppClassProperties;
-    UIOptions: AppProps["UIOptions"];
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const ZoomActions: ({ renderAction, zoom, }: {
+export declare const ZoomActions: ({ renderAction, }: {
     renderAction: ActionManager["renderAction"];
-    zoom: Zoom;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const UndoRedoActions: ({ renderAction, className, }: {
     renderAction: ActionManager["renderAction"];

package/dist/types/excalidraw/components/App.arrowText.d.ts

@@ -0,0 +1,104 @@
+import { LinearElementEditor } from "@excalidraw/element";
+import type { ArrowEndpoint } from "@excalidraw/element";
+import type { ExcalidrawElement, ExcalidrawTextElement, FixedPoint, NonDeleted, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+import type App from "./App";
+import type { AppState, PointerDownState } from "../types";
+/**
+ * Text ↔ arrow interactions.
+ *
+ * With the text tool: the hover affordance showing where a click would attach
+ * text to an arrow — a free endpoint (binds the arrow to a new text element
+ * positioned against that endpoint) or the arrow's midpoint (adds a label
+ * bound to the arrow) — and the endpoint-bound flavor of drag-sizing a new
+ * text.
+ *
+ * With the selection tool: dragging an arrow's existing label along the arrow
+ * — the grab affordance, the drag itself, and where a double-click starts
+ * editing a label the drag has moved.
+ *
+ * The scene-level logic lives in `@excalidraw/element`'s
+ * `arrowEndpointText.ts` and `linearElementEditor.ts`.
+ */
+export declare class AppArrowText {
+    private app;
+    constructor(app: App);
+    /**
+     * With the text tool active, an arrow under the cursor is a target for
+     * attaching text. Returns where the text would land (if anywhere), and keeps
+     * `appState.hoveredArrowTextAnchor` — which drives the highlight — in sync.
+     */
+    updateHoveredAnchor: (scenePointer: {
+        x: number;
+        y: number;
+    }) => AppState["hoveredArrowTextAnchor"];
+    /**
+     * Re-evaluates the hovered anchor at the last known pointer position — for
+     * events that change what a click would do without the pointer moving,
+     * i.e. the ctrl/cmd binding toggle. (Events that invalidate the anchor
+     * wholesale — tool switches, finalize, deselect — clear it directly
+     * instead.)
+     */
+    refresh: () => void;
+    /**
+     * A free arrow endpoint a new text could be bound to. Binding an endpoint is
+     * an arrow binding, so it follows the binding toggle (ctrl/cmd) like every
+     * other one — holding it makes the text tool drop plain text instead.
+     */
+    getBindableEndpointAtPosition(x: number, y: number): ArrowEndpoint | null;
+    /**
+     * Mirrors what `handleTextOnPointerDown` would do at this position, so the
+     * highlight can't promise something the click won't deliver.
+     */
+    private getAnchorAtPosition;
+    /**
+     * How a text should be created to read as a label for this endpoint — the
+     * side midpoint to bind, the alignment that pins it, and the scene position
+     * it must sit at. `targetStrokeWidth` is the caller's to provide so it can
+     * guarantee it matches the stroke width the text is then created with — the
+     * binding gap derives from it (see `getTextBindingForArrowEndpoint`).
+     */
+    getTextBinding({ arrow, startOrEnd }: ArrowEndpoint, targetStrokeWidth: number): {
+        fixedPoint: FixedPoint;
+        textAlign: import("@excalidraw/element/types").TextAlign;
+        verticalAlign: import("@excalidraw/element/types").VerticalAlign;
+        anchor: import("@excalidraw/math").GlobalPoint;
+    } | null;
+    /**
+     * Binds the arrow endpoint to the created text, at the side midpoint the
+     * placement resolved (`getTextBinding`'s `fixedPoint`).
+     */
+    bindText({ arrow, startOrEnd }: ArrowEndpoint, text: NonDeleted<ExcalidrawTextElement>, fixedPoint: FixedPoint): void;
+    /**
+     * A text bound to an arrow endpoint can't be positioned by the drag — the
+     * binding already placed it — so only its width is dragged out. Returns
+     * whether it owned the drag.
+     */
+    maybeDragNewText(newElement: ExcalidrawElement, pointerCoords: {
+        x: number;
+        y: number;
+    }): boolean;
+    /**
+     * Whether the arrow's label is what a grab at this position would pick up:
+     * the pointer is over the label, and no element stacked above the arrow
+     * owns the hit instead.
+     */
+    isBoundTextGrabbable(element: NonDeletedExcalidrawElement, x: number, y: number): boolean;
+    /**
+     * The pointer-move half of dragging a label along its arrow. Owns the move
+     * whenever the gesture started on the label (`pointerDownState.hit.arrowLabel`),
+     * dragging only once past the threshold. Returns whether it owned it.
+     */
+    maybeDragLabel(linearElementEditor: LinearElementEditor, pointerDownState: PointerDownState, pointerCoords: {
+        x: number;
+        y: number;
+    }): boolean;
+    /**
+     * Where a double-click on a labeled arrow should start text editing: the
+     * center of the label itself, which a label drag may have moved away from
+     * the arrow's midpoint. Null when the element is not a labeled arrow.
+     */
+    getLabelCenter(element: ExcalidrawElement): {
+        x: number;
+        y: number;
+    } | null;
+}

package/dist/types/excalidraw/components/App.bucketFill.d.ts

@@ -0,0 +1,48 @@
+import type { Theme } from "@excalidraw/element/types";
+import type App from "./App";
+type ScenePoint = {
+    x: number;
+    y: number;
+};
+/** Owns bucket-fill interaction and App-bound scene mutations. */
+export declare class AppBucketFill {
+    private app;
+    constructor(app: App);
+    private temporaryEyeDropper;
+    /**
+     * The click armed on pointer down, committed on pointer up. Deferring the
+     * scene mutation to pointer up is what lets a pinch/pan second finger, a
+     * long-press context menu, or a pointercancel abort the fill — on pointer
+     * down the editor cannot yet know the gesture will stay a single-pointer
+     * click.
+     */
+    private pending;
+    /** Arm a fill at the pointer-down position; nothing mutates yet. */
+    handlePointerDown: (scenePointer: ScenePoint) => void;
+    /**
+     * Commit the armed fill, at the pointer-DOWN position (what the user
+     * aimed at). No-op when the gesture was aborted in the meantime.
+     */
+    handlePointerUp: () => void;
+    /** Abort the armed fill (second finger, context menu, pointercancel). */
+    cancel: () => void;
+    cycleBackgroundColor: () => void;
+    openTemporaryEyeDropper: () => void;
+    closeTemporaryEyeDropper: () => void;
+    /**
+     * Apply the current bucket fill settings to an existing fill-compatible
+     * element (no-op when nothing would change). One undoable step.
+     */
+    private restyle;
+    private fill;
+    /**
+     * The color the bucket fill tool actually fills with: the shared
+     * `currentItemBackgroundColor`, falling back to green when that is
+     * transparent (the tool's picker doesn't offer transparent, but the shared
+     * state can hold it from the generic shape picker).
+     */
+    getBucketFillBackgroundColor: (backgroundColor: string, 
+    /** supply only for display purposes such as when applying to the cursor */
+    theme?: Theme) => string;
+}
+export {};

package/dist/types/excalidraw/components/App.cursor.d.ts

@@ -0,0 +1,38 @@
+import type { AppState } from "../types";
+import type App from "./App";
+/**
+ * Captures all cursor management for the interactive canvas.
+ *
+ * The canvas cursor is set exclusively imperatively, through this class —
+ * never via inline styles or React-rendered `style.cursor`, which React
+ * would rewrite on rerender whenever the computed value changes, clobbering
+ * cursors set here.
+ */
+export declare class AppCursor {
+    private app;
+    private toolCursorMemo;
+    private eraserCanvasCache;
+    private eraserPreviewDataURL;
+    constructor(app: App);
+    private get canvas();
+    set: (cursor: string) => void;
+    /**
+     * Resets to the resting cursor — the cursor shown when no interaction or
+     * hover affordance overrides it: the view-mode grab cursor when
+     * drag-to-pan applies, the active tool's cursor otherwise.
+     */
+    reset: () => void;
+    /** applies the given tool's cursor (defaults to the active tool) */
+    applyForTool: (activeTool?: AppState["activeTool"]) => void;
+    /**
+     * Re-runs the hover cursor logic at the last known pointer position by
+     * re-dispatching a synthetic pointermove — for state changes that alter
+     * what hovering means without the pointer moving (e.g. the tool reverting
+     * to selection after an element is created). Mouse only: touch and pen
+     * have no resting hover to restore.
+     */
+    refreshHover: () => void;
+    /** clears the inline cursor so the environment default (CSS) applies */
+    private clear;
+    private applyEraser;
+}