@excalidraw/excalidraw 0.13.0 → 0.14.0

package/types/excalidraw-app/data/index.d.ts

@@ -0,0 +1,183 @@
+import { ImportedDataState } from "../../data/types";
+import { ExcalidrawElement } from "../../element/types";
+import { AppState, BinaryFiles, UserIdleState } from "../../types";
+export declare type SyncableExcalidrawElement = ExcalidrawElement & {
+    _brand: "SyncableExcalidrawElement";
+};
+export declare const isSyncableElement: (element: ExcalidrawElement) => element is SyncableExcalidrawElement;
+export declare const getSyncableElements: (elements: readonly ExcalidrawElement[]) => SyncableExcalidrawElement[];
+/**
+ * Right now the reason why we resolve connection params (url, polling...)
+ * from upstream is to allow changing the params immediately when needed without
+ * having to wait for clients to update the SW.
+ *
+ * If REACT_APP_WS_SERVER_URL env is set, we use that instead (useful for forks)
+ */
+export declare const getCollabServer: () => Promise<{
+    url: string;
+    polling: boolean;
+}>;
+export declare type EncryptedData = {
+    data: ArrayBuffer;
+    iv: Uint8Array;
+};
+export declare type SocketUpdateDataSource = {
+    SCENE_INIT: {
+        type: "SCENE_INIT";
+        payload: {
+            elements: readonly ExcalidrawElement[];
+        };
+    };
+    SCENE_UPDATE: {
+        type: "SCENE_UPDATE";
+        payload: {
+            elements: readonly ExcalidrawElement[];
+        };
+    };
+    MOUSE_LOCATION: {
+        type: "MOUSE_LOCATION";
+        payload: {
+            socketId: string;
+            pointer: {
+                x: number;
+                y: number;
+            };
+            button: "down" | "up";
+            selectedElementIds: AppState["selectedElementIds"];
+            username: string;
+        };
+    };
+    IDLE_STATUS: {
+        type: "IDLE_STATUS";
+        payload: {
+            socketId: string;
+            userState: UserIdleState;
+            username: string;
+        };
+    };
+};
+export declare type SocketUpdateDataIncoming = SocketUpdateDataSource[keyof SocketUpdateDataSource] | {
+    type: "INVALID_RESPONSE";
+};
+export declare type SocketUpdateData = SocketUpdateDataSource[keyof SocketUpdateDataSource] & {
+    _brand: "socketUpdateData";
+};
+export declare const isCollaborationLink: (link: string) => boolean;
+export declare const getCollaborationLinkData: (link: string) => {
+    roomId: string;
+    roomKey: string;
+} | null;
+export declare const generateCollaborationLinkData: () => Promise<{
+    roomId: string;
+    roomKey: string;
+}>;
+export declare const getCollaborationLink: (data: {
+    roomId: string;
+    roomKey: string;
+}) => string;
+export declare const loadScene: (id: string | null, privateKey: string | null, localDataState: ImportedDataState | undefined | null) => Promise<{
+    elements: ExcalidrawElement[];
+    appState: {
+        theme: string;
+        name: string;
+        activeTool: {
+            type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser";
+            lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
+            locked: boolean;
+            customType: null;
+        } | {
+            type: "custom";
+            customType: string;
+            lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
+            locked: boolean;
+        };
+        contextMenu: {
+            items: import("../../components/ContextMenu").ContextMenuItems;
+            top: number;
+            left: number;
+        } | null;
+        showWelcomeScreen: boolean;
+        isLoading: boolean;
+        errorMessage: string | null;
+        draggingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        resizingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        multiElement: import("../../element/types").NonDeleted<import("../../element/types").ExcalidrawLinearElement> | null;
+        selectionElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        isBindingEnabled: boolean;
+        startBoundElement: import("../../element/types").NonDeleted<import("../../element/types").ExcalidrawBindableElement> | null;
+        suggestedBindings: import("../../element/binding").SuggestedBinding[];
+        editingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        editingLinearElement: import("../../element/linearElementEditor").LinearElementEditor | null;
+        penMode: boolean;
+        penDetected: boolean;
+        exportBackground: boolean;
+        exportEmbedScene: boolean;
+        exportWithDarkMode: boolean;
+        exportScale: number;
+        currentItemStrokeColor: string;
+        currentItemBackgroundColor: string;
+        currentItemFillStyle: import("../../element/types").FillStyle;
+        currentItemStrokeWidth: number;
+        currentItemStrokeStyle: import("../../element/types").StrokeStyle;
+        currentItemRoughness: number;
+        currentItemOpacity: number;
+        currentItemFontFamily: number;
+        currentItemFontSize: number;
+        currentItemTextAlign: string;
+        currentItemStartArrowhead: import("../../element/types").Arrowhead | null;
+        currentItemEndArrowhead: import("../../element/types").Arrowhead | null;
+        currentItemRoundness: import("../../element/types").StrokeRoundness;
+        viewBackgroundColor: string;
+        scrollX: number;
+        scrollY: number;
+        cursorButton: "up" | "down";
+        scrolledOutside: boolean;
+        isResizing: boolean;
+        isRotating: boolean;
+        zoom: Readonly<{
+            value: import("../../types").NormalizedZoomValue;
+        }>;
+        openMenu: "canvas" | "shape" | null;
+        openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+        openSidebar: "library" | "customSidebar" | null;
+        openDialog: "imageExport" | "help" | null;
+        isSidebarDocked: boolean;
+        lastPointerDownWith: import("../../element/types").PointerType;
+        selectedElementIds: {
+            [id: string]: boolean;
+        };
+        previousSelectedElementIds: {
+            [id: string]: boolean;
+        };
+        shouldCacheIgnoreZoom: boolean;
+        toast: {
+            message: string;
+            closable?: boolean | undefined;
+            duration?: number | undefined;
+        } | null;
+        zenModeEnabled: boolean;
+        gridSize: number | null;
+        viewModeEnabled: boolean;
+        selectedGroupIds: {
+            [groupId: string]: boolean;
+        };
+        editingGroupId: string | null;
+        fileHandle: import("browser-fs-access").FileSystemHandle | null;
+        collaborators: Map<string, import("../../types").Collaborator>;
+        showStats: boolean;
+        currentChartType: import("../../element/types").ChartType;
+        pasteDialog: {
+            shown: false;
+            data: null;
+        } | {
+            shown: true;
+            data: import("../../charts").Spreadsheet;
+        };
+        pendingImageElementId: string | null;
+        showHyperlinkPopup: false | "info" | "editor";
+        selectedLinearElement: import("../../element/linearElementEditor").LinearElementEditor | null;
+    };
+    files: BinaryFiles;
+    commitToHistory: boolean;
+}>;
+export declare const exportToBackend: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => Promise<void>;

