@excalidraw/excalidraw 0.15.2-6546-3398d86 → 0.15.2-6920-554913c

package/types/components/App.d.ts

@@ -8,6 +8,7 @@ import History from "../history";
 import Scene from "../scene/Scene";
 import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
+import { Renderer } from "../scene/Renderer";
 export declare const ExcalidrawContainerContext: React.Context<{
     container: HTMLDivElement | null;
     id: string | null;
@@ -31,7 +32,8 @@ export declare const useExcalidrawSetAppState: () => <K extends keyof AppState>(
 export declare const useExcalidrawActionManager: () => ActionManager;
 declare class App extends React.Component<AppProps, AppState> {
     canvas: AppClassProperties["canvas"];
-    rc: RoughCanvas | null;
+    interactiveCanvas: AppClassProperties["interactiveCanvas"];
+    rc: RoughCanvas;
     unmounted: boolean;
     actionManager: ActionManager;
     device: Device;
@@ -39,6 +41,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private excalidrawContainerRef;
     static defaultProps: Partial<AppProps>;
     scene: Scene;
+    renderer: Renderer;
     private fonts;
     private resizeObserver;
     private nearestScrollableContainer;
@@ -58,7 +61,6 @@ declare class App extends React.Component<AppProps, AppState> {
         y: number;
     };
     constructor(props: AppProps);
-    private renderCanvas;
     private onWindowMessage;
     private updateEmbeddableRef;
     private getHTMLIFrameElement;
@@ -94,15 +96,15 @@ declare class App extends React.Component<AppProps, AppState> {
     private removeEventListeners;
     private addEventListeners;
     componentDidUpdate(prevProps: AppProps, prevState: AppState): void;
-    private renderScene;
+    private renderInteractiveSceneCallback;
     private onScroll;
     private onCut;
     private onCopy;
     private cutAll;
     private copyAll;
     private static resetTapTwice;
-    private onTapStart;
-    private onTapEnd;
+    private onTouchStart;
+    private onTouchEnd;
     pasteFromClipboard: (event: ClipboardEvent | null) => Promise<void>;
     private addElementsFromPasteOrLibrary;
     private addTextFromPaste;
@@ -246,7 +248,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private maybeSuggestBindingsForLinearElementAtCoords;
     private maybeSuggestBindingForAll;
     private clearSelection;
-    private handleCanvasRef;
+    private handleInteractiveCanvasRef;
     private handleAppOnDrop;
     loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
     private handleCanvasContextMenu;

package/types/components/JSONExportDialog.d.ts

@@ -10,6 +10,6 @@ export declare const JSONExportDialog: ({ elements, appState, files, actionManag
     files: BinaryFiles;
     actionManager: ActionManager;
     exportOpts: ExportOpts;
-    canvas: HTMLCanvasElement | null;
+    canvas: HTMLCanvasElement;
     setAppState: React.Component<any, UIAppState>["setState"];
 }) => JSX.Element;

package/types/components/LayerUI.d.ts

@@ -9,7 +9,8 @@ interface LayerUIProps {
     actionManager: ActionManager;
     appState: UIAppState;
     files: BinaryFiles;
-    canvas: HTMLCanvasElement | null;
+    canvas: HTMLCanvasElement;
+    interactiveCanvas: HTMLCanvasElement | null;
     setAppState: React.Component<any, AppState>["setState"];
     elements: readonly NonDeletedExcalidrawElement[];
     onLockToggle: () => void;
@@ -28,5 +29,5 @@ interface LayerUIProps {
     children?: React.ReactNode;
     app: AppClassProperties;
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onImageAction, onExportImage, renderWelcomeScreen, children, app, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, interactiveCanvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onImageAction, onExportImage, renderWelcomeScreen, children, app, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/MermaidToExcalidraw.d.ts

@@ -0,0 +1,8 @@
+import { AppState } from "../types";
+import "./MermaidToExcalidraw.scss";
+import { NonDeletedExcalidrawElement } from "../element/types";
+declare const MermaidToExcalidraw: ({ appState, elements, }: {
+    appState: AppState;
+    elements: readonly NonDeletedExcalidrawElement[];
+}) => JSX.Element | null;
+export default MermaidToExcalidraw;

package/types/components/MobileMenu.d.ts

@@ -12,7 +12,7 @@ type MobileMenuProps = {
     onLockToggle: () => void;
     onHandToolToggle: () => void;
     onPenModeToggle: () => void;
-    canvas: HTMLCanvasElement | null;
+    interactiveCanvas: HTMLCanvasElement | null;
     onImageAction: (data: {
         insertOnCanvasDirectly: boolean;
     }) => void;
@@ -23,5 +23,5 @@ type MobileMenuProps = {
     renderWelcomeScreen: boolean;
     app: AppClassProperties;
 };
-export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onLockToggle, onHandToolToggle, onPenModeToggle, canvas, onImageAction, renderTopRightUI, renderCustomStats, renderSidebars, device, renderWelcomeScreen, app, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onLockToggle, onHandToolToggle, onPenModeToggle, interactiveCanvas, onImageAction, renderTopRightUI, renderCustomStats, renderSidebars, device, renderWelcomeScreen, app, }: MobileMenuProps) => JSX.Element;
 export {};

package/types/components/canvases/InteractiveCanvas.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { DOMAttributes } from "react";
+import type { InteractiveCanvasAppState } from "../../types";
+import type { RenderInteractiveSceneCallback } from "../../scene/types";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+type InteractiveCanvasProps = {
+    canvas: HTMLCanvasElement | null;
+    elements: readonly NonDeletedExcalidrawElement[];
+    visibleElements: readonly NonDeletedExcalidrawElement[];
+    selectedElements: readonly NonDeletedExcalidrawElement[];
+    versionNonce: number | undefined;
+    selectionNonce: number | undefined;
+    scale: number;
+    appState: InteractiveCanvasAppState;
+    renderInteractiveSceneCallback: (data: RenderInteractiveSceneCallback) => void;
+    handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
+    onContextMenu: Exclude<DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"], undefined>;
+    onPointerMove: Exclude<DOMAttributes<HTMLCanvasElement>["onPointerMove"], undefined>;
+    onPointerUp: Exclude<DOMAttributes<HTMLCanvasElement>["onPointerUp"], undefined>;
+    onPointerCancel: Exclude<DOMAttributes<HTMLCanvasElement>["onPointerCancel"], undefined>;
+    onTouchMove: Exclude<DOMAttributes<HTMLCanvasElement>["onTouchMove"], undefined>;
+    onPointerDown: Exclude<DOMAttributes<HTMLCanvasElement>["onPointerDown"], undefined>;
+    onDoubleClick: Exclude<DOMAttributes<HTMLCanvasElement>["onDoubleClick"], undefined>;
+};
+declare const _default: React.MemoExoticComponent<(props: InteractiveCanvasProps) => JSX.Element>;
+export default _default;

package/types/components/canvases/StaticCanvas.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import type { StaticCanvasAppState } from "../../types";
+import type { StaticCanvasRenderConfig } from "../../scene/types";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+type StaticCanvasProps = {
+    canvas: HTMLCanvasElement;
+    rc: RoughCanvas;
+    elements: readonly NonDeletedExcalidrawElement[];
+    visibleElements: readonly NonDeletedExcalidrawElement[];
+    versionNonce: number | undefined;
+    selectionNonce: number | undefined;
+    scale: number;
+    appState: StaticCanvasAppState;
+    renderConfig: StaticCanvasRenderConfig;
+};
+declare const _default: React.MemoExoticComponent<(props: StaticCanvasProps) => JSX.Element>;
+export default _default;

package/types/components/canvases/index.d.ts

@@ -0,0 +1,3 @@
+import InteractiveCanvas from "./InteractiveCanvas";
+import StaticCanvas from "./StaticCanvas";
+export { InteractiveCanvas, StaticCanvas };

package/types/element/Hyperlink.d.ts

@@ -54,7 +54,7 @@ export declare const actionLink: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand" | "mermaid";
                 customType: null;
             } | {
                 type: "custom";
@@ -151,7 +151,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.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
-export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: UIAppState) => [x: number, y: number, width: number, height: number];
+export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: Pick<UIAppState, "zoom">) => [x: number, y: number, width: number, height: number];
 export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number]) => boolean;
 export declare const isPointHittingLink: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number], isMobile: boolean) => boolean;
 export declare const showHyperlinkTooltip: (element: NonDeletedExcalidrawElement, appState: AppState) => void;

