@excalidraw/excalidraw 0.16.1 → 0.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

package/types/actions/{actionToggleLock.d.ts → actionToggleObjectsSnapMode.d.ts}

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { ExcalidrawElement } from "../element/types";
-export declare const actionToggleLock: {
-    name: "toggleLock";
+export declare const actionToggleObjectsSnapMode: {
+    name: "objectsSnapMode";
+    viewMode: true;
     trackEvent: {
-        category: "element";
+        category: "canvas";
+        predicate: (appState: Readonly<import("../types").AppState>) => boolean;
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => false | {
-        elements: ExcalidrawElement[];
+    perform(elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>): {
         appState: {
-            selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            objectsSnapModeEnabled: boolean;
+            gridSize: null;
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
@@ -17,6 +17,10 @@ export declare const actionToggleLock: {
             showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
+            activeEmbeddable: {
+                element: import("../element/types").NonDeletedExcalidrawElement;
+                state: "active" | "hover";
+            } | null;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -24,18 +28,21 @@ export declare const actionToggleLock: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            frameRendering: {
+                enabled: boolean;
+                name: boolean;
+                outline: boolean;
+                clip: boolean;
+            };
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawElement>[] | null;
             editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             activeTool: {
-                lastActiveTool: import("../types").LastActiveTool;
+                lastActiveTool: import("../types").ActiveTool | null;
                 locked: boolean;
-            } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
-                customType: null;
-            } | {
-                type: "custom";
-                customType: string;
-            });
+            } & import("../types").ActiveTool;
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -67,17 +74,21 @@ export declare const actionToggleLock: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | "jsonExport" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "mermaid" | "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
-            selectedElementIds: {
-                [id: string]: boolean;
-            };
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
             previousSelectedElementIds: {
-                [id: string]: boolean;
+                [id: string]: true;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -85,8 +96,7 @@ export declare const actionToggleLock: {
                 duration?: number | undefined;
             } | null;
             zenModeEnabled: boolean;
-            theme: string;
-            gridSize: number | null;
+            theme: import("../element/types").Theme;
             viewModeEnabled: boolean;
             selectedGroupIds: {
                 [groupId: string]: boolean;
@@ -108,12 +118,20 @@ export declare const actionToggleLock: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "info" | "editor";
+            showHyperlinkPopup: false | "editor" | "info";
+            selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            snapLines: readonly import("../snapping").SnapLine[];
+            originSnapOffset: {
+                x: number;
+                y: number;
+            } | null;
         };
-        commitToHistory: true;
+        commitToHistory: false;
     };
-    contextItemLabel: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => "labels.elementLock.unlock" | "labels.elementLock.lock" | "labels.elementLock.lockAll" | "labels.elementLock.unlockAll";
-    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: import("../types").AppState, elements: readonly ExcalidrawElement[]) => boolean;
+    checked: (appState: Readonly<import("../types").AppState>) => boolean;
+    predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps) => boolean;
+    contextItemLabel: string;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
 } & {
-    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: import("../types").AppState, elements: readonly ExcalidrawElement[]) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };

package/types/components/LaserTool/LaserPathManager.d.ts

@@ -0,0 +1,28 @@
+import { LaserPointer } from "@excalidraw/laser-pointer";
+import App from "../App";
+declare global {
+    interface Window {
+        LPM: LaserPathManager;
+    }
+}
+export declare class LaserPathManager {
+    private app;
+    private ownState;
+    private collaboratorsState;
+    private rafId;
+    private isDrawing;
+    private container;
+    constructor(app: App);
+    destroy(): void;
+    startPath(x: number, y: number): void;
+    addPointToPath(x: number, y: number): void;
+    endPath(): void;
+    private updatePath;
+    private isRunning;
+    start(svg?: SVGSVGElement): void;
+    stop(): void;
+    loop(): void;
+    draw(path: LaserPointer): string;
+    updateCollabolatorsState(): void;
+    update(): void;
+}

package/types/components/LaserTool/LaserPointerButton.d.ts

@@ -0,0 +1,10 @@
+import "../ToolIcon.scss";
+type LaserPointerIconProps = {
+    title?: string;
+    name?: string;
+    checked: boolean;
+    onChange?(): void;
+    isMobile?: boolean;
+};
+export declare const LaserPointerButton: (props: LaserPointerIconProps) => JSX.Element;
+export {};

package/types/components/LaserTool/LaserTool.d.ts

@@ -0,0 +1,7 @@
+import { LaserPathManager } from "./LaserPathManager";
+import "./LaserToolOverlay.scss";
+type LaserToolOverlayProps = {
+    manager: LaserPathManager;
+};
+export declare const LaserToolOverlay: ({ manager }: LaserToolOverlayProps) => JSX.Element;
+export {};

