@zsviczian/excalidraw 0.9.0-onTextEditEvents-4 → 0.10.0-fix-container-01

package/types/components/PublishLibrary.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AppState, LibraryItems } from "../types";
+import "./PublishLibrary.scss";
+declare const PublishLibrary: ({ onClose, libraryItems, appState, onSuccess, onError, updateItemsInStorage, onRemove, }: {
+    onClose: () => void;
+    libraryItems: LibraryItems;
+    appState: AppState;
+    onSuccess: (data: {
+        url: string;
+        authorName: string;
+        items: LibraryItems;
+    }) => void;
+    onError: (error: Error) => void;
+    updateItemsInStorage: (items: LibraryItems) => void;
+    onRemove: (id: string) => void;
+}) => JSX.Element;
+export default PublishLibrary;

package/types/components/SingleLibraryItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+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;

package/types/components/Spinner.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "./Spinner.scss";
+declare const Spinner: ({ size, circleWidth, }: {
+    size?: string | number | undefined;
+    circleWidth?: number | undefined;
+}) => JSX.Element;
+export default Spinner;

package/types/components/ToolButton.d.ts

@@ -1,5 +1,6 @@
 import "./ToolIcon.scss";
 import React from "react";
+import { PointerType } from "../element/types";
 export declare type ToolButtonSize = "small" | "medium";
 declare type ToolButtonBaseProps = {
     icon?: React.ReactNode;
@@ -17,11 +18,16 @@ declare type ToolButtonBaseProps = {
     visible?: boolean;
     selected?: boolean;
     className?: string;
+    isLoading?: boolean;
 };
 declare type ToolButtonProps = (ToolButtonBaseProps & {
     type: "button";
     children?: React.ReactNode;
-    onClick?(): void;
+    onClick?(event: React.MouseEvent): void;
+}) | (ToolButtonBaseProps & {
+    type: "submit";
+    children?: React.ReactNode;
+    onClick?(event: React.MouseEvent): void;
 }) | (ToolButtonBaseProps & {
     type: "icon";
     children?: React.ReactNode;
@@ -29,7 +35,9 @@ declare type ToolButtonProps = (ToolButtonBaseProps & {
 }) | (ToolButtonBaseProps & {
     type: "radio";
     checked: boolean;
-    onChange?(): void;
+    onChange?(data: {
+        pointerType: PointerType | null;
+    }): void;
 });
 export declare const ToolButton: React.ForwardRefExoticComponent<ToolButtonProps & React.RefAttributes<unknown>>;
 export {};

package/types/components/Tooltip.d.ts

@@ -4,6 +4,7 @@ declare type TooltipProps = {
     children: React.ReactNode;
     label: string;
     long?: boolean;
+    style?: React.CSSProperties;
 };
-export declare const Tooltip: ({ children, label, long }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, label, long, style, }: TooltipProps) => JSX.Element;
 export {};

package/types/components/icons.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Theme } from "../element/types";
 declare type Opts = {
     width?: number;
     height?: number;
@@ -28,40 +29,40 @@ export declare const shareIOS: JSX.Element;
 export declare const shareWindows: JSX.Element;
 export declare const resetZoom: JSX.Element;
 export declare const BringForwardIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SendBackwardIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const BringToFrontIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SendToBackIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const AlignTopIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const AlignBottomIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const AlignLeftIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const AlignRightIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const DistributeHorizontallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const DistributeVerticallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const CenterVerticallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const CenterHorizontallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const users: JSX.Element;
 export declare const start: JSX.Element;
@@ -72,91 +73,96 @@ export declare const clone: JSX.Element;
 export declare const shield: JSX.Element;
 export declare const file: JSX.Element;
 export declare const GroupIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const UngroupIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FillHachureIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FillCrossHatchIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FillSolidIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const StrokeWidthIcon: React.MemoExoticComponent<({ theme, strokeWidth }: {
-    theme: "light" | "dark";
+    theme: Theme;
     strokeWidth: number;
 }) => JSX.Element>;
 export declare const StrokeStyleSolidIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const StrokeStyleDashedIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const StrokeStyleDottedIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SloppinessArchitectIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SloppinessArtistIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SloppinessCartoonistIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const EdgeSharpIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const EdgeRoundIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const ArrowheadNoneIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const ArrowheadArrowIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: "light" | "dark";
+    theme: Theme;
     flip?: boolean | undefined;
 }) => JSX.Element>;
 export declare const ArrowheadDotIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: "light" | "dark";
