@zsviczian/excalidraw 0.12.0-obsidian-11 → 0.13.0-obsidian-1

package/types/excalidraw-app/data/localStorage.d.ts

@@ -0,0 +1,112 @@
+import { ExcalidrawElement } from "../../element/types";
+export declare const saveUsernameToLocalStorage: (username: string) => void;
+export declare const importUsernameFromLocalStorage: () => string | null;
+export declare const importFromLocalStorage: () => {
+    elements: ExcalidrawElement[];
+    appState: {
+        theme: string;
+        name: string;
+        activeTool: {
+            type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser";
+            lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
+            locked: boolean;
+            customType: null;
+        } | {
+            type: "custom";
+            customType: string;
+            lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
+            locked: boolean;
+        };
+        scrollX: number;
+        scrollY: number;
+        viewBackgroundColor: string;
+        zoom: Readonly<{
+            value: import("../../types").NormalizedZoomValue;
+        }>;
+        shouldCacheIgnoreZoom: boolean;
+        showWelcomeScreen: boolean;
+        penMode: boolean;
+        penDetected: boolean;
+        exportBackground: boolean;
+        exportEmbedScene: boolean;
+        exportWithDarkMode: boolean;
+        exportScale: number;
+        currentItemStrokeColor: string;
+        currentItemBackgroundColor: string;
+        currentItemFillStyle: import("../../element/types").FillStyle;
+        currentItemStrokeWidth: number;
+        currentItemStrokeStyle: import("../../element/types").StrokeStyle;
+        currentItemRoughness: number;
+        currentItemOpacity: number;
+        currentItemFontFamily: number;
+        currentItemFontSize: number;
+        currentItemTextAlign: string;
+        currentItemStrokeSharpness: import("../../element/types").StrokeSharpness;
+        currentItemStartArrowhead: import("../../element/types").Arrowhead | null;
+        currentItemEndArrowhead: import("../../element/types").Arrowhead | null;
+        currentItemLinearStrokeSharpness: import("../../element/types").StrokeSharpness;
+        cursorButton: "up" | "down";
+        scrolledOutside: boolean;
+        openMenu: "canvas" | "shape" | null;
+        openSidebar: "library" | "customSidebar" | null;
+        isSidebarDocked: boolean;
+        lastPointerDownWith: import("../../element/types").PointerType;
+        selectedElementIds: {
+            [id: string]: boolean;
+        };
+        previousSelectedElementIds: {
+            [id: string]: boolean;
+        };
+        zenModeEnabled: boolean;
+        gridSize: number | null;
+        selectedGroupIds: {
+            [groupId: string]: boolean;
+        };
+        editingGroupId: string | null;
+        showStats: boolean;
+        currentChartType: import("../../element/types").ChartType;
+        selectedLinearElement: import("../../element/linearElementEditor").LinearElementEditor | null;
+        isLoading: boolean;
+        errorMessage: string | null;
+        draggingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        resizingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        multiElement: import("../../element/types").NonDeleted<import("../../element/types").ExcalidrawLinearElement> | null;
+        selectionElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        isBindingEnabled: boolean;
+        startBoundElement: import("../../element/types").NonDeleted<import("../../element/types").ExcalidrawBindableElement> | null;
+        suggestedBindings: import("../../element/binding").SuggestedBinding[];
+        editingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
+        editingLinearElement: import("../../element/linearElementEditor").LinearElementEditor | null;
+        isResizing: boolean;
+        isRotating: boolean;
+        openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+        openDialog: "imageExport" | "help" | null;
+        toast: {
+            message: string;
+            closable?: boolean | undefined;
+            duration?: number | undefined;
+        } | null;
+        viewModeEnabled: boolean;
+        fileHandle: import("browser-fs-access").FileSystemHandle | null;
+        collaborators: Map<string, import("../../types").Collaborator>;
+        pasteDialog: {
+            shown: false;
+            data: null;
+        } | {
+            shown: true;
+            data: import("../../charts").Spreadsheet;
+        };
+        pendingImageElementId: string | null;
+        showHyperlinkPopup: false | "info" | "editor";
+        linkOpacity: number;
+        trayModeEnabled: boolean;
+        colorPalette: {
+            canvasBackground?: string[] | undefined;
+            elementBackground?: string[] | undefined;
+            elementStroke?: string[] | undefined;
+        };
+    } | null;
+};
+export declare const getElementsStorageSize: () => number;
+export declare const getTotalStorageSize: () => number;
+export declare const getLibraryItemsFromStorage: () => import("../../types").LibraryItems_anyVersion;

package/types/excalidraw-app/data/tabSync.d.ts

@@ -0,0 +1,9 @@
+declare const LOCAL_STATE_VERSIONS: {
+    "version-dataState": number;
+    "version-files": number;
+};
+declare type BrowserStateTypes = keyof typeof LOCAL_STATE_VERSIONS;
+export declare const isBrowserStorageStateNewer: (type: BrowserStateTypes) => boolean;
+export declare const updateBrowserStateVersion: (type: BrowserStateTypes) => void;
+export declare const resetBrowserStateVersions: () => void;
+export {};

package/types/excalidraw-app/index.d.ts

@@ -0,0 +1,26 @@
+import "./index.scss";
+export declare const langCodeAtom: import("jotai").Atom<string> & {
+    write: (get: {
+        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_2;
+    } & {
+        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+            unstable_promise: true;
+        }): Value_3 | Promise<Value_3>;
+        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+            unstable_promise: true;
+        }): Value_4 | Promise<Value_4>;
+        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+            unstable_promise: true;
+        }): (Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5>;
+    }, set: {
+        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+    }, update: string | ((prev: string) => string)) => void;
+    onMount?: (<S extends (update: string | ((prev: string) => string)) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: string;
+};
+declare const ExcalidrawApp: () => JSX.Element;
+export default ExcalidrawApp;

package/types/hooks/useOutsideClick.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useOutsideClickHook: (handler: (event: Event) => void) => import("react").MutableRefObject<null>;

package/types/keys.d.ts

@@ -17,11 +17,8 @@ export declare const CODES: {
     readonly SLASH: "Slash";
     readonly C: "KeyC";
     readonly D: "KeyD";
-    readonly G: "KeyG";
-    readonly F: "KeyF";
     readonly H: "KeyH";
     readonly V: "KeyV";
-    readonly X: "KeyX";
     readonly Z: "KeyZ";
     readonly R: "KeyR";
 };
@@ -44,9 +41,12 @@ export declare const KEYS: {
     readonly PERIOD: ".";
     readonly COMMA: ",";
     readonly A: "a";
+    readonly C: "c";
     readonly D: "d";
     readonly E: "e";
+    readonly F: "f";
     readonly G: "g";
+    readonly H: "h";
     readonly I: "i";
     readonly L: "l";
     readonly O: "o";
@@ -60,6 +60,16 @@ export declare const KEYS: {
     readonly Y: "y";
     readonly Z: "z";
     readonly K: "k";
+    readonly 0: "0";
+    readonly 1: "1";
+    readonly 2: "2";
+    readonly 3: "3";
+    readonly 4: "4";
+    readonly 5: "5";
+    readonly 6: "6";
+    readonly 7: "7";
+    readonly 8: "8";
+    readonly 9: "9";
 };
 export declare type Key = keyof typeof KEYS;
 export declare const isArrowKey: (key: string) => boolean;

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

@@ -1,7 +1,8 @@
+import type * as TExcalidraw from "../index";
 import "./App.scss";
 declare global {
     interface Window {
-        ExcalidrawLib: any;
+        ExcalidrawLib: typeof TExcalidraw;
     }
 }
 export default function App(): JSX.Element;

package/types/packages/excalidraw/example/sidebar/ExampleSidebar.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./ExampleSidebar.scss";
+export default function Sidebar({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;

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

@@ -12,9 +12,13 @@ getMaximumGroups, //zsviczian
 intersectElementWithLine, //zsviczian
 determineFocusDistance, //zsviczian
 measureText, //zsviczian
+wrapText, //zsviczian
+getFontString, //zsviczian
+getMaxContainerWidth, //zsviczian
 exportToClipboard, mergeLibraryItems, } from "../../packages/utils";
 export { isLinearElement } from "../../element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES } from "../../constants";
 export { mutateElement, newElementWith, bumpVersion, } from "../../element/mutateElement";
 export { parseLibraryTokensFromUrl, useHandleLibrary, } from "../../data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "../../utils";
+export { Sidebar } from "../../components/Sidebar/Sidebar";

package/types/packages/utils.d.ts

@@ -36,5 +36,7 @@ export { getCommonBoundingBox } from "../element/bounds";
 export { getMaximumGroups } from "../groups";
 export { intersectElementWithLine } from "../element/collision";
 export { determineFocusDistance } from "../element/collision";
-export { measureText } from "../element/textElement";
+export { measureText, wrapText } from "../element/textElement";
+export { getFontString } from "../utils";
+export { getMaxContainerWidth } from "../element/newElement";
 export { mergeLibraryItems } from "../data/library";

package/types/renderer/renderScene.d.ts

@@ -3,7 +3,7 @@ import { RoughSVG } from "roughjs/bin/svg";
 import { AppState, BinaryFiles } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { RenderConfig } from "../scene/types";
-export declare const DEFAULT_SPACING = 4;
+export declare const DEFAULT_SPACING = 2;
 export declare const _renderScene: ({ elements, appState, scale, rc, canvas, renderConfig, }: {
     elements: readonly NonDeletedExcalidrawElement[];
     appState: AppState;

package/types/scene/scrollbars.d.ts

@@ -3,7 +3,7 @@ import { Zoom } from "../types";
 import { ScrollBars } from "./types";
 export declare const SCROLLBAR_MARGIN = 4;
 export declare const SCROLLBAR_WIDTH = 6;
-export declare const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
+export declare const SCROLLBAR_COLOR = "rgba(128,128,128,0.3)";
 export declare const getScrollBars: (elements: readonly ExcalidrawElement[], viewportWidth: number, viewportHeight: number, { scrollX, scrollY, zoom, }: {
     scrollX: number;
     scrollY: number;

package/types/scene/types.d.ts

@@ -33,6 +33,7 @@ export declare type RenderConfig = {
     /** when exporting the behavior is slightly different (e.g. we can't use
       CSS filters), and we disable render optimizations for best output */
     isExporting: boolean;
+    selectionColor?: string;
 };
 export declare type SceneScroll = {
     scrollX: number;

package/types/shapes.d.ts

@@ -2,37 +2,61 @@ export declare const SHAPES: readonly [{
     readonly icon: JSX.Element;
     readonly value: "selection";
     readonly key: "v";
+    readonly numericKey: "1";
+    readonly fillable: true;
 }, {
     readonly icon: JSX.Element;
     readonly value: "rectangle";
     readonly key: "r";
+    readonly numericKey: "2";
+    readonly fillable: true;
 }, {
     readonly icon: JSX.Element;
     readonly value: "diamond";
     readonly key: "d";
+    readonly numericKey: "3";
+    readonly fillable: true;
 }, {
     readonly icon: JSX.Element;
     readonly value: "ellipse";
     readonly key: "o";
+    readonly numericKey: "4";
+    readonly fillable: true;
 }, {
     readonly icon: JSX.Element;
     readonly value: "arrow";
     readonly key: "a";
+    readonly numericKey: "5";
+    readonly fillable: true;
 }, {
     readonly icon: JSX.Element;
     readonly value: "line";
-    readonly key: readonly ["p", "l"];
+    readonly key: "l";
+    readonly numericKey: "6";
+    readonly fillable: true;
 }, {
     readonly icon: JSX.Element;
     readonly value: "freedraw";
-    readonly key: readonly ["x", string];
+    readonly key: readonly ["p", "x"];
+    readonly numericKey: "7";
+    readonly fillable: false;
 }, {
     readonly icon: JSX.Element;
     readonly value: "text";
     readonly key: "t";
+    readonly numericKey: "8";
+    readonly fillable: false;
 }, {
     readonly icon: JSX.Element;
     readonly value: "image";
     readonly key: null;
+    readonly numericKey: "9";
+    readonly fillable: false;
+}, {
+    readonly icon: JSX.Element;
+    readonly value: "eraser";
+    readonly key: "e";
+    readonly numericKey: "0";
+    readonly fillable: false;
 }];
-export declare const findShapeByKey: (key: string) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | null;
+export declare const findShapeByKey: (key: string) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | null;

package/types/types.d.ts

@@ -39,7 +39,18 @@ export declare type BinaryFileData = {
     mimeType: typeof ALLOWED_IMAGE_MIME_TYPES[number] | typeof MIME_TYPES.binary;
     id: FileId;
     dataURL: DataURL;
+    /**
+     * Epoch timestamp in milliseconds
+     */
     created: number;
+    /**
+     * Indicates when the file was last retrieved from storage to be loaded
+     * onto the scene. We use this flag to determine whether to delete unused
+     * files from storage.
+     *
+     * Epoch timestamp in milliseconds.
+     */
+    lastRetrieved?: number;
 };
 export declare type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 export declare type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
@@ -51,6 +62,7 @@ export declare type LastActiveToolBeforeEraser = {
     customType: string;
 } | null;
 export declare type AppState = {
+    showWelcomeScreen: boolean;
     isLoading: boolean;
     errorMessage: string | null;
     draggingElement: NonDeletedExcalidrawElement | null;
@@ -104,6 +116,9 @@ export declare type AppState = {
     zoom: Zoom;
     openMenu: "canvas" | "shape" | null;
     openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+    openSidebar: "library" | "customSidebar" | null;
+    openDialog: "imageExport" | "help" | null;
+    isSidebarDocked: boolean;
     lastPointerDownWith: PointerType;
     selectedElementIds: {
         [id: string]: boolean;
@@ -112,7 +127,6 @@ export declare type AppState = {
         [id: string]: boolean;
     };
     shouldCacheIgnoreZoom: boolean;
-    showHelpDialog: boolean;
     toast: {
         message: string;
         closable?: boolean;
@@ -133,8 +147,6 @@ export declare type AppState = {
     height: number;
     offsetTop: number;
     offsetLeft: number;
-    isLibraryOpen: boolean;
-    isLibraryMenuDocked: boolean;
     fileHandle: FileSystemHandle | null;
     collaborators: Map<string, Collaborator>;
     showStats: boolean;
@@ -251,6 +263,10 @@ export interface ExcalidrawProps {
     onLinkHover?: (element: NonDeletedExcalidrawElement, event: React.PointerEvent<HTMLCanvasElement>) => void;
     onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
     onScrollChange?: (scrollX: number, scrollY: number) => void;
+    /**
+     * Render function that renders custom <Sidebar /> component.
+     */
+    renderSidebar?: () => JSX.Element | null;
 }
 export declare type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -287,6 +303,7 @@ export declare type AppProps = Merge<ExcalidrawProps, {
     detectScroll: boolean;
     handleKeyboardGlobally: boolean;
     isCollaborating: boolean;
+    children?: React.ReactNode;
 }>;
 /** A subset of App class properties that we need to use elsewhere
  * in the app, eg Manager. Factored out into a separate type to keep DRY. */
@@ -393,6 +410,7 @@ export declare type ExcalidrawImperativeAPI = {
     setActiveTool: InstanceType<typeof App>["setActiveTool"];
     setCursor: InstanceType<typeof App>["setCursor"];
     resetCursor: InstanceType<typeof App>["resetCursor"];
+    toggleMenu: InstanceType<typeof App>["toggleMenu"];
 };
 export declare type Device = Readonly<{
     isSmScreen: boolean;