package/types/components/MermaidToExcalidraw.d.ts

@@ -1,8 +1,3 @@
-import { AppState } from "../types";
 import "./MermaidToExcalidraw.scss";
-import { NonDeletedExcalidrawElement } from "../element/types";
-declare const MermaidToExcalidraw: ({ appState, elements, }: {
-    appState: AppState;
-    elements: readonly NonDeletedExcalidrawElement[];
-}) => JSX.Element;
+declare const MermaidToExcalidraw: () => JSX.Element;
 export default MermaidToExcalidraw;

package/types/cursor.d.ts

@@ -0,0 +1,5 @@
+import { AppState } from "./types";
+export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
+export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;
+export declare const setEraserCursor: (interactiveCanvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;
+export declare const setCursorForShape: (interactiveCanvas: HTMLCanvasElement | null, appState: Pick<AppState, "activeTool" | "theme">) => void;

package/types/data/url.d.ts

@@ -1,3 +1,4 @@
+export declare const sanitizeHTMLAttribute: (html: string) => string;
 export declare const normalizeLink: (link: string) => string;
 export declare const isLocalLink: (link: string | null) => boolean;
 /**

package/types/element/embeddable.d.ts

@@ -6,6 +6,9 @@ type EmbeddedLink = ({
         h: number;
     };
     warning?: string;
+    sandbox?: {
+        allowSameOrigin?: boolean;
+    };
 } & ({
     type: "video" | "generic";
     link: string;

package/types/emitter.d.ts

@@ -0,0 +1,20 @@
+type Subscriber<T extends any[]> = (...payload: T) => void;
+export declare class Emitter<T extends any[] = []> {
+    subscribers: Subscriber<T>[];
+    value: T | undefined;
+    private updateOnChangeOnly;
+    constructor(opts?: {
+        initialState?: T;
+        updateOnChangeOnly?: boolean;
+    });
+    /**
+     * Attaches subscriber
+     *
+     * @returns unsubscribe function
+     */
+    on(...handlers: Subscriber<T>[] | Subscriber<T>[][]): () => void;
+    off(...handlers: Subscriber<T>[] | Subscriber<T>[][]): void;
+    trigger(...payload: T): any[];
+    destroy(): void;
+}
+export {};

package/types/packages/bbox.d.ts

@@ -0,0 +1,11 @@
+import { Bounds } from "../element/bounds";
+import { Point } from "../types";
+export type LineSegment = [Point, Point];
+export declare function getBBox(line: LineSegment): Bounds;
+export declare function crossProduct(a: Point, b: Point): number;
+export declare function doBBoxesIntersect(a: Bounds, b: Bounds): boolean;
+export declare function translate(a: Point, b: Point): Point;
+export declare function isPointOnLine(l: LineSegment, p: Point): boolean;
+export declare function isPointRightOfLine(l: LineSegment, p: Point): boolean;
+export declare function isLineSegmentTouchingOrCrossingLine(a: LineSegment, b: LineSegment): boolean;
+export declare function doLineSegmentsIntersect(a: LineSegment, b: LineSegment): boolean;

package/types/packages/excalidraw/dist/excalidraw-with-preact.development.d.ts

@@ -0,0 +1,2 @@
+export = __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__;
+export = __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__;

package/types/packages/excalidraw/dist/excalidraw-with-preact.production.min.d.ts

@@ -0,0 +1 @@
+export const ExcalidrawLib: {};

package/types/packages/excalidraw/webpack.preact.config.d.ts

