@excalidraw/excalidraw 0.16.0-f8b3692 → 0.16.1-26ff399

package/types/actions/actionToggleObjectsSnapMode.d.ts

@@ -0,0 +1,137 @@
+export declare const actionToggleObjectsSnapMode: {
+    name: "objectsSnapMode";
+    viewMode: true;
+    trackEvent: {
+        category: "canvas";
+        predicate: (appState: Readonly<import("../types").AppState>) => boolean;
+    };
+    perform(elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>): {
+        appState: {
+            objectsSnapModeEnabled: boolean;
+            gridSize: null;
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
+            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;
+            selectionElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            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").ActiveTool | null;
+                locked: boolean;
+            } & import("../types").ActiveTool;
+            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;
+            name: string;
+            isResizing: boolean;
+            isRotating: boolean;
+            zoom: Readonly<{
+                value: import("../types").NormalizedZoomValue;
+            }>;
+            openMenu: "canvas" | "shape" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
+            lastPointerDownWith: import("../element/types").PointerType;
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
+            previousSelectedElementIds: {
+                [id: string]: true;
+            };
+            selectedElementsAreBeingDragged: boolean;
+            shouldCacheIgnoreZoom: boolean;
+            toast: {
+                message: string;
+                closable?: boolean | undefined;
+                duration?: number | undefined;
+            } | null;
+            zenModeEnabled: boolean;
+            theme: import("../element/types").Theme;
+            viewModeEnabled: boolean;
+            selectedGroupIds: {
+                [groupId: string]: boolean;
+            };
+            editingGroupId: string | null;
+            width: number;
+            height: number;
+            offsetTop: number;
+            offsetLeft: number;
+            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 | "editor" | "info";
+            selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            snapLines: readonly import("../snapping").SnapLine[];
+            originSnapOffset: {
+                x: number;
+                y: number;
+            } | null;
+        };
+        commitToHistory: false;
+    };
+    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: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+};

package/types/actions/actionToggleStats.d.ts

@@ -38,15 +38,9 @@ export declare const actionToggleStats: {
             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" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
-                customType: null;
-            } | {
-                type: "custom";
-                customType: string;
-            });
+            } & import("../types").ActiveTool;
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -124,12 +118,18 @@ export declare const actionToggleStats: {
             pendingImageElementId: string | null;
             showHyperlinkPopup: false | "editor" | "info";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            snapLines: readonly import("../snapping").SnapLine[];
+            originSnapOffset: {
+                x: number;
+                y: number;
+            } | null;
+            objectsSnapModeEnabled: boolean;
         };
         commitToHistory: false;
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     contextItemLabel: string;
-    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
 } & {
-    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };

package/types/actions/actionToggleViewMode.d.ts

@@ -39,15 +39,9 @@ export declare const actionToggleViewMode: {
             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" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
-                customType: null;
-            } | {
-                type: "custom";
-                customType: string;
-            });
+            } & import("../types").ActiveTool;
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -125,13 +119,19 @@ export declare const actionToggleViewMode: {
             pendingImageElementId: string | null;
             showHyperlinkPopup: false | "editor" | "info";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            snapLines: readonly import("../snapping").SnapLine[];
+            originSnapOffset: {
+                x: number;
+                y: number;
+            } | null;
+            objectsSnapModeEnabled: boolean;
         };
         commitToHistory: false;
     };
     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: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
 } & {
-    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };

package/types/actions/actionToggleZenMode.d.ts

@@ -39,15 +39,9 @@ export declare const actionToggleZenMode: {
             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" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
-                customType: null;
-            } | {
-                type: "custom";
-                customType: string;
-            });
+            } & import("../types").ActiveTool;
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -125,13 +119,19 @@ export declare const actionToggleZenMode: {
             pendingImageElementId: string | null;
             showHyperlinkPopup: false | "editor" | "info";
             selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            snapLines: readonly import("../snapping").SnapLine[];
+            originSnapOffset: {
+                x: number;
+                y: number;
+            } | null;
+            objectsSnapModeEnabled: boolean;
         };
         commitToHistory: false;
     };
     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: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
 } & {
-    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };

package/types/actions/actionZindex.d.ts

@@ -11,10 +11,10 @@ export declare const actionSendBackward: {
     };
     contextItemLabel: string;
     keyPriority: number;
