@dwelle/excalidraw 0.3.19 → 0.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dwelle/excalidraw",
-  "version": "0.3.19",
+  "version": "0.3.23",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [
@@ -40,9 +40,9 @@
     "@babel/core": "7.16.0",
     "@babel/plugin-transform-arrow-functions": "7.16.0",
     "@babel/plugin-transform-async-to-generator": "7.16.0",
-    "@babel/plugin-transform-runtime": "7.16.0",
+    "@babel/plugin-transform-runtime": "7.16.4",
     "@babel/plugin-transform-typescript": "7.16.1",
-    "@babel/preset-env": "7.16.0",
+    "@babel/preset-env": "7.16.4",
     "@babel/preset-react": "7.16.0",
     "@babel/preset-typescript": "7.16.0",
     "autoprefixer": "10.4.0",
@@ -51,13 +51,13 @@
     "cross-env": "7.0.3",
     "css-loader": "6.5.1",
     "file-loader": "6.2.0",
-    "mini-css-extract-plugin": "2.4.4",
+    "mini-css-extract-plugin": "2.4.5",
     "postcss-loader": "6.2.0",
     "sass-loader": "12.3.0",
     "terser-webpack-plugin": "5.2.5",
     "ts-loader": "9.2.6",
     "typescript": "4.5.2",
-    "webpack": "5.64.0",
+    "webpack": "5.64.3",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.1"
   },
@@ -68,5 +68,8 @@
     "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && yarn gen:types",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack"
+  },
+  "dependencies": {
+    "dotenv": "10.0.0"
   }
 }

package/types/appState.d.ts