@@ -0,0 +1,275 @@
+export = preactWebpackConfig;
+declare const preactWebpackConfig: {
+    entry: {
+        [x: string]: string;
+    };
+    externals: {
+        "react-dom/client": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        "react/jsx-runtime": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        react: {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        "react-dom": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+    } | {
+        "react-dom/client": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        "react/jsx-runtime": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        react: {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        "react-dom": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+    };
+    mode: string;
+    devtool: boolean;
+    output: {
+        path: string;
+        library: string;
+        libraryTarget: string;
+        filename: string;
+        chunkFilename: string;
+        assetModuleFilename: string;
+        publicPath: string;
+    };
+    resolve: {
+        extensions: string[];
+    };
+    module: {
+        rules: ({
+            test: RegExp;
+            exclude: RegExp;
+            use: (string | {
+                loader: string;
+                options?: undefined;
+            } | {
+                loader: string;
+                options: {
+                    postcssOptions: {
+                        plugins: (import("postcss").Plugin & import("autoprefixer").ExportedAPI)[];
+                    };
+                };
+            })[];
+            resolve?: undefined;
+            type?: undefined;
+        } | {
+            test: RegExp;
+            resolve: {
+                fullySpecified: boolean;
+            };
+            exclude?: undefined;
+            use?: undefined;
+            type?: undefined;
+        } | {
+            test: RegExp;
+            exclude: RegExp;
+            use: ({
+                loader: string;
+                options?: undefined;
+            } | {
+                loader: string;
+                options: {
+                    transpileOnly: boolean;
+                    configFile: string;
+                };
+            })[];
+            resolve?: undefined;
+            type?: undefined;
+        } | {
+            test: RegExp;
+            type: string;
+            exclude?: undefined;
+            use?: undefined;
+            resolve?: undefined;
+        })[];
+    };
+    optimization: {
+        splitChunks: {
+            chunks: string;
+            cacheGroups: {
+                vendors: {
+                    test: RegExp;
+                    name: string;
+                };
+            };
+        };
+        minimize?: undefined;
+        minimizer?: undefined;
+    };
+    plugins: (import("webpack").EvalSourceMapDevToolPlugin | import("webpack").DefinePlugin)[];
+} | {
+    entry: {
+        [x: string]: string;
+    };
+    externals: {
+        "react-dom/client": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        "react/jsx-runtime": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        react: {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        "react-dom": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+    } | {
+        "react-dom/client": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        "react/jsx-runtime": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        react: {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+        "react-dom": {
+            root: string;
+            commonjs2: string;
+            commonjs: string;
+            amd: string;
+        };
+    };
+    mode: string;
+    output: {
+        path: string;
+        library: string;
+        libraryTarget: string;
+        filename: string;
+        chunkFilename: string;
+        assetModuleFilename: string;
+        publicPath: string;
+    };
+    resolve: {
+        extensions: string[];
+    };
+    module: {
+        rules: ({
+            test: RegExp;
+            exclude: RegExp;
+            use: (string | {
+                loader: string;
+                options?: undefined;
+            } | {
+                loader: string;
+                options: {
+                    postcssOptions: {
+                        plugins: (import("postcss").Plugin & import("autoprefixer").ExportedAPI)[];
+                    };
+                };
+            })[];
+            resolve?: undefined;
+            type?: undefined;
+        } | {
+            test: RegExp;
+            resolve: {
+                fullySpecified: boolean;
+            };
+            exclude?: undefined;
+            use?: undefined;
+            type?: undefined;
+        } | {
+            test: RegExp;
+            exclude: RegExp;
+            use: ({
+                loader: string;
+                options?: undefined;
+            } | {
+                loader: string;
+                options: {
+                    transpileOnly: boolean;
+                    configFile: string;
+                    presets?: undefined;
+                    plugins?: undefined;
+                };
+            } | {
+                loader: string;
+                options: {
+                    presets: (string | (string | {
+                        runtime: string;
+                    })[])[];
+                    plugins: string[];
+                    transpileOnly?: undefined;
+                    configFile?: undefined;
+                };
+            })[];
+            resolve?: undefined;
+            type?: undefined;
+        } | {
+            test: RegExp;
+            type: string;
+            exclude?: undefined;
+            use?: undefined;
+            resolve?: undefined;
+        })[];
+    };
+    optimization: {
+        minimize: boolean;
+        minimizer: import("terser-webpack-plugin")<import("terser").MinifyOptions>[];
+        splitChunks: {
+            chunks: string;
+            cacheGroups: {
+                vendors: {
+                    test: RegExp;
+                    name: string;
+                };
+            };
+        };
+    };
+    plugins: any[];
+};

package/types/packages/withinBounds.d.ts

@@ -0,0 +1,19 @@
+import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
+import { Bounds } from "../element/bounds";
+type Element = NonDeletedExcalidrawElement;
+type Elements = readonly NonDeletedExcalidrawElement[];
+export declare const isElementInsideBBox: (element: Element, bbox: Bounds, eitherDirection?: boolean) => boolean;
+export declare const elementPartiallyOverlapsWithOrContainsBBox: (element: Element, bbox: Bounds) => boolean;
+export declare const elementsOverlappingBBox: ({ elements, bounds, type, errorMargin, }: {
+    elements: Elements;
+    bounds: Bounds | ExcalidrawElement;
+    /** safety offset. Defaults to 0. */
+    errorMargin?: number | undefined;
+    /**
+     * - overlap: elements overlapping or inside bounds
+     * - contain: elements inside bounds or bounds inside elements
+     * - inside: elements inside bounds
+     **/
+    type: "overlap" | "contain" | "inside";
+}) => NonDeletedExcalidrawElement[];
+export {};

package/types/renderer/renderSnaps.d.ts

@@ -0,0 +1,2 @@
+import { InteractiveCanvasAppState } from "../types";
+export declare const renderSnaps: (context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;

package/types/snapping.d.ts

@@ -0,0 +1,108 @@
+import { Bounds } from "./element/bounds";
+import { MaybeTransformHandleType } from "./element/transformHandles";
+import { ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
+import { AppState, KeyboardModifiersObject, Point } from "./types";
+export declare const getSnapDistance: (zoomValue: number) => number;
+type Vector2D = {
+    x: number;
+    y: number;
+};
+type PointPair = [Point, Point];
+export type PointSnap = {
+    type: "point";
+    points: PointPair;
+    offset: number;
+};
+export type Gap = {
+    startBounds: Bounds;
+    endBounds: Bounds;
+    startSide: [Point, Point];
+    endSide: [Point, Point];
+    overlap: [number, number];
+    length: number;
+};
+export type GapSnap = {
+    type: "gap";
+    direction: "center_horizontal" | "center_vertical" | "side_left" | "side_right" | "side_top" | "side_bottom";
+    gap: Gap;
+    offset: number;
+};
+export type GapSnaps = GapSnap[];
+export type Snap = GapSnap | PointSnap;
+export type Snaps = Snap[];
+export type PointSnapLine = {
+    type: "points";
+    points: Point[];
+};
+export type PointerSnapLine = {
+    type: "pointer";
+    points: PointPair;
+    direction: "horizontal" | "vertical";
+};
+export type GapSnapLine = {
+    type: "gap";
+    direction: "horizontal" | "vertical";
+    points: PointPair;
+};
+export type SnapLine = PointSnapLine | GapSnapLine | PointerSnapLine;
+export declare class SnapCache {
+    private static referenceSnapPoints;
+    private static visibleGaps;
+    static setReferenceSnapPoints: (snapPoints: Point[] | null) => void;
+    static getReferenceSnapPoints: () => (readonly [number, number])[] | null;
+    static setVisibleGaps: (gaps: {
+        verticalGaps: Gap[];
+        horizontalGaps: Gap[];
+    } | null) => void;
+    static getVisibleGaps: () => {
+        verticalGaps: Gap[];
+        horizontalGaps: Gap[];
+    } | null;
+    static destroy: () => void;
+}
+export declare const isSnappingEnabled: ({ event, appState, selectedElements, }: {
+    appState: AppState;
+    event: KeyboardModifiersObject;
+    selectedElements: NonDeletedExcalidrawElement[];
+}) => boolean;
+export declare const areRoughlyEqual: (a: number, b: number, precision?: number) => boolean;
+export declare const getElementsCorners: (elements: ExcalidrawElement[], { omitCenter, boundingBoxCorners, dragOffset, }?: {
+    omitCenter?: boolean | undefined;
+    boundingBoxCorners?: boolean | undefined;
+    dragOffset?: Vector2D | undefined;
+}) => Point[];
+export declare const getVisibleGaps: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: ExcalidrawElement[], appState: AppState) => {
+    horizontalGaps: Gap[];
+    verticalGaps: Gap[];
+};
+export declare const getReferenceSnapPoints: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: ExcalidrawElement[], appState: AppState) => (readonly [number, number])[];
+export declare const snapDraggedElements: (selectedElements: ExcalidrawElement[], dragOffset: Vector2D, appState: AppState, event: KeyboardModifiersObject) => {
+    snapOffset: {
+        x: number;
+        y: number;
+    };
+    snapLines: (PointSnapLine | GapSnapLine)[];
+};
+export declare const snapResizingElements: (selectedElements: ExcalidrawElement[], selectedOriginalElements: ExcalidrawElement[], appState: AppState, event: KeyboardModifiersObject, dragOffset: Vector2D, transformHandle: MaybeTransformHandleType) => {
+    snapOffset: {
+        x: number;
+        y: number;
+    };
+    snapLines: PointSnapLine[];
+};
+export declare const snapNewElement: (draggingElement: ExcalidrawElement, appState: AppState, event: KeyboardModifiersObject, origin: Vector2D, dragOffset: Vector2D) => {
+    snapOffset: {
+        x: number;
+        y: number;
+    };
+    snapLines: PointSnapLine[];
+};
+export declare const getSnapLinesAtPointer: (elements: readonly ExcalidrawElement[], appState: AppState, pointer: Vector2D, event: KeyboardModifiersObject) => {
+    originOffset: {
+        x: number;
+        y: number;
+    };
+    snapLines: PointerSnapLine[];
+};
+export declare const isActiveToolNonLinearSnappable: (activeToolType: AppState["activeTool"]["type"]) => boolean;
+export {};