package/types/excalidraw-app/data/localStorage.d.ts

@@ -0,0 +1,109 @@
+import { ExcalidrawElement } from "../../element/types";
+export declare const saveUsernameToLocalStorage: (username: string) => void;
+export declare const importUsernameFromLocalStorage: () => string | null;
+export declare const importFromLocalStorage: () => {
+    elements: ExcalidrawElement[];
+    appState: {
+        theme: string;
+        name: string;
+        activeTool: {
+            type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser";
+            lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
+            locked: boolean;
+            customType: null;
+        } | {
+            type: "custom";
+            customType: string;
+            lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
+            locked: boolean;
+        };
+        showWelcomeScreen: boolean;
+        penMode: boolean;
+        penDetected: boolean;
+        exportBackground: boolean;
+        exportEmbedScene: boolean;
+        exportWithDarkMode: boolean;
+        exportScale: number;
+        currentItemStrokeColor: string;
+        currentItemBackgroundColor: string;
+        currentItemFillStyle: import("../../element/types").FillStyle;
+        currentItemStrokeWidth: number;
+        currentItemStrokeStyle: import("../../element/types").StrokeStyle;
+        currentItemRoughness: number;
+        currentItemOpacity: number;
+        currentItemFontFamily: number;
+        currentItemFontSize: number;
+        currentItemTextAlign: string;
+        currentItemStartArrowhead: import("../../element/types").Arrowhead | null;
+        currentItemEndArrowhead: import("../../element/types").Arrowhead | null;
+        currentItemRoundness: import("../../element/types").StrokeRoundness;
+        viewBackgroundColor: string;
+        scrollX: number;
+        scrollY: number;
+        cursorButton: "up" | "down";
+        scrolledOutside: boolean;
+        zoom: Readonly<{
+            value: import("../../types").NormalizedZoomValue;
+        }>;
+        openMenu: "canvas" | "shape" | null;
+        openSidebar: "library" | "customSidebar" | null;
+        isSidebarDocked: boolean;
+        lastPointerDownWith: import("../../element/types").PointerType;
+        selectedElementIds: {
+            [id: string]: boolean;
+        };
+        previousSelectedElementIds: {
+            [id: string]: boolean;
+        };
+        shouldCacheIgnoreZoom: boolean;
+        zenModeEnabled: boolean;
+        gridSize: number | null;
+        selectedGroupIds: {
+            [groupId: string]: boolean;
+        };
+        editingGroupId: string | null;
+        showStats: boolean;
+        currentChartType: import("../../element/types").ChartType;
+        selectedLinearElement: import("../../element/linearElementEditor").LinearElementEditor | null;
+        contextMenu: {
+            items: import("../../components/ContextMenu").ContextMenuItems;
+            top: number;
+            left: number;
+        } | null;
+        isLoading: boolean;
+        errorMessage: string | null;
+        draggingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        resizingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        multiElement: import("../../element/types").NonDeleted<import("../../element/types").ExcalidrawLinearElement> | null;
+        selectionElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        isBindingEnabled: boolean;
+        startBoundElement: import("../../element/types").NonDeleted<import("../../element/types").ExcalidrawBindableElement> | null;
+        suggestedBindings: import("../../element/binding").SuggestedBinding[];
+        editingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        editingLinearElement: import("../../element/linearElementEditor").LinearElementEditor | null;
+        isResizing: boolean;
+        isRotating: boolean;
+        openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+        openDialog: "imageExport" | "help" | null;
+        toast: {
+            message: string;
+            closable?: boolean | undefined;
+            duration?: number | undefined;
+        } | null;
+        viewModeEnabled: boolean;
+        fileHandle: import("browser-fs-access").FileSystemHandle | null;
+        collaborators: Map<string, import("../../types").Collaborator>;
+        pasteDialog: {
+            shown: false;
+            data: null;
+        } | {
+            shown: true;
+            data: import("../../charts").Spreadsheet;
+        };
+        pendingImageElementId: string | null;
+        showHyperlinkPopup: false | "info" | "editor";
+    } | null;
+};
+export declare const getElementsStorageSize: () => number;
+export declare const getTotalStorageSize: () => number;
+export declare const getLibraryItemsFromStorage: () => import("../../types").LibraryItems_anyVersion;

