@excalidraw/excalidraw 0.15.2-6977c32 → 0.15.2-6abf194

package/types/scene/selection.d.ts

@@ -1,11 +1,31 @@
 import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-export declare const getElementsWithinSelection: (elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement) => NonDeletedExcalidrawElement[];
-export declare const isSomeElementSelected: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">) => boolean;
+import { AppState, InteractiveCanvasAppState } from "../types";
+/**
+ * Frames and their containing elements are not to be selected at the same time.
+ * Given an array of selected elements, if there are frames and their containing elements
+ * we only keep the frames.
+ * @param selectedElements
+ */
+export declare const excludeElementsInFramesFromSelection: <T extends ExcalidrawElement>(selectedElements: readonly T[]) => T[];
+export declare const getElementsWithinSelection: (elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement, excludeElementsInFrames?: boolean) => NonDeletedExcalidrawElement[];
+export declare const isSomeElementSelected: {
+    (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">): boolean;
+    clearCache(): void;
+};
 /**
  * Returns common attribute (picked by `getAttribute` callback) of selected
  *  elements. If elements don't share the same value, returns `null`.
  */
 export declare const getCommonAttributeOfSelectedElements: <T>(elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">, getAttribute: (element: ExcalidrawElement) => T) => T | null;
-export declare const getSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">, includeBoundTextElement?: boolean) => NonDeletedExcalidrawElement[];
-export declare const getTargetElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds" | "editingElement">) => NonDeletedExcalidrawElement[];
+export declare const getSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<InteractiveCanvasAppState, "selectedElementIds">, opts?: {
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+}) => ExcalidrawElement[];
+export declare const getTargetElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds" | "editingElement">) => ExcalidrawElement[];
+/**
+ * returns prevState's selectedElementids if no change from previous, so as to
+ * retain reference identity for memoization
+ */
+export declare const makeNextSelectedElementIds: (nextSelectedElementIds: AppState["selectedElementIds"], prevState: Pick<AppState, "selectedElementIds">) => Readonly<{
+    [id: string]: true;
+}>;

package/types/scene/types.d.ts

@@ -1,49 +1,69 @@
-import { ExcalidrawTextElement } from "../element/types";
-import { AppClassProperties, AppState } from "../types";
-export declare type RenderConfig = {
-    scrollX: AppState["scrollX"];
-    scrollY: AppState["scrollY"];
-    /** null indicates transparent bg */
-    viewBackgroundColor: AppState["viewBackgroundColor"] | null;
-    zoom: AppState["zoom"];
-    shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
-    theme: AppState["theme"];
+import type { RoughCanvas } from "roughjs/bin/canvas";
+import { Drawable } from "roughjs/bin/core";
+import { ExcalidrawTextElement, NonDeletedExcalidrawElement } from "../element/types";
+import { AppClassProperties, InteractiveCanvasAppState, StaticCanvasAppState } from "../types";
+export type StaticCanvasRenderConfig = {
+    imageCache: AppClassProperties["imageCache"];
+    renderGrid: boolean;
+    /** when exporting the behavior is slightly different (e.g. we can't use
+     CSS filters), and we disable render optimizations for best output */
+    isExporting: boolean;
+};
+export type InteractiveCanvasRenderConfig = {
+    remoteSelectedElementIds: {
+        [elementId: string]: string[];
+    };
     remotePointerViewportCoords: {
         [id: string]: {
             x: number;
             y: number;
         };
     };
-    remotePointerButton?: {
-        [id: string]: string | undefined;
-    };
-    remoteSelectedElementIds: {
-        [elementId: string]: string[];
+    remotePointerUserStates: {
+        [id: string]: string;
     };
     remotePointerUsernames: {
         [id: string]: string;
     };
-    remotePointerUserStates: {
-        [id: string]: string;
+    remotePointerButton?: {
+        [id: string]: string | undefined;
     };
-    imageCache: AppClassProperties["imageCache"];
-    renderScrollbars?: boolean;
-    renderSelection?: boolean;
-    renderGrid?: boolean;
-    /** when exporting the behavior is slightly different (e.g. we can't use
-      CSS filters), and we disable render optimizations for best output */
-    isExporting: boolean;
     selectionColor?: string;
+    renderScrollbars?: boolean;
+};
+export type RenderInteractiveSceneCallback = {
+    atLeastOneVisibleElement: boolean;
+    elements: readonly NonDeletedExcalidrawElement[];
+    scrollBars?: ScrollBars;
 };
-export declare type SceneScroll = {
+export type StaticSceneRenderConfig = {
+    canvas: HTMLCanvasElement;
+    rc: RoughCanvas;
+    elements: readonly NonDeletedExcalidrawElement[];
+    visibleElements: readonly NonDeletedExcalidrawElement[];
+    scale: number;
+    appState: StaticCanvasAppState;
+    renderConfig: StaticCanvasRenderConfig;
+};
+export type InteractiveSceneRenderConfig = {
+    canvas: HTMLCanvasElement | null;
+    elements: readonly NonDeletedExcalidrawElement[];
+    visibleElements: readonly NonDeletedExcalidrawElement[];
+    selectedElements: readonly NonDeletedExcalidrawElement[];
+    scale: number;
+    appState: InteractiveCanvasAppState;
+    renderConfig: InteractiveCanvasRenderConfig;
+    callback: (data: RenderInteractiveSceneCallback) => void;
+};
+export type SceneScroll = {
     scrollX: number;
     scrollY: number;
 };
 export interface Scene {
     elements: ExcalidrawTextElement[];
 }
-export declare type ExportType = "png" | "clipboard" | "clipboard-svg" | "backend" | "svg";
-export declare type ScrollBars = {
+export type ExportType = "png" | "clipboard" | "clipboard-svg" | "backend" | "svg";
+export type ScrollBars = {
     horizontal: {
         x: number;
         y: number;
@@ -57,3 +77,16 @@ export declare type ScrollBars = {
         height: number;
     } | null;
 };
+export type ElementShape = Drawable | Drawable[] | null;
+export type ElementShapes = {
+    rectangle: Drawable;
+    ellipse: Drawable;
+    diamond: Drawable;
+    embeddable: Drawable;
+    freedraw: Drawable | null;
+    arrow: Drawable[];
+    line: Drawable[];
+    text: null;
+    image: null;
+    frame: null;
+};

package/types/types.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness } from "./element/types";
+import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement, ExcalidrawEmbeddableElement } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -17,8 +17,8 @@ import type { FileSystemHandle } from "./data/filesystem";
 import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
 import { ContextMenuItems } from "./components/ContextMenu";
 import { Merge, ForwardRef, ValueOf } from "./utility-types";
-export declare type Point = Readonly<RoughPoint>;
-export declare type Collaborator = {
+export type Point = Readonly<RoughPoint>;
+export type Collaborator = {
     pointer?: {
         x: number;
         y: number;
@@ -34,10 +34,10 @@ export declare type Collaborator = {
     avatarUrl?: string;
     id?: string;
 };
-export declare type DataURL = string & {
+export type DataURL = string & {
     _brand: "DataURL";
 };
-export declare type BinaryFileData = {
+export type BinaryFileData = {
     mimeType: ValueOf<typeof IMAGE_MIME_TYPES> | typeof MIME_TYPES.binary;
     id: FileId;
     dataURL: DataURL;
@@ -54,18 +54,57 @@ export declare type BinaryFileData = {
      */
     lastRetrieved?: number;
 };
-export declare type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
-export declare type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
-export declare type LastActiveTool = {
-    type: typeof SHAPES[number]["value"] | "eraser" | "hand";
+export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
+export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
+export type LastActiveTool = {
+    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
     customType: null;
 } | {
     type: "custom";
     customType: string;
 } | null;
-export declare type SidebarName = string;
-export declare type SidebarTabName = string;
-export declare type AppState = {
+export type SidebarName = string;
+export type SidebarTabName = string;
+type _CommonCanvasAppState = {
+    zoom: AppState["zoom"];
+    scrollX: AppState["scrollX"];
+    scrollY: AppState["scrollY"];
+    width: AppState["width"];
+    height: AppState["height"];
+    viewModeEnabled: AppState["viewModeEnabled"];
+    editingGroupId: AppState["editingGroupId"];
+    selectedElementIds: AppState["selectedElementIds"];
+    frameToHighlight: AppState["frameToHighlight"];
+    offsetLeft: AppState["offsetLeft"];
+    offsetTop: AppState["offsetTop"];
+    theme: AppState["theme"];
+    pendingImageElementId: AppState["pendingImageElementId"];
+};
+export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
+    shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
+    /** null indicates transparent bg */
+    viewBackgroundColor: AppState["viewBackgroundColor"] | null;
+    exportScale: AppState["exportScale"];
+    selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
+    gridSize: AppState["gridSize"];
+    frameRendering: AppState["frameRendering"];
+}>;
+export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
+    activeEmbeddable: AppState["activeEmbeddable"];
+    editingLinearElement: AppState["editingLinearElement"];
+    selectionElement: AppState["selectionElement"];
+    selectedGroupIds: AppState["selectedGroupIds"];
+    selectedLinearElement: AppState["selectedLinearElement"];
+    multiElement: AppState["multiElement"];
+    isBindingEnabled: AppState["isBindingEnabled"];
+    suggestedBindings: AppState["suggestedBindings"];
+    isRotating: AppState["isRotating"];
+    elementsToHighlight: AppState["elementsToHighlight"];
+    openSidebar: AppState["openSidebar"];
+    showHyperlinkPopup: AppState["showHyperlinkPopup"];
+    collaborators: AppState["collaborators"];
+}>;
+export type AppState = {
     contextMenu: {
         items: ContextMenuItems;
         top: number;
@@ -74,6 +113,10 @@ export declare type AppState = {
     showWelcomeScreen: boolean;
     isLoading: boolean;
     errorMessage: React.ReactNode;
+    activeEmbeddable: {
+        element: NonDeletedExcalidrawElement;
+        state: "hover" | "active";
+    } | null;
     draggingElement: NonDeletedExcalidrawElement | null;
     resizingElement: NonDeletedExcalidrawElement | null;
     multiElement: NonDeleted<ExcalidrawLinearElement> | null;
@@ -81,6 +124,15 @@ export declare type AppState = {
     isBindingEnabled: boolean;
     startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
     suggestedBindings: SuggestedBinding[];
+    frameToHighlight: NonDeleted<ExcalidrawFrameElement> | null;
+    frameRendering: {
+        enabled: boolean;
+        name: boolean;
+        outline: boolean;
+        clip: boolean;
+    };
+    editingFrame: string | null;
+    elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
     editingElement: NonDeletedExcalidrawElement | null;
     editingLinearElement: LinearElementEditor | null;
     activeTool: {
@@ -91,7 +143,7 @@ export declare type AppState = {
         lastActiveTool: LastActiveTool;
         locked: boolean;
     } & ({
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand";
+        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
         customType: null;
     } | {
         type: "custom";
@@ -126,7 +178,7 @@ export declare type AppState = {
     isRotating: boolean;
     zoom: Zoom;
     openMenu: "canvas" | "shape" | null;
-    openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
     openSidebar: {
         name: SidebarName;
         tab?: SidebarTabName;
@@ -141,12 +193,13 @@ export declare type AppState = {
      */
     defaultSidebarDockedPreference: boolean;
     lastPointerDownWith: PointerType;
-    selectedElementIds: {
-        [id: string]: boolean;
-    };
+    selectedElementIds: Readonly<{
+        [id: string]: true;
+    }>;
     previousSelectedElementIds: {
-        [id: string]: boolean;
+        [id: string]: true;
     };
+    selectedElementsAreBeingDragged: boolean;
     shouldCacheIgnoreZoom: boolean;
     toast: {
         message: string;
@@ -184,18 +237,18 @@ export declare type AppState = {
     showHyperlinkPopup: false | "info" | "editor";
     selectedLinearElement: LinearElementEditor | null;
 };
-export declare type UIAppState = Omit<AppState, "suggestedBindings" | "startBoundElement" | "cursorButton" | "scrollX" | "scrollY">;
-export declare type NormalizedZoomValue = number & {
+export type UIAppState = Omit<AppState, "suggestedBindings" | "startBoundElement" | "cursorButton" | "scrollX" | "scrollY">;
+export type NormalizedZoomValue = number & {
     _brand: "normalizedZoom";
 };
-export declare type Zoom = Readonly<{
+export type Zoom = Readonly<{
     value: NormalizedZoomValue;
 }>;
-export declare type PointerCoords = Readonly<{
+export type PointerCoords = Readonly<{
     x: number;
     y: number;
 }>;
-export declare type Gesture = {
+export type Gesture = {
     pointers: Map<number, PointerCoords>;
     lastCenter: {
         x: number;
@@ -209,11 +262,11 @@ export declare class GestureEvent extends UIEvent {
     readonly scale: number;
 }
 /** @deprecated legacy: do not use outside of migration paths */
-export declare type LibraryItem_v1 = readonly NonDeleted<ExcalidrawElement>[];
+export type LibraryItem_v1 = readonly NonDeleted<ExcalidrawElement>[];
 /** @deprecated legacy: do not use outside of migration paths */
-declare type LibraryItems_v1 = readonly LibraryItem_v1[];
+type LibraryItems_v1 = readonly LibraryItem_v1[];
 /** v2 library item */
-export declare type LibraryItem = {
+export type LibraryItem = {
     id: string;
     status: "published" | "unpublished";
     elements: readonly NonDeleted<ExcalidrawElement>[];
@@ -222,14 +275,14 @@ export declare type LibraryItem = {
     name?: string;
     error?: string;
 };
-export declare type LibraryItems = readonly LibraryItem[];
-export declare type LibraryItems_anyVersion = LibraryItems | LibraryItems_v1;
-export declare type LibraryItemsSource = ((currentLibraryItems: LibraryItems) => Blob | LibraryItems_anyVersion | Promise<LibraryItems_anyVersion | Blob>) | Blob | LibraryItems_anyVersion | Promise<LibraryItems_anyVersion | Blob>;
-export declare type ExcalidrawAPIRefValue = ExcalidrawImperativeAPI | {
+export type LibraryItems = readonly LibraryItem[];
+export type LibraryItems_anyVersion = LibraryItems | LibraryItems_v1;
+export type LibraryItemsSource = ((currentLibraryItems: LibraryItems) => Blob | LibraryItems_anyVersion | Promise<LibraryItems_anyVersion | Blob>) | Blob | LibraryItems_anyVersion | Promise<LibraryItems_anyVersion | Blob>;
+export type ExcalidrawAPIRefValue = ExcalidrawImperativeAPI | {
     readyPromise?: ResolvablePromise<ExcalidrawImperativeAPI>;
     ready?: false;
 };
-export declare type ExcalidrawInitialDataState = Merge<ImportedDataState, {
+export type ExcalidrawInitialDataState = Merge<ImportedDataState, {
     libraryItems?: Required<ImportedDataState>["libraryItems"] | Promise<Required<ImportedDataState>["libraryItems"]>;
 }>;
 export interface ExcalidrawProps {
@@ -267,8 +320,10 @@ export interface ExcalidrawProps {
     onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
     onScrollChange?: (scrollX: number, scrollY: number) => void;
     children?: React.ReactNode;
+    validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined);
+    renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
 }
-export declare type SceneData = {
+export type SceneData = {
     elements?: ImportedDataState["elements"];
     appState?: ImportedDataState["appState"];
     collaborators?: Map<string, Collaborator>;
@@ -279,12 +334,12 @@ export declare enum UserIdleState {
     AWAY = "away",
     IDLE = "idle"
 }
-export declare type ExportOpts = {
+export type ExportOpts = {
     saveFileToDisk?: boolean;
-    onExportToBackend?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: UIAppState, files: BinaryFiles, canvas: HTMLCanvasElement | null) => void;
-    renderCustomUI?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: UIAppState, files: BinaryFiles, canvas: HTMLCanvasElement | null) => JSX.Element;
+    onExportToBackend?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: UIAppState, files: BinaryFiles, canvas: HTMLCanvasElement) => void;
+    renderCustomUI?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: UIAppState, files: BinaryFiles, canvas: HTMLCanvasElement) => JSX.Element;
 };
-declare type CanvasActions = Partial<{
+type CanvasActions = Partial<{
     changeViewBackgroundColor: boolean;
     clearCanvas: boolean;
     export: false | ExportOpts;
@@ -293,13 +348,13 @@ declare type CanvasActions = Partial<{
     toggleTheme: boolean | null;
     saveAsImage: boolean;
 }>;
-declare type UIOptions = Partial<{
+type UIOptions = Partial<{
     dockedSidebarBreakpoint: number;
     canvasActions: CanvasActions;
     /** @deprecated does nothing. Will be removed in 0.15 */
     welcomeScreen?: boolean;
 }>;
-export declare type AppProps = Merge<ExcalidrawProps, {
+export type AppProps = Merge<ExcalidrawProps, {
     UIOptions: Merge<UIOptions, {
         canvasActions: Required<CanvasActions> & {
             export: ExportOpts;
@@ -312,9 +367,10 @@ export declare type AppProps = Merge<ExcalidrawProps, {
 }>;
 /** A subset of App class properties that we need to use elsewhere
  * in the app, eg Manager. Factored out into a separate type to keep DRY. */
-export declare type AppClassProperties = {
+export type AppClassProperties = {
     props: AppProps;
-    canvas: HTMLCanvasElement | null;
+    canvas: HTMLCanvasElement;
+    interactiveCanvas: HTMLCanvasElement | null;
     focusContainer(): void;
     library: Library;
     imageCache: Map<FileId, {
@@ -328,8 +384,9 @@ export declare type AppClassProperties = {
     id: App["id"];
     onInsertElements: App["onInsertElements"];
     onExportImage: App["onExportImage"];
+    lastViewportPosition: App["lastViewportPosition"];
 };
-export declare type PointerDownState = Readonly<{
+export type PointerDownState = Readonly<{
     origin: Readonly<{
         x: number;
         y: number;
@@ -388,7 +445,7 @@ export declare type PointerDownState = Readonly<{
         };
     };
 }>;
-export declare type ExcalidrawImperativeAPI = {
+export type ExcalidrawImperativeAPI = {
     updateScene: InstanceType<typeof App>["updateScene"];
     updateLibrary: InstanceType<typeof Library>["updateLibrary"];
     resetScene: InstanceType<typeof App>["resetScene"];
@@ -410,11 +467,32 @@ export declare type ExcalidrawImperativeAPI = {
     setCursor: InstanceType<typeof App>["setCursor"];
     resetCursor: InstanceType<typeof App>["resetCursor"];
     toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
+    /**
+     * Disables rendering of frames (including element clipping), but currently
+     * the frames are still interactive in edit mode. As such, this API should be
+     * used in conjunction with view mode (props.viewModeEnabled).
+     */
+    updateFrameRendering: InstanceType<typeof App>["updateFrameRendering"];
 };
-export declare type Device = Readonly<{
+export type Device = Readonly<{
     isSmScreen: boolean;
     isMobile: boolean;
     isTouchScreen: boolean;
     canDeviceFitSidebar: boolean;
+    isLandscape: boolean;
 }>;
+type FrameNameBounds = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    angle: number;
+};
+export type FrameNameBoundsCache = {
+    get: (frameElement: ExcalidrawFrameElement) => FrameNameBounds | null;
+    _cache: Map<string, FrameNameBounds & {
+        zoom: AppState["zoom"]["value"];
+        versionNonce: ExcalidrawFrameElement["versionNonce"];
+    }>;
+};
 export {};

package/types/utility-types.d.ts

@@ -1,22 +1,24 @@
-/// <reference types="react" />
-export declare type Mutable<T> = {
+export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
-export declare type ValueOf<T> = T[keyof T];
-export declare type Merge<M, N> = Omit<M, keyof N> & N;
+export type ValueOf<T> = T[keyof T];
+export type Merge<M, N> = Omit<M, keyof N> & N;
 /** utility type to assert that the second type is a subtype of the first type.
  * Returns the subtype. */
-export declare type SubtypeOf<Supertype, Subtype extends Supertype> = Subtype;
-export declare type ResolutionType<T extends (...args: any) => any> = T extends (...args: any) => Promise<infer R> ? R : any;
-export declare type MarkOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-export declare type MarkRequired<T, RK extends keyof T> = Exclude<T, RK> & Required<Pick<T, RK>>;
-export declare type MarkNonNullable<T, K extends keyof T> = {
+export type SubtypeOf<Supertype, Subtype extends Supertype> = Subtype;
+export type ResolutionType<T extends (...args: any) => any> = T extends (...args: any) => Promise<infer R> ? R : any;
+export type MarkOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type MarkRequired<T, RK extends keyof T> = Exclude<T, RK> & Required<Pick<T, RK>>;
+export type MarkNonNullable<T, K extends keyof T> = {
     [P in K]-?: P extends K ? NonNullable<T[P]> : T[P];
 } & {
     [P in keyof T]: T[P];
 };
-export declare type NonOptional<T> = Exclude<T, undefined>;
-export declare type SignatureType<T> = T extends (...args: infer R) => any ? R : never;
-export declare type CallableType<T extends (...args: any[]) => any> = (...args: SignatureType<T>) => ReturnType<T>;
-export declare type ForwardRef<T, P = any> = Parameters<CallableType<React.ForwardRefRenderFunction<T, P>>>[1];
-export declare type ExtractSetType<T extends Set<any>> = T extends Set<infer U> ? U : never;
+export type NonOptional<T> = Exclude<T, undefined>;
+export type SignatureType<T> = T extends (...args: infer R) => any ? R : never;
+export type CallableType<T extends (...args: any[]) => any> = (...args: SignatureType<T>) => ReturnType<T>;
+export type ForwardRef<T, P = any> = Parameters<CallableType<React.ForwardRefRenderFunction<T, P>>>[1];
+export type ExtractSetType<T extends Set<any>> = T extends Set<infer U> ? U : never;
+export type SameType<T, U> = T extends U ? (U extends T ? true : false) : false;
+export type Assert<T extends true> = T;
+export type NestedKeyOf<T, K = keyof T> = K extends keyof T & (string | number) ? `${K}` | (T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : never) : never;

package/types/utils.d.ts

@@ -1,13 +1,14 @@
 import { EVENT } from "./constants";
-import { FontFamilyValues, FontString } from "./element/types";
+import { FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./element/types";
 import { AppState, LastActiveTool, Zoom } from "./types";
 import { SHAPES } from "./shapes";
 export declare const setDateTimeForTests: (dateTime: string) => void;
 export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
 export declare const isToolIcon: (target: Element | EventTarget | null) => target is HTMLElement;
-export declare const isInputLike: (target: Element | EventTarget | null) => target is HTMLBRElement | HTMLDivElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-export declare const isWritableElement: (target: Element | EventTarget | null) => target is HTMLBRElement | HTMLDivElement | HTMLInputElement | HTMLTextAreaElement;
+export declare const isInputLike: (target: Element | EventTarget | null) => target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLBRElement | HTMLDivElement;
+export declare const isInteractive: (target: Element | EventTarget | null) => boolean;
+export declare const isWritableElement: (target: Element | EventTarget | null) => target is HTMLInputElement | HTMLTextAreaElement | HTMLBRElement | HTMLDivElement;
 export declare const getFontFamilyString: ({ fontFamily, }: {
     fontFamily: FontFamilyValues;
 }) => string;
@@ -29,41 +30,68 @@ export declare const throttleRAF: <T extends any[]>(fn: (...args: T) => void, op
     cancel(): void;
 };
 /**
- * Compute new values based on the same ease function and trigger the
- * callback through a requestAnimationFrame call
+ * Exponential ease-out method
  *
- * use `opts` to define a duration and/or an easeFn
+ * @param {number} k - The value to be tweened.
+ * @returns {number} The tweened value.
+ */
+export declare const easeOut: (k: number) => number;
+/**
+ * Animates values from `fromValues` to `toValues` using the requestAnimationFrame API.
+ * Executes the `onStep` callback on each step with the interpolated values.
+ * Returns a function that can be called to cancel the animation.
+ *
+ * @example
+ * // Example usage:
+ * const fromValues = { x: 0, y: 0 };
+ * const toValues = { x: 100, y: 200 };
+ * const onStep = ({x, y}) => {
+ *   setState(x, y)
+ * };
+ * const onCancel = () => {
+ *   console.log("Animation canceled");
+ * };
  *
- * for example:
- * ```ts
- * easeToValuesRAF([10, 20, 10], [0, 0, 0], (a, b, c) => setState(a,b, c))
- * ```
+ * const cancelAnimation = easeToValuesRAF({
+ *   fromValues,
+ *   toValues,
+ *   onStep,
+ *   onCancel,
+ * });
  *
- * @param fromValues The initial values, must be numeric
- * @param toValues The destination values, must also be numeric
- * @param callback The callback receiving the values
- * @param opts default to 250ms duration and the easeOut function
+ * // To cancel the animation:
+ * cancelAnimation();
  */
-export declare const easeToValuesRAF: (fromValues: number[], toValues: number[], callback: (...values: number[]) => void, opts?: {
+export declare const easeToValuesRAF: <T extends Record<keyof T, number>, K extends keyof T>({ fromValues, toValues, onStep, duration, interpolateValue, onStart, onEnd, onCancel, }: {
+    fromValues: T;
+    toValues: T;
+    /**
+     * Interpolate a single value.
+     * Return undefined to be handled by the default interpolator.
+     */
+    interpolateValue?: ((fromValue: number, toValue: number, progress: number, key: K) => number | undefined) | undefined;
+    onStep: (values: T) => void;
     duration?: number | undefined;
-    easeFn?: ((value: number) => number) | undefined;
-} | undefined) => () => void;
+    onStart?: (() => void) | undefined;
+    onEnd?: (() => void) | undefined;
+    onCancel?: (() => void) | undefined;
+}) => () => void;
 export declare const chunk: <T extends unknown>(array: readonly T[], size: number) => T[][];
 export declare const selectNode: (node: Element) => void;
 export declare const removeSelection: () => void;
 export declare const distance: (x: number, y: number) => number;
 export declare const updateActiveTool: (appState: Pick<AppState, "activeTool">, data: ({
-    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand";
+    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
 } | {
     type: "custom";
     customType: string;
 }) & {
     lastActiveToolBeforeEraser?: LastActiveTool;
 }) => AppState["activeTool"];
-export declare const resetCursor: (canvas: HTMLCanvasElement | null) => void;
-export declare const setCursor: (canvas: HTMLCanvasElement | null, cursor: string) => void;
-export declare const setEraserCursor: (canvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;
-export declare const setCursorForShape: (canvas: HTMLCanvasElement | null, appState: Pick<AppState, "activeTool" | "theme">) => void;
+export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
+export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;
+export declare const setEraserCursor: (interactiveCanvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;
+export declare const setCursorForShape: (interactiveCanvas: HTMLCanvasElement | null, appState: Pick<AppState, "activeTool" | "theme">) => void;
 export declare const isFullScreen: () => boolean;
 export declare const allowFullScreen: () => Promise<void>;
 export declare const exitFullScreen: () => Promise<void>;
@@ -111,7 +139,7 @@ export declare const muteFSAbortError: (error?: Error) => void;
 export declare const findIndex: <T>(array: readonly T[], cb: (element: T, index: number, array: readonly T[]) => boolean, fromIndex?: number) => number;
 export declare const findLastIndex: <T>(array: readonly T[], cb: (element: T, index: number, array: readonly T[]) => boolean, fromIndex?: number) => number;
 export declare const isTransparent: (color: string) => boolean;
-export declare type ResolvablePromise<T> = Promise<T> & {
+export type ResolvablePromise<T> = Promise<T> & {
     resolve: [T] extends [undefined] ? (value?: T) => void : (value: T) => void;
     reject: (error: Error) => void;
 };
@@ -154,9 +182,19 @@ export declare const wrapEvent: <T extends Event>(name: EVENT, nativeEvent: T) =
 export declare const updateObject: <T extends Record<string, any>>(obj: T, updates: Partial<T>) => T;
 export declare const isPrimitive: (val: any) => boolean;
 export declare const getFrame: () => "top" | "iframe";
+export declare const isRunningInIframe: () => boolean;
 export declare const isPromiseLike: (value: any) => value is Promise<any>;
 export declare const queryFocusableElements: (container: HTMLElement | null) => HTMLElement[];
 export declare const isShallowEqual: <T extends Record<string, any>, I extends keyof T>(objA: T, objB: T, comparators?: Record<I, (a: T[I], b: T[I]) => boolean> | undefined, debug?: boolean) => boolean;
 export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
     checkForDefaultPrevented?: boolean | undefined;
 }) => (event: E) => void;
+export declare const isOnlyExportingSingleFrame: (elements: readonly NonDeletedExcalidrawElement[]) => boolean;
+export declare const assertNever: (value: never, message: string, softAssert?: boolean) => never;
+/**
+ * Memoizes on values of `opts` object (strict equality).
+ */
+export declare const memoize: <T extends Record<string, any>, R extends unknown>(func: (opts: T) => R) => ((opts: T) => R) & {
+    clear: () => void;
+};
+export declare const isRenderThrottlingEnabled: () => boolean;