@excalidraw/element 0.18.0-b16b6f8fd → 0.18.0-b1c6bfc

package/dist/types/excalidraw/types.d.ts

@@ -1,16 +1,15 @@
-import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES } from "@excalidraw/common";
-import type { SuggestedBinding } from "@excalidraw/element";
+import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES, EditorInterface } from "@excalidraw/common";
 import type { LinearElementEditor } from "@excalidraw/element";
 import type { MaybeTransformHandleType } from "@excalidraw/element";
-import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement } from "@excalidraw/element/types";
+import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, FontFamilyValues, FileId, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement, BindMode, ExcalidrawTextElement } from "@excalidraw/element/types";
 import type { Merge, MaybePromise, ValueOf, MakeBrand } from "@excalidraw/common/utility-types";
 import type { CaptureUpdateActionType, DurableIncrement, EphemeralIncrement } from "@excalidraw/element";
+import type { GlobalPoint } from "@excalidraw/math";
 import type { Action } from "./actions/types";
 import type { Spreadsheet } from "./charts";
 import type { ClipboardData } from "./clipboard";
 import type App from "./components/App";
 import type Library from "./data/library";
-import type { FileSystemHandle } from "./data/filesystem";
 import type { ContextMenuItems } from "./components/ContextMenu";
 import type { SnapLine } from "./snapping";
 import type { ImportedDataState } from "./data/types";
@@ -18,6 +17,7 @@ import type { Language } from "./i18n";
 import type { isOverScrollBars } from "./scene/scrollbars";
 import type React from "react";
 import type { JSX } from "react";
+export type { App };
 export type SocketId = string & {
     _brand: "SocketId";
 };
@@ -125,16 +125,20 @@ export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
     frameRendering: AppState["frameRendering"];
     currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
     hoveredElementIds: AppState["hoveredElementIds"];
+    suggestedBinding: AppState["suggestedBinding"];
     croppingElementId: AppState["croppingElementId"];
 }>;
 export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
+    activeTool: AppState["activeTool"];
     activeEmbeddable: AppState["activeEmbeddable"];
     selectionElement: AppState["selectionElement"];
     selectedGroupIds: AppState["selectedGroupIds"];
     selectedLinearElement: AppState["selectedLinearElement"];
     multiElement: AppState["multiElement"];
+    newElement: AppState["newElement"];
     isBindingEnabled: AppState["isBindingEnabled"];
-    suggestedBindings: AppState["suggestedBindings"];
+    isMidpointSnappingEnabled: AppState["isMidpointSnappingEnabled"];
+    suggestedBinding: AppState["suggestedBinding"];
     isRotating: AppState["isRotating"];
     elementsToHighlight: AppState["elementsToHighlight"];
     collaborators: AppState["collaborators"];
@@ -145,6 +149,11 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     croppingElementId: AppState["croppingElementId"];
     searchMatches: AppState["searchMatches"];
     activeLockedId: AppState["activeLockedId"];
