npm - @excalidraw/excalidraw - Versions diffs - 0.16.0 → 0.16.1-26ff399 - Mend

@excalidraw/excalidraw 0.16.0 → 0.16.1-26ff399

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (968) hide show

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

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

package/types/actions/actionToggleStats.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/ColorPicker/ColorInput.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
+import { ColorPickerType } from "./colorPickerUtils";
 interface ColorInputProps {
     color: string;
     onChange: (color: string) => void;
     label: string;
-    eyeDropperType: "strokeColor" | "backgroundColor";
+    colorPickerType: ColorPickerType;
 }
-export declare const ColorInput: ({ color, onChange, label, eyeDropperType, }: ColorInputProps) => JSX.Element;
+export declare const ColorInput: ({ color, onChange, label, colorPickerType, }: ColorInputProps) => JSX.Element;
 export {};

package/types/components/EyeDropper.d.ts CHANGED Viewed

@@ -1,17 +1,28 @@
+import React from "react";
 import "./EyeDropper.scss";
-type EyeDropperProperties = {
+import { ColorPickerType } from "./ColorPicker/colorPickerUtils";
+import { ExcalidrawElement } from "../element/types";
+export type EyeDropperProperties = {
     keepOpenOnAlt: boolean;
     swapPreviewOnAlt?: boolean;
+    /** called when user picks color (on pointerup) */
     onSelect: (color: string, event: PointerEvent) => void;
-    previewType: "strokeColor" | "backgroundColor";
+    /**
+     * property of selected elements to update live when alt-dragging.
+     * Supply `null` if not applicable (e.g. updating the canvas bg instead of
+     * elements)
+     **/
+    colorPickerType: ColorPickerType;
 };
 export declare const activeEyeDropperAtom: import("jotai").PrimitiveAtom<EyeDropperProperties | null> & {
     init: EyeDropperProperties | null;
 };
 export declare const EyeDropper: React.FC<{
     onCancel: () => void;
-    onSelect: Required<EyeDropperProperties>["onSelect"];
-    swapPreviewOnAlt?: EyeDropperProperties["swapPreviewOnAlt"];
-    previewType: EyeDropperProperties["previewType"];
+    onSelect: EyeDropperProperties["onSelect"];
+    /** called when color changes, on pointerdown for preview */
+    onChange: (type: ColorPickerType, color: string, selectedElements: ExcalidrawElement[], event: {
+        altKey: boolean;
+    }) => void;
+    colorPickerType: EyeDropperProperties["colorPickerType"];
 }>;
-export {};

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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, }: {