@excalidraw/excalidraw 0.15.2-7bf4de5 → 0.15.2-81ebf82

package/types/components/App.d.ts

@@ -6,7 +6,7 @@ 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, SidebarName, SidebarTabName } from "../types";
+import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
 export declare const ExcalidrawContainerContext: React.Context<{
     container: HTMLDivElement | null;
@@ -50,20 +50,24 @@ declare class App extends React.Component<AppProps, AppState> {
     files: BinaryFiles;
     imageCache: AppClassProperties["imageCache"];
     hitLinkElement?: NonDeletedExcalidrawElement;
-    lastPointerDown: React.PointerEvent<HTMLCanvasElement> | null;
+    lastPointerDown: React.PointerEvent<HTMLElement> | null;
     lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null;
-    lastScenePointer: {
+    lastViewportPosition: {
         x: number;
         y: number;
-    } | null;
+    };
     constructor(props: AppProps);
     private renderCanvas;
+    private getFrameNameDOMId;
+    frameNameBoundsCache: FrameNameBoundsCache;
+    private renderFrameNames;
     render(): JSX.Element;
     focusContainer: AppClassProperties["focusContainer"];
     getSceneElementsIncludingDeleted: () => readonly ExcalidrawElement[];
     getSceneElements: () => readonly NonDeletedExcalidrawElement[];
     onInsertElements: (elements: readonly ExcalidrawElement[]) => void;
     onExportImage: (type: keyof typeof EXPORT_IMAGE_TYPES, elements: readonly NonDeletedExcalidrawElement[]) => Promise<void>;
+    private openEyeDropper;
     private syncActionResult;
     private onBlur;
     private onUnload;
@@ -97,6 +101,7 @@ declare class App extends React.Component<AppProps, AppState> {
     setAppState: React.Component<any, AppState>["setState"];
     removePointer: (event: React.PointerEvent<HTMLElement> | PointerEvent) => void;
     toggleLock: (source?: "keyboard" | "ui") => void;
+    toggleFrameRendering: () => void;
     togglePenMode: () => void;
     onHandToolToggle: () => void;
     /**
@@ -160,6 +165,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleCanvasDoubleClick;
     private getElementLinkAtPosition;
     private redirectToLink;
+    private getTopLayerFrameAtSceneCoords;
     private handleCanvasPointerMove;
     private handleEraser;
     private handleTouchMove;
@@ -185,6 +191,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private createImageElement;
     private handleLinearElementOnPointerDown;
     private createGenericElementOnPointerDown;
+    private createFrameElementOnPointerDown;
     private onKeyDownFromPointerDownHandler;
     private onKeyUpFromPointerDownHandler;
     private onPointerMoveFromPointerDownHandler;

package/types/components/Avatar.d.ts

@@ -3,7 +3,6 @@ import React from "react";
 type AvatarProps = {
     onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     color: string;
-    border: string;
     name: string;
     src?: string;
 };

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

@@ -1,5 +1,5 @@
 interface ColorInputProps {
-    color: string | null;
+    color: string;
     onChange: (color: string) => void;
     label: string;
 }

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

@@ -4,9 +4,9 @@ import { ColorPickerType } from "./colorPickerUtils";
 import { ColorTuple, ColorPaletteCustom } from "../../colors";
 import "./ColorPicker.scss";
 export declare const getColor: (color: string) => string | null;
-export interface ColorPickerProps {
+interface ColorPickerProps {
     type: ColorPickerType;
-    color: string | null;
+    color: string;
     onChange: (color: string) => void;
     label: string;
     elements: readonly ExcalidrawElement[];
@@ -16,3 +16,4 @@ export interface ColorPickerProps {
     updateData: (formData?: any) => void;
 }
 export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, }: ColorPickerProps) => JSX.Element;
+export {};

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

@@ -1,6 +1,6 @@
 interface CustomColorListProps {
     colors: string[];
-    color: string | null;
+    color: string;
     onChange: (color: string) => void;
     label: string;
 }

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

@@ -3,7 +3,7 @@ import { ExcalidrawElement } from "../../element/types";
 import { ColorPickerType } from "./colorPickerUtils";
 import { ColorPaletteCustom } from "../../colors";
 interface PickerProps {
-    color: string | null;
+    color: string;
     onChange: (color: string) => void;
     label: string;
     type: ColorPickerType;
@@ -11,6 +11,8 @@ interface PickerProps {
     palette: ColorPaletteCustom;
     updateData: (formData?: any) => void;
     children?: React.ReactNode;
+    onEyeDropperToggle: (force?: boolean) => void;
+    onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
 }
-export declare const Picker: ({ color, onChange, label, type, elements, palette, updateData, children, }: PickerProps) => JSX.Element;
+export declare const Picker: ({ color, onChange, label, type, elements, palette, updateData, children, onEyeDropperToggle, onEscape, }: PickerProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { ColorPaletteCustom } from "../../colors";
 interface PickerColorListProps {
     palette: ColorPaletteCustom;
-    color: string | null;
+    color: string;
     onChange: (color: string) => void;
     label: string;
     activeShade: number;

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

@@ -1,6 +1,6 @@
 import { ColorPaletteCustom } from "../../colors";
 interface ShadeListProps {
-    hex: string | null;
+    hex: string;
     onChange: (color: string) => void;
     palette: ColorPaletteCustom;
 }

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

@@ -2,7 +2,7 @@ import { ColorPickerType } from "./colorPickerUtils";
 interface TopPicksProps {
     onChange: (color: string) => void;
     type: ColorPickerType;
-    activeColor: string | null;
+    activeColor: string;
     topPicks?: readonly string[];
 }
 export declare const TopPicks: ({ onChange, type, activeColor, topPicks, }: TopPicksProps) => JSX.Element | null;

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

@@ -1,40 +1,20 @@
 import { ExcalidrawElement } from "../../element/types";
 import { ColorPickerColor, ColorPaletteCustom } from "../../colors";
-export declare const getColorNameAndShadeFromHex: ({ palette, hex, }: {
+export declare const getColorNameAndShadeFromColor: ({ palette, color, }: {
     palette: ColorPaletteCustom;
-    hex: string;
+    color: string;
 }) => {
     colorName: ColorPickerColor;
     shade: number | null;
 } | null;
 export declare const colorPickerHotkeyBindings: string[];
 export declare const isCustomColor: ({ color, palette, }: {
-    color: string | null;
+    color: string;
     palette: ColorPaletteCustom;
 }) => boolean;
 export declare const getMostUsedCustomColors: (elements: readonly ExcalidrawElement[], type: "elementBackground" | "elementStroke", palette: ColorPaletteCustom) => string[];
 export type ActiveColorPickerSectionAtomType = "custom" | "baseColors" | "shades" | "hex" | null;
-export declare const activeColorPickerSectionAtom: import("jotai").Atom<ActiveColorPickerSectionAtomType> & {
-    write: (get: {
-        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_2;
-    } & {
-        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-            unstable_promise: true;
-        }): Value_3 | Promise<Value_3>;
-        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-            unstable_promise: true;
-        }): Value_4 | Promise<Value_4>;
-        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-            unstable_promise: true;
-        }): (Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5>;
-    }, set: {
-        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-    }, update: ActiveColorPickerSectionAtomType | ((prev: ActiveColorPickerSectionAtomType) => ActiveColorPickerSectionAtomType)) => void;
-    onMount?: (<S extends (update: ActiveColorPickerSectionAtomType | ((prev: ActiveColorPickerSectionAtomType) => ActiveColorPickerSectionAtomType)) => void>(setAtom: S) => void | (() => void)) | undefined;
-} & {
+export declare const activeColorPickerSectionAtom: import("jotai").PrimitiveAtom<ActiveColorPickerSectionAtomType> & {
     init: ActiveColorPickerSectionAtomType;
 };
 export declare const getContrastYIQ: (bgHex: string, isCustomColor: boolean) => "white" | "black";

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

@@ -2,15 +2,20 @@
 import { ColorPaletteCustom } from "../../colors";
 import { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
 interface ColorPickerKeyNavHandlerProps {
-    e: React.KeyboardEvent;
+    event: React.KeyboardEvent;
     activeColorPickerSection: ActiveColorPickerSectionAtomType;
     palette: ColorPaletteCustom;
-    hex: string | null;
+    color: string;
     onChange: (color: string) => void;
     customColors: string[];
     setActiveColorPickerSection: (update: React.SetStateAction<ActiveColorPickerSectionAtomType>) => void;
     updateData: (formData?: any) => void;
     activeShade: number;
+    onEyeDropperToggle: (force?: boolean) => void;
+    onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
 }
-export declare const colorPickerKeyNavHandler: ({ e, activeColorPickerSection, palette, hex, onChange, customColors, setActiveColorPickerSection, updateData, activeShade, }: ColorPickerKeyNavHandlerProps) => void;
+/**
+ * @returns true if the event was handled
+ */
+export declare const colorPickerKeyNavHandler: ({ event, activeColorPickerSection, palette, color, onChange, customColors, setActiveColorPickerSection, updateData, activeShade, onEyeDropperToggle, onEscape, }: ColorPickerKeyNavHandlerProps) => boolean;
 export {};

package/types/components/Dialog.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import "./Dialog.scss";
-import { AppState } from "../types";
 export interface DialogProps {
     children: React.ReactNode;
     className?: string;
@@ -8,7 +7,6 @@ export interface DialogProps {
     onCloseRequest(): void;
     title: React.ReactNode | false;
     autofocus?: boolean;
-    theme?: AppState["theme"];
     closeOnClickOutside?: boolean;
 }
 export declare const Dialog: (props: DialogProps) => JSX.Element;

package/types/components/EyeDropper.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import "./EyeDropper.scss";
+type EyeDropperProperties = {
+    keepOpenOnAlt: boolean;
+    swapPreviewOnAlt?: boolean;
+    onSelect?: (color: string, event: PointerEvent) => void;
+    previewType?: "strokeColor" | "backgroundColor";
+};
+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"];
+}>;
+export {};

package/types/components/LibraryMenu.d.ts

@@ -2,27 +2,7 @@ import React from "react";
 import Library from "../data/library";
 import { LibraryItems, LibraryItem, ExcalidrawProps, UIAppState } from "../types";
 import "./LibraryMenu.scss";
-export declare const isLibraryMenuOpenAtom: import("jotai").Atom<boolean> & {
-    write: (get: {
-        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_2;
-    } & {
-        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-            unstable_promise: true;
-        }): Value_3 | Promise<Value_3>;
-        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-            unstable_promise: true;
-        }): Value_4 | Promise<Value_4>;
-        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-            unstable_promise: true;
-        }): (Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5>;
-    }, set: {
-        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-    }, update: boolean | ((prev: boolean) => boolean)) => void;
-    onMount?: (<S extends (update: boolean | ((prev: boolean) => boolean)) => void>(setAtom: S) => void | (() => void)) | undefined;
-} & {
+export declare const isLibraryMenuOpenAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
 export declare const LibraryMenuContent: ({ onInsertLibraryItems, pendingElements, onAddToLibrary, setAppState, libraryReturnUrl, library, id, theme, selectedItems, onSelectItems, }: {

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

@@ -8,27 +8,7 @@ import "./Sidebar.scss";
  *
  * Since we can only render one Sidebar at a time, we can use a simple flag.
  */
-export declare const isSidebarDockedAtom: import("jotai").Atom<boolean> & {
-    write: (get: {
-        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_2;
-    } & {
-        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-            unstable_promise: true;
-        }): Value_3 | Promise<Value_3>;
-        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-            unstable_promise: true;
-        }): Value_4 | Promise<Value_4>;
-        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-            unstable_promise: true;
-        }): (Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5>;
-    }, set: {
-        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-    }, update: boolean | ((prev: boolean) => boolean)) => void;
-    onMount?: (<S extends (update: boolean | ((prev: boolean) => boolean)) => void>(setAtom: S) => void | (() => void)) | undefined;
-} & {
+export declare const isSidebarDockedAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
 export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{

package/types/components/ToolButton.d.ts

@@ -1,5 +1,5 @@
 import "./ToolIcon.scss";
-import React from "react";
+import React, { CSSProperties } from "react";
 import { PointerType } from "../element/types";
 export type ToolButtonSize = "small" | "medium";
 type ToolButtonBaseProps = {
@@ -18,6 +18,7 @@ type ToolButtonBaseProps = {
     visible?: boolean;
     selected?: boolean;
     className?: string;
+    style?: CSSProperties;
     isLoading?: boolean;
 };
 type ToolButtonProps = (ToolButtonBaseProps & {

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

@@ -6,11 +6,12 @@ declare const DropdownMenu: {
         open: boolean;
     }): JSX.Element;
     Trigger: {
-        ({ className, children, onToggle, }: {
+        ({ className, children, onToggle, title, ...rest }: {
             className?: string | undefined;
             children: React.ReactNode;
             onToggle: () => void;
-        }): JSX.Element;
+            title?: string | undefined;
+        } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
     };
     Content: {

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

@@ -1,9 +1,11 @@
+/// <reference types="react" />
 declare const MenuTrigger: {
-    ({ className, children, onToggle, }: {
+    ({ className, children, onToggle, title, ...rest }: {
         className?: string | undefined;
         children: React.ReactNode;
         onToggle: () => void;
-    }): JSX.Element;
+        title?: string | undefined;
+    } & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
     displayName: string;
 };
 export default MenuTrigger;

package/types/components/icons.d.ts

@@ -144,4 +144,7 @@ export declare const helpIcon: JSX.Element;
 export declare const playerPlayIcon: JSX.Element;
 export declare const playerStopFilledIcon: JSX.Element;
 export declare const tablerCheckIcon: JSX.Element;
+export declare const eyeDropperIcon: JSX.Element;
+export declare const extraToolsIcon: JSX.Element;
+export declare const frameToolIcon: JSX.Element;
 export {};

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

@@ -10,11 +10,12 @@ declare const MainMenu: React.FC<{
     __fallback?: boolean | undefined;
 }> & {
     Trigger: {
-        ({ className, children, onToggle, }: {
+        ({ className, children, onToggle, title, ...rest }: {
             className?: string | undefined;
             children: React.ReactNode;
             onToggle: () => void;
-        }): JSX.Element;
+            title?: string | undefined;
+        } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
     };
     Item: {

package/types/constants.d.ts

@@ -47,6 +47,7 @@ export declare enum EVENT {
     GESTURE_START = "gesturestart",
     GESTURE_CHANGE = "gesturechange",
     POINTER_MOVE = "pointermove",
+    POINTER_DOWN = "pointerdown",
     POINTER_UP = "pointerup",
     STATE_CHANGE = "statechange",
     WHEEL = "wheel",
@@ -74,6 +75,19 @@ export declare const THEME: {
     LIGHT: string;
     DARK: string;
 };
+export declare const FRAME_STYLE: {
+    strokeColor: string;
+    strokeWidth: number;
+    strokeStyle: import("./element/types").StrokeStyle;
+    fillStyle: import("./element/types").FillStyle;
+    roughness: number;
+    roundness: {
+        type: import("./element/types").RoundnessType;
+        value?: number | undefined;
+    } | null;
+    backgroundColor: string;
+    radius: number;
+};
 export declare const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 export declare const DEFAULT_FONT_SIZE = 20;
 export declare const DEFAULT_FONT_FAMILY: FontFamilyValues;

package/types/data/library.d.ts

@@ -1,55 +1,11 @@
 import { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource } from "../types";
 import type App from "../components/App";
 import { ExcalidrawElement } from "../element/types";
-export declare const libraryItemsAtom: import("jotai").Atom<{
+export declare const libraryItemsAtom: import("jotai").PrimitiveAtom<{
     status: "loading" | "loaded";
     isInitialized: boolean;
     libraryItems: LibraryItems;
 }> & {
-    write: (get: {
-        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_2;
-    } & {
-        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-            unstable_promise: true;
-        }): Value_3 | Promise<Value_3>;
-        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-            unstable_promise: true;
-        }): Value_4 | Promise<Value_4>;
-        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-            unstable_promise: true;
-        }): (Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5>;
-    }, set: {
-        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-    }, update: {
-        status: "loading" | "loaded";
-        isInitialized: boolean;
-        libraryItems: LibraryItems;
-    } | ((prev: {
-        status: "loading" | "loaded";
-        isInitialized: boolean;
-        libraryItems: LibraryItems;
-    }) => {
-        status: "loading" | "loaded";
-        isInitialized: boolean;
-        libraryItems: LibraryItems;
-    })) => void;
-    onMount?: (<S extends (update: {
-        status: "loading" | "loaded";
-        isInitialized: boolean;
-        libraryItems: LibraryItems;
-    } | ((prev: {
-        status: "loading" | "loaded";
-        isInitialized: boolean;
-        libraryItems: LibraryItems;
-    }) => {
-        status: "loading" | "loaded";
-        isInitialized: boolean;
-        libraryItems: LibraryItems;
-    })) => void>(setAtom: S) => void | (() => void)) | undefined;
-} & {
     init: {
         status: "loading" | "loaded";
         isInitialized: boolean;

package/types/element/Hyperlink.d.ts

@@ -33,13 +33,17 @@ export declare const actionLink: {
             isBindingEnabled: boolean;
             startBoundElement: import("./types").NonDeleted<import("./types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
+            frameToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawElement>[] | null;
             editingElement: NonDeletedExcalidrawElement | null;
             editingLinearElement: import("./linearElementEditor").LinearElementEditor | null;
             activeTool: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -89,6 +93,7 @@ export declare const actionLink: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;

package/types/element/binding.d.ts

@@ -7,7 +7,7 @@ export type SuggestedPointBinding = [
     "start" | "end" | "both",
     NonDeleted<ExcalidrawBindableElement>
 ];
-export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLCanvasElement>) => boolean;
+export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLElement>) => boolean;
 export declare const isBindingEnabled: (appState: AppState) => boolean;
 export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep") => void;
 export declare const bindOrUnbindSelectedElements: (elements: NonDeleted<ExcalidrawElement>[]) => void;

package/types/element/bounds.d.ts

@@ -1,21 +1,46 @@
 import { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead, NonDeleted } from "./types";
 import { Drawable, Op } from "roughjs/bin/core";
-export type Bounds = readonly [number, number, number, number];
+import { Point } from "../types";
+export type RectangleBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    angle: number;
+};
+export type Bounds = readonly [x1: number, y1: number, x2: number, y2: number];
+export declare class ElementBounds {
+    private static boundsCache;
+    static getBounds(element: ExcalidrawElement): Bounds;
+    private static calculateBounds;
+}
 export declare const getElementAbsoluteCoords: (element: ExcalidrawElement, includeBoundText?: boolean) => [number, number, number, number, number, number];
+/**
+ * for a given element, `getElementLineSegments` returns line segments
+ * that can be used for visual collision detection (useful for frames)
+ * as opposed to bounding box collision detection
+ */
+export declare const getElementLineSegments: (element: ExcalidrawElement) => [Point, Point][];
+/**
+ * Scene -> Scene coords, but in x1,x2,y1,y2 format.
+ *
+ * Rectangle here means any rectangular frame, not an excalidraw element.
+ */
+export declare const getRectangleBoxAbsoluteCoords: (boxSceneCoords: RectangleBox) => number[];
 export declare const pointRelativeTo: (element: ExcalidrawElement, absoluteCoords: readonly [number, number]) => readonly [number, number];
 export declare const getDiamondPoints: (element: ExcalidrawElement) => number[];
 export declare const getCurvePathOps: (shape: Drawable) => Op[];
 export declare const getMinMaxXYFromCurvePathOps: (ops: Op[], transformXY?: ((x: number, y: number) => [number, number]) | undefined) => [number, number, number, number];
 export declare const getArrowheadPoints: (element: ExcalidrawLinearElement, shape: Drawable[], position: "start" | "end", arrowhead: Arrowhead) => number[] | null;
-export declare const getElementBounds: (element: ExcalidrawElement) => [number, number, number, number];
-export declare const getCommonBounds: (elements: readonly ExcalidrawElement[]) => [number, number, number, number];
+export declare const getElementBounds: (element: ExcalidrawElement) => Bounds;
+export declare const getCommonBounds: (elements: readonly ExcalidrawElement[]) => Bounds;
 export declare const getResizedElementAbsoluteCoords: (element: ExcalidrawElement, nextWidth: number, nextHeight: number, normalizePoints: boolean) => [number, number, number, number];
 export declare const getElementPointsCoords: (element: ExcalidrawLinearElement, points: readonly (readonly [number, number])[]) => [number, number, number, number];
 export declare const getClosestElementBounds: (elements: readonly ExcalidrawElement[], from: {
     x: number;
     y: number;
-}) => [number, number, number, number];
-export interface Box {
+}) => Bounds;
+export interface BoundingBox {
     minX: number;
     minY: number;
     maxX: number;
@@ -25,4 +50,4 @@ export interface Box {
     width: number;
     height: number;
 }
-export declare const getCommonBoundingBox: (elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => Box;
+export declare const getCommonBoundingBox: (elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => BoundingBox;

package/types/element/collision.d.ts

@@ -1,11 +1,11 @@
 import * as GA from "../ga";
-import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement } from "./types";
-import { Point } from "../types";
+import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement, ExcalidrawFrameElement } from "./types";
+import { FrameNameBoundsCache, Point } from "../types";
 import { AppState } from "../types";
-export declare const hitTest: (element: NonDeletedExcalidrawElement, appState: AppState, x: number, y: number) => boolean;
-export declare const isHittingElementBoundingBoxWithoutHittingElement: (element: NonDeletedExcalidrawElement, appState: AppState, x: number, y: number) => boolean;
-export declare const isHittingElementNotConsideringBoundingBox: (element: NonDeletedExcalidrawElement, appState: AppState, point: readonly [number, number]) => boolean;
-export declare const isPointHittingElementBoundingBox: (element: NonDeleted<ExcalidrawElement>, [x, y]: readonly [number, number], threshold: number) => boolean;
+export declare const hitTest: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache, x: number, y: number) => boolean;
+export declare const isHittingElementBoundingBoxWithoutHittingElement: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache, x: number, y: number) => boolean;
+export declare const isHittingElementNotConsideringBoundingBox: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache | null, point: readonly [number, number]) => boolean;
+export declare const isPointHittingElementBoundingBox: (element: NonDeleted<ExcalidrawElement>, [x, y]: readonly [number, number], threshold: number, frameNameBoundsCache: FrameNameBoundsCache | null) => boolean;
 export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
     x: number;
     y: number;
@@ -18,4 +18,4 @@ export declare const determineFocusPoint: (element: ExcalidrawBindableElement, f
 export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap?: number) => Point[];
 export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
 export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
-export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
+export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawFrameElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];

package/types/element/dragElements.d.ts

@@ -1,5 +1,6 @@
 import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
-export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], pointerX: number, pointerY: number, lockDirection: boolean | undefined, distanceX: number | undefined, distanceY: number | undefined, appState: AppState) => void;
+import Scene from "../scene/Scene";
+export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], pointerX: number, pointerY: number, lockDirection: boolean | undefined, distanceX: number | undefined, distanceY: number | undefined, appState: AppState, scene: Scene) => void;
 export declare const getDragOffsetXY: (selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
 export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: AppState["activeTool"]["type"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, widthAspectRatio?: number | null) => void;