@excalidraw/excalidraw 0.14.2-cef6094 → 0.14.2-e4d8ba2

package/types/actions/actionProperties.d.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,3 +1,4 @@
+import { SubtypeOf } from "../utility-types";
 import { ActionName } from "./types";
 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

@@ -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 = {

package/types/components/App.d.ts

@@ -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

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

package/types/components/ButtonIconSelect.d.ts

@@ -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

@@ -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/icons.d.ts

@@ -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

@@ -6,6 +6,7 @@ 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;

package/types/data/blob.d.ts

@@ -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/element/Hyperlink.d.ts

@@ -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

@@ -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

@@ -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

@@ -1,5 +1,6 @@
 import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer } from "../element/types";
 import { AppState } from "../types";
+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">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
@@ -11,14 +12,16 @@ export declare const newTextElement: (opts: {
     textAlign: TextAlign;
     verticalAlign: VerticalAlign;
     containerId?: ExcalidrawTextContainer["id"];
+    lineHeight?: ExcalidrawTextElement["lineHeight"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
 export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
     x: number;
     y: number;
     width: number;
     height: number;
+    baseline: number;
     text: string;
-};
+} | undefined;
 export declare const updateTextElement: (textElement: ExcalidrawTextElement, { text, isDeleted, originalText, }: {
     text: string;
     isDeleted?: boolean | undefined;

package/types/element/textElement.d.ts

@@ -1,24 +1,39 @@
-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) => {
+export declare const measureText: (text: string, font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => {
     width: number;
     height: number;
+    baseline: number;
 };
-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, 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;
@@ -46,10 +61,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

@@ -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;

package/types/element/types.d.ts

@@ -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];
@@ -99,10 +100,18 @@ export declare type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
     fontSize: number;
     fontFamily: FontFamilyValues;
     text: string;
+    baseline: number;
     textAlign: TextAlign;
     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/renderer/renderElement.d.ts

@@ -3,12 +3,12 @@ import { RoughCanvas } from "roughjs/bin/canvas";
 import { Drawable, Options } from "roughjs/bin/core";
 import { RoughSVG } from "roughjs/bin/svg";
 import { RenderConfig } from "../scene/types";
-import { AppState, BinaryFiles, Zoom } from "../types";
+import { AppState, BinaryFiles } from "../types";
 export interface ExcalidrawElementWithCanvas {
     element: ExcalidrawElement | ExcalidrawTextElement;
     canvas: HTMLCanvasElement;
     theme: RenderConfig["theme"];
-    canvasZoom: Zoom["value"];
+    scale: number;
     canvasOffsetX: number;
     canvasOffsetY: number;
     boundTextElementVersion: number | null;

package/types/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
@@ -16,6 +15,8 @@ import Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
 import { ContextMenuItems } from "./components/ContextMenu";
+import { Merge, ForwardRef } from "./utility-types";
+import React from "react";
 export declare type Point = Readonly<RoughPoint>;
 export declare type Collaborator = {
     pointer?: {
@@ -70,7 +71,7 @@ export declare type AppState = {
     } | null;
     showWelcomeScreen: boolean;
     isLoading: boolean;
-    errorMessage: string | null;
+    errorMessage: React.ReactNode;
     draggingElement: NonDeletedExcalidrawElement | null;
     resizingElement: NonDeletedExcalidrawElement | null;
     multiElement: NonDeleted<ExcalidrawLinearElement> | null;

package/types/utility-types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare type Mutable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+export declare type ValueOf<T> = T[keyof T];
+export declare type Merge<M, N> = Omit<M, keyof N> & N;
+/** utility type to assert that the second type is a subtype of the first type.
+ * Returns the subtype. */
+export declare type SubtypeOf<Supertype, Subtype extends Supertype> = Subtype;
+export declare type ResolutionType<T extends (...args: any) => any> = T extends (...args: any) => Promise<infer R> ? R : any;
+export declare type MarkOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export declare type MarkRequired<T, RK extends keyof T> = Exclude<T, RK> & Required<Pick<T, RK>>;
+export declare type MarkNonNullable<T, K extends keyof T> = {
+    [P in K]-?: P extends K ? NonNullable<T[P]> : T[P];
+} & {
+    [P in keyof T]: T[P];
+};
+export declare type NonOptional<T> = Exclude<T, undefined>;
+export declare type SignatureType<T> = T extends (...args: infer R) => any ? R : never;
+export declare type CallableType<T extends (...args: any[]) => any> = (...args: SignatureType<T>) => ReturnType<T>;
+export declare type ForwardRef<T, P = any> = Parameters<CallableType<React.ForwardRefRenderFunction<T, P>>>[1];
+export declare type ExtractSetType<T extends Set<any>> = T extends Set<infer U> ? U : never;

package/types/utils.d.ts

@@ -28,6 +28,26 @@ export declare const throttleRAF: <T extends any[]>(fn: (...args: T) => void, op
     flush(): void;
     cancel(): void;
 };
+/**
+ * Compute new values based on the same ease function and trigger the
+ * callback through a requestAnimationFrame call
+ *
+ * use `opts` to define a duration and/or an easeFn
+ *
+ * for example:
+ * ```ts
+ * easeToValuesRAF([10, 20, 10], [0, 0, 0], (a, b, c) => setState(a,b, c))
+ * ```
+ *
+ * @param fromValues The initial values, must be numeric
+ * @param toValues The destination values, must also be numeric
+ * @param callback The callback receiving the values
+ * @param opts default to 250ms duration and the easeOut function
+ */
+export declare const easeToValuesRAF: (fromValues: number[], toValues: number[], callback: (...values: number[]) => void, opts?: {
+    duration?: number | undefined;
+    easeFn?: ((value: number) => number) | undefined;
+} | undefined) => () => void;
 export declare const chunk: <T extends unknown>(array: readonly T[], size: number) => T[][];
 export declare const selectNode: (node: Element) => void;
 export declare const removeSelection: () => void;
@@ -128,7 +148,6 @@ export declare const arrayToMapWithIndex: <T extends {
     id: string;
 }>(elements: readonly T[]) => Map<string, [element: T, index: number]>;
 export declare const isTestEnv: () => boolean;
-export declare const isProdEnv: () => boolean;
 export declare const wrapEvent: <T extends Event>(name: EVENT, nativeEvent: T) => CustomEvent<{
     nativeEvent: T;
 }>;