-    keyTest: (event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean;
+    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionBringForward: {
     name: "bringForward";
@@ -28,10 +28,10 @@ export declare const actionBringForward: {
     };
     contextItemLabel: string;
     keyPriority: number;
-    keyTest: (event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean;
+    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionSendToBack: {
     name: "sendToBack";
@@ -44,10 +44,10 @@ export declare const actionSendToBack: {
         commitToHistory: true;
     };
     contextItemLabel: string;
-    keyTest: (event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean;
+    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionBringToFront: {
     name: "bringToFront";
@@ -60,8 +60,8 @@ export declare const actionBringToFront: {
         commitToHistory: true;
     };
     contextItemLabel: string;
-    keyTest: (event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean;
+    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };

package/types/actions/index.d.ts

@@ -17,6 +17,7 @@ export { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
 export { actionCopy, actionCut, actionCopyAsPng, actionCopyAsSvg, copyText, } from "./actionClipboard";
 export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";
+export { actionToggleObjectsSnapMode } from "./actionToggleObjectsSnapMode";
 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "../element/Hyperlink";

package/types/actions/shortcuts.d.ts

@@ -1,4 +1,4 @@
 import { SubtypeOf } from "../utility-types";
 import { ActionName } from "./types";
-export type ShortcutName = SubtypeOf<ActionName, "toggleTheme" | "loadScene" | "clearCanvas" | "cut" | "copy" | "paste" | "copyStyles" | "pasteStyles" | "selectAll" | "deleteSelectedElements" | "duplicateSelection" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyAsPng" | "copyAsSvg" | "group" | "ungroup" | "gridMode" | "zenMode" | "stats" | "addToLibrary" | "viewMode" | "flipHorizontal" | "flipVertical" | "hyperlink" | "toggleElementLock"> | "saveScene" | "imageExport";
+export type ShortcutName = SubtypeOf<ActionName, "toggleTheme" | "loadScene" | "clearCanvas" | "cut" | "copy" | "paste" | "copyStyles" | "pasteStyles" | "selectAll" | "deleteSelectedElements" | "duplicateSelection" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyAsPng" | "copyAsSvg" | "group" | "ungroup" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "addToLibrary" | "viewMode" | "flipHorizontal" | "flipVertical" | "hyperlink" | "toggleElementLock"> | "saveScene" | "imageExport";
 export declare const getShortcutFromShortcutName: (name: ShortcutName) => string;

package/types/actions/types.d.ts

@@ -15,7 +15,7 @@ export type ActionResult = {
 type ActionFn = (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, 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" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "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" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "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" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/types/appState.d.ts

@@ -1,20 +1,13 @@
 import { AppState, NormalizedZoomValue } from "./types";
 export declare const getDefaultAppState: () => Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>) => {
-    theme?: import("./element/types").Theme | undefined;
-    name?: string | undefined;
     activeTool?: ({
-        lastActiveTool: import("./types").LastActiveTool;
+        lastActiveTool: import("./types").ActiveTool | null;
         locked: boolean;
-    } & ({
-        type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
-        customType: null;
-    } | {
-        type: "custom";
-        customType: string;
-    })) | undefined;
-    penMode?: boolean | undefined;
+    } & import("./types").ActiveTool) | undefined;
+    name?: string | undefined;
     showWelcomeScreen?: boolean | undefined;
+    penMode?: boolean | undefined;
     penDetected?: boolean | undefined;
     exportBackground?: boolean | undefined;
     exportEmbedScene?: boolean | undefined;
@@ -56,6 +49,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     } | undefined;
     shouldCacheIgnoreZoom?: boolean | undefined;
     zenModeEnabled?: boolean | undefined;
+    theme?: import("./element/types").Theme | undefined;
     gridSize?: number | null | undefined;
     selectedGroupIds?: {
         [groupId: string]: boolean;
@@ -64,6 +58,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     showStats?: boolean | undefined;
     currentChartType?: import("./element/types").ChartType | undefined;
     selectedLinearElement?: import("./element/linearElementEditor").LinearElementEditor | null | undefined;
+    objectsSnapModeEnabled?: boolean | undefined;
 };
 export declare const cleanAppStateForExport: (appState: Partial<AppState>) => {
     viewBackgroundColor?: string | undefined;

package/types/components/Actions.d.ts

@@ -1,21 +1,20 @@
-import React from "react";
 import { ActionManager } from "../actions/manager";
 import { ExcalidrawElement, PointerType } from "../element/types";
-import { UIAppState, Zoom } from "../types";
+import { AppClassProperties, UIAppState, Zoom } from "../types";
 import "./Actions.scss";
 export declare const SelectedShapeActions: ({ appState, elements, renderAction, }: {
     appState: UIAppState;
     elements: readonly ExcalidrawElement[];
     renderAction: ActionManager["renderAction"];
 }) => JSX.Element;
-export declare const ShapesSwitcher: ({ interactiveCanvas, activeTool, setAppState, onImageAction, appState, }: {
+export declare const ShapesSwitcher: ({ interactiveCanvas, activeTool, onImageAction, appState, app, }: {
     interactiveCanvas: HTMLCanvasElement | null;
     activeTool: UIAppState["activeTool"];
-    setAppState: React.Component<any, UIAppState>["setState"];
     onImageAction: (data: {
         pointerType: PointerType | null;
     }) => void;
     appState: UIAppState;
+    app: AppClassProperties;
 }) => JSX.Element;
 export declare const ZoomActions: ({ renderAction, zoom, }: {
     renderAction: ActionManager["renderAction"];

package/types/components/App.d.ts

@@ -6,9 +6,10 @@ import { LinearElementEditor } from "../element/linearElementEditor";
 import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
 import History from "../history";
 import Scene from "../scene/Scene";
-import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName } from "../types";
+import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
 import { Renderer } from "../scene/Renderer";
+import { LaserPathManager } from "./LaserTool/LaserPathManager";
 export declare const ExcalidrawContainerContext: React.Context<{
     container: HTMLDivElement | null;
     id: string | null;
@@ -54,12 +55,13 @@ declare class App extends React.Component<AppProps, AppState> {
     imageCache: AppClassProperties["imageCache"];
     private iFrameRefs;
     hitLinkElement?: NonDeletedExcalidrawElement;
-    lastPointerDown: React.PointerEvent<HTMLElement> | null;
-    lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null;
+    lastPointerDownEvent: React.PointerEvent<HTMLElement> | null;
+    lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null;
     lastViewportPosition: {
         x: number;
         y: number;
     };
+    laserPathManager: LaserPathManager;
     constructor(props: AppProps);
     private onWindowMessage;
     private updateEmbeddableRef;
@@ -117,7 +119,7 @@ declare class App extends React.Component<AppProps, AppState> {
         outline: boolean;
         clip: boolean;
     }> | ((prevState: AppState["frameRendering"]) => Partial<AppState["frameRendering"]>)) => void;
-    togglePenMode: () => void;
+    togglePenMode: (force?: boolean) => void;
     onHandToolToggle: () => void;
     /**
      * Zooms on canvas viewport center
@@ -169,7 +171,12 @@ declare class App extends React.Component<AppProps, AppState> {
     private onKeyDown;
     private onWheel;
     private onKeyUp;
-    private setActiveTool;
+    setActiveTool: (tool: {
+        type: ToolType;
+    } | {
+        type: "custom";
+        customType: string;
+    }) => void;
     private setCursor;
     private resetCursor;
     /**
@@ -220,6 +227,8 @@ declare class App extends React.Component<AppProps, AppState> {
     private getCurrentItemRoundness;
     private createGenericElementOnPointerDown;
     private createFrameElementOnPointerDown;
+    private maybeCacheReferenceSnapPoints;
+    private maybeCacheVisibleGaps;
     private onKeyDownFromPointerDownHandler;
     private onKeyUpFromPointerDownHandler;
     private onPointerMoveFromPointerDownHandler;

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/LayerUI.d.ts

@@ -28,6 +28,7 @@ interface LayerUIProps {
     renderWelcomeScreen: boolean;
     children?: React.ReactNode;
     app: AppClassProperties;
+    isCollaborating: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, interactiveCanvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onImageAction, onExportImage, renderWelcomeScreen, children, app, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, interactiveCanvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onImageAction, onExportImage, renderWelcomeScreen, children, app, isCollaborating, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/Sidebar/Sidebar.d.ts

@@ -22,7 +22,7 @@ export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
     docked?: boolean | undefined;
     className?: string | undefined;
     __fallback?: boolean | undefined;
-} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "className" | "name" | "children" | "key" | "onDock" | "docked" | "onStateChange" | "__fallback"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "name" | "children" | "key" | "className" | "onDock" | "docked" | "onStateChange" | "__fallback"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Sidebar: React.ForwardRefExoticComponent<{
     name: string;
     children: React.ReactNode;

package/types/components/Stack.d.ts

@@ -10,7 +10,7 @@ type StackProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
 declare const _default: {
-    Row: React.ForwardRefExoticComponent<Pick<StackProps, "style" | "className" | "children" | "align" | "gap" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
-    Col: React.ForwardRefExoticComponent<Pick<StackProps, "style" | "className" | "children" | "align" | "gap" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+    Row: React.ForwardRefExoticComponent<Pick<StackProps, "style" | "children" | "align" | "gap" | "className" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+    Col: React.ForwardRefExoticComponent<Pick<StackProps, "style" | "children" | "align" | "gap" | "className" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

package/types/components/dropdownMenu/DropdownMenu.d.ts

@@ -25,29 +25,32 @@ declare const DropdownMenu: {
         displayName: string;
     };
     Item: {
-        ({ icon, onSelect, children, shortcut, className, ...rest }: {
+        ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
             icon?: JSX.Element | undefined;
             onSelect: (event: Event) => void;
             children: React.ReactNode;
             shortcut?: string | undefined;
+            selected?: boolean | undefined;
             className?: string | undefined;
         } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
     };
     ItemLink: {
-        ({ icon, shortcut, href, children, onSelect, className, ...rest }: {
+        ({ icon, shortcut, href, children, onSelect, className, selected, ...rest }: {
             href: string;
             icon?: JSX.Element | undefined;
             children: React.ReactNode;
             shortcut?: string | undefined;
             className?: string | undefined;
+            selected?: boolean | undefined;
             onSelect?: ((event: Event) => void) | undefined;
         } & React.AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
         displayName: string;
     };
-    ItemCustom: ({ children, className, ...rest }: {
+    ItemCustom: ({ children, className, selected, ...rest }: {
         children: React.ReactNode;
         className?: string | undefined;
+        selected?: boolean | undefined;
     } & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
     Group: {
         ({ children, className, style, title, }: {

package/types/components/dropdownMenu/DropdownMenuItem.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 declare const DropdownMenuItem: {
-    ({ icon, onSelect, children, shortcut, className, ...rest }: {
+    ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
         icon?: JSX.Element | undefined;
         onSelect: (event: Event) => void;
         children: React.ReactNode;
         shortcut?: string | undefined;
+        selected?: boolean | undefined;
         className?: string | undefined;
     } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
     displayName: string;

package/types/components/dropdownMenu/DropdownMenuItemCustom.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-declare const DropdownMenuItemCustom: ({ children, className, ...rest }: {
+declare const DropdownMenuItemCustom: ({ children, className, selected, ...rest }: {
     children: React.ReactNode;
     className?: string | undefined;
+    selected?: boolean | undefined;
 } & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 export default DropdownMenuItemCustom;

package/types/components/dropdownMenu/DropdownMenuItemLink.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 declare const DropdownMenuItemLink: {
-    ({ icon, shortcut, href, children, onSelect, className, ...rest }: {
+    ({ icon, shortcut, href, children, onSelect, className, selected, ...rest }: {
         href: string;
         icon?: JSX.Element | undefined;
         children: React.ReactNode;
         shortcut?: string | undefined;
         className?: string | undefined;
+        selected?: boolean | undefined;
         onSelect?: ((event: Event) => void) | undefined;
     } & React.AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
     displayName: string;

package/types/components/dropdownMenu/common.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 export declare const DropdownMenuContentPropsContext: React.Context<{
     onSelect?: ((event: Event) => void) | undefined;
 }>;
-export declare const getDropdownMenuItemClassName: (className?: string) => string;
+export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean) => string;
 export declare const useHandleDropdownMenuItemClick: (origOnClick: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined, onSelect: ((event: Event) => void) | undefined) => (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;