package/types/element/embeddable.d.ts

@@ -28,7 +28,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand" | "mermaid";
                 customType: null;
             } | {
                 type: "custom";

package/types/element/linearElementEditor.d.ts

@@ -1,5 +1,5 @@
 import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer } from "./types";
-import { Point, AppState, PointerCoords } from "../types";
+import { Point, AppState, PointerCoords, InteractiveCanvasAppState } from "../types";
 import History from "../history";
 import Scene from "../scene/Scene";
 declare const editorMidPointsCache: {
@@ -52,8 +52,8 @@ export declare class LinearElementEditor {
         y: number;
     }[]) => void, linearElementEditor: LinearElementEditor): boolean;
     static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState): LinearElementEditor;
-    static getEditorMidPoints: (element: NonDeleted<ExcalidrawLinearElement>, appState: AppState) => (typeof editorMidPointsCache)["points"];
-    static updateEditorMidPointsCache: (element: NonDeleted<ExcalidrawLinearElement>, appState: AppState) => void;
+    static getEditorMidPoints: (element: NonDeleted<ExcalidrawLinearElement>, appState: InteractiveCanvasAppState) => (typeof editorMidPointsCache)["points"];
+    static updateEditorMidPointsCache: (element: NonDeleted<ExcalidrawLinearElement>, appState: InteractiveCanvasAppState) => void;
     static getSegmentMidpointHitCoords: (linearElementEditor: LinearElementEditor, scenePointer: {
         x: number;
         y: number;
@@ -155,7 +155,7 @@ export declare class LinearElementEditor {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand" | "mermaid";
                 customType: null;
             } | {
                 type: "custom";
@@ -179,7 +179,7 @@ export declare class LinearElementEditor {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("./types").Arrowhead | null;
             currentItemEndArrowhead: import("./types").Arrowhead | null;
-            currentItemRoundness: import("./types").StrokeRoundness; /** @returns whether point was dragged */
+            currentItemRoundness: import("./types").StrokeRoundness;
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;

package/types/element/sizeHelpers.d.ts

@@ -1,6 +1,13 @@
 import { ExcalidrawElement } from "./types";
-import { AppState } from "../types";
+import { AppState, Zoom } from "../types";
 export declare const isInvisiblySmallElement: (element: ExcalidrawElement) => boolean;
+export declare const isElementInViewport: (element: ExcalidrawElement, width: number, height: number, viewTransformations: {
+    zoom: Zoom;
+    offsetLeft: number;
+    offsetTop: number;
+    scrollX: number;
+    scrollY: number;
+}) => boolean;
 /**
  * Makes a perfect shape or diagonal/horizontal/vertical line
  */

package/types/element/textWysiwyg.d.ts

@@ -15,7 +15,7 @@ export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords,
     }) => void;
     getViewportCoords: (x: number, y: number) => [number, number];
     element: ExcalidrawTextElement;
-    canvas: HTMLCanvasElement | null;
+    canvas: HTMLCanvasElement;
     excalidrawContainer: HTMLDivElement | null;
     app: App;
 }) => void;

