@zsviczian/excalidraw 0.9.0-obsidian-13 → 0.9.0-obsidian-image-support-9

package/dist/excalidraw.production.min.js.LICENSE.txt

@@ -1 +1,23 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+
+pica
+https://github.com/nodeca/pica
+
+*/
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zsviczian/excalidraw",
-  "version": "0.9.0-obsidian-13",
+  "version": "0.9.0-obsidian-image-support-9",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

package/types/actions/actionCanvas.d.ts

@@ -16,6 +16,7 @@ export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[],
         }>;
         scrollX: number;
         scrollY: number;
+        files: Record<string, import("../types").BinaryFileData>;
         isLoading: boolean;
         errorMessage: string | null;
         draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
@@ -27,7 +28,7 @@ export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[],
         suggestedBindings: import("../element/binding").SuggestedBinding[];
         editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
         editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
-        elementType: "line" | "selection" | "rectangle" | "diamond" | "ellipse" | "text" | "arrow" | "freedraw";
+        elementType: "line" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "text" | "arrow" | "freedraw";
         elementLocked: boolean;
         exportBackground: boolean;
         exportEmbedScene: boolean;
@@ -66,7 +67,7 @@ export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[],
         showHelpDialog: boolean;
         toastMessage: string | null;
         zenModeEnabled: boolean;
-        theme: "light" | "dark";
+        theme: string;
         gridSize: number | null;
         viewModeEnabled: boolean;
         selectedGroupIds: {
@@ -89,6 +90,7 @@ export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[],
             shown: true;
             data: import("../charts").Spreadsheet;
         };
+        pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
     };
     commitToHistory: boolean;
 };

package/types/actions/manager.d.ts

@@ -1,21 +1,14 @@
 import React from "react";
 import { Action, ActionsManagerInterface, UpdaterFn, ActionName, ActionResult, PanelComponentProps } from "./types";
 import { ExcalidrawElement } from "../element/types";