+    hoveredElementIds: AppState["hoveredElementIds"];
+    frameRendering: AppState["frameRendering"];
+    shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
+    exportScale: AppState["exportScale"];
+    currentItemArrowType: AppState["currentItemArrowType"];
 }>;
 export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
 export type ObservedStandaloneAppState = {
@@ -155,12 +164,15 @@ export type ObservedElementsAppState = {
     editingGroupId: AppState["editingGroupId"];
     selectedElementIds: AppState["selectedElementIds"];
     selectedGroupIds: AppState["selectedGroupIds"];
-    selectedLinearElementId: LinearElementEditor["elementId"] | null;
-    selectedLinearElementIsEditing: boolean | null;
+    selectedLinearElement: {
+        elementId: LinearElementEditor["elementId"];
+        isEditing: boolean;
+    } | null;
     croppingElementId: AppState["croppingElementId"];
     lockedMultiSelections: AppState["lockedMultiSelections"];
     activeLockedId: AppState["activeLockedId"];
 };
+export type BoxSelectionMode = "contain" | "overlap";
 export interface AppState {
     contextMenu: {
         items: ContextMenuItems;
@@ -194,9 +206,22 @@ export interface AppState {
      * - set on pointer down, updated during pointer move
      */
     selectionElement: NonDeletedExcalidrawElement | null;
+    /**
+     * tracking current arrow binding editor state (takes into account
+     * `bindingPreference` and keyboard modifiers (ctrl/alt)
+     */
     isBindingEnabled: boolean;
+    /** user box selection preference; defaults to "contain" when unset */
+    boxSelectionMode: BoxSelectionMode;
+    /** user arrow binding preference */
+    bindingPreference: "enabled" | "disabled";
+    /** user preference whether arrow snap to midpoints while binding */
+    isMidpointSnappingEnabled: boolean;
     startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
-    suggestedBindings: SuggestedBinding[];
+    suggestedBinding: {
+        element: NonDeleted<ExcalidrawBindableElement>;
+        midPoint?: GlobalPoint;
+    } | null;
     frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
     frameRendering: {
         enabled: boolean;
@@ -209,7 +234,7 @@ export interface AppState {
     /**
      * set when a new text is created or when an existing text is being edited
      */
-    editingTextElement: NonDeletedExcalidrawElement | null;
+    editingTextElement: ExcalidrawTextElement | null;
     activeTool: {
         /**
          * indicates a previous tool we should revert back to if we deselect the
@@ -219,6 +244,10 @@ export interface AppState {
         locked: boolean;
         fromSelection: boolean;
     } & ActiveTool;
+    preferredSelectionTool: {
+        type: "selection" | "lasso";
+        initialized: boolean;
+    };
     penMode: boolean;
     penDetected: boolean;
     exportBackground: boolean;
@@ -249,8 +278,8 @@ export interface AppState {
     isResizing: boolean;
     isRotating: boolean;
     zoom: Zoom;
-    openMenu: "canvas" | "shape" | null;
-    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | null;
+    openMenu: "canvas" | null;
+    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
     openSidebar: {
         name: SidebarName;
         tab?: SidebarTabName;
@@ -262,9 +291,15 @@ export interface AppState {
         tab: "text-to-diagram" | "mermaid";
     } | {
         name: "commandPalette";
+    } | {
+        name: "settings";
     } | {
         name: "elementLinkSelector";
         sourceElementId: ExcalidrawElement["id"];
+    } | {
+        name: "charts";
+        data: Spreadsheet;
+        rawText: string;
     };
     /**
      * Reflects user preference for whether the default sidebar should be docked.
@@ -287,7 +322,7 @@ export interface AppState {
     selectedElementsAreBeingDragged: boolean;
     shouldCacheIgnoreZoom: boolean;
     toast: {
-        message: string;
+        message: React.ReactNode;
         closable?: boolean;
         duration?: number;
     } | null;
@@ -309,21 +344,13 @@ export interface AppState {
     height: number;
     offsetTop: number;
     offsetLeft: number;
-    fileHandle: FileSystemHandle | null;
+    fileHandle: FileSystemFileHandle | null;
     collaborators: Map<SocketId, Collaborator>;
     stats: {
         open: boolean;
         /** bitmap. Use `STATS_PANELS` bit values */
         panels: number;
     };
-    currentChartType: ChartType;
-    pasteDialog: {
-        shown: false;
-        data: null;
-    } | {
-        shown: true;
-        data: Spreadsheet;
-    };
     showHyperlinkPopup: false | "info" | "editor";
     selectedLinearElement: LinearElementEditor | null;
     snapLines: readonly SnapLine[];
@@ -349,6 +376,7 @@ export interface AppState {
     lockedMultiSelections: {
         [groupId: string]: true;
     };
+    bindMode: BindMode;
 }
 export type SearchMatch = {
     id: string;
@@ -361,7 +389,7 @@ export type SearchMatch = {
         showOnCanvas: boolean;
     }[];
 };
-export type UIAppState = Omit<AppState, "suggestedBindings" | "startBoundElement" | "cursorButton" | "scrollX" | "scrollY">;
+export type UIAppState = Omit<AppState, "startBoundElement" | "cursorButton" | "scrollX" | "scrollY">;
 export type NormalizedZoomValue = number & {
     _brand: "normalizedZoom";
 };
@@ -409,11 +437,36 @@ export type OnUserFollowedPayload = {
     userToFollow: UserToFollow;
     action: "FOLLOW" | "UNFOLLOW";
 };
+export type OnExportProgress = {
+    type: "progress";
+    message?: React.ReactNode;
+    /** 0-1 range */
+    progress?: number;
+};
 export interface ExcalidrawProps {
     onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
+    /**
+     * note: only subscribes if the props.onIncrement is defined on initial render
+     */
     onIncrement?: (event: DurableIncrement | EphemeralIncrement) => void;
     initialData?: (() => MaybePromise<ExcalidrawInitialDataState | null>) | MaybePromise<ExcalidrawInitialDataState | null>;
-    excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
+    /**
+     * Invoked as soon as the Excalidraw API is available
+     * NOTE editor is not yet mounted, and state is not yet initialized
+     */
+    onExcalidrawAPI?: (api: ExcalidrawImperativeAPI | null) => void;
+    /**
+     * Invoked once the editor root is mounted.
+     */
+    onMount?: (payload: ExcalidrawMountPayload) => void;
+    /**
+     * Invoked when the editor root is unmounted.
+     */
+    onUnmount?: () => void;
+    /**
+     * Invoked once the initial scene is loaded.
+     */
+    onInitialize?: (api: ExcalidrawImperativeAPI) => void;
     isCollaborating?: boolean;
     onPointerUpdate?: (payload: {
         pointer: {
@@ -439,6 +492,7 @@ export interface ExcalidrawProps {
     onDuplicate?: (nextElements: readonly ExcalidrawElement[], 
     /** excludes the duplicated elements */
     prevElements: readonly ExcalidrawElement[]) => ExcalidrawElement[] | void;
+    renderTopLeftUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
     renderTopRightUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
     langCode?: Language["code"];
     viewModeEnabled?: boolean;
@@ -469,6 +523,29 @@ export interface ExcalidrawProps {
     aiEnabled?: boolean;
     showDeprecatedFonts?: boolean;
     renderScrollbars?: boolean;
+    /**
+     * Called before exporting to a file.
+     *
+     * Allows the host app to intercept and delay saving until async operations
+     * (e.g., images are loaded) complete.
+     *
+     * If Promise/AsyncGenerator is returned, a progress toast will be shown
+     * until the operation completes. Generator can yield progress updates.
+     */
+    onExport?: (
+    /** type of export. Currently we only call for JSON exports or
+     * JSON-embedded PNG (which is also identified as `json` type here)*/
+    type: "json", data: {
+        elements: readonly ExcalidrawElement[];
+        appState: AppState;
+        files: BinaryFiles;
+    }, options: {
+        /** signal that gets aborted if user cancels the export (e.g. closes
+         * the native file picker dialog). In that case, you can either
+         * return immediately, or throw AbortError.
+         */
+        signal: AbortSignal;
+    }) => MaybePromise<void> | AsyncGenerator<OnExportProgress, void>;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -496,6 +573,11 @@ export type UIOptions = Partial<{
     tools: {
         image: boolean;
     };
+    /**
+     * Optionally control the editor form factor and desktop UI mode from the host app.
+     * If not provided, we will take care of it internally.
+     */
+    getFormFactor?: (editorWidth: number, editorHeight: number) => EditorInterface["formFactor"];
     /** @deprecated does nothing. Will be removed in 0.15 */
     welcomeScreen?: boolean;
 }>;
@@ -516,6 +598,8 @@ export type AppProps = Merge<ExcalidrawProps, {
 export type AppClassProperties = {
     props: AppProps;
     state: AppState;
+    api: App["api"];
+    sessionExportThemeOverride: App["sessionExportThemeOverride"];
     interactiveCanvas: HTMLCanvasElement | null;
     /** static canvas */
     canvas: HTMLCanvasElement;
@@ -526,7 +610,7 @@ export type AppClassProperties = {
         mimeType: ValueOf<typeof IMAGE_MIME_TYPES>;
     }>;
     files: BinaryFiles;
-    device: App["device"];
+    editorInterface: App["editorInterface"];
     scene: App["scene"];
     syncActionResult: App["syncActionResult"];
     fonts: App["fonts"];
@@ -555,6 +639,12 @@ export type AppClassProperties = {
     excalidrawContainerValue: App["excalidrawContainerValue"];
     onPointerUpEmitter: App["onPointerUpEmitter"];
     updateEditorAtom: App["updateEditorAtom"];
+    onPointerDownEmitter: App["onPointerDownEmitter"];
+    onEvent: App["onEvent"];
+    onStateChange: App["onStateChange"];
+    lastPointerMoveCoords: App["lastPointerMoveCoords"];
+    bindModeHandler: App["bindModeHandler"];
+    setAppState: App["setAppState"];
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{
@@ -602,6 +692,7 @@ export type PointerDownState = Readonly<{
             x: number;
             y: number;
         };
+        blockDragging: boolean;
     };
     eventListeners: {
         onMove: null | ReturnType<typeof throttleRAF>;
@@ -614,8 +705,20 @@ export type PointerDownState = Readonly<{
     };
 }>;
 export type UnsubscribeCallback = () => void;
+export type ExcalidrawMountPayload = {
+    excalidrawAPI: ExcalidrawImperativeAPI;
+    container: HTMLDivElement | null;
+};
+export type ExcalidrawImperativeAPIEventMap = {
+    "editor:mount": [payload: ExcalidrawMountPayload];
+    "editor:initialize": [api: ExcalidrawImperativeAPI];
+    "editor:unmount": [];
+};
 export interface ExcalidrawImperativeAPI {
+    /** Whether the editor has been unmounted and the API is no longer usable. */
+    isDestroyed: boolean;
     updateScene: InstanceType<typeof App>["updateScene"];
+    applyDeltas: InstanceType<typeof App>["applyDeltas"];
     mutateElement: InstanceType<typeof App>["mutateElement"];
     updateLibrary: InstanceType<typeof Library>["updateLibrary"];
     resetScene: InstanceType<typeof App>["resetScene"];
@@ -638,6 +741,7 @@ export interface ExcalidrawImperativeAPI {
     setCursor: InstanceType<typeof App>["setCursor"];
     resetCursor: InstanceType<typeof App>["resetCursor"];
     toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
+    getEditorInterface: () => EditorInterface;
     /**
      * Disables rendering of frames (including element clipping), but currently
      * the frames are still interactive in edit mode. As such, this API should be
@@ -650,18 +754,9 @@ export interface ExcalidrawImperativeAPI {
     onPointerUp: (callback: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState, event: PointerEvent) => void) => UnsubscribeCallback;
     onScrollChange: (callback: (scrollX: number, scrollY: number, zoom: Zoom) => void) => UnsubscribeCallback;
     onUserFollow: (callback: (payload: OnUserFollowedPayload) => void) => UnsubscribeCallback;
+    onStateChange: InstanceType<typeof App>["onStateChange"];
+    onEvent: InstanceType<typeof App>["onEvent"];
 }
-export type Device = Readonly<{
-    viewport: {
-        isMobile: boolean;
-        isLandscape: boolean;
-    };
-    editor: {
-        isMobile: boolean;
-        canFitSidebar: boolean;
-    };
-    isTouchScreen: boolean;
-}>;
 export type FrameNameBounds = {
     x: number;
     y: number;
@@ -701,4 +796,3 @@ export type Offsets = Partial<{
     bottom: number;
     left: number;
 }>;
-export {};

package/dist/types/excalidraw/wysiwyg/textWysiwyg.d.ts

@@ -1,7 +1,7 @@
 import type { ExcalidrawElement, ExcalidrawTextElement } from "@excalidraw/element/types";
 import type App from "../components/App";
 type SubmitHandler = () => void;
-export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect, }: {
+export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect, initialCaretSceneCoords, }: {
     id: ExcalidrawElement["id"];
     /**
      * textWysiwyg only deals with `originalText`
@@ -9,7 +9,7 @@ export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords,
      * Note: `text`, which can be wrapped and therefore different from `originalText`,
      *       is derived from `originalText`
      */
-    onChange?: ((nextOriginalText: string) => void) | undefined;
+    onChange?: (nextOriginalText: string) => void;
     onSubmit: (data: {
         viaKeyboard: boolean;
         nextOriginalText: string;
@@ -19,6 +19,10 @@ export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords,
     canvas: HTMLCanvasElement;
     excalidrawContainer: HTMLDivElement | null;
     app: App;
-    autoSelect?: boolean | undefined;
+    autoSelect?: boolean;
+    initialCaretSceneCoords?: {
+        x: number;
+        y: number;
+    } | null;
 }) => SubmitHandler;
 export {};

package/dist/types/math/src/curve.d.ts

@@ -12,7 +12,10 @@ export declare const bezierEquation: <Point extends GlobalPoint | LocalPoint>(c:
 /**
  * Computes the intersection between a cubic spline and a line segment.
  */
-export declare function curveIntersectLineSegment<Point extends GlobalPoint | LocalPoint>(c: Curve<Point>, l: LineSegment<Point>): Point[];
+export declare function curveIntersectLineSegment<Point extends GlobalPoint | LocalPoint>(c: Curve<Point>, l: LineSegment<Point>, opts?: {
+    tolerance?: number;
+    iterLimit?: number;
+}): Point[];
 /**
  * Finds the closest point on the Bezier curve from another point
  *

package/dist/types/math/src/point.d.ts

@@ -1,4 +1,4 @@
-import type { LocalPoint, GlobalPoint, Radians, Degrees, Vector } from "./types";
+import type { LocalPoint, GlobalPoint, Radians, Degrees, Vector, GlobalCoord, LocalCoord } from "./types";
 /**
  * Create a properly typed Point instance from the X and Y coordinates.
  *
@@ -7,6 +7,11 @@ import type { LocalPoint, GlobalPoint, Radians, Degrees, Vector } from "./types"
  * @returns The branded and created point
  */
 export declare function pointFrom<Point extends GlobalPoint | LocalPoint>(x: number, y: number): Point;
+export declare function pointFrom<Coord extends GlobalCoord | LocalCoord>(coords: Coord): Coord extends GlobalCoord ? GlobalPoint : LocalPoint;
+export declare function pointFrom<Point extends GlobalPoint | LocalPoint>(coords: {
+    x: number;
+    y: number;
+}): Point;
 /**
  * Converts and remaps an array containing a pair of numbers to Point.
  *
@@ -52,7 +57,7 @@ export declare function pointsEqual<Point extends GlobalPoint | LocalPoint>(a: P
  * @param angle The radians to rotate the point by
  * @returns The rotated point
  */
-export declare function pointRotateRads<Point extends GlobalPoint | LocalPoint>([x, y]: Point, [cx, cy]: Point, angle: Radians): Point;
+export declare function pointRotateRads<Point extends GlobalPoint | LocalPoint>(point: Point, center: Point, angle: Radians): Point;
 /**
  * Rotate a point by [angle] degree.
  *

package/dist/types/math/src/polygon.d.ts

@@ -1,6 +1,6 @@
 import type { GlobalPoint, LocalPoint, Polygon } from "./types";
 export declare function polygon<Point extends GlobalPoint | LocalPoint>(...points: Point[]): Polygon<Point>;
 export declare function polygonFromPoints<Point extends GlobalPoint | LocalPoint>(points: Point[]): Polygon<Point>;
-export declare const polygonIncludesPoint: <Point extends GlobalPoint | LocalPoint>(point: Point, polygon: Polygon<Point>) => boolean;
+export declare const polygonIncludesPoint: <Point extends LocalPoint | GlobalPoint>(point: Point, polygon: Polygon<Point>) => boolean;
 export declare const polygonIncludesPointNonZero: <Point extends [number, number]>(point: Point, polygon: Point[]) => boolean;
-export declare const pointOnPolygon: <Point extends GlobalPoint | LocalPoint>(p: Point, poly: Polygon<Point>, threshold?: number) => boolean;
+export declare const pointOnPolygon: <Point extends LocalPoint | GlobalPoint>(p: Point, poly: Polygon<Point>, threshold?: number) => boolean;

package/dist/types/math/src/range.d.ts

@@ -13,9 +13,7 @@ export declare function rangeInclusive(start: number, end: number): InclusiveRan
  * @param pair The number pair to convert to an inclusive range
  * @returns The new inclusive range
  */
-export declare function rangeInclusiveFromPair(pair: [start: number, end: number]): [number, number] & {
-    _brand: "excalimath_degree";
-};
+export declare function rangeInclusiveFromPair(pair: [start: number, end: number]): InclusiveRange;
 /**
  * Given two ranges, return if the two ranges overlap with each other e.g.
  * [1, 3] overlaps with [2, 4] while [1, 3] does not overlap with [4, 5].

package/dist/types/math/src/segment.d.ts

@@ -21,14 +21,14 @@ export declare const isLineSegment: <Point extends GlobalPoint | LocalPoint>(seg
  * @param origin
  * @returns
  */
-export declare const lineSegmentRotate: <Point extends GlobalPoint | LocalPoint>(l: LineSegment<Point>, angle: Radians, origin?: Point | undefined) => LineSegment<Point>;
+export declare const lineSegmentRotate: <Point extends LocalPoint | GlobalPoint>(l: LineSegment<Point>, angle: Radians, origin?: Point) => LineSegment<Point>;
 /**
  * Calculates the point two line segments with a definite start and end point
  * intersect at.
  */
 export declare const segmentsIntersectAt: <Point extends GlobalPoint | LocalPoint>(a: Readonly<LineSegment<Point>>, b: Readonly<LineSegment<Point>>) => Point | null;
-export declare const pointOnLineSegment: <Point extends GlobalPoint | LocalPoint>(point: Point, line: LineSegment<Point>, threshold?: number) => boolean;
-export declare const distanceToLineSegment: <Point extends GlobalPoint | LocalPoint>(point: Point, line: LineSegment<Point>) => number;
+export declare const pointOnLineSegment: <Point extends LocalPoint | GlobalPoint>(point: Point, line: LineSegment<Point>, threshold?: number) => boolean;
+export declare const distanceToLineSegment: <Point extends LocalPoint | GlobalPoint>(point: Point, line: LineSegment<Point>) => number;
 /**
  * Returns the intersection point of a segment and a line
  *
@@ -37,3 +37,4 @@ export declare const distanceToLineSegment: <Point extends GlobalPoint | LocalPo
  * @returns
  */
 export declare function lineSegmentIntersectionPoints<Point extends GlobalPoint | LocalPoint>(l: LineSegment<Point>, s: LineSegment<Point>, threshold?: number): Point | null;
+export declare function lineSegmentsDistance<Point extends GlobalPoint | LocalPoint>(s1: LineSegment<Point>, s2: LineSegment<Point>): number;

package/dist/types/math/src/types.d.ts

@@ -19,12 +19,24 @@ export type InclusiveRange = [number, number] & {
     _brand: "excalimath_degree";
 };
 /**
- * Represents a 2D position in world or canvas space. A
+ * Represents a 2D position in world/canvas/scene space. A
  * global coordinate.
  */
 export type GlobalPoint = [x: number, y: number] & {
     _brand: "excalimath__globalpoint";
 };
+/**
+ * Represents a 2D position in world/canvas/scene space. A
+ * global coordinate.
+ *
+ * TODO remove this once we migrate the codebase to use Point tuples everywhere
+ */
+export type GlobalCoord = {
+    x: number;
+    y: number;
+} & {
+    _brand: "excalimath__globalcoord";
+};
 /**
  * Represents a 2D position in whatever local space it's
  * needed. A local coordinate.
@@ -32,6 +44,18 @@ export type GlobalPoint = [x: number, y: number] & {
 export type LocalPoint = [x: number, y: number] & {
     _brand: "excalimath__localpoint";
 };
+/**
+ * Represents a 2D position in whatever local space it's needed.
+ * A local coordinate.
+ *
+ * TODO remove this once we migrate the codebase to use Point tuples everywhere
+ */
+export type LocalCoord = {
+    x: number;
+    y: number;
+} & {
+    _brand: "excalimath__localcoord";
+};
 /**
  * A line is an infinitely long object with no width, depth, or curvature.
  */

package/dist/types/utils/src/bbox.d.ts

@@ -1,5 +1,5 @@
 import { type GlobalPoint, type LocalPoint } from "@excalidraw/math";
-import type { Bounds } from "@excalidraw/element";
+import type { Bounds } from "@excalidraw/common";
 export type LineSegment<P extends LocalPoint | GlobalPoint> = [P, P];
 export declare function getBBox<P extends LocalPoint | GlobalPoint>(line: LineSegment<P>): Bounds;
 export declare function doBBoxesIntersect(a: Bounds, b: Bounds): boolean;

package/dist/types/utils/src/export.d.ts

@@ -15,7 +15,7 @@ type ExportOpts = {
     };
 };
 export declare const exportToCanvas: ({ elements, appState, files, maxWidthOrHeight, getDimensions, exportPadding, exportingFrame, }: ExportOpts & {
-    exportPadding?: number | undefined;
+    exportPadding?: number;
 }) => Promise<HTMLCanvasElement>;
 export declare const exportToBlob: (opts: ExportOpts & {
     mimeType?: string;
@@ -23,10 +23,10 @@ export declare const exportToBlob: (opts: ExportOpts & {
     exportPadding?: number;
 }) => Promise<Blob>;
 export declare const exportToSvg: ({ elements, appState, files, exportPadding, renderEmbeddables, exportingFrame, skipInliningFonts, reuseImages, }: Omit<ExportOpts, "getDimensions"> & {
-    exportPadding?: number | undefined;
-    renderEmbeddables?: boolean | undefined;
-    skipInliningFonts?: true | undefined;
-    reuseImages?: boolean | undefined;
+    exportPadding?: number;
+    renderEmbeddables?: boolean;
+    skipInliningFonts?: true;
+    reuseImages?: boolean;
 }) => Promise<SVGSVGElement>;
 export declare const exportToClipboard: (opts: ExportOpts & {
     mimeType?: string;

package/dist/types/utils/src/shape.d.ts

@@ -46,13 +46,13 @@ export declare const getClosedCurveShape: <Point extends GlobalPoint | LocalPoin
  * @param gap Optional value to inflate the shape before testing
  * @returns An array of intersections
  */
-export declare const segmentIntersectRectangleElement: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawBindableElement, segment: LineSegment<Point>, gap?: number) => Point[];
-export declare const pointOnEllipse: <Point extends GlobalPoint | LocalPoint>(point: Point, ellipse: Ellipse<Point>, threshold?: number) => boolean;
-export declare const pointInEllipse: <Point extends GlobalPoint | LocalPoint>(p: Point, ellipse: Ellipse<Point>) => boolean;
-export declare const ellipseAxes: <Point extends GlobalPoint | LocalPoint>(ellipse: Ellipse<Point>) => {
+export declare const segmentIntersectRectangleElement: <Point extends LocalPoint | GlobalPoint>(element: ExcalidrawBindableElement, segment: LineSegment<Point>, gap?: number) => Point[];
+export declare const pointOnEllipse: <Point extends LocalPoint | GlobalPoint>(point: Point, ellipse: Ellipse<Point>, threshold?: number) => boolean;
+export declare const pointInEllipse: <Point extends LocalPoint | GlobalPoint>(p: Point, ellipse: Ellipse<Point>) => boolean;
+export declare const ellipseAxes: <Point extends LocalPoint | GlobalPoint>(ellipse: Ellipse<Point>) => {
     majorAxis: number;
     minorAxis: number;
 };
-export declare const ellipseFocusToCenter: <Point extends GlobalPoint | LocalPoint>(ellipse: Ellipse<Point>) => number;
-export declare const ellipseExtremes: <Point extends GlobalPoint | LocalPoint>(ellipse: Ellipse<Point>) => import("@excalidraw/math").Vector[];
+export declare const ellipseFocusToCenter: <Point extends LocalPoint | GlobalPoint>(ellipse: Ellipse<Point>) => number;
+export declare const ellipseExtremes: <Point extends LocalPoint | GlobalPoint>(ellipse: Ellipse<Point>) => import("@excalidraw/math").Vector[];
 export {};

package/dist/types/utils/src/withinBounds.d.ts

@@ -1,4 +1,4 @@
-import type { Bounds } from "@excalidraw/element";
+import { type Bounds } from "@excalidraw/common";
 import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 type Element = NonDeletedExcalidrawElement;
 type Elements = readonly NonDeletedExcalidrawElement[];
@@ -8,7 +8,7 @@ export declare const elementsOverlappingBBox: ({ elements, bounds, type, errorMa
     elements: Elements;
     bounds: Bounds | ExcalidrawElement;
     /** safety offset. Defaults to 0. */
-    errorMargin?: number | undefined;
+    errorMargin?: number;
     /**
      * - overlap: elements overlapping or inside bounds
      * - contain: elements inside bounds or bounds inside elements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/element",
-  "version": "0.18.0-b16b6f8fd",
+  "version": "0.18.0-b1c6bfc",
   "type": "module",
   "types": "./dist/types/element/src/index.d.ts",
   "main": "./dist/prod/index.js",
@@ -17,6 +17,12 @@
       "development": "./dist/dev/index.js",
       "production": "./dist/prod/index.js",
       "default": "./dist/prod/index.js"
+    },
+    "./visualdebug": {
+      "types": "./dist/types/element/src/visualdebug.d.ts",
+      "development": "./dist/dev/visualdebug.js",
+      "production": "./dist/prod/visualdebug.js",
+      "default": "./dist/prod/visualdebug.js"
     }
   },
   "files": [
@@ -57,7 +63,7 @@
     "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
   },
   "dependencies": {
-    "@excalidraw/common": "0.18.0-b16b6f8fd",
-    "@excalidraw/math": "0.18.0-b16b6f8fd"
+    "@excalidraw/common": "0.18.0-b1c6bfc",
+    "@excalidraw/math": "0.18.0-b1c6bfc"
   }
 }