package/types/element/transformHandles.d.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
-import { AppState, Zoom } from "../types";
+import { InteractiveCanvasAppState, Zoom } from "../types";
 export type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
 export type TransformHandleType = TransformHandleDirection | "rotation";
 export type TransformHandle = [number, number, number, number];
@@ -32,4 +32,4 @@ export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [
     rotation?: boolean | undefined;
 }, margin?: number) => TransformHandles;
 export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, pointerType?: PointerType) => TransformHandles;
-export declare const shouldShowBoundingBox: (elements: NonDeletedExcalidrawElement[], appState: AppState) => boolean;
+export declare const shouldShowBoundingBox: (elements: readonly NonDeletedExcalidrawElement[], appState: InteractiveCanvasAppState) => boolean;

package/types/frame.d.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawElement, ExcalidrawFrameElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
-import { AppClassProperties, AppState } from "./types";
+import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 export declare const bindElementsToFramesAfterDuplication: (nextElements: ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameElement) => ExcalidrawElement[];
@@ -36,5 +36,5 @@ export declare const omitGroupsContainingFrames: (allElements: ExcalidrawElement
  * depending on the appState, return target frame, which is the frame the given element
  * is going to be added to or remove from
  */
-export declare const getTargetFrame: (element: ExcalidrawElement, appState: AppState) => ExcalidrawFrameElement | null;
-export declare const isElementInFrame: (element: ExcalidrawElement, allElements: ExcalidrawElementsIncludingDeleted, appState: AppState) => boolean;
+export declare const getTargetFrame: (element: ExcalidrawElement, appState: StaticCanvasAppState) => ExcalidrawFrameElement | null;
+export declare const isElementInFrame: (element: ExcalidrawElement, allElements: ExcalidrawElementsIncludingDeleted, appState: StaticCanvasAppState) => boolean;

package/types/groups.d.ts

@@ -1,19 +1,18 @@
 import { GroupId, ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
-import { AppClassProperties, AppState } from "./types";
-export declare const selectGroup: (groupId: GroupId, appState: AppState, elements: readonly NonDeleted<ExcalidrawElement>[]) => AppState;
+import { AppClassProperties, AppState, InteractiveCanvasAppState } from "./types";
+export declare const selectGroup: (groupId: GroupId, appState: InteractiveCanvasAppState, elements: readonly NonDeleted<ExcalidrawElement>[]) => Pick<InteractiveCanvasAppState, "selectedGroupIds" | "selectedElementIds" | "editingGroupId">;
+export declare const selectGroupsForSelectedElements: {
+    (appState: Pick<AppState, "selectedElementIds" | "editingGroupId">, elements: readonly NonDeletedExcalidrawElement[], prevAppState: InteractiveCanvasAppState, app: AppClassProperties | null): Pick<InteractiveCanvasAppState, "selectedGroupIds" | "editingGroupId" | "selectedElementIds">;
+    clearCache(): void;
+};
 /**
  * If the element's group is selected, don't render an individual
  * selection border around it.
  */
-export declare const isSelectedViaGroup: (appState: AppState, element: ExcalidrawElement) => boolean;
-export declare const getSelectedGroupForElement: (appState: AppState, element: ExcalidrawElement) => string | undefined;
-export declare const getSelectedGroupIds: (appState: AppState) => GroupId[];
-/**
- * When you select an element, you often want to actually select the whole group it's in, unless
- * you're currently editing that group.
- */
-export declare const selectGroupsForSelectedElements: (appState: AppState, elements: readonly NonDeletedExcalidrawElement[], prevAppState: AppState, app: AppClassProperties | null) => AppState;
-export declare const selectGroupsFromGivenElements: (elements: readonly NonDeleted<ExcalidrawElement>[], appState: AppState) => {
+export declare const isSelectedViaGroup: (appState: InteractiveCanvasAppState, element: ExcalidrawElement) => boolean;
+export declare const getSelectedGroupForElement: (appState: InteractiveCanvasAppState, element: ExcalidrawElement) => string | undefined;
+export declare const getSelectedGroupIds: (appState: InteractiveCanvasAppState) => GroupId[];
+export declare const selectGroupsFromGivenElements: (elements: readonly NonDeleted<ExcalidrawElement>[], appState: InteractiveCanvasAppState) => {
     [groupId: string]: boolean;
 };
 export declare const editGroupForSelectedElement: (appState: AppState, element: NonDeleted<ExcalidrawElement>) => AppState;

package/types/packages/excalidraw/webpack.dev.config.d.ts

@@ -32,6 +32,15 @@ export namespace module {
                 };
             };
         })[];
