npm - @excalidraw/excalidraw - Versions diffs - 0.14.2 → 0.15.1-b64beaf - Mend

@excalidraw/excalidraw 0.14.2 → 0.15.1-b64beaf

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (634) hide show

package/types/actions/actionProperties.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ export declare const actionChangeBackgroundColor: {
 export declare const actionChangeFillStyle: {
     name: "changeFillStyle";
     trackEvent: false;
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, value: any) => {
+    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, value: any, app: import("../../src/types").AppClassProperties) => {
         elements: ExcalidrawElement[];
         appState: {
             currentItemFillStyle: any;
@@ -31,7 +31,7 @@ export declare const actionChangeFillStyle: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -145,7 +145,7 @@ export declare const actionChangeStrokeWidth: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -259,7 +259,7 @@ export declare const actionChangeSloppiness: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -373,7 +373,7 @@ export declare const actionChangeStrokeStyle: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -487,7 +487,7 @@ export declare const actionChangeOpacity: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -601,7 +601,7 @@ export declare const actionChangeFontSize: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -715,7 +715,7 @@ export declare const actionDecreaseFontSize: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -829,7 +829,7 @@ export declare const actionIncreaseFontSize: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -943,7 +943,7 @@ export declare const actionChangeFontFamily: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -1057,7 +1057,7 @@ export declare const actionChangeTextAlign: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -1172,7 +1172,7 @@ export declare const actionChangeVerticalAlign: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -1287,7 +1287,7 @@ export declare const actionChangeRoundness: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
@@ -1403,7 +1403,7 @@ export declare const actionChangeArrowhead: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;

package/types/actions/actionStyles.d.ts CHANGED Viewed

@@ -17,7 +17,7 @@ export declare const actionCopyStyles: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;

package/types/actions/actionToggleGridMode.d.ts CHANGED Viewed

@@ -17,7 +17,7 @@ export declare const actionToggleGridMode: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;

package/types/actions/actionToggleLock.d.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export declare const actionToggleLock: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;

package/types/actions/actionToggleStats.d.ts CHANGED Viewed

@@ -15,7 +15,7 @@ export declare const actionToggleStats: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;

package/types/actions/actionToggleViewMode.d.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export declare const actionToggleViewMode: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;

package/types/actions/actionToggleZenMode.d.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export declare const actionToggleZenMode: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;

package/types/actions/shortcuts.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { SubtypeOf } from "../utility-types";
 import { ActionName } from "./types";
-export declare type ShortcutName = SubtypeOf<ActionName, "toggleTheme" | "loadScene" | "cut" | "copy" | "paste" | "copyStyles" | "pasteStyles" | "selectAll" | "deleteSelectedElements" | "duplicateSelection" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyAsPng" | "copyAsSvg" | "group" | "ungroup" | "gridMode" | "zenMode" | "stats" | "addToLibrary" | "viewMode" | "flipHorizontal" | "flipVertical" | "hyperlink" | "toggleLock"> | "saveScene" | "imageExport";
+export declare type ShortcutName = SubtypeOf<ActionName, "toggleTheme" | "loadScene" | "clearCanvas" | "cut" | "copy" | "paste" | "copyStyles" | "pasteStyles" | "selectAll" | "deleteSelectedElements" | "duplicateSelection" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyAsPng" | "copyAsSvg" | "group" | "ungroup" | "gridMode" | "zenMode" | "stats" | "addToLibrary" | "viewMode" | "flipHorizontal" | "flipVertical" | "hyperlink" | "toggleLock"> | "saveScene" | "imageExport";
 export declare const getShortcutFromShortcutName: (name: ShortcutName) => string;

package/types/actions/types.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from "react";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState, ExcalidrawProps, BinaryFiles } from "../types";
+import { MarkOptional } from "../utility-types";
 export declare type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
 /** if false, the action should be prevented */
 export declare type ActionResult = {
@@ -14,7 +15,7 @@ export declare type ActionResult = {
 declare type ActionFn = (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export declare type UpdaterFn = (res: ActionResult) => void;
 export declare type ActionFilterFn = (action: Action) => void;
-export declare type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "toggleLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool";
+export declare type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "toggleLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "wrapTextInContainer";
 export declare type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/types/components/App.d.ts CHANGED Viewed

@@ -93,7 +93,18 @@ declare class App extends React.Component<AppProps, AppState> {
     toggleLock: (source?: "keyboard" | "ui") => void;
     togglePenMode: () => void;
     onHandToolToggle: () => void;
-    scrollToContent: (target?: ExcalidrawElement | readonly ExcalidrawElement[]) => void;
+    /**
+     * Zooms on canvas viewport center
+     */
+    zoomCanvas: (value: number) => void;
+    private cancelInProgresAnimation;
+    scrollToContent: (target?: ExcalidrawElement | readonly ExcalidrawElement[], opts?: {
+        fitToContent?: boolean;
+        animate?: boolean;
+        duration?: number;
+    }) => void;
+    /** use when changing scrollX/scrollY/zoom based on user interaction */
+    private translateCanvas;
     setToast: (toast: {
         message: string;
         closable?: boolean;

package/types/components/BraveMeasureTextError.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const BraveMeasureTextError: () => JSX.Element;
2	+ export default BraveMeasureTextError;

package/types/components/ButtonIconSelect.d.ts CHANGED Viewed

@@ -1,11 +1,19 @@
-export declare const ButtonIconSelect: <T extends Object>({ options, value, onChange, group, }: {
+export declare const ButtonIconSelect: <T extends Object>(props: {
     options: {
         value: T;
         text: string;
         icon: JSX.Element;
         testId?: string | undefined;
+        /** if not supplied, defaults to value identity check */
+        active?: boolean | undefined;
     }[];
     value: T | null;
-    onChange: (value: T) => void;
+    type?: "button" | "radio" | undefined;
+} & ({
+    type?: "radio" | undefined;
     group: string;
-}) => JSX.Element;
+    onChange: (value: T) => void;
+} | {
+    type: "button";
+    onClick: (value: T, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+})) => JSX.Element;

package/types/components/ErrorDialog.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-export declare const ErrorDialog: ({ message, onClose, }: {
-    message: string;
+import React from "react";
+export declare const ErrorDialog: ({ children, onClose, }: {
+    children?: React.ReactNode;
     onClose?: (() => void) | undefined;
 }) => JSX.Element;

package/types/components/HelpButton.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 declare type HelpButtonProps = {
-    title?: string;
     name?: string;
     id?: string;
     onClick?(): void;

package/types/components/MobileMenu.d.ts CHANGED Viewed

@@ -20,6 +20,7 @@ declare type MobileMenuProps = {
     renderCustomStats?: ExcalidrawProps["renderCustomStats"];
     renderSidebars: () => JSX.Element | null;
     device: Device;
+    renderWelcomeScreen: boolean;
 };
-export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onLockToggle, onHandToolToggle, onPenModeToggle, canvas, onImageAction, renderTopRightUI, renderCustomStats, renderSidebars, device, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onLockToggle, onHandToolToggle, onPenModeToggle, canvas, onImageAction, renderTopRightUI, renderCustomStats, renderSidebars, device, renderWelcomeScreen, }: MobileMenuProps) => JSX.Element;
 export {};

package/types/components/icons.d.ts CHANGED Viewed

@@ -87,6 +87,7 @@ export declare const GroupIcon: React.MemoExoticComponent<({ theme }: {
 export declare const UngroupIcon: React.MemoExoticComponent<({ theme }: {
     theme: Theme;
 }) => JSX.Element>;
+export declare const FillZigZagIcon: JSX.Element;
 export declare const FillHachureIcon: JSX.Element;
 export declare const FillCrossHatchIcon: JSX.Element;
 export declare const FillSolidIcon: JSX.Element;

package/types/constants.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
 import { AppProps } from "./types";
-import { FontFamilyValues } from "./element/types";
+import { ExcalidrawElement, FontFamilyValues } from "./element/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 isBrave: () => boolean;
 export declare const APP_NAME = "Excalidraw";
 export declare const DRAGGING_THRESHOLD = 10;
 export declare const LINE_CONFIRM_THRESHOLD = 8;
@@ -159,3 +162,13 @@ export declare const ROUNDNESS: {
 /** key containt id of precedeing elemnt id we use in reconciliation during
  * collaboration */
 export declare const PRECEDING_ELEMENT_KEY = "__precedingElement__";
+export declare const DEFAULT_ELEMENT_PROPS: {
+    strokeColor: ExcalidrawElement["strokeColor"];
+    backgroundColor: ExcalidrawElement["backgroundColor"];
+    fillStyle: ExcalidrawElement["fillStyle"];
+    strokeWidth: ExcalidrawElement["strokeWidth"];
+    strokeStyle: ExcalidrawElement["strokeStyle"];
+    roughness: ExcalidrawElement["roughness"];
+    opacity: ExcalidrawElement["opacity"];
+    locked: ExcalidrawElement["locked"];
+};

package/types/data/blob.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { ExcalidrawElement, FileId } from "../element/types";
 import { AppState, DataURL, LibraryItem } from "../types";
+import { ValueOf } from "../utility-types";
 import { FileSystemHandle } from "./filesystem";
 import { ImportedLibraryData } from "./types";
 export declare const getMimeType: (blob: Blob | string) => string;

package/types/data/restore.d.ts CHANGED Viewed

@@ -8,8 +8,14 @@ export declare type RestoredDataState = {
     appState: RestoredAppState;
     files: BinaryFiles;
 };
-export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined, refreshDimensions?: boolean) => ExcalidrawElement[];
+export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined, opts?: {
+    refreshDimensions?: boolean;
+    repairBindings?: boolean;
+} | undefined) => ExcalidrawElement[];
 export declare const restoreAppState: (appState: ImportedDataState["appState"], localAppState: Partial<AppState> | null | undefined) => RestoredAppState;
-export declare const restore: (data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined) => RestoredDataState;
+export declare const restore: (data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined, elementsConfig?: {
+    refreshDimensions?: boolean;
+    repairBindings?: boolean;
+}) => RestoredDataState;
 export declare const restoreLibraryItems: (libraryItems: ImportedDataState["libraryItems"], defaultStatus: LibraryItem["status"]) => LibraryItem[];
 export {};

package/types/element/Hyperlink.d.ts CHANGED Viewed

@@ -25,7 +25,7 @@ export declare const actionLink: {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: NonDeletedExcalidrawElement | null;
             resizingElement: NonDeletedExcalidrawElement | null;
             multiElement: import("./types").NonDeleted<import("./types").ExcalidrawLinearElement> | null;

package/types/element/linearElementEditor.d.ts CHANGED Viewed

@@ -130,7 +130,7 @@ export declare class LinearElementEditor {
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("./types").NonDeletedExcalidrawElement | null;
             resizingElement: import("./types").NonDeletedExcalidrawElement | null;
             multiElement: NonDeleted<ExcalidrawLinearElement> | null;

package/types/element/mutateElement.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ExcalidrawElement } from "./types";
+import { Mutable } from "../utility-types";
 declare type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce">;
 export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
 export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>) => TElement;

package/types/element/newElement.d.ts CHANGED Viewed

@@ -1,16 +1,19 @@
 import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer } from "../element/types";
 import { AppState } from "../types";
-declare type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "boundElements" | "seed" | "version" | "versionNonce" | "link">;
+import { MarkOptional, Mutable } from "../utility-types";
+declare type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;
 export declare const newTextElement: (opts: {
     text: string;
-    fontSize: number;
-    fontFamily: FontFamilyValues;
-    textAlign: TextAlign;
-    verticalAlign: VerticalAlign;
+    fontSize?: number;
+    fontFamily?: FontFamilyValues;
+    textAlign?: TextAlign;
+    verticalAlign?: VerticalAlign;
     containerId?: ExcalidrawTextContainer["id"];
+    lineHeight?: ExcalidrawTextElement["lineHeight"];
+    strokeWidth?: ExcalidrawTextElement["strokeWidth"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
 export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
     x: number;
@@ -19,9 +22,7 @@ export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement,
     height: number;
     baseline: number;
     text: string;
-};
-export declare const getMaxContainerWidth: (container: ExcalidrawElement) => number;
-export declare const getMaxContainerHeight: (container: ExcalidrawElement) => number;
+} | undefined;
 export declare const updateTextElement: (textElement: ExcalidrawTextElement, { text, isDeleted, originalText, }: {
     text: string;
     isDeleted?: boolean | undefined;
@@ -44,7 +45,16 @@ export declare const newImageElement: (opts: {
     fileId?: ExcalidrawImageElement["fileId"];
     scale?: ExcalidrawImageElement["scale"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawImageElement>;
-export declare const deepCopyElement: (val: any, depth?: number) => any;
+/**
+ * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or
+ * any value. The purpose is to to break object references for immutability
+ * reasons, whenever we want to keep the original element, but ensure it's not
+ * mutated.
+ *
+ * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
+ * Typed arrays and other non-null objects.
+ */
+export declare const deepCopyElement: <T extends ExcalidrawElement>(val: T) => Mutable<T>;
 /**
  * Duplicate an element, often used in the alt-drag operation.
  * Note that this method has gotten a bit complicated since the
@@ -59,5 +69,14 @@ export declare const deepCopyElement: (val: any, depth?: number) => any;
  * @param element Element to duplicate
  * @param overrides Any element properties to override
  */
-export declare const duplicateElement: <TElement extends Mutable<ExcalidrawElement>>(editingGroupId: AppState["editingGroupId"], groupIdMapForOperation: Map<GroupId, GroupId>, element: TElement, overrides?: Partial<TElement> | undefined) => TElement;
+export declare const duplicateElement: <TElement extends ExcalidrawElement>(editingGroupId: AppState["editingGroupId"], groupIdMapForOperation: Map<GroupId, GroupId>, element: TElement, overrides?: Partial<TElement> | undefined) => Readonly<TElement>;
+/**
+ * Clones elements, regenerating their ids (including bindings) and group ids.
+ *
+ * If bindings don't exist in the elements array, they are removed. Therefore,
+ * it's advised to supply the whole elements array, or sets of elements that
+ * are encapsulated (such as library items), if the purpose is to retain
+ * bindings to the cloned elements intact.
+ */
+export declare const duplicateElements: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];
 export {};

package/types/element/sortElements.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ExcalidrawElement } from "./types";
2	+ export declare const normalizeElementOrder: (elements: readonly ExcalidrawElement[]) => readonly ExcalidrawElement[];

package/types/element/textElement.d.ts CHANGED Viewed

@@ -1,30 +1,43 @@
-import { ExcalidrawElement, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontString, NonDeletedExcalidrawElement } from "./types";
+import { ExcalidrawElement, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
 import { MaybeTransformHandleType } from "./transformHandles";
 import { AppState } from "../types";
+import { ExtractSetType } from "../utility-types";
 export declare const normalizeText: (text: string) => string;
+export declare const splitIntoLines: (text: string) => string[];
 export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null) => void;
 export declare const bindTextToShapeAfterDuplication: (sceneElements: ExcalidrawElement[], oldElements: ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare const handleBindTextResize: (container: NonDeletedExcalidrawElement, transformHandleType: MaybeTransformHandleType) => void;
-export declare const measureText: (text: string, font: FontString, maxWidth?: number | null) => {
-    width: number;
-    height: number;
-    baseline: number;
-    container: HTMLDivElement;
-} | {
+export declare const computeBoundTextPosition: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer) => {
+    x: number;
+    y: number;
+};
+export declare const measureText: (text: string, font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => {
     width: number;
     height: number;
     baseline: number;
-    container?: undefined;
 };
-export declare const getApproxLineHeight: (font: FontString) => number;
+export declare const measureBaseline: (text: string, font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"], wrapInContainer?: boolean) => number;
+/**
+ * To get unitless line-height (if unknown) we can calculate it by dividing
+ * height-per-line by fontSize.
+ */
+export declare const detectLineHeight: (textElement: ExcalidrawTextElement) => number & {
+    _brand: "unitlessLineHeight";
+};
+/**
+ * We calculate the line height from the font size and the unitless line height,
+ * aligning with the W3C spec.
+ */
+export declare const getLineHeightInPx: (fontSize: ExcalidrawTextElement["fontSize"], lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
+export declare const getApproxMinLineHeight: (fontSize: ExcalidrawTextElement["fontSize"], lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export declare const getTextWidth: (text: string, font: FontString) => number;
+export declare const getTextHeight: (text: string, fontSize: number, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export declare const wrapText: (text: string, font: FontString, maxWidth: number) => string;
 export declare const charWidth: {
     calculate: (char: string, font: FontString) => number;
     getCache: (font: FontString) => number[];
 };
-export declare const getApproxMinLineWidth: (font: FontString) => number;
-export declare const getApproxMinLineHeight: (font: FontString) => number;
+export declare const getApproxMinLineWidth: (font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export declare const getMinCharWidth: (font: FontString) => number;
 export declare const getMaxCharWidth: (font: FontString) => number;
 export declare const getApproxCharsToFitInWidth: (font: FontString, width: number) => number;
@@ -41,6 +54,10 @@ export declare const getContainerCenter: (container: ExcalidrawElement, appState
     x: number;
     y: number;
 };
+export declare const getContainerCoords: (container: NonDeletedExcalidrawElement) => {
+    x: number;
+    y: number;
+};
 export declare const getTextElementAngle: (textElement: ExcalidrawTextElement) => number;
 export declare const getBoundTextElementOffset: (boundTextElement: ExcalidrawTextElement | null) => number;
 export declare const getBoundTextElementPosition: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer) => {
@@ -48,5 +65,15 @@ export declare const getBoundTextElementPosition: (container: ExcalidrawElement,
     y: number;
 } | undefined;
 export declare const shouldAllowVerticalAlign: (selectedElements: NonDeletedExcalidrawElement[]) => boolean;
+export declare const suppportsHorizontalAlign: (selectedElements: NonDeletedExcalidrawElement[]) => boolean;
 export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], appState: AppState, x: number, y: number) => ExcalidrawTextContainer | null;
+declare const VALID_CONTAINER_TYPES: Set<string>;
 export declare const isValidTextContainer: (element: ExcalidrawElement) => boolean;
+export declare const computeContainerDimensionForBoundText: (dimension: number, containerType: ExtractSetType<typeof VALID_CONTAINER_TYPES>) => number;
+export declare const getMaxContainerWidth: (container: ExcalidrawElement) => number;
+export declare const getMaxContainerHeight: (container: ExcalidrawElement) => number;
+export declare const isMeasureTextSupported: () => boolean;
+export declare const getDefaultLineHeight: (fontFamily: FontFamilyValues) => number & {
+    _brand: "unitlessLineHeight";
+};
+export {};

package/types/element/typeChecks.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { AppState } from "../types";
+import { MarkNonNullable } from "../utility-types";
 import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, RoundnessType } from "./types";
 export declare const isGenericElement: (element: ExcalidrawElement | null) => element is ExcalidrawGenericElement;
 export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
@@ -14,7 +15,7 @@ export declare const isBindingElementType: (elementType: AppState["activeTool"][
 export declare const isBindableElement: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawBindableElement;
 export declare const isTextBindableContainer: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawTextContainer;
 export declare const isExcalidrawElement: (element: any) => boolean;
-export declare const hasBoundTextElement: (element: ExcalidrawElement | null) => element is ExcalidrawBindableElement;
+export declare const hasBoundTextElement: (element: ExcalidrawElement | null) => element is MarkNonNullable<ExcalidrawBindableElement, "boundElements">;
 export declare const isBoundToContainer: (element: ExcalidrawElement | null) => element is ExcalidrawTextElementWithContainer;
 export declare const isUsingAdaptiveRadius: (type: string) => boolean;
 export declare const isUsingProportionalRadius: (type: string) => boolean;

package/types/element/types.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { Point } from "../types";
 import { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
+import { MarkNonNullable, ValueOf } from "../utility-types";
 export declare type ChartType = "bar" | "line";
-export declare type FillStyle = "hachure" | "cross-hatch" | "solid";
+export declare type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
 export declare type FontFamilyKeys = keyof typeof FONT_FAMILY;
 export declare type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys];
 export declare type Theme = typeof THEME[keyof typeof THEME];
@@ -104,6 +105,13 @@ export declare type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
     verticalAlign: VerticalAlign;
     containerId: ExcalidrawGenericElement["id"] | null;
     originalText: string;
+    /**
+     * Unitless line height (aligned to W3C). To get line height in px, multiply
+     *  with font size (using `getLineHeightInPx` helper).
+     */
+    lineHeight: number & {
+        _brand: "unitlessLineHeight";
+    };
 }>;
 export declare type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement;
 export declare type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawImageElement | ExcalidrawArrowElement;

package/types/i18n.d.ts CHANGED Viewed

@@ -13,3 +13,9 @@ export declare const getLanguage: () => Language;
 export declare const t: (path: string, replacement?: {
     [key: string]: string | number;
 } | undefined) => string;
+export declare const useI18n: () => {
+    t: (path: string, replacement?: {
+        [key: string]: string | number;
+    } | undefined) => string;
+    langCode: string;
+};