@excalidraw/excalidraw 0.18.0-c6f8ef9 → 0.18.0-d1f3982

package/dist/types/common/src/constants.d.ts

@@ -1,13 +1,5 @@
 import type { ExcalidrawElement, FontFamilyValues } from "@excalidraw/element/types";
 import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
-export declare const isDarwin: boolean;
-export declare const isWindows: boolean;
-export declare const isAndroid: boolean;
-export declare const isFirefox: boolean;
-export declare const isChrome: boolean;
-export declare const isSafari: boolean;
-export declare const isIOS: boolean;
-export declare const isBrave: () => boolean;
 export declare const supportsResizeObserver: boolean;
 export declare const APP_NAME = "Excalidraw";
 export declare const TEXT_AUTOWRAP_THRESHOLD = 36;
@@ -86,10 +78,12 @@ export declare const ENV: {
     PRODUCTION: string;
 };
 export declare const CLASSES: {
+    SIDEBAR: string;
     SHAPE_ACTIONS_MENU: string;
     ZOOM_ACTIONS: string;
     SEARCH_MENU_INPUT_WRAPPER: string;
     CONVERT_ELEMENT_TYPE_POPUP: string;
+    SHAPE_ACTIONS_THEME_SCOPE: string;
 };
 export declare const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
 export declare const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
@@ -175,6 +169,14 @@ export declare const IMAGE_MIME_TYPES: {
     readonly avif: "image/avif";
     readonly jfif: "image/jfif";
 };
