@excalidraw/excalidraw 0.15.2-d353867 → 0.15.2-eb020d0

package/types/renderer/renderElement.d.ts

@@ -1,36 +1,25 @@
 import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement } from "../element/types";
-import { RoughCanvas } from "roughjs/bin/canvas";
-import { Drawable, Options } from "roughjs/bin/core";
-import { RoughSVG } from "roughjs/bin/svg";
-import { RenderConfig } from "../scene/types";
-import { AppState, BinaryFiles } from "../types";
+import type { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughSVG } from "roughjs/bin/svg";
+import { StaticCanvasRenderConfig } from "../scene/types";
+import { AppState, StaticCanvasAppState, BinaryFiles, InteractiveCanvasAppState } from "../types";
 export interface ExcalidrawElementWithCanvas {
     element: ExcalidrawElement | ExcalidrawTextElement;
     canvas: HTMLCanvasElement;
-    theme: RenderConfig["theme"];
+    theme: AppState["theme"];
     scale: number;
-    zoomValue: RenderConfig["zoom"]["value"];
+    zoomValue: AppState["zoom"]["value"];
     canvasOffsetX: number;
     canvasOffsetY: number;
     boundTextElementVersion: number | null;
+    containingFrameOpacity: number;
 }
 export declare const DEFAULT_LINK_SIZE = 14;
-declare type ElementShape = Drawable | Drawable[] | null;
-declare type ElementShapes = {
-    freedraw: Drawable | null;
-    arrow: Drawable[];
-    line: Drawable[];
-    text: null;
-    image: null;
-};
-export declare const getShapeForElement: <T extends ExcalidrawElement>(element: T) => T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] | undefined : Drawable | null | undefined;
-export declare const setShapeForElement: <T extends ExcalidrawElement>(element: T, shape: T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable) => WeakMap<ExcalidrawElement, ElementShape>;
-export declare const invalidateShapeForElement: (element: ExcalidrawElement) => boolean;
-export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
-export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: RenderConfig, appState: AppState) => void;
-export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, exportWithDarkMode?: boolean) => void;
+export declare const elementWithCanvasCache: WeakMap<ExcalidrawElement, ExcalidrawElementWithCanvas>;
+export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;
+export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState) => void;
+export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, exportWithDarkMode?: boolean, exportingFrameId?: string | null, renderEmbeddables?: boolean) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
 export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;
 export declare function getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement): string;
-export {};

package/types/renderer/renderScene.d.ts

@@ -1,41 +1,31 @@
-import { RoughCanvas } from "roughjs/bin/canvas";
 import { RoughSVG } from "roughjs/bin/svg";
-import { AppState, BinaryFiles } from "../types";
+import { BinaryFiles } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { RenderConfig } from "../scene/types";
+import { InteractiveSceneRenderConfig, StaticSceneRenderConfig } from "../scene/types";
+import "canvas-roundrect-polyfill";
 export declare const DEFAULT_SPACING = 2;
-export declare const _renderScene: ({ elements, appState, scale, rc, canvas, renderConfig, }: {
-    elements: readonly NonDeletedExcalidrawElement[];
-    appState: AppState;
-    scale: number;
-    rc: RoughCanvas;
-    canvas: HTMLCanvasElement;
-    renderConfig: RenderConfig;
-}) => {
+/**
+ * Interactive scene is the ui-canvas where we render boundinb boxes, selections
+ * and other ui stuff.
+ */
+export declare const renderInteractiveScene: <U extends ({ canvas, elements, visibleElements, selectedElements, scale, appState, renderConfig, }: InteractiveSceneRenderConfig) => {
     atLeastOneVisibleElement: boolean;
-    scrollBars?: undefined;
-} | {
-    atLeastOneVisibleElement: boolean;
-    scrollBars: import("../scene/types").ScrollBars | undefined;
-};
-/** renderScene throttled to animation framerate */
-export declare const renderScene: <T extends boolean = false>(config: {
     elements: readonly NonDeletedExcalidrawElement[];
-    appState: AppState;
-    scale: number;
-    rc: RoughCanvas;
-    canvas: HTMLCanvasElement;
-    renderConfig: RenderConfig;
-    callback?: ((data: ReturnType<typeof _renderScene>) => void) | undefined;
-}, throttle?: T | undefined) => T extends true ? void : {
-    atLeastOneVisibleElement: boolean;
     scrollBars?: undefined;
 } | {
-    atLeastOneVisibleElement: boolean;
     scrollBars: import("../scene/types").ScrollBars | undefined;
-};
-export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, }?: {
+    atLeastOneVisibleElement: boolean;
+    elements: readonly NonDeletedExcalidrawElement[];
+}, T extends boolean = false>(renderConfig: InteractiveSceneRenderConfig, throttle?: T | undefined) => T extends true ? void : ReturnType<U>;
+/**
+ * Static scene is the non-ui canvas where we render elements.
+ */
+export declare const renderStaticScene: (renderConfig: StaticSceneRenderConfig, throttle?: boolean) => void;
+export declare const cancelRender: () => void;
+export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, exportingFrameId, renderEmbeddables, }?: {
     offsetX?: number | undefined;
     offsetY?: number | undefined;
     exportWithDarkMode?: boolean | undefined;
+    exportingFrameId?: string | null | undefined;
+    renderEmbeddables?: boolean | undefined;
 }) => void;