@@ -1,7 +1,9 @@
 import { AppState, NormalizedZoomValue } from "./types";
 export declare const getDefaultAppState: () => Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>) => {
-    theme?: string | undefined;
+    scrollX?: number | undefined;
+    scrollY?: number | undefined;
+    viewBackgroundColor?: string | undefined;
     zoom?: Readonly<{
         value: NormalizedZoomValue;
         translation: Readonly<{
@@ -9,8 +11,8 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
             y: number;
         }>;
     }> | undefined;
-    scrollX?: number | undefined;
-    scrollY?: number | undefined;
+    shouldCacheIgnoreZoom?: boolean | undefined;
+    theme?: string | undefined;
     name?: string | undefined;
     elementType?: "line" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "text" | "arrow" | "freedraw" | undefined;
     elementLocked?: boolean | undefined;
@@ -32,7 +34,6 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     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;
     openMenu?: "canvas" | "shape" | null | undefined;
@@ -43,7 +44,6 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     previousSelectedElementIds?: {
         [id: string]: boolean;
     } | undefined;
-    shouldCacheIgnoreZoom?: boolean | undefined;
     zenModeEnabled?: boolean | undefined;
     gridSize?: number | null | undefined;
     selectedGroupIds?: {

package/types/components/CheckboxItem.d.ts

@@ -2,6 +2,6 @@ import React from "react";
 import "./CheckboxItem.scss";
 export declare const CheckboxItem: React.FC<{
     checked: boolean;
-    onChange: (checked: boolean) => void;
+    onChange: (checked: boolean, event: React.MouseEvent) => void;
     className?: string;
 }>;

package/types/components/LibraryMenuItems.d.ts

@@ -15,7 +15,7 @@ declare const LibraryMenuItems: ({ libraryItems, onRemoveFromLibrary, onAddToLib
     library: Library;
     id: string;
     selectedItems: LibraryItem["id"][];
-    onToggle: (id: LibraryItem["id"]) => void;
+    onToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
     onPublish: () => void;
     resetLibrary: () => void;
 }) => JSX.Element;

package/types/components/LibraryUnit.d.ts

@@ -8,5 +8,5 @@ export declare const LibraryUnit: ({ id, elements, files, isPending, onClick, se
     isPending?: boolean | undefined;
     onClick: () => void;
     selected: boolean;
-    onToggle: (id: string) => void;
+    onToggle: (id: string, event: React.MouseEvent) => void;
 }) => JSX.Element;

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

@@ -130,3 +130,7 @@ export declare const ALLOWED_IMAGE_MIME_TYPES: readonly ["image/png", "image/jpe
 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;
+};

package/types/data/blob.d.ts

@@ -18,7 +18,11 @@ export declare const canvasToBlob: (canvas: HTMLCanvasElement) => Promise<Blob>;
 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 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/types.d.ts

@@ -1,6 +1,7 @@
 import { ExcalidrawElement } from "../element/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;
@@ -21,7 +22,7 @@ export interface ImportedDataState {
 }
 export interface ExportedLibraryData {
     type: string;
-    version: 2;
+    version: typeof VERSIONS.excalidrawLibrary;
     source: string;
     libraryItems: LibraryItems;
 }

package/types/element/index.d.ts

@@ -11,9 +11,6 @@ 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[];

package/types/element/mutateElement.d.ts

@@ -3,7 +3,7 @@ declare type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TE
 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`.
+ * Mutates element, bumping `version`, `versionNonce`, and `updated`.
  *
  * NOTE: does not trigger re-render.
  */

package/types/element/newElement.d.ts

@@ -1,6 +1,6 @@
 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">;
+declare type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "boundElementIds" | "seed" | "version" | "versionNonce">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;

package/types/element/types.d.ts

@@ -45,6 +45,8 @@ declare type _ExcalidrawElementBase = Readonly<{
     groupIds: readonly GroupId[];
     /** Ids of (linear) elements that are bound to this element. */
     boundElementIds: readonly ExcalidrawLinearElement["id"][] | null;
+    /** epoch (ms) timestamp of last element update */
+    updated: number;
 }>;
 export declare type ExcalidrawSelectionElement = _ExcalidrawElementBase & {
     type: "selection";

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

@@ -0,0 +1 @@
+export function parseEnvVariables(filepath: any): {};

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

@@ -6,7 +6,7 @@ import { ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
 declare type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<PublicExcalidrawProps & React.RefAttributes<ExcalidrawAPIRefValue>>>;
 export default _default;
-export { getSceneVersion, getElementMap, isInvisiblySmallElement, getNonDeletedElements, } from "../../element";
+export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "../../element";
 export { defaultLang, languages } from "../../i18n";
 export { restore, restoreElements, restoreAppState } from "../../data/restore";
 export { exportToBlob, exportToCanvas, exportToSvg, serializeAsJSON, loadLibraryFromBlob, loadFromBlob, getFreeDrawSvgPath, } from "../../packages/utils";

package/types/packages/excalidraw/webpack.dev.config.d.ts

@@ -64,7 +64,7 @@ export namespace optimization {
         }
     }
 }
-export const plugins: webpack.EvalSourceMapDevToolPlugin[];
+export const plugins: (webpack.EvalSourceMapDevToolPlugin | webpack.DefinePlugin)[];
 export const externals: {
     react: {
         root: string;

package/types/packages/excalidraw/webpack.prod.config.d.ts

@@ -64,8 +64,6 @@ export namespace module {
     })[];
 }
 export namespace optimization {
-    const minimize: boolean;
-    const minimizer: import("terser-webpack-plugin/types").default<import("terser").MinifyOptions>[];
     namespace splitChunks {
         const chunks: string;
         namespace cacheGroups {

package/types/packages/utils.d.ts

@@ -4,13 +4,14 @@ declare type ExportOpts = {
     elements: readonly NonDeleted<ExcalidrawElement>[];
     appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
     files: BinaryFiles | null;
+    maxWidthOrHeight?: number;
     getDimensions?: (width: number, height: number) => {
         width: number;
         height: number;
-        scale: number;
+        scale?: number;
     };
 };
-export declare const exportToCanvas: ({ elements, appState, files, getDimensions, }: ExportOpts) => Promise<HTMLCanvasElement>;
+export declare const exportToCanvas: ({ elements, appState, files, maxWidthOrHeight, getDimensions, }: ExportOpts) => Promise<HTMLCanvasElement>;
 export declare const exportToBlob: (opts: ExportOpts & {
     mimeType?: string;
     quality?: number;

package/types/renderer/renderElement.d.ts

@@ -2,12 +2,12 @@ import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement,
 import { RoughCanvas } from "roughjs/bin/canvas";
 import { Drawable, Options } from "roughjs/bin/core";
 import { RoughSVG } from "roughjs/bin/svg";
-import { SceneState } from "../scene/types";
+import { RenderConfig } from "../scene/types";
 import { BinaryFiles, Zoom } from "../types";
 export interface ExcalidrawElementWithCanvas {
     element: ExcalidrawElement | ExcalidrawTextElement;
     canvas: HTMLCanvasElement;
-    theme: SceneState["theme"];
+    theme: RenderConfig["theme"];
     canvasZoom: Zoom["value"];
     canvasOffsetX: number;
     canvasOffsetY: number;
@@ -16,8 +16,8 @@ export declare const getShapeForElement: (element: ExcalidrawElement) => Drawabl
 export declare const invalidateShapeForElement: (element: ExcalidrawElement) => boolean;
 export declare const clearRenderCache: () => void;
 export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
-export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderOptimizations: boolean, sceneState: SceneState) => void;
-export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX?: number | undefined, offsetY?: number | undefined) => void;
+export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: RenderConfig) => void;
+export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX?: number | undefined, offsetY?: number | undefined, exportWithDarkMode?: boolean | undefined) => void;
 export declare let pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
 export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;

package/types/renderer/renderScene.d.ts

@@ -2,21 +2,16 @@ import { RoughCanvas } from "roughjs/bin/canvas";
 import { RoughSVG } from "roughjs/bin/svg";
 import { AppState, BinaryFiles } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { SceneState } from "../scene/types";
-export declare const renderScene: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, selectionElement: NonDeletedExcalidrawElement | null, scale: number, rc: RoughCanvas, canvas: HTMLCanvasElement, sceneState: SceneState, { renderScrollbars, renderSelection, renderOptimizations, renderGrid, isExport, }?: {
-    renderScrollbars?: boolean | undefined;
-    renderSelection?: boolean | undefined;
-    renderOptimizations?: boolean | undefined;
-    renderGrid?: boolean | undefined;
-    isExport?: boolean | undefined;
-}) => {
+import { RenderConfig } from "../scene/types";
+export declare const renderScene: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, selectionElement: NonDeletedExcalidrawElement | null, scale: number, rc: RoughCanvas, canvas: HTMLCanvasElement, renderConfig: RenderConfig) => {
     atLeastOneVisibleElement: boolean;
     scrollBars?: undefined;
 } | {
     atLeastOneVisibleElement: boolean;
     scrollBars: import("../scene/types").ScrollBars | undefined;
 };
-export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, }?: {
+export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, }?: {
     offsetX?: number | undefined;
     offsetY?: number | undefined;
+    exportWithDarkMode?: boolean | undefined;
 }) => void;

package/types/scene/types.d.ts

@@ -1,11 +1,13 @@
 import { ExcalidrawTextElement } from "../element/types";
-import { AppClassProperties, AppState, Zoom } from "../types";
-export declare type SceneState = {
-    scrollX: number;
-    scrollY: number;
-    viewBackgroundColor: string | null;
-    zoom: Zoom;
-    shouldCacheIgnoreZoom: boolean;
+import { AppClassProperties, AppState } from "../types";
+export declare type RenderConfig = {
+    scrollX: AppState["scrollX"];
+    scrollY: AppState["scrollY"];
+    /** null indicates transparent bg */
+    viewBackgroundColor: AppState["viewBackgroundColor"] | null;
+    zoom: AppState["zoom"];
+    shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
+    theme: AppState["theme"];
     remotePointerViewportCoords: {
         [id: string]: {
             x: number;
@@ -24,8 +26,13 @@ export declare type SceneState = {
     remotePointerUserStates: {
         [id: string]: string;
     };
-    theme: AppState["theme"];
     imageCache: AppClassProperties["imageCache"];
+    renderScrollbars?: boolean;
+    renderSelection?: boolean;
+    renderGrid?: boolean;
+    /** 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;
 };
 export declare type SceneScroll = {
     scrollX: number;

package/types/utils.d.ts

@@ -24,7 +24,7 @@ export declare const debounce: <T extends any[]>(fn: (...args: T) => void, timeo
     flush(): void;
     cancel(): void;
 };
-export declare const chunk: <T extends unknown>(array: T[], size: number) => T[][];
+export declare const chunk: <T extends unknown>(array: readonly T[], size: number) => T[][];
 export declare const selectNode: (node: Element) => void;
 export declare const removeSelection: () => void;
 export declare const distance: (x: number, y: number) => number;
@@ -94,3 +94,11 @@ export declare const getNearestScrollableContainer: (element: HTMLElement) => HT
 export declare const focusNearestParent: (element: HTMLInputElement) => void;
 export declare const preventUnload: (event: BeforeUnloadEvent) => void;
 export declare const bytesToHexString: (bytes: Uint8Array) => string;
+export declare const getUpdatedTimestamp: () => number;
+/**
+ * Transforms array of objects containing `id` attribute,
+ * or array of ids (strings), into a Map, keyd by `id`.
+ */
+export declare const arrayToMap: <T extends string | {
+    id: string;
+}>(items: readonly T[]) => Map<string, T>;