package/types/excalidraw-app/data/tabSync.d.ts

@@ -0,0 +1,9 @@
+declare const LOCAL_STATE_VERSIONS: {
+    "version-dataState": number;
+    "version-files": number;
+};
+declare type BrowserStateTypes = keyof typeof LOCAL_STATE_VERSIONS;
+export declare const isBrowserStorageStateNewer: (type: BrowserStateTypes) => boolean;
+export declare const updateBrowserStateVersion: (type: BrowserStateTypes) => void;
+export declare const resetBrowserStateVersions: () => void;
+export {};

package/types/excalidraw-app/index.d.ts

@@ -0,0 +1,26 @@
+import "./index.scss";
+export declare const langCodeAtom: import("jotai").Atom<string> & {
+    write: (get: {
+        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_2;
+    } & {
+        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+            unstable_promise: true;
+        }): Value_3 | Promise<Value_3>;
+        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+            unstable_promise: true;
+        }): Value_4 | Promise<Value_4>;
+        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+            unstable_promise: true;
+        }): (Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5>;
+    }, set: {
+        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+    }, update: string | ((prev: string) => string)) => void;
+    onMount?: (<S extends (update: string | ((prev: string) => string)) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: string;
+};
+declare const ExcalidrawApp: () => JSX.Element;
+export default ExcalidrawApp;

package/types/hooks/useOutsideClick.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useOutsideClickHook: (handler: (event: Event) => void) => import("react").MutableRefObject<null>;

package/types/keys.d.ts

@@ -27,6 +27,8 @@ export declare const KEYS: {
     readonly ARROW_LEFT: "ArrowLeft";
     readonly ARROW_RIGHT: "ArrowRight";
     readonly ARROW_UP: "ArrowUp";
+    readonly PAGE_UP: "PageUp";
+    readonly PAGE_DOWN: "PageDown";
     readonly BACKSPACE: "Backspace";
     readonly ALT: "Alt";
     readonly CTRL_OR_CMD: "metaKey" | "ctrlKey";
@@ -60,6 +62,16 @@ export declare const KEYS: {
     readonly Y: "y";
     readonly Z: "z";
     readonly K: "k";
+    readonly 0: "0";
+    readonly 1: "1";
+    readonly 2: "2";
+    readonly 3: "3";
+    readonly 4: "4";
+    readonly 5: "5";
+    readonly 6: "6";
+    readonly 7: "7";
+    readonly 8: "8";
+    readonly 9: "9";
 };
 export declare type Key = keyof typeof KEYS;
 export declare const isArrowKey: (key: string) => boolean;

package/types/math.d.ts

@@ -1,5 +1,5 @@
 import { Point, Zoom } from "./types";
-import { ExcalidrawLinearElement, NonDeleted } from "./element/types";
+import { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
 export declare const rotate: (x1: number, y1: number, x2: number, y2: number, angle: number) => [number, number];
 export declare const rotatePoint: (point: readonly [number, number], center: readonly [number, number], angle: number) => [number, number];
 export declare const adjustXYWithRotation: (sides: {
@@ -18,6 +18,7 @@ export declare const centerPoint: (a: readonly [number, number], b: readonly [nu
 export declare const isPathALoop: (points: ExcalidrawLinearElement["points"], zoomValue?: Zoom["value"]) => boolean;
 export declare const isPointInPolygon: (points: Point[], x: number, y: number) => boolean;
 export declare const getGridPoint: (x: number, y: number, gridSize: number | null) => [number, number];
+export declare const getCornerRadius: (x: number, element: ExcalidrawElement) => number;
 export declare const getControlPointsForBezierCurve: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number]) => [number, number][] | null;
 export declare const getBezierXY: (p0: readonly [number, number], p1: readonly [number, number], p2: readonly [number, number], p3: readonly [number, number], t: number) => number[];
 export declare const getPointsInBezierCurve: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number]) => [number, number][];