@excalidraw/excalidraw 0.15.2-3ddcc48 → 0.15.2-5302490

package/types/scene/types.d.ts

@@ -1,39 +1,59 @@
-import { ExcalidrawTextElement } from "../element/types";
-import { AppClassProperties, AppState } from "../types";
-export 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 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;
@@ -57,3 +77,16 @@ export 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, ExcalidrawFrameElement } 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";
@@ -57,7 +57,7 @@ export type BinaryFileData = {
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
 export type LastActiveTool = {
-    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
+    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
     customType: null;
 } | {
     type: "custom";
@@ -65,6 +65,45 @@ export type LastActiveTool = {
 } | null;
 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;
@@ -74,6 +113,10 @@ export 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;
@@ -82,7 +125,12 @@ export type AppState = {
     startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
     suggestedBindings: SuggestedBinding[];
     frameToHighlight: NonDeleted<ExcalidrawFrameElement> | null;
-    shouldRenderFrames: boolean;
+    frameRendering: {
+        enabled: boolean;
+        name: boolean;
+        outline: boolean;
+        clip: boolean;
+    };
     editingFrame: string | null;
     elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
     editingElement: NonDeletedExcalidrawElement | null;
@@ -95,7 +143,7 @@ export type AppState = {
         lastActiveTool: LastActiveTool;
         locked: boolean;
     } & ({
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
+        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
         customType: null;
     } | {
         type: "custom";
@@ -145,11 +193,11 @@ export 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;
@@ -272,6 +320,8 @@ 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 type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -286,8 +336,8 @@ export declare enum UserIdleState {
 }
 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;
 };
 type CanvasActions = Partial<{
     changeViewBackgroundColor: boolean;
@@ -319,7 +369,8 @@ export type AppProps = Merge<ExcalidrawProps, {
  * in the app, eg Manager. Factored out into a separate type to keep DRY. */
 export type AppClassProperties = {
     props: AppProps;
-    canvas: HTMLCanvasElement | null;
+    canvas: HTMLCanvasElement;
+    interactiveCanvas: HTMLCanvasElement | null;
     focusContainer(): void;
     library: Library;
     imageCache: Map<FileId, {
@@ -421,7 +472,7 @@ export type ExcalidrawImperativeAPI = {
      * the frames are still interactive in edit mode. As such, this API should be
      * used in conjunction with view mode (props.viewModeEnabled).
      */
-    toggleFrameRendering: InstanceType<typeof App>["toggleFrameRendering"];
+    updateFrameRendering: InstanceType<typeof App>["updateFrameRendering"];
 };
 export type Device = Readonly<{
     isSmScreen: boolean;

package/types/utility-types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
@@ -20,3 +19,6 @@ 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

@@ -81,17 +81,17 @@ export declare const selectNode: (node: Element) => void;
 export declare const removeSelection: () => void;
 export declare const distance: (x: number, y: number) => number;
 export declare const updateActiveTool: (appState: Pick<AppState, "activeTool">, data: ({
-    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame";
+    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>;
@@ -190,3 +190,11 @@ export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E
     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;