+    theme: Theme;
     flip?: boolean | undefined;
 }) => JSX.Element>;
 export declare const ArrowheadBarIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: "light" | "dark";
+    theme: Theme;
+    flip?: boolean | undefined;
+}) => JSX.Element>;
+export declare const ArrowheadTriangleIcon: React.MemoExoticComponent<({ theme, flip }: {
+    theme: Theme;
     flip?: boolean | undefined;
 }) => JSX.Element>;
 export declare const FontSizeSmallIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontSizeMediumIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontSizeLargeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontSizeExtraLargeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontFamilyHandDrawnIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontFamilyNormalIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontFamilyCodeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const TextAlignLeftIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const TextAlignCenterIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const TextAlignRightIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
+export declare const publishIcon: JSX.Element;
 export {};

package/types/constants.d.ts

@@ -31,6 +31,7 @@ export declare enum EVENT {
     MOUSE_MOVE = "mousemove",
     RESIZE = "resize",
     UNLOAD = "unload",
+    FOCUS = "focus",
     BLUR = "blur",
     DRAG_OVER = "dragover",
     DROP = "drop",
@@ -60,6 +61,10 @@ export declare const FONT_FAMILY: {
     Helvetica: number;
     Cascadia: number;
 };
+export declare const THEME: {
+    LIGHT: string;
+    DARK: string;
+};
 export declare const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 export declare const DEFAULT_FONT_SIZE = 20;
 export declare const DEFAULT_FONT_FAMILY: FontFamilyValues;
@@ -69,8 +74,14 @@ export declare const DEFAULT_VERSION = "{version}";
 export declare const CANVAS_ONLY_ACTIONS: string[];
 export declare const GRID_SIZE = 20;
 export declare const MIME_TYPES: {
-    excalidraw: string;
-    excalidrawlib: string;
+    readonly excalidraw: "application/vnd.excalidraw+json";
+    readonly excalidrawlib: "application/vnd.excalidrawlib+json";
+    readonly json: "application/json";
+    readonly svg: "image/svg+xml";
+    readonly png: "image/png";
+    readonly jpg: "image/jpeg";
+    readonly gif: "image/gif";
+    readonly binary: "application/octet-stream";
 };
 export declare const EXPORT_DATA_TYPES: {
     readonly excalidraw: "excalidraw";
@@ -81,6 +92,7 @@ export declare const EXPORT_SOURCE: string;
 export declare const STORAGE_KEYS: {
     readonly LOCAL_STORAGE_LIBRARY: "excalidraw-library";
 };
+export declare const IMAGE_RENDER_TIMEOUT = 500;
 export declare const TAP_TWICE_TIMEOUT = 300;
 export declare const TOUCH_CTX_MENU_TIMEOUT = 500;
 export declare const TITLE_TIMEOUT = 10000;
@@ -109,3 +121,13 @@ export declare const MQ_MAX_HEIGHT_LANDSCAPE = 500;
 export declare const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export declare const EXPORT_SCALES: number[];
 export declare const DEFAULT_EXPORT_PADDING = 10;
+export declare const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
+export declare const ALLOWED_IMAGE_MIME_TYPES: readonly ["image/png", "image/jpeg", "image/svg+xml", "image/gif"];
+export declare const MAX_ALLOWED_FILE_BYTES: number;
+export declare const SVG_NS = "http://www.w3.org/2000/svg";
+export declare const ENCRYPTION_KEY_BITS = 128;
+export declare const VERSIONS: {
+    readonly excalidraw: 2;
+    readonly excalidrawLibrary: 2;
+};
+export declare const PADDING = 30;

package/types/createInverseContext.d.ts

@@ -0,0 +1 @@
+export declare const createInverseContext: <T extends unknown = null>(initialValue: T) => any;

package/types/data/blob.d.ts

@@ -1,11 +1,28 @@
-import { FileSystemHandle } from "browser-fs-access";
-import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
+import { ExcalidrawElement, FileId } from "../element/types";
+import { AppState, DataURL } from "../types";
+import { FileSystemHandle } from "./filesystem";
 import { ImportedLibraryData } from "./types";
 export declare const getMimeType: (blob: Blob | string) => string;
 export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
 export declare const isImageFileHandleType: (type: string | null) => type is "svg" | "png";
 export declare const isImageFileHandle: (handle: FileSystemHandle | null) => boolean;
+export declare const isSupportedImageFile: (blob: Blob | null | undefined) => blob is Blob & {
+    type: typeof ALLOWED_IMAGE_MIME_TYPES[number];
+};
 export declare const loadFromBlob: (blob: Blob, localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null) => Promise<import("./restore").RestoredDataState>;
 export declare const loadLibraryFromBlob: (blob: Blob) => Promise<ImportedLibraryData>;
 export declare const canvasToBlob: (canvas: HTMLCanvasElement) => Promise<Blob>;
+/** generates SHA-1 digest from supplied file (if not supported, falls back
+    to a 40-char base64 random id) */
+export declare const generateIdFromFile: (file: File) => Promise<FileId>;
+export declare const getDataURL: (file: Blob | File) => Promise<DataURL>;
+export declare const dataURLToFile: (dataURL: DataURL, filename?: string) => File;
+export declare const resizeImageFile: (file: File, opts: {
+    /** undefined indicates auto */
+    outputType?: typeof MIME_TYPES["jpg"];
+    maxWidthOrHeight: number;
+}) => Promise<File>;
+export declare const SVGStringToFile: (SVGString: string, filename?: string) => File & {
+    type: typeof MIME_TYPES.svg;
+};

package/types/data/encode.d.ts

@@ -1,4 +1,4 @@
-export declare const toByteString: (data: string | Uint8Array) => Promise<string>;
+export declare const toByteString: (data: string | Uint8Array | ArrayBuffer) => Promise<string>;
 /**
  * @param isByteString set to true if already byte string to prevent bloat
  *  due to reencoding
@@ -22,4 +22,32 @@ export declare const encode: ({ text, compress, }: {
     compress?: boolean | undefined;
 }) => Promise<EncodedData>;
 export declare const decode: (data: EncodedData) => Promise<string>;
+/**
+ * The returned buffer has following format:
+ * `[]` refers to a buffers wrapper (see `concatBuffers`)
+ *
+ * [
+ *   encodingMetadataBuffer,
+ *   iv,
+ *   [
+ *      contentsMetadataBuffer
+ *      contentsBuffer
+ *   ]
+ * ]
+ */
+export declare const compressData: <T extends Record<string, any> = never>(dataBuffer: Uint8Array, options: {
+    encryptionKey: string;
+} & ([T] extends [never] ? {
+    metadata?: T | undefined;
+} : {
+    metadata: T;
+})) => Promise<Uint8Array>;
+export declare const decompressData: <T extends Record<string, any>>(bufferView: Uint8Array, options: {
+    decryptionKey: string;
+}) => Promise<{
+    /** metadata source is always JSON so we can decode it here */
+    metadata: T;
+    /** data can be anything so the caller must decode it */
+    data: Uint8Array;
+}>;
 export {};

package/types/data/encryption.d.ts

@@ -0,0 +1,9 @@
+export declare const IV_LENGTH_BYTES = 12;
+export declare const createIV: () => Uint8Array;
+export declare const generateEncryptionKey: <T extends "string" | "cryptoKey" = "string">(returnAs?: T | undefined) => Promise<T extends "cryptoKey" ? CryptoKey : string>;
+export declare const getCryptoKey: (key: string, usage: KeyUsage) => Promise<CryptoKey>;
+export declare const encryptData: (key: string | CryptoKey, data: Uint8Array | ArrayBuffer | Blob | File | string) => Promise<{
+    encryptedBuffer: ArrayBuffer;
+    iv: Uint8Array;
+}>;
+export declare const decryptData: (iv: Uint8Array, encrypted: Uint8Array | ArrayBuffer, privateKey: string) => Promise<ArrayBuffer>;

package/types/data/filesystem.d.ts

@@ -0,0 +1,18 @@
+import { FileWithHandle, FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
+declare type FILE_EXTENSION = "gif" | "jpg" | "png" | "svg" | "json" | "excalidraw" | "excalidrawlib";
+export declare const fileOpen: <M extends boolean | undefined = false>(opts: {
+    extensions?: FILE_EXTENSION[] | undefined;
+    description: string;
+    multiple?: M | undefined;
+}) => Promise<M extends false | undefined ? FileWithHandle : FileWithHandle[]>;
+export declare const fileSave: (blob: Blob, opts: {
+    /** supply without the extension */
+    name: string;
+    /** file extension */
+    extension: FILE_EXTENSION;
+    description: string;
+    /** existing FileSystemHandle */
+    fileHandle?: FileSystemHandle | null;
+}) => Promise<FileSystemHandle | null>;
+export type { FileSystemHandle };
+export { nativeFileSystemSupported };

package/types/data/index.d.ts

@@ -1,13 +1,13 @@
-import { FileSystemHandle } from "browser-fs-access";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { ExportType } from "../scene/types";
-import { AppState } from "../types";
+import { AppState, BinaryFiles } from "../types";
+import { FileSystemHandle } from "./filesystem";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
-export declare const exportCanvas: (type: ExportType, elements: readonly NonDeletedExcalidrawElement[], appState: AppState, { exportBackground, exportPadding, viewBackgroundColor, name, fileHandle, }: {
+export declare const exportCanvas: (type: ExportType, elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, { exportBackground, exportPadding, viewBackgroundColor, name, fileHandle, }: {
     exportBackground: boolean;
     exportPadding?: number | undefined;
     viewBackgroundColor: string;
     name: string;
     fileHandle?: FileSystemHandle | null | undefined;
-}) => Promise<FileSystemHandle | undefined>;
+}) => Promise<FileSystemHandle | null | undefined>;

package/types/data/json.d.ts

@@ -1,10 +1,10 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import { AppState, BinaryFiles, LibraryItems } from "../types";
 import { ImportedDataState } from "./types";
 import Library from "./library";
-export declare const serializeAsJSON: (elements: readonly ExcalidrawElement[], appState: Partial<AppState>) => string;
-export declare const saveAsJSON: (elements: readonly ExcalidrawElement[], appState: AppState) => Promise<{
-    fileHandle: import("browser-fs-access").FileSystemHandle;
+export declare const serializeAsJSON: (elements: readonly ExcalidrawElement[], appState: Partial<AppState>, files: BinaryFiles, type: "local" | "database") => string;
+export declare const saveAsJSON: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => Promise<{
+    fileHandle: import("browser-fs-access").FileSystemHandle | null;
 }>;
 export declare const loadFromJSON: (localAppState: AppState, localElements: readonly ExcalidrawElement[] | null) => Promise<import("./restore").RestoredDataState>;
 export declare const isValidExcalidrawData: (data?: {
@@ -13,5 +13,5 @@ export declare const isValidExcalidrawData: (data?: {
     appState?: any;
 } | undefined) => data is ImportedDataState;
 export declare const isValidLibrary: (json: any) => any;
-export declare const saveLibraryAsJSON: (library: Library) => Promise<void>;
+export declare const saveLibraryAsJSON: (libraryItems: LibraryItems) => Promise<void>;
 export declare const importLibraryFromJSON: (library: Library) => Promise<void>;

package/types/data/library.d.ts

@@ -7,7 +7,7 @@ declare class Library {
     resetLibrary: () => Promise<void>;
     restoreLibraryItem: (libraryItem: LibraryItem) => LibraryItem | null;
     /** imports library (currently merges, removing duplicates) */
-    importLibrary(blob: Blob): Promise<void>;
+    importLibrary(blob: Blob, defaultStatus?: string): Promise<void>;
     loadLibrary: () => Promise<LibraryItems>;
     saveLibrary: (items: LibraryItems) => Promise<void>;
 }

package/types/data/resave.d.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-export declare const resaveAsImageWithScene: (elements: readonly ExcalidrawElement[], appState: AppState) => Promise<{
+import { AppState, BinaryFiles } from "../types";
+export declare const resaveAsImageWithScene: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => Promise<{
     fileHandle: import("browser-fs-access").FileSystemHandle;
 }>;

package/types/data/restore.d.ts

@@ -1,13 +1,15 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import { AppState, BinaryFiles, LibraryItem } from "../types";
 import { ImportedDataState } from "./types";
 declare type RestoredAppState = Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const AllowedExcalidrawElementTypes: Record<ExcalidrawElement["type"], true>;
 export declare type RestoredDataState = {
     elements: ExcalidrawElement[];
     appState: RestoredAppState;
+    files: BinaryFiles;
 };
 export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined) => ExcalidrawElement[];
 export declare const restoreAppState: (appState: ImportedDataState["appState"], localAppState: Partial<AppState> | null | undefined) => RestoredAppState;
 export declare const restore: (data: ImportedDataState | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined) => RestoredDataState;
+export declare const restoreLibraryItems: (libraryItems: NonOptional<ImportedDataState["libraryItems"]>, defaultStatus: LibraryItem["status"]) => LibraryItem[];
 export {};

package/types/data/types.d.ts

@@ -1,12 +1,14 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState, LibraryItems } from "../types";
+import { AppState, BinaryFiles, LibraryItems, LibraryItems_v1 } from "../types";
 import type { cleanAppStateForExport } from "../appState";
+import { VERSIONS } from "../constants";
 export interface ExportedDataState {
     type: string;
     version: number;
     source: string;
     elements: readonly ExcalidrawElement[];
     appState: ReturnType<typeof cleanAppStateForExport>;
+    files: BinaryFiles | undefined;
 }
 export interface ImportedDataState {
     type?: string;
@@ -15,13 +17,16 @@ export interface ImportedDataState {
     elements?: readonly ExcalidrawElement[] | null;
     appState?: Readonly<Partial<AppState>> | null;
     scrollToContent?: boolean;
-    libraryItems?: LibraryItems;
+    libraryItems?: LibraryItems | LibraryItems_v1;
+    files?: BinaryFiles;
 }
 export interface ExportedLibraryData {
     type: string;
-    version: number;
+    version: typeof VERSIONS.excalidrawLibrary;
     source: string;
-    library: LibraryItems;
+    libraryItems: LibraryItems;
 }
 export interface ImportedLibraryData extends Partial<ExportedLibraryData> {
+    /** @deprecated v1 */
+    library?: LibraryItems;
 }

package/types/element/bounds.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead } from "./types";
+import { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead, NonDeleted } from "./types";
 import { Drawable, Op } from "roughjs/bin/core";
 export declare type Bounds = readonly [number, number, number, number];
 export declare const getElementAbsoluteCoords: (element: ExcalidrawElement) => Bounds;
@@ -14,3 +14,10 @@ export declare const getClosestElementBounds: (elements: readonly ExcalidrawElem
     x: number;
     y: number;
 }) => [number, number, number, number];
+export interface Box {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export declare const getCommonBoundingBox: (elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => Box;

package/types/element/collision.d.ts

@@ -1,9 +1,10 @@
 import * as GA from "../ga";
-import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted } from "./types";
+import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement } from "./types";
 import { Point } from "../types";
 import { AppState } from "../types";
 export declare const hitTest: (element: NonDeletedExcalidrawElement, appState: AppState, x: number, y: number) => boolean;
 export declare const isHittingElementBoundingBoxWithoutHittingElement: (element: NonDeletedExcalidrawElement, appState: AppState, x: number, y: number) => boolean;
+export declare const isHittingElementNotConsideringBoundingBox: (element: NonDeletedExcalidrawElement, appState: AppState, point: readonly [number, number]) => boolean;
 export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
     x: number;
     y: number;
@@ -16,4 +17,4 @@ export declare const determineFocusPoint: (element: ExcalidrawBindableElement, f
 export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap?: number) => Point[];
 export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
 export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
-export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawTextElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
+export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];

package/types/element/dragElements.d.ts

@@ -1,7 +1,6 @@
 import { SHAPES } from "../shapes";
-import Scene from "../scene/Scene";
 import { NonDeletedExcalidrawElement } from "./types";
 import { PointerDownState } from "../types";
-export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], pointerX: number, pointerY: number, scene: Scene, lockDirection?: boolean, distanceX?: number, distanceY?: number) => void;
+export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], pointerX: number, pointerY: number, lockDirection?: boolean, distanceX?: number, distanceY?: number) => void;
 export declare const getDragOffsetXY: (selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
-export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: typeof SHAPES[number]["value"], originX: number, originY: number, x: number, y: number, width: number, height: number, isResizeWithSidesSameLength: boolean, isResizeCenterPoint: boolean) => void;
+export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: typeof SHAPES[number]["value"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, widthAspectRatio?: number | null | undefined) => void;

