@dwelle/excalidraw 0.4.0-83d46fe → 0.4.0-8a7de60

package/types/element/newElement.d.ts

@@ -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,19 @@ 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.
+ *
+ * NOTE by default does not randomize or regenerate anything except the id.
+ */
+export declare const duplicateElements: (elements: readonly ExcalidrawElement[], opts?: {
+    /** NOTE also updates version flags and `updated` */
+    randomizeSeed: boolean;
+}) => ExcalidrawElement[];
 export {};

package/types/element/sortElements.d.ts

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

package/types/element/textElement.d.ts

@@ -1,30 +1,44 @@
-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 parseTokens: (text: string) => string[];
 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 +55,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 +66,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;
@@ -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

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

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

package/types/jotai.d.ts

@@ -1,9 +1,9 @@
-import { WritableAtom } from "jotai";
+import { PrimitiveAtom } from "jotai";
 export declare const jotaiScope: unique symbol;
 export declare const jotaiStore: {
     get: <Value>(atom: import("jotai").Atom<Value>) => (Value extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value) | undefined;
     asyncGet: <Value_1>(atom: import("jotai").Atom<Value_1>) => Promise<Value_1 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_1>;
-    set: <Value_2, Update, Result extends void | Promise<void>>(atom: WritableAtom<Value_2, Update, Result>, update: Update) => Result;
+    set: <Value_2, Update, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_2, Update, Result>, update: Update) => Result;
     sub: (atom: {
         toString: () => string;
         debugLabel?: string | undefined;
@@ -15,7 +15,7 @@ export declare const jotaiStore: {
     }, callback: () => void) => () => void;
     SECRET_INTERNAL_store: {
         r: <Value_6>(readingAtom: import("jotai").Atom<Value_6>, version?: import("jotai/core/store").VersionObject | undefined) => import("jotai/core/store").AtomState<Value_6>;
-        w: <Value_1_1, Update_1, Result_1 extends void | Promise<void>>(writingAtom: WritableAtom<Value_1_1, Update_1, Result_1>, update: Update_1, version?: import("jotai/core/store").VersionObject | undefined) => Result_1;
+        w: <Value_1_1, Update_1, Result_1 extends void | Promise<void>>(writingAtom: import("jotai").WritableAtom<Value_1_1, Update_1, Result_1>, update: Update_1, version?: import("jotai/core/store").VersionObject | undefined) => Result_1;
         c: (_atom: {
             toString: () => string;
             debugLabel?: string | undefined;
@@ -85,7 +85,7 @@ export declare const jotaiStore: {
         } | undefined;
     } | {
         r: <Value_7>(readingAtom: import("jotai").Atom<Value_7>, version?: import("jotai/core/store").VersionObject | undefined) => import("jotai/core/store").AtomState<Value_7>;
-        w: <Value_1_2, Update_2, Result_2 extends void | Promise<void>>(writingAtom: WritableAtom<Value_1_2, Update_2, Result_2>, update: Update_2, version?: import("jotai/core/store").VersionObject | undefined) => Result_2;
+        w: <Value_1_2, Update_2, Result_2 extends void | Promise<void>>(writingAtom: import("jotai").WritableAtom<Value_1_2, Update_2, Result_2>, update: Update_2, version?: import("jotai/core/store").VersionObject | undefined) => Result_2;
         c: (_atom: {
             toString: () => string;
             debugLabel?: string | undefined;
@@ -119,4 +119,4 @@ export declare const jotaiStore: {
         m?: undefined;
     };
 };
-export declare const useAtomWithInitialValue: <T extends unknown, A extends WritableAtom<T, T, void>>(atom: A, initialValue: T | (() => T)) => readonly [T extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : T, import("jotai/core/atom").SetAtom<T, void>];
+export declare const useAtomWithInitialValue: <T extends unknown, A extends PrimitiveAtom<T>>(atom: A, initialValue: T | (() => T)) => readonly [T extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : T, import("jotai/core/atom").SetAtom<T | ((prev: T) => T), void>];

package/types/math.d.ts

@@ -26,3 +26,4 @@ export declare const getBezierCurveArcLengths: (element: NonDeleted<ExcalidrawLi
 export declare const getBezierCurveLength: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number]) => number;
 export declare const mapIntervalToBezierT: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number], interval: number) => number;
 export declare const arePointsEqual: (p1: readonly [number, number], p2: readonly [number, number]) => boolean;
+export declare const isRightAngle: (angle: number) => boolean;

package/types/packages/excalidraw/example/App.d.ts

@@ -1,8 +1,14 @@
 import type * as TExcalidraw from "../index";
 import "./App.scss";
+import { ExcalidrawImperativeAPI } from "../../../types";
 declare global {
     interface Window {
         ExcalidrawLib: typeof TExcalidraw;
     }
 }
-export default function App(): JSX.Element;
+export interface AppProps {
+    appTitle: string;
+    useCustom: (api: ExcalidrawImperativeAPI | null, customArgs?: any[]) => void;
+    customArgs?: any[];
+}
+export default function App({ appTitle, useCustom, customArgs }: AppProps): JSX.Element;

package/types/packages/excalidraw/index.d.ts

@@ -9,7 +9,7 @@ import LiveCollaborationTrigger from "../../components/live-collaboration/LiveCo
 declare type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
 export declare const Excalidraw: React.MemoExoticComponent<React.ForwardRefExoticComponent<PublicExcalidrawProps & React.RefAttributes<ExcalidrawAPIRefValue>>>;
 export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "../../element";
-export { defaultLang, languages } from "../../i18n";
+export { defaultLang, useI18n, languages } from "../../i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "../../data/restore";
 export { exportToBlob, exportToSvg, serializeAsJSON, serializeLibraryAsJSON, loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, getFreeDrawSvgPath, exportToClipboard, mergeLibraryItems, } from "../../packages/utils";
 export { isLinearElement } from "../../element/typeChecks";
@@ -29,3 +29,4 @@ export { jotaiScope, jotaiStore } from "../../jotai";
 export { libraryItemsAtom } from "../../data/library";
 export { exportToCanvas } from "../../scene/export";
 export * as icons from "../../components/icons";
+export * as actions from "../../actions/index";

package/types/packages/utils.d.ts

@@ -14,6 +14,10 @@ export declare const exportToSvg: ({ data, config, }: {
     data: ExportToCanvasData;
     config?: ExportToSvgConfig | undefined;
 }) => Promise<SVGSVGElement>;
+export declare const exportToCanvas: ({ data, config, }: {
+    data: ExportToCanvasData;
+    config?: ExportToCanvasConfig | undefined;
+}) => Promise<HTMLCanvasElement>;
 export declare const exportToClipboard: ({ type, data, config, }: {
     data: ExportToCanvasData;
 } & ({

package/types/renderer/renderElement.d.ts

@@ -3,12 +3,13 @@ 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;
+    zoomValue: RenderConfig["zoom"]["value"];
     canvasOffsetX: number;
     canvasOffsetY: number;
     boundTextElementVersion: number | null;

package/types/scene/export.d.ts

@@ -1,5 +1,6 @@
 import { NonDeletedExcalidrawElement, Theme } from "../element/types";
 import { AppState, BinaryFiles } from "../types";
+import { serializeAsJSON } from "../data/json";
 export declare const SVG_EXPORT_TAG = "<!-- svg-source:excalidraw -->";
 export declare type ExportToCanvasData = {
     elements: readonly NonDeletedExcalidrawElement[];
@@ -33,6 +34,15 @@ export declare type ExportToCanvasConfig = {
      * `scale`.
      */
     maxWidthOrHeight?: number;
+    /**
+     * Scale the canvas content to be excatly this many pixels wide/tall.
+     *
+     * Cannot be used in conjunction with `maxWidthOrHeight`.
+     *
+     * Final dimensions can get smaller/larger if used in conjunction with
+     * `scale`.
+     */
+    widthOrHeight?: number;
     /**
      * Width of the frame. Supply `x` or `y` if you want to ofsset the canvas
      * content.
@@ -150,5 +160,7 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     viewBackgroundColor: string;
     exportWithDarkMode?: boolean;
     exportEmbedScene?: boolean;
-}, files: BinaryFiles | null) => Promise<SVGSVGElement>;
+}, files: BinaryFiles | null, opts?: {
+    serializeAsJSON?: () => string;
+}) => Promise<SVGSVGElement>;
 export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], padding: number, scale: number) => [number, number];

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";
@@ -14,8 +13,10 @@ import { isOverScrollBars } from "./scene";
 import { MaybeTransformHandleType } from "./element/transformHandles";
 import Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
-import type { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
+import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
 import { ContextMenuItems } from "./components/ContextMenu";
+import { Merge, ForwardRef, ValueOf } from "./utility-types";
+import React from "react";
 export declare type Point = Readonly<RoughPoint>;
 export declare type Collaborator = {
     pointer?: {
@@ -37,7 +38,7 @@ export declare type DataURL = string & {
     _brand: "DataURL";
 };
 export declare type BinaryFileData = {
-    mimeType: typeof ALLOWED_IMAGE_MIME_TYPES[number] | typeof MIME_TYPES.binary;
+    mimeType: ValueOf<typeof IMAGE_MIME_TYPES> | typeof MIME_TYPES.binary;
     id: FileId;
     dataURL: DataURL;
     /**
@@ -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;
@@ -292,11 +293,12 @@ declare type CanvasActions = Partial<{
 }>;
 declare type UIOptions = Partial<{
     dockedSidebarBreakpoint: number;
-    welcomeScreen: boolean;
     canvasActions: CanvasActions;
+    /** @deprecated does nothing. Will be removed in 0.15 */
+    welcomeScreen?: boolean;
 }>;
 export declare type AppProps = Merge<ExcalidrawProps, {
-    UIOptions: Merge<MarkRequired<UIOptions, "welcomeScreen">, {
+    UIOptions: Merge<UIOptions, {
         canvasActions: Required<CanvasActions> & {
             export: ExportOpts;
         };
@@ -315,7 +317,7 @@ export declare type AppClassProperties = {
     library: Library;
     imageCache: Map<FileId, {
         image: HTMLImageElement | Promise<HTMLImageElement>;
-        mimeType: typeof ALLOWED_IMAGE_MIME_TYPES[number];
+        mimeType: ValueOf<typeof IMAGE_MIME_TYPES>;
     }>;
     files: BinaryFiles;
     device: App["device"];
@@ -415,19 +417,4 @@ export declare type Device = Readonly<{
     isTouchScreen: boolean;
     canDeviceFitSidebar: boolean;
 }>;
-export declare type UIChildrenComponents = {
-    [k in "FooterCenter" | "Menu" | "WelcomeScreen"]?: React.ReactElement<{
-        children?: React.ReactNode;
-    }, React.JSXElementConstructor<any>>;
-};
-export declare type UIWelcomeScreenComponents = {
-    [k in "Center" | "MenuHint" | "ToolbarHint" | "HelpHint"]?: React.ReactElement<{
-        children?: React.ReactNode;
-    }, React.JSXElementConstructor<any>>;
-};
-export declare type UIWelcomeScreenCenterComponents = {
-    [k in "Logo" | "Heading" | "Menu" | "MenuItemLoadScene" | "MenuItemHelp"]?: React.ReactElement<{
-        children?: React.ReactNode;
-    }, React.JSXElementConstructor<any>>;
-};
 export {};

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

@@ -2,7 +2,6 @@ import { EVENT } from "./constants";
 import { FontFamilyValues, FontString } from "./element/types";
 import { AppState, LastActiveTool, Zoom } from "./types";
 import { SHAPES } from "./shapes";
-import React from "react";
 export declare const setDateTimeForTests: (dateTime: string) => void;
 export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
@@ -29,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;
@@ -125,8 +144,10 @@ export declare const getUpdatedTimestamp: () => number;
 export declare const arrayToMap: <T extends string | {
     id: string;
 }>(items: readonly T[]) => Map<string, T>;
+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;
 }>;
@@ -135,21 +156,6 @@ export declare const isPrimitive: (val: any) => boolean;
 export declare const getFrame: () => "top" | "iframe";
 export declare const isPromiseLike: (value: any) => value is Promise<any>;
 export declare const queryFocusableElements: (container: HTMLElement | null) => HTMLElement[];
-/**
- * Partitions React children into named components and the rest of children.
- *
- * Returns known children as a dictionary of react children keyed by their
- * displayName, and the rest children as an array.
- *
- * NOTE all named react components are included in the dictionary, irrespective
- * of the supplied type parameter. This means you may be throwing away
- * children that you aren't expecting, but should nonetheless be rendered.
- * To guard against this (provided you care about the rest children at all),
- * supply a second parameter with an object with keys of the expected children.
- */
-export declare const getReactChildren: <KnownChildren extends {
-    [x: string]: React.ReactNode;
-}>(children: React.ReactNode, expectedComponents?: Record<keyof KnownChildren, any> | undefined) => readonly [Partial<KnownChildren>, React.ReactNode[]];
 export declare const isShallowEqual: <T extends Record<string, any>>(objA: T, objB: T) => boolean;
 export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
     checkForDefaultPrevented?: boolean | undefined;

package/types/components/SingleLibraryItem.d.ts

@@ -1,10 +0,0 @@
-import { AppState, LibraryItem } from "../types";
-import "./SingleLibraryItem.scss";
-declare const SingleLibraryItem: ({ libItem, appState, index, onChange, onRemove, }: {
-    libItem: LibraryItem;
-    appState: AppState;
-    index: number;
-    onChange: (val: string, index: number) => void;
-    onRemove: (id: string) => void;
-}) => JSX.Element;
-export default SingleLibraryItem;