@excalidraw/element 0.18.0-9036812b6 → 0.18.0-9ba0f5d

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

@@ -1,8 +1,7 @@
-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, ChartType, FontFamilyValues, FileId, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement, BindMode } 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 { Action } from "./actions/types";
@@ -125,6 +124,7 @@ 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 & {
@@ -133,8 +133,9 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     selectedGroupIds: AppState["selectedGroupIds"];
     selectedLinearElement: AppState["selectedLinearElement"];
     multiElement: AppState["multiElement"];
+    newElement: AppState["newElement"];
     isBindingEnabled: AppState["isBindingEnabled"];
-    suggestedBindings: AppState["suggestedBindings"];
+    suggestedBinding: AppState["suggestedBinding"];
     isRotating: AppState["isRotating"];
     elementsToHighlight: AppState["elementsToHighlight"];
     collaborators: AppState["collaborators"];
@@ -145,6 +146,10 @@ 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"];
 }>;
 export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
 export type ObservedStandaloneAppState = {
@@ -198,7 +203,7 @@ export interface AppState {
     selectionElement: NonDeletedExcalidrawElement | null;
     isBindingEnabled: boolean;
     startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
-    suggestedBindings: SuggestedBinding[];
+    suggestedBinding: NonDeleted<ExcalidrawBindableElement> | null;
     frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
     frameRendering: {
         enabled: boolean;
@@ -221,6 +226,10 @@ export interface AppState {
         locked: boolean;
         fromSelection: boolean;
     } & ActiveTool;
+    preferredSelectionTool: {
+        type: "selection" | "lasso";
+        initialized: boolean;
+    };
     penMode: boolean;
     penDetected: boolean;
     exportBackground: boolean;
@@ -251,8 +260,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;
@@ -264,6 +273,8 @@ export interface AppState {
         tab: "text-to-diagram" | "mermaid";
     } | {
         name: "commandPalette";
+    } | {
+        name: "settings";
     } | {
         name: "elementLinkSelector";
         sourceElementId: ExcalidrawElement["id"];
@@ -351,6 +362,7 @@ export interface AppState {
     lockedMultiSelections: {
         [groupId: string]: true;
     };
+    bindMode: BindMode;
 }
 export type SearchMatch = {
     id: string;
@@ -363,7 +375,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";
 };
@@ -441,6 +453,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;
@@ -498,6 +511,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;
 }>;
@@ -528,7 +546,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"];
@@ -557,6 +575,8 @@ export type AppClassProperties = {
     excalidrawContainerValue: App["excalidrawContainerValue"];
     onPointerUpEmitter: App["onPointerUpEmitter"];
     updateEditorAtom: App["updateEditorAtom"];
+    onPointerDownEmitter: App["onPointerDownEmitter"];
+    bindModeHandler: App["bindModeHandler"];
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{
@@ -604,6 +624,7 @@ export type PointerDownState = Readonly<{
             x: number;
             y: number;
         };
+        blockDragging: boolean;
     };
     eventListeners: {
         onMove: null | ReturnType<typeof throttleRAF>;
@@ -618,6 +639,7 @@ export type PointerDownState = Readonly<{
 export type UnsubscribeCallback = () => void;
 export interface ExcalidrawImperativeAPI {
     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"];
@@ -640,6 +662,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
@@ -653,17 +676,6 @@ export interface ExcalidrawImperativeAPI {
     onScrollChange: (callback: (scrollX: number, scrollY: number, zoom: Zoom) => void) => UnsubscribeCallback;
     onUserFollow: (callback: (payload: OnUserFollowedPayload) => void) => UnsubscribeCallback;
 }
-export type Device = Readonly<{
-    viewport: {
-        isMobile: boolean;
-        isLandscape: boolean;
-    };
-    editor: {
-        isMobile: boolean;
-        canFitSidebar: boolean;
-    };
-    isTouchScreen: boolean;
-}>;
 export type FrameNameBounds = {
     x: number;
     y: number;

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

@@ -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,6 @@ export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords,
     canvas: HTMLCanvasElement;
     excalidrawContainer: HTMLDivElement | null;
     app: App;
-    autoSelect?: boolean | undefined;
+    autoSelect?: boolean;
 }) => SubmitHandler;
 export {};

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/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-9036812b6",
+  "version": "0.18.0-9ba0f5d",
   "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-9036812b6",
-    "@excalidraw/math": "0.18.0-9036812b6"
+    "@excalidraw/common": "0.18.0-9ba0f5d",
+    "@excalidraw/math": "0.18.0-9ba0f5d"
   }
 }