@excalidraw/excalidraw 0.15.2-6213-0f92339 → 0.15.2-6441-09a9176

package/types/components/Trans.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const Trans: ({ i18nKey, children, ...props }: {
+    [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
+    i18nKey: string;
+}) => React.FunctionComponentElement<{
+    children?: React.ReactNode;
+}>;
+export default Trans;

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,10 @@
 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/footer/Footer.d.ts

@@ -1,8 +1,8 @@
 import { ActionManager } from "../../actions/manager";
-import { AppState } from "../../types";
+import { UIAppState } from "../../types";
 declare const Footer: {
     ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, }: {
-        appState: AppState;
+        appState: UIAppState;
         actionManager: ActionManager;
         showExitZenModeBtn: boolean;
         renderWelcomeScreen: boolean;

package/types/components/icons.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Theme } from "../element/types";
-declare type Opts = {
+type Opts = {
     width?: number;
     height?: number;
     mirror?: true;
@@ -138,4 +138,13 @@ export declare const TextAlignMiddleIcon: React.MemoExoticComponent<({ theme }:
 export declare const publishIcon: JSX.Element;
 export declare const eraser: JSX.Element;
 export declare const handIcon: JSX.Element;
+export declare const downloadIcon: JSX.Element;
+export declare const copyIcon: JSX.Element;
+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/live-collaboration/LiveCollaborationTrigger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./LiveCollaborationTrigger.scss";
 declare const LiveCollaborationTrigger: {
     ({ isCollaborating, onSelect, ...rest }: {

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

@@ -7,16 +7,15 @@ declare const MainMenu: React.FC<{
      */
     onSelect?: ((event: Event) => void) | undefined;
 } & {
-    __fallback?: boolean | undefined; /**
-     * Called when any menu item is selected (clicked on).
-     */
+    __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/components/welcome-screen/WelcomeScreen.Center.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const Center: {
     ({ children }: {
         children?: React.ReactNode;

package/types/components/welcome-screen/WelcomeScreen.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./WelcomeScreen.scss";
 declare const WelcomeScreen: {
     (props: {

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;
@@ -110,6 +124,11 @@ export declare const MIME_TYPES: {
     readonly "excalidraw.png": "image/png";
     readonly binary: "application/octet-stream";
 };
+export declare const EXPORT_IMAGE_TYPES: {
+    readonly png: "png";
+    readonly svg: "svg";
+    readonly clipboard: "clipboard";
+};
 export declare const EXPORT_DATA_TYPES: {
     readonly excalidraw: "excalidraw";
     readonly excalidrawClipboard: "excalidraw/clipboard";

package/types/context/tunnels.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import tunnel from "tunnel-rat";
-export declare type Tunnel = ReturnType<typeof tunnel>;
-declare type TunnelsContextValue = {
+export type Tunnel = ReturnType<typeof tunnel>;
+type TunnelsContextValue = {
     MainMenuTunnel: Tunnel;
     WelcomeScreenMenuHintTunnel: Tunnel;
     WelcomeScreenToolbarHintTunnel: Tunnel;

package/types/context/ui-appState.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { AppState } from "../types";
-export declare const UIAppStateContext: React.Context<AppState>;
-export declare const useUIAppState: () => AppState;
+import { UIAppState } from "../types";
+export declare const UIAppStateContext: React.Context<UIAppState>;
+export declare const useUIAppState: () => UIAppState;

package/types/data/encode.d.ts

@@ -5,7 +5,7 @@ export declare const toByteString: (data: string | Uint8Array | ArrayBuffer) =>
  */
 export declare const stringToBase64: (str: string, isByteString?: boolean) => Promise<string>;
 export declare const base64ToString: (base64: string, isByteString?: boolean) => Promise<string>;
-declare type EncodedData = {
+type EncodedData = {
     encoded: string;
     encoding: "bstring";
     /** whether text is compressed (zlib) */

package/types/data/filesystem.d.ts

@@ -1,6 +1,6 @@
 import { FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
 import { MIME_TYPES } from "../constants";
-declare type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
+type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 export declare const fileOpen: <M extends boolean | undefined = false>(opts: {
     extensions?: FILE_EXTENSION[] | undefined;
     description: string;

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;
@@ -70,6 +26,8 @@ declare class Library {
     private updateQueue;
     private getLastUpdateTask;
     private notifyListeners;
+    /** call on excalidraw instance unmount */
+    destroy: () => void;
     resetLibrary: () => Promise<LibraryItems>;
     /**
      * @returns latest cloned libraryItems. Awaits all in-progress updates first.

package/types/data/restore.d.ts

@@ -1,9 +1,9 @@
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItem } from "../types";
 import { ImportedDataState } from "./types";
-declare type RestoredAppState = Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
+type RestoredAppState = Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const AllowedExcalidrawActiveTools: Record<AppState["activeTool"]["type"], boolean>;
-export declare type RestoredDataState = {
+export type RestoredDataState = {
     elements: ExcalidrawElement[];
     appState: RestoredAppState;
     files: BinaryFiles;

package/types/data/types.d.ts

@@ -17,7 +17,7 @@ export interface ExportedDataState {
  * This is a helper type used in downstream abstractions.
  * Don't consume on its own.
  */
-export declare type LegacyAppState = {
+export type LegacyAppState = {
     /** @deprecated #6213 TODO remove 23-06-01 */
     isSidebarDocked: [boolean, "defaultSidebarDockedPreference"];
 };

package/types/element/Hyperlink.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { AppState, ExcalidrawProps } from "../types";
+import { AppState, ExcalidrawProps, UIAppState } from "../types";
 import { NonDeletedExcalidrawElement } from "./types";
 import { Bounds } from "./bounds";
 import "./Hyperlink.scss";
@@ -33,13 +32,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";
@@ -75,7 +78,7 @@ export declare const actionLink: {
             zoom: Readonly<{
                 value: import("../types").NormalizedZoomValue;
             }>;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -89,6 +92,7 @@ export declare const actionLink: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -135,7 +139,7 @@ export declare const actionLink: {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.edit" | "labels.link.create";
-export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: AppState) => [x: number, y: number, width: number, height: number];
+export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: UIAppState) => [x: number, y: number, width: number, height: number];
 export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number], isMobile: boolean) => boolean;
 export declare const showHyperlinkTooltip: (element: NonDeletedExcalidrawElement, appState: AppState) => void;
 export declare const hideHyperlinkToolip: () => void;

package/types/element/binding.d.ts

@@ -1,13 +1,13 @@
 import { ExcalidrawLinearElement, ExcalidrawBindableElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawElement } from "./types";
 import { AppState } from "../types";
 import Scene from "../scene/Scene";
-export declare type SuggestedBinding = NonDeleted<ExcalidrawBindableElement> | SuggestedPointBinding;
-export declare type SuggestedPointBinding = [
+export type SuggestedBinding = NonDeleted<ExcalidrawBindableElement> | SuggestedPointBinding;
+export type SuggestedPointBinding = [
     NonDeleted<ExcalidrawLinearElement>,
     "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 declare 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;

package/types/element/index.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameElement } from "./types";
 export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
@@ -6,7 +6,7 @@ export { hitTest, isHittingElementBoundingBoxWithoutHittingElement, } from "./co
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";
 export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
 export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";
-export { isTextElement, isExcalidrawElement } from "./typeChecks";
+export { isTextElement, isExcalidrawElement, isFrameElement, } from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export { getPerfectElementSize, getLockedLinearCursorAlignSize, isInvisiblySmallElement, resizePerfectLineForNWHandler, getNormalizedDimensions, } from "./sizeHelpers";
@@ -14,6 +14,7 @@ export { showSelectedShapeActions } from "./showSelectedShapeActions";
 export declare const getSceneVersion: (elements: readonly ExcalidrawElement[]) => number;
 export declare const getVisibleElements: (elements: readonly ExcalidrawElement[]) => readonly NonDeletedExcalidrawElement[];
 export declare const getNonDeletedElements: (elements: readonly ExcalidrawElement[]) => readonly NonDeletedExcalidrawElement[];
+export declare const getNonDeletedFrames: (frames: readonly ExcalidrawFrameElement[]) => readonly NonDeleted<ExcalidrawFrameElement>[];
 export declare const isNonDeletedElement: <T extends ExcalidrawElement>(element: T) => element is NonDeleted<T>;
 export declare const clearElementsForDatabase: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];
 export declare const clearElementsForExport: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];

package/types/element/linearElementEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer } from "./types";
 import { Point, AppState, PointerCoords } from "../types";
 import History from "../history";
@@ -62,7 +61,7 @@ export declare class LinearElementEditor {
     static isSegmentTooShort(element: NonDeleted<ExcalidrawLinearElement>, startPoint: Point, endPoint: Point, zoom: AppState["zoom"]): boolean;
     static getSegmentMidPoint(element: NonDeleted<ExcalidrawLinearElement>, startPoint: Point, endPoint: Point, endPointIndex: number): readonly [number, number];
     static getSegmentMidPointIndex(linearElementEditor: LinearElementEditor, appState: AppState, midPoint: Point): number;
-    static handlePointerDown(event: React.PointerEvent<HTMLCanvasElement>, appState: AppState, history: History, scenePointer: {
+    static handlePointerDown(event: React.PointerEvent<HTMLElement>, appState: AppState, history: History, scenePointer: {
         x: number;
         y: number;
     }, linearElementEditor: LinearElementEditor): {
@@ -138,12 +137,16 @@ export declare class LinearElementEditor {
             isBindingEnabled: boolean;
             startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
+            frameToHighlight: NonDeleted<import("./types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
             editingElement: import("./types").NonDeletedExcalidrawElement | 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";
@@ -180,7 +183,7 @@ export declare class LinearElementEditor {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -194,6 +197,7 @@ export declare class LinearElementEditor {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;

package/types/element/mutateElement.d.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "./types";
 import { Mutable } from "../utility-types";
-declare type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce">;
+type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce">;
 export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
 export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>) => TElement;
 /**

package/types/element/newElement.d.ts

@@ -1,10 +1,11 @@
-import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer } from "../element/types";
+import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement } from "../element/types";
 import { AppState } from "../types";
 import { MarkOptional, Mutable } from "../utility-types";
-declare type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity">;
+type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;
+export declare const newFrameElement: (opts: ElementConstructorOpts) => NonDeleted<ExcalidrawFrameElement>;
 export declare const newTextElement: (opts: {
     text: string;
     fontSize?: number;
@@ -14,6 +15,7 @@ export declare const newTextElement: (opts: {
     containerId?: ExcalidrawTextContainer["id"];
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
+    isFrameName?: boolean;
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
 export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
     x: number;

package/types/element/resizeElements.d.ts

@@ -4,5 +4,6 @@ import { PointerDownState } from "../types";
 export declare const normalizeAngle: (angle: number) => number;
 export declare const transformElements: (pointerDownState: PointerDownState, transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
 export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
+export declare const resizeMultipleElements: (pointerDownState: PointerDownState, selectedElements: readonly NonDeletedExcalidrawElement[], transformHandleType: "nw" | "ne" | "sw" | "se", shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
 export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
 export declare const getResizeArrowDirection: (transformHandleType: MaybeTransformHandleType, element: NonDeleted<ExcalidrawLinearElement>) => "origin" | "end";

package/types/element/showSelectedShapeActions.d.ts

@@ -1,3 +1,3 @@
-import { AppState } from "../types";
 import { NonDeletedExcalidrawElement } from "./types";
-export declare const showSelectedShapeActions: (appState: AppState, elements: readonly NonDeletedExcalidrawElement[]) => boolean;
+import { UIAppState } from "../types";
+export declare const showSelectedShapeActions: (appState: UIAppState, elements: readonly NonDeletedExcalidrawElement[]) => boolean;

package/types/element/transformHandles.d.ts

@@ -1,18 +1,25 @@
 import { ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
 import { AppState, Zoom } from "../types";
-export declare type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
-export declare type TransformHandleType = TransformHandleDirection | "rotation";
-export declare type TransformHandle = [number, number, number, number];
-export declare type TransformHandles = Partial<{
+export type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
+export type TransformHandleType = TransformHandleDirection | "rotation";
+export type TransformHandle = [number, number, number, number];
+export type TransformHandles = Partial<{
     [T in TransformHandleType]: TransformHandle;
 }>;
-export declare type MaybeTransformHandleType = TransformHandleType | false;
+export type MaybeTransformHandleType = TransformHandleType | false;
 export declare const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS: {
     e: boolean;
     s: boolean;
     n: boolean;
     w: boolean;
 };
+export declare const OMIT_SIDES_FOR_FRAME: {
+    e: boolean;
+    s: boolean;
+    n: boolean;
+    w: boolean;
+    rotation: boolean;
+};
 export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [number, number, number, number, number, number], angle: number, zoom: Zoom, pointerType: PointerType, omitSides?: {
     s?: boolean | undefined;
     e?: boolean | undefined;

package/types/element/typeChecks.d.ts

@@ -1,10 +1,11 @@
 import { AppState } from "../types";
 import { MarkNonNullable } from "../utility-types";
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, RoundnessType } from "./types";
+import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType } from "./types";
 export declare const isGenericElement: (element: ExcalidrawElement | null) => element is ExcalidrawGenericElement;
 export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
 export declare const isImageElement: (element: ExcalidrawElement | null) => element is ExcalidrawImageElement;
 export declare const isTextElement: (element: ExcalidrawElement | null) => element is ExcalidrawTextElement;
+export declare const isFrameElement: (element: ExcalidrawElement | null) => element is ExcalidrawFrameElement;
 export declare const isFreeDrawElement: (element?: ExcalidrawElement | null) => element is ExcalidrawFreeDrawElement;
 export declare const isFreeDrawElementType: (elementType: ExcalidrawElement["type"]) => boolean;
 export declare const isLinearElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;