package/types/renderer/roundRect.d.ts

@@ -8,4 +8,4 @@
  * @param {Number} height The height of the rectangle
  * @param {Number} radius The corner radius
  */
-export declare const roundRect: (context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) => void;
+export declare const roundRect: (context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number, strokeColor?: string) => void;

package/types/scene/Renderer.d.ts

@@ -0,0 +1,25 @@
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import Scene from "./Scene";
+export declare class Renderer {
+    private scene;
+    constructor(scene: Scene);
+    getRenderableElements: ((opts: {
+        zoom: AppState["zoom"];
+        offsetLeft: AppState["offsetLeft"];
+        offsetTop: AppState["offsetTop"];
+        scrollX: AppState["scrollX"];
+        scrollY: AppState["scrollY"];
+        height: AppState["height"];
+        width: AppState["width"];
+        editingElement: AppState["editingElement"];
+        pendingImageElementId: AppState["pendingImageElementId"];
+        versionNonce: ReturnType<InstanceType<typeof Scene>["getVersionNonce"]>;
+    }) => {
+        canvasElements: NonDeletedExcalidrawElement[];
+        visibleElements: readonly NonDeletedExcalidrawElement[];
+    }) & {
+        clear: () => void;
+    };
+    destroy(): void;
+}

package/types/scene/Scene.d.ts

@@ -1,9 +1,11 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "../element/types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameElement } from "../element/types";
 import { LinearElementEditor } from "../element/linearElementEditor";
-declare type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
-declare type ElementKey = ExcalidrawElement | ElementIdKey;
-declare type SceneStateCallback = () => void;
-declare type SceneStateCallbackRemover = () => void;
+import { AppState } from "../types";
+type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
+type ElementKey = ExcalidrawElement | ElementIdKey;
+type SceneStateCallback = () => void;
+type SceneStateCallbackRemover = () => void;
+export type ExcalidrawElementsIncludingDeleted = readonly ExcalidrawElement[];
 declare class Scene {
     private static sceneMapByElement;
     private static sceneMapById;
@@ -12,10 +14,28 @@ declare class Scene {
     private callbacks;
     private nonDeletedElements;
     private elements;
+    private nonDeletedFrames;
+    private frames;
     private elementsMap;
+    private selectedElementsCache;
+    private versionNonce;
     getElementsIncludingDeleted(): readonly ExcalidrawElement[];
     getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
+    getFramesIncludingDeleted(): readonly ExcalidrawFrameElement[];
+    getSelectedElements(opts: {
+        selectedElementIds: AppState["selectedElementIds"];
+        /**
+         * for specific cases where you need to use elements not from current
+         * scene state. This in effect will likely result in cache-miss, and
+         * the cache won't be updated in this case.
+         */
+        elements?: readonly ExcalidrawElement[];
+        includeBoundTextElement?: boolean;
+        includeElementsInFrames?: boolean;
+    }): NonDeleted<ExcalidrawElement>[];
+    getNonDeletedFrames(): readonly NonDeleted<ExcalidrawFrameElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
+    getVersionNonce(): number | undefined;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;
     /**
      * A utility method to help with updating all scene elements, with the added
@@ -35,6 +55,8 @@ declare class Scene {
     addCallback(cb: SceneStateCallback): SceneStateCallbackRemover;
     destroy(): void;
     insertElementAtIndex(element: ExcalidrawElement, index: number): void;
+    insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;
+    addNewElement: (element: ExcalidrawElement) => void;
     getElementIndex(elementId: string): number;
 }
 export default Scene;

package/types/scene/Shape.d.ts

@@ -0,0 +1,12 @@
+import type { Drawable, Options } from "roughjs/bin/core";
+import type { RoughGenerator } from "roughjs/bin/generator";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement, ExcalidrawSelectionElement } from "../element/types";
+export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
+/**
+ * Generates the roughjs shape for given element.
+ *
+ * Low-level. Use `ShapeCache.generateElementShape` instead.
+ *
+ * @private
+ */
+export declare const _generateElementShape: (element: Exclude<NonDeletedExcalidrawElement, ExcalidrawSelectionElement>, generator: RoughGenerator, isExporting?: boolean) => Drawable | Drawable[] | null;

package/types/scene/ShapeCache.d.ts

@@ -0,0 +1,20 @@
+import { Drawable } from "roughjs/bin/core";
+import { ExcalidrawElement } from "../element/types";
+import { ElementShape, ElementShapes } from "./types";
+export declare class ShapeCache {
+    private static rg;
+    private static cache;
+    /**
+     * Retrieves shape from cache if available. Use this only if shape
+     * is optional and you have a fallback in case it's not cached.
+     */
+    static get: <T extends ExcalidrawElement>(element: T) => T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] | undefined : ElementShape | undefined;
+    static set: <T extends ExcalidrawElement>(element: T, shape: T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable) => WeakMap<ExcalidrawElement, ElementShape>;
+    static delete: (element: ExcalidrawElement) => boolean;
+    static destroy: () => void;
+    /**
+     * Generates & caches shape for element if not already cached, otherwise
+     * returns cached shape.
+     */
+    static generateElementShape: <T extends import("../element/types").ExcalidrawLinearElement | import("../element/types").ExcalidrawRectangleElement | import("../element/types").ExcalidrawDiamondElement | import("../element/types").ExcalidrawEllipseElement | import("../element/types").ExcalidrawEmbeddableElement | import("../element/types").ExcalidrawImageElement | import("../element/types").ExcalidrawFrameElement | import("../element/types").ExcalidrawTextElement | import("../element/types").ExcalidrawFreeDrawElement>(element: T, isExporting?: boolean) => ((T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] | undefined : ElementShape | undefined) & ({} | null)) | (T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable | null);
+}