-import { AppProps, AppState } from "../types";
-import Library from "../data/library";
-declare type App = {
-    canvas: HTMLCanvasElement | null;
-    focusContainer: () => void;
-    props: AppProps;
-    library: Library;
-};
+import { AppClassProperties, AppState } from "../types";
 export declare class ActionManager implements ActionsManagerInterface {
     actions: Record<ActionName, Action>;
     updater: (actionResult: ActionResult | Promise<ActionResult>) => void;
     getAppState: () => Readonly<AppState>;
     getElementsIncludingDeleted: () => readonly ExcalidrawElement[];
-    app: App;
-    constructor(updater: UpdaterFn, getAppState: () => AppState, getElementsIncludingDeleted: () => readonly ExcalidrawElement[], app: App);
+    app: AppClassProperties;
+    constructor(updater: UpdaterFn, getAppState: () => AppState, getElementsIncludingDeleted: () => readonly ExcalidrawElement[], app: AppClassProperties);
     registerAction(action: Action): void;
     registerAll(actions: readonly Action[]): void;
     handleKeyDown(event: React.KeyboardEvent | KeyboardEvent): boolean;
@@ -25,4 +18,3 @@ export declare class ActionManager implements ActionsManagerInterface {
      */
     renderAction: (name: ActionName, data?: PanelComponentProps["data"]) => JSX.Element | null;
 }
-export {};

package/types/actions/types.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { ExcalidrawElement } from "../element/types";
-import { AppState, ExcalidrawProps } from "../types";
-import Library from "../data/library";
+import { AppClassProperties, AppState, ExcalidrawProps } from "../types";
 import { ToolButtonSize } from "../components/ToolButton";
 /** if false, the action should be prevented */
 export declare type ActionResult = {
@@ -10,12 +9,7 @@ export declare type ActionResult = {
     commitToHistory: boolean;
     syncHistory?: boolean;
 } | false;
-declare type AppAPI = {
-    canvas: HTMLCanvasElement | null;
-    focusContainer(): void;
-    library: Library;
-};
-declare type ActionFn = (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppAPI) => ActionResult | Promise<ActionResult>;
+declare type ActionFn = (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export declare type UpdaterFn = (res: ActionResult) => void;
 export declare type ActionFilterFn = (action: Action) => void;
 export declare type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeSharpness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme";

package/types/appState.d.ts

@@ -1,6 +1,8 @@
+import { ExcalidrawElement } from "./element/types";
 import { AppState, NormalizedZoomValue } from "./types";
 export declare const getDefaultAppState: () => Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
-export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>) => {
+export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>, elements: readonly ExcalidrawElement[]) => {
+    theme?: string | undefined;
     zoom?: Readonly<{
         value: NormalizedZoomValue;
         translation: Readonly<{
@@ -10,7 +12,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     }> | undefined;
     scrollX?: number | undefined;
     scrollY?: number | undefined;
-    elementType?: "line" | "selection" | "rectangle" | "diamond" | "ellipse" | "text" | "arrow" | "freedraw" | undefined;
+    elementType?: "line" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "text" | "arrow" | "freedraw" | undefined;
     elementLocked?: boolean | undefined;
     exportBackground?: boolean | undefined;
     exportEmbedScene?: boolean | undefined;
@@ -44,7 +46,6 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     } | undefined;
     shouldCacheIgnoreZoom?: boolean | undefined;
     zenModeEnabled?: boolean | undefined;
-    theme?: "light" | "dark" | undefined;
     gridSize?: number | null | undefined;
     selectedGroupIds?: {
         [groupId: string]: boolean;
@@ -53,7 +54,12 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     showStats?: boolean | undefined;
     currentChartType?: import("./element/types").ChartType | undefined;
 };
-export declare const cleanAppStateForExport: (appState: Partial<AppState>) => {
+export declare const cleanAppStateForExport: (appState: Partial<AppState>, elements: readonly ExcalidrawElement[]) => {
+    files?: Record<string, import("./types").BinaryFileData> | undefined;
+    viewBackgroundColor?: string | undefined;
+    gridSize?: number | null | undefined;
+};
+export declare const clearAppStateForDatabase: (appState: Partial<AppState>, elements: readonly ExcalidrawElement[]) => {
     viewBackgroundColor?: string | undefined;
     gridSize?: number | null | undefined;
 };

package/types/clipboard.d.ts

@@ -4,6 +4,7 @@ import { Spreadsheet } from "./charts";
 export interface ClipboardData {
     spreadsheet?: Spreadsheet;
     elements?: readonly ExcalidrawElement[];
+    files?: AppState["files"];
     text?: string;
     errorMessage?: string;
 }

package/types/components/Actions.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ActionManager } from "../actions/manager";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, PointerType } from "../element/types";
 import { AppState, Zoom } from "../types";
 export declare const SelectedShapeActions: ({ appState, elements, renderAction, elementType, }: {
     appState: AppState;
@@ -8,10 +8,13 @@ export declare const SelectedShapeActions: ({ appState, elements, renderAction,
     renderAction: ActionManager["renderAction"];
     elementType: ExcalidrawElement["type"];
 }) => JSX.Element;
-export declare const ShapesSwitcher: ({ canvas, elementType, setAppState, }: {
+export declare const ShapesSwitcher: ({ canvas, elementType, setAppState, onImageAction, }: {
     canvas: HTMLCanvasElement | null;
     elementType: ExcalidrawElement["type"];
     setAppState: React.Component<any, AppState>["setState"];
+    onImageAction: (data: {
+        pointerType: PointerType | null;
+    }) => void;
 }) => JSX.Element;
 export declare const ZoomActions: ({ renderAction, zoom, }: {
     renderAction: ActionManager["renderAction"];

package/types/components/App.d.ts

@@ -1,17 +1,16 @@
 import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
-import Library from "../data/library";
 import { ExcalidrawElement } from "../element/types";
 import History from "../history";
-import { AppProps, AppState, LibraryItems, SceneData } from "../types";
+import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, LibraryItems, SceneData } from "../types";
 export declare const useIsMobile: () => boolean;
 export declare const useExcalidrawContainer: () => {
     container: HTMLDivElement | null;
     id: string | null;
 };
 declare class App extends React.Component<AppProps, AppState> {
-    canvas: HTMLCanvasElement | null;
+    canvas: AppClassProperties["canvas"];
     rc: RoughCanvas | null;
     unmounted: boolean;
     actionManager: ActionManager;
@@ -22,15 +21,16 @@ declare class App extends React.Component<AppProps, AppState> {
     private scene;
     private resizeObserver;
     private nearestScrollableContainer;
-    library: Library;
+    library: AppClassProperties["library"];
     libraryItemsFromStorage: LibraryItems | undefined;
     private id;
     private history;
     private excalidrawContainerValue;
+    imageCache: AppClassProperties["imageCache"];
     constructor(props: AppProps);
     private renderCanvas;
     render(): JSX.Element;
-    focusContainer: () => void;
+    focusContainer: AppClassProperties["focusContainer"];
     getSceneElementsIncludingDeleted: () => readonly ExcalidrawElement[];
     getSceneElements: () => readonly import("../element/types").NonDeletedExcalidrawElement[];
     private syncActionResult;
@@ -73,6 +73,8 @@ declare class App extends React.Component<AppProps, AppState> {
     clearToast: () => void;
     setToastMessage: (toastMessage: string) => void;
     restoreFileFromShare: () => Promise<void>;
+    /** adds supplied files to existing files in the appState */
+    addFiles: ExcalidrawImperativeAPI["addFiles"];
     updateScene: <K extends keyof AppState>(sceneData: {
         elements?: SceneData["elements"];
         appState?: Pick<AppState, K> | null | undefined;
@@ -112,6 +114,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private isHittingCommonBoundingBoxOfSelectedElements;
     private handleTextOnPointerDown;
     private handleFreeDrawElementOnPointerDown;
+    private createImageElement;
     private handleLinearElementOnPointerDown;
     private createGenericElementOnPointerDown;
     private onKeyDownFromPointerDownHandler;
@@ -119,6 +122,19 @@ declare class App extends React.Component<AppProps, AppState> {
     private onPointerMoveFromPointerDownHandler;
     private handlePointerMoveOverScrollbars;
     private onPointerUpFromPointerDownHandler;
+    private initializeImage;
+    /**
+     * inserts image into elements array and rerenders
+     */
+    private insertImageElement;
+    private setImagePreviewCursor;
+    private onImageAction;
+    private initializeImageDimensions;
+    /** populates image cache and re-renders if needed */
+    private refreshImages;
+    /** generally you should use `refreshImages()` directly if you need to render
+     * new images. This is just a failsafe  */
+    private scheduleImageRefresh;
     private updateBindingEnabledOnPointerMove;
     private maybeSuggestBindingAtCursor;
     private maybeSuggestBindingForLinearElementAtCursor;

package/types/components/DarkModeToggle.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import "./ToolIcon.scss";
-export declare type Appearence = "light" | "dark";
+import { Theme } from "../element/types";
 export declare const DarkModeToggle: (props: {
-    value: Appearence;
-    onChange: (value: Appearence) => void;
+    value: Theme;
+    onChange: (value: Theme) => void;
     title?: string | undefined;
 }) => JSX.Element;

package/types/components/InitializeApp.d.ts

@@ -2,15 +2,7 @@ import React from "react";
 import { Language } from "../i18n";
 interface Props {
     langCode: Language["code"];
+    children: React.ReactElement;
 }
-interface State {
-    isLoading: boolean;
-}
-export declare class InitializeApp extends React.Component<Props, State> {
-    state: {
-        isLoading: boolean;
-    };
-    componentDidMount(): Promise<void>;
-    render(): React.ReactNode;
-}
+export declare const InitializeApp: (props: Props) => JSX.Element;
 export {};

package/types/components/LayerUI.d.ts

@@ -28,6 +28,9 @@ interface LayerUIProps {
     focusContainer: () => void;
     library: Library;
     id: string;
+    onImageAction: (data: {
+        insertOnCanvasDirectly: boolean;
+    }) => void;
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onInsertElements, zenModeEnabled, showExitZenModeBtn, showThemeBtn, toggleZenMode, isCollaborating, renderTopRightUI, renderCustomFooter, viewModeEnabled, libraryReturnUrl, UIOptions, focusContainer, library, id, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onInsertElements, zenModeEnabled, showExitZenModeBtn, showThemeBtn, toggleZenMode, isCollaborating, renderTopRightUI, renderCustomFooter, viewModeEnabled, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/LibraryUnit.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { LibraryItem } from "../types";
+import { AppState, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
-export declare const LibraryUnit: ({ elements, pendingElements, onRemoveFromLibrary, onClick, }: {
+export declare const LibraryUnit: ({ elements, files, pendingElements, onRemoveFromLibrary, onClick, }: {
     elements?: LibraryItem | undefined;
+    files: AppState["files"];
     pendingElements?: LibraryItem | undefined;
     onRemoveFromLibrary: () => void;
     onClick: () => void;

package/types/components/MobileMenu.d.ts

@@ -17,6 +17,9 @@ declare type MobileMenuProps = {
     renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
     viewModeEnabled: boolean;
     showThemeBtn: boolean;
+    onImageAction: (data: {
+        insertOnCanvasDirectly: boolean;
+    }) => void;
 };
-export declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, canvas, isCollaborating, renderCustomFooter, viewModeEnabled, showThemeBtn, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, canvas, isCollaborating, renderCustomFooter, viewModeEnabled, showThemeBtn, onImageAction, }: MobileMenuProps) => JSX.Element;
 export {};

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;
@@ -21,7 +22,7 @@ declare type ToolButtonBaseProps = {
 declare type ToolButtonProps = (ToolButtonBaseProps & {
     type: "button";
     children?: React.ReactNode;
-    onClick?(): void;
+    onClick?(event: React.MouseEvent): void;
 }) | (ToolButtonBaseProps & {
     type: "icon";
     children?: React.ReactNode;
@@ -29,7 +30,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/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,91 @@ 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 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 {};

package/types/constants.d.ts

@@ -61,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;
@@ -82,6 +86,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;
@@ -110,3 +115,6 @@ 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"];
+export declare const MAX_ALLOWED_FILE_BYTES: number;

package/types/data/blob.d.ts

@@ -1,11 +1,22 @@
-import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import { ALLOWED_IMAGE_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, maxWidthOrHeight: number) => Promise<File>;
+export declare const getDataURLMimeType: (dataURL: DataURL) => string;

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

@@ -2,7 +2,7 @@ import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { ImportedDataState } from "./types";
 import Library from "./library";
-export declare const serializeAsJSON: (elements: readonly ExcalidrawElement[], appState: Partial<AppState>) => string;
+export declare const serializeAsJSON: (elements: readonly ExcalidrawElement[], appState: Partial<AppState>, type: "local" | "database") => string;
 export declare const saveAsJSON: (elements: readonly ExcalidrawElement[], appState: AppState) => Promise<{
     fileHandle: import("@dwelle/browser-fs-access").FileSystemHandle | null;
 }>;