@dwelle/excalidraw 0.4.0-d8d86cf → 0.4.0-e03b600

package/types/packages/excalidraw/index.d.ts

@@ -2,18 +2,32 @@ import React from "react";
 import "../../css/app.scss";
 import "../../css/styles.scss";
 import { ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
-declare type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
+import Footer from "../../components/footer/FooterCenter";
+import MainMenu from "../../components/main-menu/MainMenu";
+import WelcomeScreen from "../../components/welcome-screen/WelcomeScreen";
+import LiveCollaborationTrigger from "../../components/live-collaboration/LiveCollaborationTrigger";
+type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
 export declare const Excalidraw: React.MemoExoticComponent<React.ForwardRefExoticComponent<PublicExcalidrawProps & React.RefAttributes<ExcalidrawAPIRefValue>>>;
 export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "../../element";
-export { defaultLang, languages } from "../../i18n";
+export { defaultLang, useI18n, languages } from "../../i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "../../data/restore";
-export { exportToCanvas, exportToBlob, exportToSvg, serializeAsJSON, serializeLibraryAsJSON, loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, getFreeDrawSvgPath, exportToClipboard, mergeLibraryItems, } from "../../packages/utils";
+export { exportToBlob, exportToSvg, serializeAsJSON, serializeLibraryAsJSON, loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, getFreeDrawSvgPath, exportToClipboard, mergeLibraryItems, } from "../../packages/utils";
 export { isLinearElement } from "../../element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES } from "../../constants";
 export { mutateElement, newElementWith, bumpVersion, } from "../../element/mutateElement";
 export { parseLibraryTokensFromUrl, useHandleLibrary, } from "../../data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "../../utils";
 export { Sidebar } from "../../components/Sidebar/Sidebar";
+export { Button } from "../../components/Button";
+export { Footer };
+export { MainMenu };
+export { useDevice } from "../../components/App";
+export { WelcomeScreen };
+export { LiveCollaborationTrigger };
+export { DefaultSidebar } from "../../components/DefaultSidebar";
 export { getDefaultAppState, cleanAppStateForExport, clearAppStateForLocalStorage, } from "../../appState";
 export { jotaiScope, jotaiStore } from "../../jotai";
 export { libraryItemsAtom } from "../../data/library";
+export { exportToCanvas } from "../../scene/export";
+export * as icons from "../../components/icons";
+export * as actions from "../../actions/index";

package/types/packages/utils.d.ts

@@ -1,34 +1,35 @@
-import { AppState, BinaryFiles } from "../types";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
+import { ExportToCanvasConfig, ExportToCanvasData } from "../scene/export";
 import { MIME_TYPES } from "../constants";
 export { MIME_TYPES };
-declare type ExportOpts = {
-    elements: readonly NonDeleted<ExcalidrawElement>[];
-    appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
-    files: BinaryFiles | null;
-    maxWidthOrHeight?: number;
-    getDimensions?: (width: number, height: number) => {
-        width: number;
-        height: number;
-        scale?: number;
-    };
-};
-export declare const exportToCanvas: ({ elements, appState, files, maxWidthOrHeight, getDimensions, exportPadding, }: ExportOpts & {
-    exportPadding?: number | undefined;
-}) => Promise<HTMLCanvasElement>;
-export declare const exportToBlob: (opts: ExportOpts & {
+type ExportToBlobConfig = ExportToCanvasConfig & {
     mimeType?: string;
     quality?: number;
-    exportPadding?: number;
+};
+type ExportToSvgConfig = Pick<ExportToCanvasConfig, "canvasBackgroundColor" | "padding" | "theme">;
+export declare const exportToBlob: ({ data, config, }: {
+    data: ExportToCanvasData;
+    config?: ExportToBlobConfig | undefined;
 }) => Promise<Blob>;
-export declare const exportToSvg: ({ elements, appState, files, exportPadding, }: Omit<ExportOpts, "getDimensions"> & {
-    exportPadding?: number | undefined;
+export declare const exportToSvg: ({ data, config, }: {
+    data: ExportToCanvasData;
+    config?: ExportToSvgConfig | undefined;
 }) => Promise<SVGSVGElement>;
-export declare const exportToClipboard: (opts: ExportOpts & {
-    mimeType?: string;
-    quality?: number;
-    type: "png" | "svg" | "json";
-}) => Promise<void>;
+export declare const exportToCanvas: ({ data, config, }: {
+    data: ExportToCanvasData;
+    config?: ExportToCanvasConfig | undefined;
+}) => Promise<HTMLCanvasElement>;
+export declare const exportToClipboard: ({ type, data, config, }: {
+    data: ExportToCanvasData;
+} & ({
+    type: "png";
+    config?: ExportToBlobConfig | undefined;
+} | {
+    type: "svg";
+    config?: ExportToSvgConfig | undefined;
+} | {
+    type: "json";
+    config?: undefined;
+})) => Promise<void>;
 export { serializeAsJSON, serializeLibraryAsJSON } from "../data/json";
 export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "../data/blob";
 export { getFreeDrawSvgPath } from "../renderer/renderElement";

package/types/renderer/renderElement.d.ts

@@ -3,19 +3,21 @@ 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, Zoom } from "../types";
+import { AppState, BinaryFiles } from "../types";
 export interface ExcalidrawElementWithCanvas {
     element: ExcalidrawElement | ExcalidrawTextElement;
     canvas: HTMLCanvasElement;
     theme: RenderConfig["theme"];
-    canvasZoom: Zoom["value"];
+    scale: number;
+    zoomValue: RenderConfig["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 = {
+type ElementShape = Drawable | Drawable[] | null;
+type ElementShapes = {
     freedraw: Drawable | null;
     arrow: Drawable[];
     line: Drawable[];
@@ -28,7 +30,7 @@ export declare const invalidateShapeForElement: (element: ExcalidrawElement) =>
 export declare const clearRenderCache: () => void;
 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 renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, exportWithDarkMode?: boolean, exportingFrameId?: string | null) => void;
 export declare let pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
 export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;

package/types/renderer/renderScene.d.ts

@@ -1,13 +1,13 @@
 import { RoughCanvas } from "roughjs/bin/canvas";
 import { RoughSVG } from "roughjs/bin/svg";
-import { AppState, BinaryFiles } from "../types";
-import { NonDeletedExcalidrawElement } from "../element/types";
+import { AppState, BinaryFiles, Zoom } from "../types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
 import { RenderConfig } from "../scene/types";
+import "canvas-roundrect-polyfill";
 export declare const DEFAULT_SPACING = 2;
-export declare const _renderScene: ({ elements, appState, scale, rc, canvas, renderConfig, }: {
+export declare const _renderScene: ({ elements, appState, rc, canvas, renderConfig, }: {
     elements: readonly NonDeletedExcalidrawElement[];
     appState: AppState;
-    scale: number;
     rc: RoughCanvas;
     canvas: HTMLCanvasElement;
     renderConfig: RenderConfig;
@@ -22,7 +22,6 @@ export declare const _renderScene: ({ elements, appState, scale, rc, canvas, ren
 export declare const renderScene: <T extends boolean = false>(config: {
     elements: readonly NonDeletedExcalidrawElement[];
     appState: AppState;
-    scale: number;
     rc: RoughCanvas;
     canvas: HTMLCanvasElement;
     renderConfig: RenderConfig;
@@ -34,8 +33,16 @@ export declare const renderScene: <T extends boolean = false>(config: {
     atLeastOneVisibleElement: boolean;
     scrollBars: import("../scene/types").ScrollBars | undefined;
 };
-export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, }?: {
+export declare const isVisibleElement: (element: ExcalidrawElement, canvasWidth: number, canvasHeight: number, viewTransformations: {
+    zoom: Zoom;
+    offsetLeft: number;
+    offsetTop: number;
+    scrollX: number;
+    scrollY: number;
+}) => boolean;
+export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, exportingFrameId, }?: {
     offsetX?: number | undefined;
     offsetY?: number | undefined;
     exportWithDarkMode?: boolean | undefined;
+    exportingFrameId?: string | null | 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/Scene.d.ts

@@ -1,9 +1,10 @@
-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;
+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,9 +13,13 @@ declare class Scene {
     private callbacks;
     private nonDeletedElements;
     private elements;
+    private nonDeletedFrames;
+    private frames;
     private elementsMap;
     getElementsIncludingDeleted(): readonly ExcalidrawElement[];
     getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
+    getFramesIncludingDeleted(): readonly ExcalidrawFrameElement[];
+    getNonDeletedFrames(): readonly NonDeleted<ExcalidrawFrameElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;
     /**
@@ -35,6 +40,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/comparisons.d.ts

@@ -3,7 +3,7 @@ export declare const hasBackground: (type: string) => boolean;
 export declare const hasStrokeColor: (type: string) => boolean;
 export declare const hasStrokeWidth: (type: string) => boolean;
 export declare const hasStrokeStyle: (type: string) => boolean;
-export declare const canChangeSharpness: (type: string) => boolean;
+export declare const canChangeRoundness: (type: string) => boolean;
 export declare const hasText: (type: string) => boolean;
 export declare const canHaveArrowheads: (type: string) => boolean;
 export declare const getElementAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement | null;

package/types/scene/export.d.ts

@@ -1,13 +1,157 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
+import { NonDeletedExcalidrawElement, Theme } from "../element/types";
 import { AppState, BinaryFiles } from "../types";
+import { serializeAsJSON } from "../data/json";
 export declare const SVG_EXPORT_TAG = "<!-- svg-source:excalidraw -->";
-export declare const exportToCanvas: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, { exportBackground, exportPadding, viewBackgroundColor, }: {
-    exportBackground: boolean;
-    exportPadding?: number | undefined;
-    viewBackgroundColor: string;
-}, createCanvas?: (width: number, height: number) => {
-    canvas: HTMLCanvasElement;
-    scale: number;
+export type ExportToCanvasData = {
+    elements: readonly NonDeletedExcalidrawElement[];
+    appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
+    files: BinaryFiles | null;
+};
+export type ExportToCanvasConfig = {
+    theme?: Theme;
+    /**
+     * Canvas background. Valid values are:
+     *
+     * - `undefined` - the background of "appState.viewBackgroundColor" is used.
+     * - `false` - no background is used (set to "transparent").
+     * - `string` - should be a valid CSS color.
+     *
+     * @default undefined
+     */
+    canvasBackgroundColor?: string | false;
+    /**
+     * Canvas padding in pixels. Affected by scale. Ignored if `fit` is set to
+     * `cover`.
+     *
+     * @default 10
+     */
+    padding?: number;
+    /**
+     * Makes sure the canvas content fits into a frame of width/height no larger
+     * than this value, while maintaining the aspect ratio.
+     *
+     * Final dimensions can get smaller/larger if used in conjunction with
+     * `scale`.
+     */
+    maxWidthOrHeight?: number;
+    /**
+     * Scale the canvas content to be excatly this many pixels wide/tall.
+     *
+     * Cannot be used in conjunction with `maxWidthOrHeight`.
+     *
+     * Final dimensions can get smaller/larger if used in conjunction with
+     * `scale`.
+     */
+    widthOrHeight?: number;
+    /**
+     * Width of the frame. Supply `x` or `y` if you want to ofsset the canvas
+     * content.
+     *
+     * If `width` omitted but `height` supplied, `width` is calculated from the
+     * the content's bounding box to preserve the aspect ratio.
+     *
+     * Defaults to the content bounding box width when both `width` and `height`
+     * are omitted.
+     */
+    width?: number;
+    /**
+     * Height of the frame.
+     *
+     * If `height` omitted but `width` supplied, `height` is calculated from the
+     * content's bounding box to preserve the aspect ratio.
+     *
+     * Defaults to the content bounding box height when both `width` and `height`
+     * are omitted.
+     */
+    height?: number;
+    /**
+     * Left canvas offset. By default the coordinate is relative to the canvas.
+     * You can switch to content coordinates by setting `origin` to `content`.
+     *
+     * Defaults to the `x` postion of the content bounding box.
+     */
+    x?: number;
+    /**
+     * Top canvas offset. By default the coordinate is relative to the canvas.
+     * You can switch to content coordinates by setting `origin` to `content`.
+     *
+     * Defaults to the `y` postion of the content bounding box.
+     */
+    y?: number;
+    /**
+     * Indicates the coordinate system of the `x` and `y` values.
+     *
+     * - `canvas` - `x` and `y` are relative to the canvas [0, 0] position.
+     * - `content` - `x` and `y` are relative to the content bounding box.
+     *
+     * @default "canvas"
+     */
+    origin?: "canvas" | "content";
+    /**
+     * If dimensions specified and `x` and `y` are not specified, this indicates
+     * how the canvas should be scaled.
+     *
+     * Behavior aligns with the `object-fit` CSS property.
+     *
+     * - `none`    - no scaling.
+     * - `contain` - scale to fit the frame.
+     * - `cover`   - scale to fill the frame while maintaining aspect ratio. If
+     *               content overflows, it will be cropped.
+     *
+     * @default "contain" unless `x` or `y` are specified, in which case "none"
+     * is used (forced).
+     */
+    fit?: "none" | "contain" | "cover";
+    /**
+     * When either `x` or `y` are not specified, indicates how the canvas should
+     * be aligned on the respective axis.
+     *
+     * - `none`   - canvas aligned to top left.
+     * - `center` - canvas is centered on the axis which is not specified
+     *              (or both).
+     *
+     * @default "center"
+     */
+    position?: "center" | "none";
+    /**
+     * A multiplier to increase/decrease the frame dimensions
+     * (content resolution).
+     *
+     * For example, if your canvas is 300x150 and you set scale to 2, the
+     * resulting size will be 600x300.
+     *
+     * @default 1
+     */
+    scale?: number;
+    /**
+     * If you need to suply your own canvas, e.g. in test environments or in
+     * Node.js.
+     *
+     * Do not set `canvas.width/height` or modify the canvas context as that's
+     * handled by Excalidraw.
+     *
+     * Defaults to `document.createElement("canvas")`.
+     */
+    createCanvas?: () => HTMLCanvasElement;
+    /**
+     * If you want to supply `width`/`height` dynamically (or derive from the
+     * content bounding box), you can use this function.
+     *
+     * Ignored if `maxWidthOrHeight`, `width`, or `height` is set.
+     */
+    getDimensions?: (width: number, height: number) => {
+        width: number;
+        height: number;
+        scale?: number;
+    };
+};
+/**
+ * This API is usually used as a precursor to searializing to Blob or PNG,
+ * but can also be used to create a canvas for other purposes.
+ */
+export declare const exportToCanvas: ({ data, config, }: {
+    data: ExportToCanvasData;
+    config?: ExportToCanvasConfig | undefined;
 }) => Promise<HTMLCanvasElement>;
 export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElement[], appState: {
     exportBackground: boolean;
@@ -16,5 +160,8 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     viewBackgroundColor: string;
     exportWithDarkMode?: boolean;
     exportEmbedScene?: boolean;
-}, files: BinaryFiles | null) => Promise<SVGSVGElement>;
-export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], exportPadding: number, scale: number) => [number, number];
+    renderFrame?: boolean;
+}, files: BinaryFiles | null, opts?: {
+    serializeAsJSON?: () => string;
+}) => Promise<SVGSVGElement>;
+export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], padding: number, scale: number) => [number, number];

package/types/scene/index.d.ts

@@ -1,5 +1,5 @@
 export { isOverScrollBars } from "./scrollbars";
 export { isSomeElementSelected, getElementsWithinSelection, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, } from "./selection";
 export { calculateScrollCenter } from "./scroll";
-export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeSharpness, getElementAtPosition, hasText, getElementsAtPosition, } from "./comparisons";
+export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, getElementAtPosition, hasText, getElementsAtPosition, } from "./comparisons";
 export { getNormalizedZoom } from "./zoom";

package/types/scene/selection.d.ts

@@ -1,11 +1,21 @@
 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;
+/**
+ * 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;
 /**
  * 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<AppState, "selectedElementIds">, opts?: {
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+}) => ExcalidrawElement[];
+export declare const getTargetElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds" | "editingElement">) => ExcalidrawElement[];

package/types/scene/types.d.ts

@@ -1,13 +1,21 @@
 import { ExcalidrawTextElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
-export declare type RenderConfig = {
+export type RenderConfig = {
     scrollX: AppState["scrollX"];
     scrollY: AppState["scrollY"];
     /** null indicates transparent bg */
-    viewBackgroundColor: AppState["viewBackgroundColor"] | null;
+    canvasBackgroundColor: AppState["viewBackgroundColor"] | null;
     zoom: AppState["zoom"];
     shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
     theme: AppState["theme"];
+    /**
+     * canvas scale factor. Not related to zoom. In browsers, it's the
+     * devicePixelRatio. For export, it's the `appState.exportScale`
+     * (user setting) or whatever scale you want to use when exporting elsewhere.
+     *
+     * Bigger the scale, the more pixels (=quality).
+     */
+    canvasScale: number;
     remotePointerViewportCoords: {
         [id: string]: {
             x: number;
@@ -35,15 +43,15 @@ export declare type RenderConfig = {
     isExporting: boolean;
     selectionColor?: string;
 };
-export declare type SceneScroll = {
+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;