+        resolve?: undefined;
+        type?: undefined;
+    } | {
+        test: RegExp;
+        resolve: {
+            fullySpecified: boolean;
+        };
+        exclude?: undefined;
+        use?: undefined;
         type?: undefined;
     } | {
         test: RegExp;
@@ -46,12 +55,14 @@ export namespace module {
                 configFile: string;
             };
         })[];
+        resolve?: undefined;
         type?: undefined;
     } | {
         test: RegExp;
         type: string;
         exclude?: undefined;
         use?: undefined;
+        resolve?: undefined;
     })[];
 }
 export namespace optimization {

package/types/packages/excalidraw/webpack.prod.config.d.ts

@@ -31,6 +31,15 @@ export namespace module {
                 };
             };
         })[];
+        resolve?: undefined;
+        type?: undefined;
+    } | {
+        test: RegExp;
+        resolve: {
+            fullySpecified: boolean;
+        };
+        exclude?: undefined;
+        use?: undefined;
         type?: undefined;
     } | {
         test: RegExp;
@@ -57,12 +66,14 @@ export namespace module {
                 configFile?: undefined;
             };
         })[];
+        resolve?: undefined;
         type?: undefined;
     } | {
         test: RegExp;
         type: string;
         exclude?: undefined;
         use?: undefined;
+        resolve?: undefined;
     })[];
 }
 export namespace optimization {

package/types/renderer/renderElement.d.ts

@@ -1,37 +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;
-type ElementShape = Drawable | Drawable[] | null;
-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 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,47 +1,27 @@
-import { RoughCanvas } from "roughjs/bin/canvas";
 import { RoughSVG } from "roughjs/bin/svg";
-import { AppState, BinaryFiles, Zoom } from "../types";
-import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
-import { RenderConfig } from "../scene/types";
+import { BinaryFiles } from "../types";
+import { NonDeletedExcalidrawElement } from "../element/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 isVisibleElement: (element: ExcalidrawElement, canvasWidth: number, canvasHeight: number, viewTransformations: {
-    zoom: Zoom;
-    offsetLeft: number;
-    offsetTop: number;
-    scrollX: number;
-    scrollY: number;
-}) => boolean;
+    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;

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

@@ -18,6 +18,7 @@ declare class Scene {
     private frames;
     private elementsMap;
     private selectedElementsCache;
+    private versionNonce;
     getElementsIncludingDeleted(): readonly ExcalidrawElement[];
     getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
     getFramesIncludingDeleted(): readonly ExcalidrawFrameElement[];
@@ -34,6 +35,7 @@ declare class Scene {
     }): 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

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/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,5 +1,5 @@
 import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+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
@@ -17,7 +17,7 @@ export declare const isSomeElementSelected: {
  *  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">, opts?: {
+export declare const getSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<InteractiveCanvasAppState, "selectedElementIds">, opts?: {
     includeBoundTextElement?: boolean;
     includeElementsInFrames?: boolean;
 }) => ExcalidrawElement[];