@dwelle/excalidraw 0.3.73 → 0.3.76-react18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dwelle/excalidraw",
-  "version": "0.3.73",
+  "version": "0.3.76-react18",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

package/types/components/App.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
-import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement } from "../element/types";
 import History from "../history";
 import Scene from "../scene/Scene";
 import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
+import { Emitter } from "../emitter";
 export declare const useDevice: () => Readonly<{
     isSmScreen: boolean;
     isMobile: boolean;
@@ -43,6 +44,163 @@ declare class App extends React.Component<AppProps, AppState> {
         x: number;
         y: number;
     } | null;
+    onChangeEmitter: Emitter<[elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles]>;
+    onPointerDownEmitter: Emitter<[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;
+    }, pointerDownState: Readonly<{
+        origin: Readonly<{
+            x: number;
+            y: number;
+        }>;
+        originInGrid: Readonly<{
+            x: number;
+            y: number;
+        }>;
+        scrollbars: {
+            isOverEither: boolean;
+            isOverHorizontal: boolean;
+            isOverVertical: boolean;
+        };
+        lastCoords: {
+            x: number;
+            y: number;
+        };
+        originalElements: Map<string, NonDeleted<ExcalidrawElement>>;
+        resize: {
+            handleType: import("../element/transformHandles").MaybeTransformHandleType;
+            isResizing: boolean;
+            offset: {
+                x: number;
+                y: number;
+            };
+            arrowDirection: "end" | "origin";
+            center: {
+                x: number;
+                y: number;
+            };
+        };
+        hit: {
+            element: NonDeleted<ExcalidrawElement> | null;
+            allHitElements: NonDeleted<ExcalidrawElement>[];
+            wasAddedToSelection: boolean;
+            hasBeenDuplicated: boolean;
+            hasHitCommonBoundingBoxOfSelectedElements: boolean;
+            hasHitElementInside: boolean;
+        };
+        withCmdOrCtrl: boolean;
+        drag: {
+            hasOccurred: boolean;
+            offset: {
+                x: number;
+                y: number;
+            } | null;
+        };
+        eventListeners: {
+            onMove: {
+                (...args: any[]): void;
+                flush(): void;
+                cancel(): void;
+            } | null;
+            onUp: ((event: PointerEvent) => void) | null;
+            onKeyDown: ((event: KeyboardEvent) => void) | null;
+            onKeyUp: ((event: KeyboardEvent) => void) | null;
+        };
+        boxSelection: {
+            hasOccurred: boolean;
+        };
+        elementIdsToErase: {
+            [key: string]: {
+                opacity: number;
+                erase: boolean;
+            };
+        };
+    }>, event: React.PointerEvent<HTMLCanvasElement>]>;
+    onPointerUpEmitter: Emitter<[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;
+    }, pointerDownState: Readonly<{
+        origin: Readonly<{
+            x: number;
+            y: number;
+        }>;
+        originInGrid: Readonly<{
+            x: number;
+            y: number;
+        }>;
+        scrollbars: {
+            isOverEither: boolean;
+            isOverHorizontal: boolean;
+            isOverVertical: boolean;
+        };
+        lastCoords: {
+            x: number;
+            y: number;
+        };
+        originalElements: Map<string, NonDeleted<ExcalidrawElement>>;
+        resize: {
+            handleType: import("../element/transformHandles").MaybeTransformHandleType;
+            isResizing: boolean;
+            offset: {
+                x: number;
+                y: number;
+            };
+            arrowDirection: "end" | "origin";
+            center: {
+                x: number;
+                y: number;
+            };
+        };
+        hit: {
+            element: NonDeleted<ExcalidrawElement> | null;
+            allHitElements: NonDeleted<ExcalidrawElement>[];
+            wasAddedToSelection: boolean;
+            hasBeenDuplicated: boolean;
+            hasHitCommonBoundingBoxOfSelectedElements: boolean;
+            hasHitElementInside: boolean;
+        };
+        withCmdOrCtrl: boolean;
+        drag: {
+            hasOccurred: boolean;
+            offset: {
+                x: number;
+                y: number;
+            } | null;
+        };
+        eventListeners: {
+            onMove: {
+                (...args: any[]): void;
+                flush(): void;
+                cancel(): void;
+            } | null;
+            onUp: ((event: PointerEvent) => void) | null;
+            onKeyDown: ((event: KeyboardEvent) => void) | null;
+            onKeyUp: ((event: KeyboardEvent) => void) | null;
+        };
+        boxSelection: {
+            hasOccurred: boolean;
+        };
+        elementIdsToErase: {
+            [key: string]: {
+                opacity: number;
+                erase: boolean;
+            };
+        };
+    }>, event: PointerEvent]>;
     constructor(props: AppProps);
     private renderCanvas;
     render(): JSX.Element;
