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

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

@@ -1 +1,116 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 // @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-9",
+  "version": "0.9.0-obsidian-image-support-2",
   "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;
@@ -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?: "light" | "dark" | 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,61 @@ 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[]) => {
+    theme?: "light" | "dark" | undefined;
+    zoom?: Readonly<{
+        value: NormalizedZoomValue;
+        translation: Readonly<{
+            x: number;
+            y: number;
+        }>;
+    }> | undefined;
+    scrollX?: number | undefined;
+    scrollY?: number | undefined;
+    elementType?: "line" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "text" | "arrow" | "freedraw" | undefined;
+    elementLocked?: boolean | undefined;
+    exportBackground?: boolean | undefined;
+    exportEmbedScene?: boolean | undefined;
+    exportWithDarkMode?: boolean | undefined;
+    exportScale?: number | undefined;
+    currentItemStrokeColor?: string | undefined;
+    currentItemBackgroundColor?: string | undefined;
+    currentItemFillStyle?: import("./element/types").FillStyle | undefined;
+    currentItemStrokeWidth?: number | undefined;
+    currentItemStrokeStyle?: import("./element/types").StrokeStyle | undefined;
+    currentItemRoughness?: number | undefined;
+    currentItemOpacity?: number | undefined;
+    currentItemFontFamily?: number | undefined;
+    currentItemFontSize?: number | undefined;
+    currentItemTextAlign?: import("./element/types").TextAlign | undefined;
+    currentItemStrokeSharpness?: import("./element/types").StrokeSharpness | undefined;
+    currentItemStartArrowhead?: import("./element/types").Arrowhead | null | undefined;
+    currentItemEndArrowhead?: import("./element/types").Arrowhead | null | undefined;
+    currentItemLinearStrokeSharpness?: import("./element/types").StrokeSharpness | undefined;
+    viewBackgroundColor?: string | undefined;
+    cursorButton?: "up" | "down" | undefined;
+    scrolledOutside?: boolean | undefined;
+    name?: string | undefined;
+    openMenu?: "canvas" | "shape" | null | undefined;
+    lastPointerDownWith?: import("./element/types").PointerType | undefined;
+    selectedElementIds?: {
+        [id: string]: boolean;
+    } | undefined;
+    previousSelectedElementIds?: {
+        [id: string]: boolean;
+    } | undefined;
+    shouldCacheIgnoreZoom?: boolean | undefined;
+    zenModeEnabled?: boolean | undefined;
+    gridSize?: number | null | undefined;
+    selectedGroupIds?: {
+        [groupId: string]: boolean;
+    } | undefined;
+    editingGroupId?: string | null | undefined;
+    showStats?: boolean | undefined;
+    currentChartType?: import("./element/types").ChartType | undefined;
+};

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,7 @@ declare class App extends React.Component<AppProps, AppState> {
     clearToast: () => void;
     setToastMessage: (toastMessage: string) => void;
     restoreFileFromShare: () => Promise<void>;
+    setFiles: ExcalidrawImperativeAPI["setFiles"];
     updateScene: <K extends keyof AppState>(sceneData: {
         elements?: SceneData["elements"];
         appState?: Pick<AppState, K> | null | undefined;
@@ -112,6 +113,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 +121,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 `renderImages()` directly if you need to render
+     * new images. This is just a failsafe  */
+    private scheduleImageRefresh;
     private updateBindingEnabledOnPointerMove;
     private maybeSuggestBindingAtCursor;
     private maybeSuggestBindingForLinearElementAtCursor;

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

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

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,13 @@
 import { FileSystemHandle } from "browser-fs-access";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, ImageId } from "../element/types";
 import { AppState } from "../types";
 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 isImageFile: (blob: Blob | null | undefined) => blob is File;
 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>;
+export declare const generateIdFromFile: (file: File) => Promise<ImageId>;

package/types/data/encode.d.ts

@@ -1,9 +1,10 @@
-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
  */
 export declare const stringToBase64: (str: string, isByteString?: boolean) => Promise<string>;
+export declare const toBase64: (data: string | Uint8Array | ArrayBuffer) => Promise<string>;
 export declare const base64ToString: (base64: string, isByteString?: boolean) => Promise<string>;
 declare type EncodedData = {
     encoded: string;

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("browser-fs-access").FileSystemHandle;
 }>;

package/types/element/collision.d.ts

@@ -1,5 +1,5 @@
 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;
@@ -16,4 +16,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

@@ -4,4 +4,4 @@ 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 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,13 @@
+import { AppState } from "../types";
+import { ExcalidrawElement, ImageId, InitializedExcalidrawImageElement } from "./types";
+/** 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: ({ imageElements, files, imageCache, }: {
+    imageElements: readonly InitializedExcalidrawImageElement[];
+    files: AppState["files"];
+    imageCache: Map<ImageId, HTMLImageElement>;
+}) => Promise<{
+    imageCache: Map<ImageId, HTMLImageElement>;
+    didUpdate: boolean;
+}>;
+export declare const getInitializedImageElements: (elements: readonly ExcalidrawElement[]) => InitializedExcalidrawImageElement[];

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";
@@ -18,5 +18,6 @@ export declare const getSceneVersion: (elements: readonly ExcalidrawElement[]) =
 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[];

package/types/element/mutateElement.d.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "./types";
 declare type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce">;
-export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>) => void;
+export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
 export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>) => TElement;
 /**
  * Mutates element and updates `version` & `versionNonce`.

package/types/element/newElement.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues } from "../element/types";
+import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues } from "../element/types";
 import { AppState } from "../types";
 declare type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted">, "width" | "height" | "angle" | "groupIds" | "boundElementIds" | "seed" | "version" | "versionNonce">;
 export declare const newElement: (opts: {
@@ -12,8 +12,9 @@ export declare const newTextElement: (opts: {
     textAlign: TextAlign;
     verticalAlign: VerticalAlign;
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
-export declare const updateTextElement: (element: ExcalidrawTextElement, { text, isDeleted }: {
+export declare const updateTextElement: (element: ExcalidrawTextElement, { text, rawText, isDeleted, }: {
     text: string;
+    rawText?: string | undefined;
     isDeleted?: boolean | undefined;
 }) => ExcalidrawTextElement;
 export declare const newFreeDrawElement: (opts: {
@@ -27,6 +28,9 @@ export declare const newLinearElement: (opts: {
     endArrowhead: Arrowhead | null;
     points?: ExcalidrawLinearElement["points"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawLinearElement>;
+export declare const newImageElement: (opts: {
+    type: ExcalidrawImageElement["type"];
+} & ElementConstructorOpts) => NonDeleted<ExcalidrawImageElement>;
 export declare const deepCopyElement: (val: any, depth?: number) => any;
 /**
  * Duplicate an element, often used in the alt-drag operation.

package/types/element/resizeElements.d.ts

@@ -2,8 +2,8 @@ import { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted } from
 import { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
 import { PointerDownState } from "../types";
 export declare const normalizeAngle: (angle: number) => number;
-export declare const transformElements: (pointerDownState: PointerDownState, transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], resizeArrowDirection: "origin" | "end", isRotateWithDiscreteAngle: boolean, isResizeCenterPoint: boolean, shouldKeepSidesRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
-export declare const reshapeSingleTwoPointElement: (element: NonDeleted<ExcalidrawLinearElement>, resizeArrowDirection: "origin" | "end", isRotateWithDiscreteAngle: boolean, pointerX: number, pointerY: number) => void;
-export declare const resizeSingleElement: (stateAtResizeStart: NonDeletedExcalidrawElement, shouldKeepSidesRatio: boolean, element: NonDeletedExcalidrawElement, transformHandleDirection: TransformHandleDirection, isResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
+export declare const transformElements: (pointerDownState: PointerDownState, transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
+export declare const reshapeSingleTwoPointElement: (element: NonDeleted<ExcalidrawLinearElement>, resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, pointerX: number, pointerY: number) => void;
+export declare const resizeSingleElement: (stateAtResizeStart: NonDeletedExcalidrawElement, shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
 export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
 export declare const getResizeArrowDirection: (transformHandleType: MaybeTransformHandleType, element: NonDeleted<ExcalidrawLinearElement>) => "origin" | "end";