package/types/scene/export.d.ts

@@ -17,7 +17,9 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     viewBackgroundColor: string;
     exportWithDarkMode?: boolean;
     exportEmbedScene?: boolean;
+    renderFrame?: boolean;
 }, files: BinaryFiles | null, opts?: {
     serializeAsJSON?: () => string;
+    renderEmbeddables?: boolean;
 }) => Promise<SVGSVGElement>;
 export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], exportPadding: number, scale: number) => [number, number];

package/types/scene/scroll.d.ts

@@ -11,7 +11,7 @@ export declare const centerScrollOn: ({ scenePoint, viewportDimensions, zoom, }:
     scrollX: number;
     scrollY: number;
 };
-export declare const calculateScrollCenter: (elements: readonly ExcalidrawElement[], appState: AppState, canvas: HTMLCanvasElement | null) => {
+export declare const calculateScrollCenter: (elements: readonly ExcalidrawElement[], appState: AppState) => {
     scrollX: number;
     scrollY: number;
 };

package/types/scene/scrollbars.d.ts

@@ -1,14 +1,10 @@
 import { ExcalidrawElement } from "../element/types";
-import { Zoom } from "../types";
+import { InteractiveCanvasAppState } from "../types";
 import { ScrollBars } from "./types";
 export declare const SCROLLBAR_MARGIN = 4;
 export declare const SCROLLBAR_WIDTH = 6;
 export declare const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
-export declare const getScrollBars: (elements: readonly ExcalidrawElement[], viewportWidth: number, viewportHeight: number, { scrollX, scrollY, zoom, }: {
-    scrollX: number;
-    scrollY: number;
-    zoom: Zoom;
-}) => ScrollBars;
+export declare const getScrollBars: (elements: readonly ExcalidrawElement[], viewportWidth: number, viewportHeight: number, appState: InteractiveCanvasAppState) => ScrollBars;
 export declare const isOverScrollBars: (scrollBars: ScrollBars, x: number, y: number) => {
     isOverEither: boolean;
     isOverHorizontal: boolean;

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: AppState) => 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: AppState, getAttribute: (element: ExcalidrawElement) => T) => T | null;
-export declare const getSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, includeBoundTextElement?: boolean) => NonDeletedExcalidrawElement[];
-export declare const getTargetElements: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => NonDeletedExcalidrawElement[];
+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<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;
+};