package/types/element/image.d.ts

@@ -0,0 +1,22 @@
+import { AppClassProperties, DataURL, BinaryFiles } from "../types";
+import { ExcalidrawElement, FileId, InitializedExcalidrawImageElement } from "./types";
+export declare const loadHTMLImageElement: (dataURL: DataURL) => Promise<HTMLImageElement>;
+/** NOTE: updates cache even if already populated with given image. Thus,
+ * you should filter out the images upstream if you want to optimize this. */
+export declare const updateImageCache: ({ fileIds, files, imageCache, }: {
+    fileIds: FileId[];
+    files: BinaryFiles;
+    imageCache: AppClassProperties["imageCache"];
+}) => Promise<{
+    imageCache: Map<FileId, {
+        image: HTMLImageElement | Promise<HTMLImageElement>;
+        mimeType: "image/svg+xml" | "image/png" | "image/jpeg" | "image/gif";
+    }>;
+    /** includes errored files because they cache was updated nonetheless */
+    updatedFiles: Map<FileId, true>;
+    /** files that failed when creating HTMLImageElement */
+    erroredFiles: Map<FileId, true>;
+}>;
+export declare const getInitializedImageElements: (elements: readonly ExcalidrawElement[]) => InitializedExcalidrawImageElement[];
+export declare const isHTMLSVGElement: (node: Node | null) => node is SVGElement;
+export declare const normalizeSVG: (SVGString: string) => Promise<string>;