@@ -84,7 +242,6 @@ declare class App extends React.Component<AppProps, AppState> {
     removePointer: (event: React.PointerEvent<HTMLElement> | PointerEvent) => void;
     toggleLock: (source?: "keyboard" | "ui") => void;
     togglePenMode: () => void;
-    toggleZenMode: () => void;
     scrollToContent: (target?: ExcalidrawElement | readonly ExcalidrawElement[]) => void;
     setToast: (toast: {
         message: string;

package/types/components/Card.d.ts

@@ -3,4 +3,5 @@ import OpenColor from "open-color";
 import "./Card.scss";
 export declare const Card: React.FC<{
     color: keyof OpenColor | "primary";
+    children?: React.ReactNode;
 }>;

package/types/components/CheckboxItem.d.ts

@@ -4,4 +4,5 @@ export declare const CheckboxItem: React.FC<{
     checked: boolean;
     onChange: (checked: boolean, event: React.MouseEvent) => void;
     className?: string;
+    children?: React.ReactNode;
 }>;

package/types/components/LayerUI.d.ts

@@ -18,16 +18,13 @@ interface LayerUIProps {
     onLockToggle: () => void;
     onPenModeToggle: () => void;
     onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
-    zenModeEnabled: boolean;
     showExitZenModeBtn: boolean;
     showThemeBtn: boolean;
-    toggleZenMode: () => void;
     langCode: Language["code"];
     isCollaborating: boolean;
     renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
     renderCustomFooter?: ExcalidrawProps["renderFooter"];
     renderCustomStats?: ExcalidrawProps["renderCustomStats"];
-    viewModeEnabled: boolean;
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
     UIOptions: AppProps["UIOptions"];
     focusContainer: () => void;
@@ -37,5 +34,5 @@ interface LayerUIProps {
         insertOnCanvasDirectly: boolean;
     }) => void;
 }
-declare const _default: React.MemoExoticComponent<({ onHomeButtonClick, actionManager, appState, files, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, zenModeEnabled, showExitZenModeBtn, showThemeBtn, toggleZenMode, isCollaborating, renderTopRightUI, renderCustomFooter, renderCustomStats, viewModeEnabled, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onHomeButtonClick, actionManager, appState, files, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, showExitZenModeBtn, showThemeBtn, isCollaborating, renderTopRightUI, renderCustomFooter, renderCustomStats, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/MobileMenu.d.ts

@@ -17,7 +17,6 @@ declare type MobileMenuProps = {
     canvas: HTMLCanvasElement | null;
     isCollaborating: boolean;
     renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
-    viewModeEnabled: boolean;
     showThemeBtn: boolean;
     onImageAction: (data: {
         insertOnCanvasDirectly: boolean;
@@ -26,5 +25,5 @@ declare type MobileMenuProps = {
     renderStats: () => JSX.Element | null;
     UIOptions: AppProps["UIOptions"];
 };
-export declare const MobileMenu: ({ onHomeButtonClick, appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, viewModeEnabled, showThemeBtn, onImageAction, renderTopRightUI, renderStats, UIOptions, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ onHomeButtonClick, appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, showThemeBtn, onImageAction, renderTopRightUI, renderStats, UIOptions, }: MobileMenuProps) => JSX.Element;
 export {};

package/types/components/Section.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
-interface SectionProps extends React.HTMLProps<HTMLElement> {
+export declare const Section: React.FC<{
     heading: string;
-    children: React.ReactNode | ((header: React.ReactNode) => React.ReactNode);
-}
-export declare const Section: ({ heading, children, ...props }: SectionProps) => JSX.Element;
-export {};
+    children?: React.ReactNode | ((heading: React.ReactNode) => React.ReactNode);
+    className?: string;
+}>;

package/types/emitter.d.ts

@@ -0,0 +1,21 @@
+declare 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;
+    once(...handlers: Subscriber<T>[] | Subscriber<T>[][]): () => void;
+    off(...handlers: Subscriber<T>[] | Subscriber<T>[][]): void;
+    trigger(...payload: T): any[];
+    destroy(): void;
+}
+export {};

package/types/renderer/renderScene.d.ts

@@ -3,7 +3,7 @@ import { RoughSVG } from "roughjs/bin/svg";
 import { AppState, BinaryFiles } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { RenderConfig } from "../scene/types";
-export declare const renderScene: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, selectionElement: NonDeletedExcalidrawElement | null, scale: number, rc: RoughCanvas, canvas: HTMLCanvasElement, renderConfig: RenderConfig) => {
+export declare const _renderScene: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, selectionElement: NonDeletedExcalidrawElement | null, scale: number, rc: RoughCanvas, canvas: HTMLCanvasElement, renderConfig: RenderConfig) => {
     atLeastOneVisibleElement: boolean;
     scrollBars?: undefined;
 } | {
@@ -11,10 +11,12 @@ export declare const renderScene: (elements: readonly NonDeletedExcalidrawElemen
     scrollBars: import("../scene/types").ScrollBars | undefined;
 };
 /** renderScene throttled to animation framerate */
-export declare const renderSceneThrottled: {
-    (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, selectionElement: NonDeletedExcalidrawElement | null, scale: number, rc: RoughCanvas, canvas: HTMLCanvasElement, renderConfig: RenderConfig, callback?: ((data: ReturnType<typeof renderScene>) => void) | undefined): void;
-    flush(): void;
-    cancel(): void;
+export declare const renderScene: <T extends boolean = false>(elements: readonly NonDeletedExcalidrawElement[], appState: AppState, selectionElement: NonDeletedExcalidrawElement | null, scale: number, rc: RoughCanvas, canvas: HTMLCanvasElement, renderConfig: RenderConfig, callback?: ((data: ReturnType<typeof _renderScene>) => void) | undefined, throttle?: T | undefined) => T extends true ? void : {
+    atLeastOneVisibleElement: boolean;
+    scrollBars?: undefined;
+} | {
+    atLeastOneVisibleElement: boolean;
+    scrollBars: import("../scene/types").ScrollBars | undefined;
 };
 export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, }?: {
     offsetX?: number | undefined;

package/types/types.d.ts

@@ -356,6 +356,7 @@ export declare type PointerDownState = Readonly<{
         };
     };
 }>;
+declare type UnsubscribeCallback = () => void;
 export declare type ExcalidrawImperativeAPI = {
     updateScene: InstanceType<typeof App>["updateScene"];
     updateLibrary: InstanceType<typeof Library>["updateLibrary"];
@@ -378,6 +379,9 @@ export declare type ExcalidrawImperativeAPI = {
     setCursor: InstanceType<typeof App>["setCursor"];
     resetCursor: InstanceType<typeof App>["resetCursor"];
     app: InstanceType<typeof App>;
+    onChange: (callback: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => void) => UnsubscribeCallback;
+    onPointerDown: (callback: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState, event: React.PointerEvent<HTMLCanvasElement>) => void) => UnsubscribeCallback;
+    onPointerUp: (callback: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState, event: PointerEvent) => void) => UnsubscribeCallback;
 };
 export declare type Device = Readonly<{
     isSmScreen: boolean;