@excalidraw/element 0.18.0-5fffc47 → 0.18.0-60b2758

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

@@ -1,10 +1,10 @@
-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 } 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";
@@ -18,6 +18,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 +126,19 @@ 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"];
+    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 = {
@@ -198,7 +207,10 @@ export interface AppState {
     selectionElement: NonDeletedExcalidrawElement | null;
     isBindingEnabled: boolean;
     startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
-    suggestedBindings: SuggestedBinding[];
+    suggestedBinding: {
+        element: NonDeleted<ExcalidrawBindableElement>;
+        midPoint?: GlobalPoint;
+    } | null;
     frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
     frameRendering: {
         enabled: boolean;
@@ -268,9 +280,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.
@@ -322,14 +340,6 @@ export interface AppState {
         /** 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[];
@@ -355,8 +365,7 @@ export interface AppState {
     lockedMultiSelections: {
         [groupId: string]: true;
     };
-    /** properties sidebar mode - determines whether to show compact or complete sidebar */
-    stylesPanelMode: "compact" | "full" | "mobile";
+    bindMode: BindMode;
 }
 export type SearchMatch = {
     id: string;
@@ -369,7 +378,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";
 };
@@ -505,6 +514,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;
 }>;
@@ -535,7 +549,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"];
@@ -565,6 +579,8 @@ export type AppClassProperties = {
     onPointerUpEmitter: App["onPointerUpEmitter"];
     updateEditorAtom: App["updateEditorAtom"];
     onPointerDownEmitter: App["onPointerDownEmitter"];
+    lastPointerMoveCoords: App["lastPointerMoveCoords"];
+    bindModeHandler: App["bindModeHandler"];
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{
@@ -650,6 +666,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
@@ -663,17 +680,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;
@@ -713,4 +719,3 @@ export type Offsets = Partial<{
     bottom: number;
     left: number;
 }>;
-export {};

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/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.
  *

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
  *

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-5fffc47",
+  "version": "0.18.0-60b2758",
   "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-5fffc47",
-    "@excalidraw/math": "0.18.0-5fffc47"
+    "@excalidraw/common": "0.18.0-60b2758",
+    "@excalidraw/math": "0.18.0-60b2758"
   }
 }

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

@@ -1,27 +0,0 @@
-import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
-export type ChartElements = readonly NonDeletedExcalidrawElement[];
-export interface Spreadsheet {
-    title: string | null;
-    labels: string[] | null;
-    values: number[];
-}
-export declare const NOT_SPREADSHEET = "NOT_SPREADSHEET";
-export declare const VALID_SPREADSHEET = "VALID_SPREADSHEET";
-type ParseSpreadsheetResult = {
-    type: typeof NOT_SPREADSHEET;
-    reason: string;
-} | {
-    type: typeof VALID_SPREADSHEET;
-    spreadsheet: Spreadsheet;
-};
-/**
- * @private exported for testing
- */
-export declare const tryParseNumber: (s: string) => number | null;
-/**
- * @private exported for testing
- */
-export declare const tryParseCells: (cells: string[][]) => ParseSpreadsheetResult;
-export declare const tryParseSpreadsheet: (text: string) => ParseSpreadsheetResult;
-export declare const renderSpreadsheet: (chartType: string, spreadsheet: Spreadsheet, x: number, y: number) => ChartElements;
-export {};