package/types/element/index.d.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
-export { newElement, newTextElement, updateTextElement, newLinearElement, duplicateElement, } from "./newElement";
+export { newElement, newTextElement, updateTextElement, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
 export { hitTest, isHittingElementBoundingBoxWithoutHittingElement, } from "./collision";
@@ -11,12 +11,10 @@ export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export { getPerfectElementSize, isInvisiblySmallElement, resizePerfectLineForNWHandler, getNormalizedDimensions, } from "./sizeHelpers";
 export { showSelectedShapeActions } from "./showSelectedShapeActions";
-export declare const getElementMap: (elements: readonly ExcalidrawElement[]) => {
-    [key: string]: ExcalidrawElement;
-};
 export declare const getSceneVersion: (elements: readonly ExcalidrawElement[]) => number;
 export declare const getVisibleElements: (elements: readonly ExcalidrawElement[]) => readonly NonDeletedExcalidrawElement[];
 export declare const getNonDeletedElements: (elements: readonly ExcalidrawElement[]) => readonly NonDeletedExcalidrawElement[];
 export declare const isNonDeletedElement: <T extends ExcalidrawElement>(element: T) => element is NonDeleted<T>;
+export declare const clearElementsForDatabase: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];
 export declare const clearElementsForExport: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];
 export declare const clearElementsForLocalStorage: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];