@dwelle/excalidraw 0.4.0-9db4535 → 0.4.0-9fa56da

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

@@ -20,10 +20,28 @@ export type ExportToCanvasConfig = {
      */
     canvasBackgroundColor?: string | false;
     /**
-     * Canvas padding in pixels. Affected by scale. Ignored if `fit` is set to
-     * `cover`.
+     * Canvas padding in pixels. Affected by `scale`.
      *
-     * @default 10
+     * When `fit` is set to `none`, padding is added to the content bounding box
+     * (including if you set `width` or `height` or `maxWidthOrHeight` or
+     * `widthOrHeight`).
+     *
+     * When `fit` set to `contain`, padding is subtracted from the content
+     * bounding box (ensuring the size doesn't exceed the supplied values, with
+     * the exeception of using alongside `scale` as noted above), and the padding
+     * serves as a minimum distance between the content and the canvas edges, as
+     * it may exceed the supplied padding value from one side or the other in
+     * order to maintain the aspect ratio. It is recommended to set `position`
+     * to `center` when using `fit=contain`.
+     *
+     * When `fit` is set to `cover`, padding is disabled (set to 0).
+     *
+     * When `fit` is set to `none` and either `width` or `height` or
+     * `maxWidthOrHeight` is set, padding is simply adding to the bounding box
+     * and the content may overflow the canvas, thus right or bottom padding
+     * may be ignored.
+     *
+     * @default 0
      */
     padding?: number;
     /**
@@ -35,7 +53,8 @@ export type ExportToCanvasConfig = {
      */
     maxWidthOrHeight?: number;
     /**
-     * Scale the canvas content to be excatly this many pixels wide/tall.
+     * Scale the canvas content to be excatly this many pixels wide/tall,
+     * maintaining the aspect ratio.
      *
      * Cannot be used in conjunction with `maxWidthOrHeight`.
      *
@@ -94,12 +113,15 @@ export type ExportToCanvasConfig = {
      * Behavior aligns with the `object-fit` CSS property.
      *
      * - `none`    - no scaling.
-     * - `contain` - scale to fit the frame.
+     * - `contain` - scale to fit the frame. Includes `padding`.
      * - `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).
+     * If `maxWidthOrHeight` or `widthOrHeight` is set, `fit` is ignored.
+     *
+     * @default "contain" unless `width`, `height`, `maxWidthOrHeight`, or
+     * `widthOrHeight` is specified in which case `none` is the default (can be
+     * changed). If `x` or `y` are specified, `none` is forced.
      */
     fit?: "none" | "contain" | "cover";
     /**
@@ -110,9 +132,11 @@ export type ExportToCanvasConfig = {
      * - `center` - canvas is centered on the axis which is not specified
      *              (or both).
      *
+     * If `maxWidthOrHeight` or `widthOrHeight` is set, `position` is ignored.
+     *
      * @default "center"
      */
-    position?: "center" | "none";
+    position?: "center" | "topLeft";
     /**
      * A multiplier to increase/decrease the frame dimensions
      * (content resolution).
@@ -160,7 +184,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[], padding: number, scale: number) => [number, number];
+export declare const getCanvasSize: (elements: readonly NonDeletedExcalidrawElement[]) => [minX: number, minY: number, width: number, height: 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,32 @@
 import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-export declare const getElementsWithinSelection: (elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement) => NonDeletedExcalidrawElement[];
-export declare const isSomeElementSelected: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">) => boolean;
+import { AppState, InteractiveCanvasAppState } from "../types";
+/**
+ * Frames and their containing elements are not to be selected at the same time.
+ * Given an array of selected elements, if there are frames and their containing elements
+ * we only keep the frames.
+ * @param selectedElements
+ */
+export declare const excludeElementsInFramesFromSelection: <T extends ExcalidrawElement>(selectedElements: readonly T[]) => T[];
+export declare const getElementsWithinSelection: (elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement, excludeElementsInFrames?: boolean) => NonDeletedExcalidrawElement[];
+export declare const getVisibleAndNonSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: readonly NonDeletedExcalidrawElement[], appState: AppState) => NonDeletedExcalidrawElement[];
+export declare const isSomeElementSelected: {
+    (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">): boolean;
+    clearCache(): void;
+};
 /**
  * Returns common attribute (picked by `getAttribute` callback) of selected
  *  elements. If elements don't share the same value, returns `null`.
  */
 export declare const getCommonAttributeOfSelectedElements: <T>(elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">, getAttribute: (element: ExcalidrawElement) => T) => T | null;
-export declare const getSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">, includeBoundTextElement?: boolean) => NonDeletedExcalidrawElement[];
-export declare const getTargetElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds" | "editingElement">) => NonDeletedExcalidrawElement[];
+export declare const getSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<InteractiveCanvasAppState, "selectedElementIds">, opts?: {
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+}) => ExcalidrawElement[];
+export declare const getTargetElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds" | "editingElement">) => ExcalidrawElement[];
+/**
+ * returns prevState's selectedElementids if no change from previous, so as to
+ * retain reference identity for memoization
+ */
+export declare const makeNextSelectedElementIds: (nextSelectedElementIds: AppState["selectedElementIds"], prevState: Pick<AppState, "selectedElementIds">) => Readonly<{
+    [id: string]: true;
+}>;

package/types/scene/types.d.ts

@@ -1,47 +1,69 @@
-import { ExcalidrawTextElement } from "../element/types";
-import { AppClassProperties, AppState } from "../types";
-export type RenderConfig = {
-    scrollX: AppState["scrollX"];
-    scrollY: AppState["scrollY"];
+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 RenderConfig = {};
+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;
     /** null indicates transparent bg */
-    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;
+    canvasBackgroundColor: string | null;
+};
+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[];
+    /**
+     * 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).
+     */
+    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;
@@ -65,3 +87,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/snapping.d.ts

@@ -0,0 +1,108 @@
+import { Bounds } from "./element/bounds";
+import { MaybeTransformHandleType } from "./element/transformHandles";
+import { ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
+import { AppState, KeyboardModifiersObject, Point } from "./types";
+export declare const getSnapDistance: (zoomValue: number) => number;
+type Vector2D = {
+    x: number;
+    y: number;
+};
+type PointPair = [Point, Point];
+export type PointSnap = {
+    type: "point";
+    points: PointPair;
+    offset: number;
+};
+export type Gap = {
+    startBounds: Bounds;
+    endBounds: Bounds;
+    startSide: [Point, Point];
+    endSide: [Point, Point];
+    overlap: [number, number];
+    length: number;
+};
+export type GapSnap = {
+    type: "gap";
+    direction: "center_horizontal" | "center_vertical" | "side_left" | "side_right" | "side_top" | "side_bottom";
+    gap: Gap;
+    offset: number;
+};
+export type GapSnaps = GapSnap[];
+export type Snap = GapSnap | PointSnap;
+export type Snaps = Snap[];
+export type PointSnapLine = {
+    type: "points";
+    points: Point[];
+};
+export type PointerSnapLine = {
+    type: "pointer";
+    points: PointPair;
+    direction: "horizontal" | "vertical";
+};
+export type GapSnapLine = {
+    type: "gap";
+    direction: "horizontal" | "vertical";
+    points: PointPair;
+};
+export type SnapLine = PointSnapLine | GapSnapLine | PointerSnapLine;
+export declare class SnapCache {
+    private static referenceSnapPoints;
+    private static visibleGaps;
+    static setReferenceSnapPoints: (snapPoints: Point[] | null) => void;
+    static getReferenceSnapPoints: () => (readonly [number, number])[] | null;
+    static setVisibleGaps: (gaps: {
+        verticalGaps: Gap[];
+        horizontalGaps: Gap[];
+    } | null) => void;
+    static getVisibleGaps: () => {
+        verticalGaps: Gap[];
+        horizontalGaps: Gap[];
+    } | null;
+    static destroy: () => void;
+}
+export declare const isSnappingEnabled: ({ event, appState, selectedElements, }: {
+    appState: AppState;
+    event: KeyboardModifiersObject;
+    selectedElements: NonDeletedExcalidrawElement[];
+}) => boolean;
+export declare const areRoughlyEqual: (a: number, b: number, precision?: number) => boolean;
+export declare const getElementsCorners: (elements: ExcalidrawElement[], { omitCenter, boundingBoxCorners, dragOffset, }?: {
+    omitCenter?: boolean | undefined;
+    boundingBoxCorners?: boolean | undefined;
+    dragOffset?: Vector2D | undefined;
+}) => Point[];
+export declare const getVisibleGaps: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: ExcalidrawElement[], appState: AppState) => {
+    horizontalGaps: Gap[];
+    verticalGaps: Gap[];
+};
+export declare const getReferenceSnapPoints: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: ExcalidrawElement[], appState: AppState) => (readonly [number, number])[];
+export declare const snapDraggedElements: (selectedElements: ExcalidrawElement[], dragOffset: Vector2D, appState: AppState, event: KeyboardModifiersObject) => {
+    snapOffset: {
+        x: number;
+        y: number;
+    };
+    snapLines: (PointSnapLine | GapSnapLine)[];
+};
+export declare const snapResizingElements: (selectedElements: ExcalidrawElement[], selectedOriginalElements: ExcalidrawElement[], appState: AppState, event: KeyboardModifiersObject, dragOffset: Vector2D, transformHandle: MaybeTransformHandleType) => {
+    snapOffset: {
+        x: number;
+        y: number;
+    };
+    snapLines: PointSnapLine[];
+};
+export declare const snapNewElement: (draggingElement: ExcalidrawElement, appState: AppState, event: KeyboardModifiersObject, origin: Vector2D, dragOffset: Vector2D) => {
+    snapOffset: {
+        x: number;
+        y: number;
+    };
+    snapLines: PointSnapLine[];
+};
+export declare const getSnapLinesAtPointer: (elements: readonly ExcalidrawElement[], appState: AppState, pointer: Vector2D, event: KeyboardModifiersObject) => {
+    originOffset: {
+        x: number;
+        y: number;
+    };
+    snapLines: PointerSnapLine[];
+};
+export declare const isActiveToolNonLinearSnappable: (activeToolType: AppState["activeTool"]["type"]) => boolean;
+export {};