+export declare const STRING_MIME_TYPES: {
+    readonly text: "text/plain";
+    readonly html: "text/html";
+    readonly json: "application/json";
+    readonly excalidraw: "application/vnd.excalidraw+json";
+    readonly excalidrawlib: "application/vnd.excalidrawlib+json";
+    readonly excalidrawlibIds: "application/vnd.excalidrawlib.ids+json";
+};
 export declare const MIME_TYPES: {
     readonly svg: "image/svg+xml";
     readonly png: "image/png";
@@ -185,14 +187,15 @@ export declare const MIME_TYPES: {
     readonly ico: "image/x-icon";
     readonly avif: "image/avif";
     readonly jfif: "image/jfif";
+    readonly "excalidraw.svg": "image/svg+xml";
+    readonly "excalidraw.png": "image/png";
+    readonly binary: "application/octet-stream";
     readonly text: "text/plain";
     readonly html: "text/html";
     readonly json: "application/json";
     readonly excalidraw: "application/vnd.excalidraw+json";
     readonly excalidrawlib: "application/vnd.excalidrawlib+json";
-    readonly "excalidraw.svg": "image/svg+xml";
-    readonly "excalidraw.png": "image/png";
-    readonly binary: "application/octet-stream";
+    readonly excalidrawlibIds: "application/vnd.excalidrawlib.ids+json";
 };
 export declare const ALLOWED_PASTE_MIME_TYPES: readonly ["text/plain", "text/html", ...("image/svg+xml" | "image/png" | "image/jpeg" | "image/gif" | "image/webp" | "image/bmp" | "image/x-icon" | "image/avif" | "image/jfif")[]];
 export declare const EXPORT_IMAGE_TYPES: {
@@ -227,10 +230,6 @@ export declare const URL_HASH_KEYS: {
     readonly addLibrary: "addLibrary";
 };
 export declare const DEFAULT_UI_OPTIONS: AppProps["UIOptions"];
-export declare const MQ_MAX_WIDTH_PORTRAIT = 730;
-export declare const MQ_MAX_WIDTH_LANDSCAPE = 1000;
-export declare const MQ_MAX_HEIGHT_LANDSCAPE = 500;
-export declare const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
 export declare const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export declare const EXPORT_SCALES: number[];
 export declare const DEFAULT_EXPORT_PADDING = 10;
@@ -342,3 +341,7 @@ export declare enum UserIdleState {
  * the start and end points)
  */
 export declare const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
+export declare const DOUBLE_TAP_POSITION_THRESHOLD = 35;
+export declare const MOBILE_ACTION_BUTTON_BG: {
+    readonly background: "var(--mobile-action-button-bg)";
+};

package/dist/types/common/src/editorInterface.d.ts

@@ -0,0 +1,34 @@
+export type StylesPanelMode = "compact" | "full" | "mobile";
+export type EditorInterface = Readonly<{
+    formFactor: "phone" | "tablet" | "desktop";
+    desktopUIMode: "compact" | "full";
+    userAgent: Readonly<{
+        isMobileDevice: boolean;
+        platform: "ios" | "android" | "other" | "unknown";
+    }>;
+    isTouchScreen: boolean;
+    canFitSidebar: boolean;
+    isLandscape: boolean;
+}>;
+export declare const MQ_MAX_MOBILE = 599;
+export declare const MQ_MAX_WIDTH_LANDSCAPE = 1000;
+export declare const MQ_MAX_HEIGHT_LANDSCAPE = 500;
+export declare const MQ_MIN_TABLET: number;
+export declare const MQ_MAX_TABLET = 1400;
+export declare const MQ_MIN_WIDTH_DESKTOP = 1440;
+export declare const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
+export declare const isDarwin: boolean;
+export declare const isWindows: boolean;
+export declare const isAndroid: boolean;
+export declare const isFirefox: boolean;
+export declare const isChrome: boolean;
+export declare const isSafari: boolean;
+export declare const isIOS: boolean;
+export declare const isBrave: () => boolean;
+export declare const isMobileBreakpoint: (width: number, height: number) => boolean;
+export declare const isTabletBreakpoint: (editorWidth: number, editorHeight: number) => boolean;
+export declare const getFormFactor: (editorWidth: number, editorHeight: number) => EditorInterface["formFactor"];
+export declare const deriveStylesPanelMode: (editorInterface: EditorInterface) => StylesPanelMode;
+export declare const createUserAgentDescriptor: (userAgentString: string) => EditorInterface["userAgent"];
+export declare const loadDesktopUIModePreference: () => "compact" | "full" | null;
+export declare const setDesktopUIMode: (mode: EditorInterface["desktopUIMode"]) => "compact" | "full" | undefined;

package/dist/types/common/src/index.d.ts

@@ -10,3 +10,4 @@ export * from "./random";
 export * from "./url";
 export * from "./utils";
 export * from "./emitter";
+export * from "./editorInterface";

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

@@ -17,6 +17,8 @@ export declare const getFontString: ({ fontSize, fontFamily, }: {
     fontSize: number;
     fontFamily: FontFamilyValues;
 }) => FontString;
+/** executes callback in the frame that's after the current one */
+export declare const nextAnimationFrame: (cb: () => any) => Promise<void>;
 export declare const debounce: <T extends any[]>(fn: (...args: T) => void, timeout: number) => {
     (...args: T): void;
     flush(): void;
@@ -94,7 +96,6 @@ export declare const updateActiveTool: (appState: Pick<AppState, "activeTool">,
 export declare const isFullScreen: () => boolean;
 export declare const allowFullScreen: () => Promise<void>;
 export declare const exitFullScreen: () => Promise<void>;
-export declare const getShortcutKey: (shortcut: string) => string;
 export declare const viewportCoordsToSceneCoords: ({ clientX, clientY }: {
     clientX: number;
     clientY: number;

package/dist/types/element/src/bounds.d.ts

@@ -74,7 +74,7 @@ export interface BoundingBox {
     width: number;
     height: number;
 }
-export declare const getCommonBoundingBox: (elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => BoundingBox;
+export declare const getCommonBoundingBox: (elements: readonly ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => BoundingBox;
 /**
  * returns scene coords of user's editor viewport (visible canvas area) bounds
  */

package/dist/types/element/src/delta.d.ts

@@ -224,6 +224,5 @@ export declare class ElementsDelta implements DeltaContainer<SceneElementsMap> {
      */
     private static postProcess;
     private static stripIrrelevantProps;
-    private static stripVersionProps;
 }
 export {};

package/dist/types/element/src/index.d.ts

@@ -38,6 +38,7 @@ export * from "./image";
 export * from "./linearElementEditor";
 export * from "./mutateElement";
 export * from "./newElement";
+export * from "./positionElementsOnGrid";
 export * from "./renderElement";
 export * from "./resizeElements";
 export * from "./resizeTest";

package/dist/types/element/src/positionElementsOnGrid.d.ts

@@ -0,0 +1,2 @@
+import type { ExcalidrawElement } from "./types";
+export declare const positionElementsOnGrid: <TElement extends ExcalidrawElement>(elements: TElement[] | TElement[][], centerX: number, centerY: number, padding?: number) => TElement[];

package/dist/types/element/src/renderElement.d.ts

@@ -1,6 +1,7 @@
+import { type GlobalPoint } from "@excalidraw/math";
 import type { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure, PendingExcalidrawElements } from "@excalidraw/excalidraw/types";
 import type { StaticCanvasRenderConfig, RenderableElementsMap, InteractiveCanvasRenderConfig } from "@excalidraw/excalidraw/scene/types";
-import type { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawImageElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "./types";
+import type { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawImageElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap, ElementsMap } from "./types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
 export declare const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 export declare const getRenderOpacity: (element: ExcalidrawElement, containingFrame: ExcalidrawFrameLikeElement | null, elementsPendingErasure: ElementsPendingErasure, pendingNodes: Readonly<PendingExcalidrawElements> | null, globalAlpha?: number) => number;
@@ -26,3 +27,5 @@ export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
 export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;
 export declare function getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement): string;
+export declare function getFreedrawOutlineAsSegments(element: ExcalidrawFreeDrawElement, points: [number, number][], elementsMap: ElementsMap): import("@excalidraw/math").LineSegment<GlobalPoint>[];
+export declare function getFreedrawOutlinePoints(element: ExcalidrawFreeDrawElement): [number, number][];

package/dist/types/element/src/resizeTest.d.ts

@@ -1,14 +1,15 @@
+import { type EditorInterface } from "@excalidraw/common";
 import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
-import type { AppState, Device, Zoom } from "@excalidraw/excalidraw/types";
+import type { AppState, Zoom } from "@excalidraw/excalidraw/types";
 import type { Bounds } from "./bounds";
 import type { MaybeTransformHandleType } from "./transformHandles";
 import type { ExcalidrawElement, PointerType, NonDeletedExcalidrawElement, ElementsMap } from "./types";
-export declare const resizeTest: <Point extends GlobalPoint | LocalPoint>(element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, x: number, y: number, zoom: Zoom, pointerType: PointerType, device: Device) => MaybeTransformHandleType;
-export declare const getElementWithTransformHandleType: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, scenePointerX: number, scenePointerY: number, zoom: Zoom, pointerType: PointerType, elementsMap: ElementsMap, device: Device) => {
+export declare const resizeTest: <Point extends GlobalPoint | LocalPoint>(element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, x: number, y: number, zoom: Zoom, pointerType: PointerType, editorInterface: EditorInterface) => MaybeTransformHandleType;
+export declare const getElementWithTransformHandleType: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, scenePointerX: number, scenePointerY: number, zoom: Zoom, pointerType: PointerType, elementsMap: ElementsMap, editorInterface: EditorInterface) => {
     element: NonDeletedExcalidrawElement;
     transformHandleType: MaybeTransformHandleType;
 } | null;
-export declare const getTransformHandleTypeFromCoords: <Point extends GlobalPoint | LocalPoint>([x1, y1, x2, y2]: Bounds, scenePointerX: number, scenePointerY: number, zoom: Zoom, pointerType: PointerType, device: Device) => MaybeTransformHandleType;
+export declare const getTransformHandleTypeFromCoords: <Point extends GlobalPoint | LocalPoint>([x1, y1, x2, y2]: Bounds, scenePointerX: number, scenePointerY: number, zoom: Zoom, pointerType: PointerType, editorInterface: EditorInterface) => MaybeTransformHandleType;
 export declare const getCursorForResizingElement: (resizingElement: {
     element?: ExcalidrawElement;
     transformHandleType: MaybeTransformHandleType;

package/dist/types/element/src/textElement.d.ts

@@ -1,6 +1,6 @@
+import { type Radians } from "@excalidraw/math";
 import type { AppState } from "@excalidraw/excalidraw/types";
 import type { ExtractSetType } from "@excalidraw/common/utility-types";
-import type { Radians } from "@excalidraw/math";
 import type { Scene } from "./Scene";
 import type { MaybeTransformHandleType } from "./transformHandles";
 import type { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, NonDeletedExcalidrawElement } from "./types";

package/dist/types/element/src/transformHandles.d.ts

@@ -1,5 +1,6 @@
+import { type EditorInterface } from "@excalidraw/common";
 import type { Radians } from "@excalidraw/math";
-import type { Device, InteractiveCanvasAppState, Zoom } from "@excalidraw/excalidraw/types";
+import type { InteractiveCanvasAppState, Zoom } from "@excalidraw/excalidraw/types";
 import type { Bounds } from "./bounds";
 import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
 export type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
@@ -28,8 +29,8 @@ export declare const OMIT_SIDES_FOR_FRAME: {
     w: boolean;
     rotation: boolean;
 };
-export declare const canResizeFromSides: (device: Device) => boolean;
-export declare const getOmitSidesForDevice: (device: Device) => {};
+export declare const canResizeFromSides: (editorInterface: EditorInterface) => boolean;
+export declare const getOmitSidesForEditorInterface: (editorInterface: EditorInterface) => {};
 export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [number, number, number, number, number, number], angle: Radians, zoom: Zoom, pointerType: PointerType, omitSides?: {
     s?: boolean | undefined;
     n?: boolean | undefined;
@@ -52,4 +53,4 @@ export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoo
     se?: boolean | undefined;
     rotation?: boolean | undefined;
 }) => TransformHandles;
-export declare const shouldShowBoundingBox: (elements: readonly NonDeletedExcalidrawElement[], appState: InteractiveCanvasAppState) => boolean;
+export declare const hasBoundingBox: (elements: readonly NonDeletedExcalidrawElement[], appState: InteractiveCanvasAppState, editorInterface: EditorInterface) => boolean;

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

@@ -44,6 +44,10 @@ export declare const actionAddToLibrary: {
                 locked: boolean;
                 fromSelection: boolean;
             } & import("../types").ActiveTool;
+            preferredSelectionTool: {
+                type: "selection" | "lasso";
+                initialized: boolean;
+            };
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -76,8 +80,8 @@ export declare const actionAddToLibrary: {
             zoom: Readonly<{
                 value: import("../types").NormalizedZoomValue;
             }>;
-            openMenu: "canvas" | "shape" | null;
-            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openMenu: "canvas" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -153,7 +157,7 @@ export declare const actionAddToLibrary: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("@excalidraw/element").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -211,6 +215,10 @@ export declare const actionAddToLibrary: {
                 locked: boolean;
                 fromSelection: boolean;
             } & import("../types").ActiveTool;
+            preferredSelectionTool: {
+                type: "selection" | "lasso";
+                initialized: boolean;
+            };
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -243,8 +251,8 @@ export declare const actionAddToLibrary: {
             zoom: Readonly<{
                 value: import("../types").NormalizedZoomValue;
             }>;
-            openMenu: "canvas" | "shape" | null;
-            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openMenu: "canvas" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -325,7 +333,7 @@ export declare const actionAddToLibrary: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("@excalidraw/element").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -383,6 +391,10 @@ export declare const actionAddToLibrary: {
                 locked: boolean;
                 fromSelection: boolean;
             } & import("../types").ActiveTool;
+            preferredSelectionTool: {
+                type: "selection" | "lasso";
+                initialized: boolean;
+            };
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -415,8 +427,8 @@ export declare const actionAddToLibrary: {
             zoom: Readonly<{
                 value: import("../types").NormalizedZoomValue;
             }>;
-            openMenu: "canvas" | "shape" | null;
-            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openMenu: "canvas" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -497,7 +509,7 @@ export declare const actionAddToLibrary: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("@excalidraw/element").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {

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

@@ -64,6 +64,10 @@ export declare const actionBindText: {
                 locked: boolean;
                 fromSelection: boolean;
             } & import("../types").ActiveTool;
+            preferredSelectionTool: {
+                type: "selection" | "lasso";
+                initialized: boolean;
+            };
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -96,8 +100,8 @@ export declare const actionBindText: {
             zoom: Readonly<{
                 value: import("../types").NormalizedZoomValue;
             }>;
-            openMenu: "canvas" | "shape" | null;
-            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openMenu: "canvas" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -175,7 +179,7 @@ export declare const actionBindText: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("@excalidraw/element").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -248,6 +252,10 @@ export declare const actionWrapTextInContainer: {
                 locked: boolean;
                 fromSelection: boolean;
             } & import("../types").ActiveTool;
+            preferredSelectionTool: {
+                type: "selection" | "lasso";
+                initialized: boolean;
+            };
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -280,8 +288,8 @@ export declare const actionWrapTextInContainer: {
             zoom: Readonly<{
                 value: import("../types").NormalizedZoomValue;
             }>;
-            openMenu: "canvas" | "shape" | null;
-            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openMenu: "canvas" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -359,7 +367,7 @@ export declare const actionWrapTextInContainer: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("@excalidraw/element").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {