@zsviczian/excalidraw 0.16.1-obsidian-2 → 0.16.1-obsidian-4

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) => import("react/jsx-runtime").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) => import("react/jsx-runtime").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) => import("react/jsx-runtime").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) => import("react/jsx-runtime").JSX.Element;
 } & {
-    keyTest?: ((event: KeyboardEvent | React.KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };

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" | "objectsSnapMode" | "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" | "toggleLaserPointerTool"> | "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" | "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 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" | "toggleLaserPointerTool";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/types/appState.d.ts

@@ -1,18 +1,11 @@
 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" | "mermaid";
-        customType: null;
-    } | {
-        type: "custom";
-        customType: string;
-    })) | undefined;
+    } & import("./types").ActiveTool) | undefined;
+    name?: string | undefined;
     penMode?: boolean | undefined;
     showWelcomeScreen?: boolean | undefined;
     penDetected?: 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;
@@ -80,3 +74,6 @@ export declare const isEraserActive: ({ activeTool, }: {
 export declare const isHandToolActive: ({ activeTool, }: {
     activeTool: AppState["activeTool"];
 }) => boolean;
+export declare const isLaserPointerActive: ({ activeTool, }: {
+    activeTool: AppState["activeTool"];
+}) => boolean;

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"];
 }) => import("react/jsx-runtime").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;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const ZoomActions: ({ renderAction, zoom, trayMode, }: {
     renderAction: ActionManager["renderAction"];

package/types/components/App.d.ts

@@ -6,10 +6,10 @@ import { LinearElementEditor } from "../element/linearElementEditor";
 import { ExcalidrawElement, ExcalidrawLinearElement, NonDeletedExcalidrawElement } from "../element/types";
 import History from "../history";
 import Scene from "../scene/Scene";
-import { SHAPES } from "../shapes";
-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 let showFourthFont: boolean;
 export declare const ExcalidrawContainerContext: React.Context<{
     container: HTMLDivElement | null;
@@ -56,13 +56,14 @@ 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;
     };
     allowMobileMode: boolean;
+    laserPathManager: LaserPathManager;
     constructor(props: AppProps);
     private onWindowMessage;
     private updateEmbeddableRef;
@@ -129,7 +130,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
@@ -192,7 +193,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private onWheel;
     private onKeyUp;
     setActiveTool: (tool: {
-        type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "embeddable" | "mermaid";
+        type: ToolType;
     } | {
         type: "custom";
         customType: string;

package/types/components/ColorPicker/colorPickerUtils.d.ts

@@ -17,5 +17,5 @@ export type ActiveColorPickerSectionAtomType = "custom" | "baseColors" | "shades
 export declare const activeColorPickerSectionAtom: import("jotai").PrimitiveAtom<ActiveColorPickerSectionAtomType> & {
     init: ActiveColorPickerSectionAtomType;
 };
-export declare const getContrastYIQ: (bgHex: string, isCustomColor: boolean) => "black" | "white";
+export declare const getContrastYIQ: (bgHex: string, isCustomColor: boolean) => "white" | "black";
 export type ColorPickerType = "canvasBackground" | "elementBackground" | "elementStroke";

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) => import("react/jsx-runtime").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) => import("react/jsx-runtime").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) => import("react/jsx-runtime").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) => import("react/jsx-runtime").JSX.Element>;
 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">): import("react/jsx-runtime").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>): import("react/jsx-runtime").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>) => import("react/jsx-runtime").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">): import("react/jsx-runtime").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>) => import("react/jsx-runtime").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>): import("react/jsx-runtime").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;

