@excalidraw/excalidraw 0.14.2-cef6094 → 0.14.2-f8e65bb

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

package/types/element/textElement.d.ts

@@ -1,24 +1,37 @@
-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;
 };
-export declare const getApproxLineHeight: (font: FontString) => 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 +59,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,5 +1,6 @@
 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 FontFamilyKeys = keyof typeof FONT_FAMILY;
@@ -103,6 +104,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/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;
 }>;