package/types/components/icons.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { Theme } from "../element/types";
+export declare const iconFillColor: (theme: Theme) => string;
 type Opts = {
     width?: number;
     height?: number;
@@ -153,4 +154,5 @@ export declare const extraToolsIcon: import("react/jsx-runtime").JSX.Element;
 export declare const frameToolIcon: import("react/jsx-runtime").JSX.Element;
 export declare const mermaidLogoIcon: import("react/jsx-runtime").JSX.Element;
 export declare const ArrowRightIcon: import("react/jsx-runtime").JSX.Element;
+export declare const laserPointerToolIcon: import("react/jsx-runtime").JSX.Element;
 export {};

package/types/components/main-menu/MainMenu.d.ts

@@ -19,29 +19,32 @@ declare const MainMenu: React.FC<{
         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">): import("react/jsx-runtime").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>): import("react/jsx-runtime").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>) => import("react/jsx-runtime").JSX.Element;
     Group: {
         ({ children, className, style, title, }: {

package/types/element/Hyperlink.d.ts

@@ -51,15 +51,9 @@ export declare const actionLink: {
             editingElement: NonDeletedExcalidrawElement | null;
             editingLinearElement: import("./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" | "mermaid";
-                customType: null;
-            } | {
-                type: "custom";
-                customType: string;
-            });
+            } & import("../types").ActiveTool;
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -162,7 +156,7 @@ export declare const actionLink: {
             dynamicStyle: string;
             invertBindingBehaviour: boolean;
             selectedLinearElement: import("./linearElementEditor").LinearElementEditor | null;
-            snapLines: import("../snapping").SnapLine[];
+            snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
                 x: number;
                 y: number;
@@ -175,12 +169,12 @@ export declare const actionLink: {
         category: "hyperlink";
         action: string;
     };
-    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
     contextItemLabel: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
     predicate: (elements: readonly import("./types").ExcalidrawElement[], appState: AppState) => boolean;
     PanelComponent: ({ elements, appState, updateData }: import("../actions/types").PanelComponentProps) => import("react/jsx-runtime").JSX.Element;
 } & {
-    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
 export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: Pick<UIAppState, "zoom">) => [x: number, y: number, width: number, height: number];

package/types/element/embeddable.d.ts

@@ -25,15 +25,9 @@ export declare const actionSetEmbeddableAsActiveTool: {
         elements: readonly ExcalidrawElement[];
         appState: {
             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" | "mermaid";
-                customType: null;
-            } | {
-                type: "custom";
-                customType: string;
-            });
+            } & import("../types").ActiveTool;
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
@@ -168,7 +162,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
             dynamicStyle: string;
             invertBindingBehaviour: boolean;
             selectedLinearElement: import("./linearElementEditor").LinearElementEditor | null;
-            snapLines: import("../snapping").SnapLine[];
+            snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
                 x: number;
                 y: number;

package/types/element/linearElementEditor.d.ts

@@ -152,15 +152,9 @@ export declare class LinearElementEditor {
             elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
             editingElement: import("./types").NonDeletedExcalidrawElement | 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" | "mermaid";
-                customType: null;
-            } | {
-                type: "custom";
-                customType: string;
-            });
+            } & import("../types").ActiveTool;
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -265,7 +259,7 @@ export declare class LinearElementEditor {
             dynamicStyle: string;
             invertBindingBehaviour: boolean;
             selectedLinearElement: LinearElementEditor | null;
-            snapLines: import("../snapping").SnapLine[];
+            snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
                 x: number;
                 y: number;

package/types/types.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, ExcalidrawTextElement, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement, ExcalidrawEmbeddableElement } from "./element/types";
-import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { SuggestedBinding } from "./element/binding";
@@ -21,10 +20,7 @@ import { Merge, ForwardRef, ValueOf } from "./utility-types";
 import { ColorPaletteCustom } from "./colors";
 export type Point = Readonly<RoughPoint>;
 export type Collaborator = {
-    pointer?: {
-        x: number;
-        y: number;
-    };
+    pointer?: CollaboratorPointer;
     button?: "up" | "down";
     selectedElementIds?: AppState["selectedElementIds"];
     username?: string | null;
@@ -36,6 +32,11 @@ export type Collaborator = {
     avatarUrl?: string;
     id?: string;
 };
+export type CollaboratorPointer = {
+    x: number;
+    y: number;
+    tool: "pointer" | "laser";
+};
 export type DataURL = string & {
     _brand: "DataURL";
 };
@@ -58,13 +59,14 @@ export type BinaryFileData = {
 };
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
-export type LastActiveTool = {
-    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable" | "mermaid";
+export type ToolType = "selection" | "rectangle" | "diamond" | "ellipse" | "arrow" | "line" | "freedraw" | "text" | "image" | "eraser" | "hand" | "frame" | "embeddable" | "laser" | "mermaid";
+export type ActiveTool = {
+    type: ToolType;
     customType: null;
 } | {
     type: "custom";
     customType: string;
-} | null;
+};
 export type SidebarName = string;
 export type SidebarTabName = string;
 type _CommonCanvasAppState = {
@@ -146,15 +148,9 @@ export type AppState = {
          * indicates a previous tool we should revert back to if we deselect the
          * currently active tool. At the moment applies to `eraser` and `hand` tool.
          */
-        lastActiveTool: LastActiveTool;
+        lastActiveTool: ActiveTool | null;
         locked: boolean;
-    } & ({
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable" | "mermaid";
-        customType: null;
-    } | {
-        type: "custom";
-        customType: string;
-    });
+    } & ActiveTool;
     penMode: boolean;
     penDetected: boolean;
     exportBackground: boolean;
@@ -268,7 +264,7 @@ export type AppState = {
     dynamicStyle: string;
     invertBindingBehaviour: boolean;
     selectedLinearElement: LinearElementEditor | null;
-    snapLines: SnapLine[];
+    snapLines: readonly SnapLine[];
     originSnapOffset: {
         x: number;
         y: number;
@@ -332,6 +328,7 @@ export interface ExcalidrawProps {
         pointer: {
             x: number;
             y: number;
+            tool: "pointer" | "laser";
         };
         button: "down" | "up";
         pointersMap: Gesture["pointers"];
@@ -439,6 +436,7 @@ export type AppClassProperties = {
     addFiles: App["addFiles"];
     setSelection: App["setSelection"];
     addElementsFromPasteOrLibrary: App["addElementsFromPasteOrLibrary"];
+    togglePenMode: App["togglePenMode"];
     setActiveTool: App["setActiveTool"];
 };
 export type PointerDownState = Readonly<{

package/types/utils.d.ts

@@ -1,7 +1,6 @@
 import { EVENT } from "./constants";
 import { FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./element/types";
-import { AppState, LastActiveTool, Zoom } from "./types";
-import { SHAPES } from "./shapes";
+import { ActiveTool, AppState, ToolType, Zoom } from "./types";
 export declare const setDateTimeForTests: (dateTime: string) => void;
 export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
@@ -81,12 +80,12 @@ export declare const selectNode: (node: Element) => void;
 export declare const removeSelection: () => void;
 export declare const distance: (x: number, y: number) => number;
 export declare const updateActiveTool: (appState: Pick<AppState, "activeTool">, data: ({
-    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "embeddable" | "mermaid";
+    type: ToolType;
 } | {
     type: "custom";
     customType: string;
 }) & {
-    lastActiveToolBeforeEraser?: LastActiveTool;
+    lastActiveToolBeforeEraser?: ActiveTool | null;
 }) => AppState["activeTool"];
 export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
 export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;