@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-b7babe5

package/dist/excalidraw/index.d.ts

@@ -8,16 +8,18 @@ import MainMenu from "./components/main-menu/MainMenu";
 import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
 import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
 export declare const Excalidraw: React.MemoExoticComponent<(props: ExcalidrawProps) => JSX.Element>;
-export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
+export { getSceneVersion, hashElementsVersion, hashString, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
-export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/index";
+export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/export";
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
-export { loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, } from "./data/blob";
+export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "./data/blob";
+export { getFreeDrawSvgPath } from "./renderer/renderElement";
+export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "./element/typeChecks";
-export { FONT_FAMILY, THEME, MIME_TYPES } from "./constants";
+export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS } from "./constants";
 export { mutateElement, newElementWith, bumpVersion, } from "./element/mutateElement";
-export { parseLibraryTokensFromUrl, useHandleLibrary, mergeLibraryItems, } from "./data/library";
+export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "./utils";
 export { Sidebar } from "./components/Sidebar/Sidebar";
 export { Button } from "./components/Button";
@@ -32,8 +34,5 @@ export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";
 export { normalizeLink } from "./data/url";
 export { zoomToFitBounds } from "./actions/actionCanvas";
 export { convertToExcalidrawElements } from "./data/transform";
-export { getCommonBounds, getVisibleSceneBounds, getElementBounds, } from "./element/bounds";
-export { getDefaultAppState } from "./appState";
-export { isValueInRange, rotatePoint } from "./math";
-export { isArrowElement, isExcalidrawElement, isFreeDrawElement, isTextElement, } from "./element/typeChecks";
-export { getFreeDrawSvgPath } from "./renderer/renderElement";
+export { getCommonBounds, getVisibleSceneBounds } from "./element/bounds";
+export { elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, } from "../utils/withinBounds";

package/dist/excalidraw/index.js

@@ -17,7 +17,7 @@ import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
 import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
 polyfill();
 const ExcalidrawBase = (props) => {
-    const { onChange, initialData, excalidrawAPI, isCollaborating = false, onPointerUpdate, renderTopRightUI, langCode = defaultLang.code, viewModeEnabled, zenModeEnabled, gridModeEnabled, libraryReturnUrl, theme, name, renderCustomStats, onPaste, detectScroll = true, handleKeyboardGlobally = false, onLibraryChange, autoFocus = false, generateIdForFile, onLinkOpen, onPointerDown, onScrollChange, children, validateEmbeddable, renderEmbeddable, aiEnabled, } = props;
+    const { onChange, initialData, excalidrawAPI, isCollaborating = false, onPointerUpdate, renderTopRightUI, langCode = defaultLang.code, viewModeEnabled, zenModeEnabled, gridModeEnabled, libraryReturnUrl, theme, name, renderCustomStats, onPaste, detectScroll = true, handleKeyboardGlobally = false, onLibraryChange, autoFocus = false, generateIdForFile, onLinkOpen, onPointerDown, onPointerUp, onScrollChange, children, validateEmbeddable, renderEmbeddable, aiEnabled, } = props;
     const canvasActions = props.UIOptions?.canvasActions;
     // FIXME normalize/set defaults in parent component so that the memo resolver
     // compares the same values
@@ -41,6 +41,11 @@ const ExcalidrawBase = (props) => {
         UIOptions.canvasActions.toggleTheme = true;
     }
     useEffect(() => {
+        const importPolyfill = async () => {
+            //@ts-ignore
+            await import("canvas-roundrect-polyfill");
+        };
+        importPolyfill();
         // Block pinch-zooming on iOS outside of the content area
         const handleTouchMove = (event) => {
             // @ts-ignore
@@ -55,7 +60,7 @@ const ExcalidrawBase = (props) => {
             document.removeEventListener("touchmove", handleTouchMove);
         };
     }, []);
-    return (_jsx(Provider, { unstable_createStore: () => jotaiStore, scope: jotaiScope, children: _jsx(InitializeApp, { langCode: langCode, theme: theme, children: _jsx(App, { onChange: onChange, initialData: initialData, excalidrawAPI: excalidrawAPI, isCollaborating: isCollaborating, onPointerUpdate: onPointerUpdate, renderTopRightUI: renderTopRightUI, langCode: langCode, viewModeEnabled: viewModeEnabled, zenModeEnabled: zenModeEnabled, gridModeEnabled: gridModeEnabled, libraryReturnUrl: libraryReturnUrl, theme: theme, name: name, renderCustomStats: renderCustomStats, UIOptions: UIOptions, onPaste: onPaste, detectScroll: detectScroll, handleKeyboardGlobally: handleKeyboardGlobally, onLibraryChange: onLibraryChange, autoFocus: autoFocus, generateIdForFile: generateIdForFile, onLinkOpen: onLinkOpen, onPointerDown: onPointerDown, onScrollChange: onScrollChange, validateEmbeddable: validateEmbeddable, renderEmbeddable: renderEmbeddable, aiEnabled: aiEnabled !== false, children: children }) }) }));
+    return (_jsx(Provider, { unstable_createStore: () => jotaiStore, scope: jotaiScope, children: _jsx(InitializeApp, { langCode: langCode, theme: theme, children: _jsx(App, { onChange: onChange, initialData: initialData, excalidrawAPI: excalidrawAPI, isCollaborating: isCollaborating, onPointerUpdate: onPointerUpdate, renderTopRightUI: renderTopRightUI, langCode: langCode, viewModeEnabled: viewModeEnabled, zenModeEnabled: zenModeEnabled, gridModeEnabled: gridModeEnabled, libraryReturnUrl: libraryReturnUrl, theme: theme, name: name, renderCustomStats: renderCustomStats, UIOptions: UIOptions, onPaste: onPaste, detectScroll: detectScroll, handleKeyboardGlobally: handleKeyboardGlobally, onLibraryChange: onLibraryChange, autoFocus: autoFocus, generateIdForFile: generateIdForFile, onLinkOpen: onLinkOpen, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onScrollChange: onScrollChange, validateEmbeddable: validateEmbeddable, renderEmbeddable: renderEmbeddable, aiEnabled: aiEnabled !== false, children: children }) }) }));
 };
 const areEqual = (prevProps, nextProps) => {
     // short-circuit early
@@ -90,16 +95,18 @@ const areEqual = (prevProps, nextProps) => {
 };
 export const Excalidraw = React.memo(ExcalidrawBase, areEqual);
 Excalidraw.displayName = "Excalidraw";
-export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
+export { getSceneVersion, hashElementsVersion, hashString, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
-export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/index";
+export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/export";
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
-export { loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, } from "./data/blob";
+export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "./data/blob";
+export { getFreeDrawSvgPath } from "./renderer/renderElement";
+export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "./element/typeChecks";
-export { FONT_FAMILY, THEME, MIME_TYPES } from "./constants";
+export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS } from "./constants";
 export { mutateElement, newElementWith, bumpVersion, } from "./element/mutateElement";
-export { parseLibraryTokensFromUrl, useHandleLibrary, mergeLibraryItems, } from "./data/library";
+export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "./utils";
 export { Sidebar } from "./components/Sidebar/Sidebar";
 export { Button } from "./components/Button";
@@ -114,8 +121,5 @@ export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";
 export { normalizeLink } from "./data/url";
 export { zoomToFitBounds } from "./actions/actionCanvas";
 export { convertToExcalidrawElements } from "./data/transform";
-export { getCommonBounds, getVisibleSceneBounds, getElementBounds, } from "./element/bounds";
-export { getDefaultAppState } from "./appState";
-export { isValueInRange, rotatePoint } from "./math";
-export { isArrowElement, isExcalidrawElement, isFreeDrawElement, isTextElement, } from "./element/typeChecks";
-export { getFreeDrawSvgPath } from "./renderer/renderElement";
+export { getCommonBounds, getVisibleSceneBounds } from "./element/bounds";
+export { elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, } from "../utils/withinBounds";

package/dist/excalidraw/laser-trails.d.ts

@@ -0,0 +1,19 @@
+import { AnimatedTrail, Trail } from "./animated-trail";
+import { AnimationFrameHandler } from "./animation-frame-handler";
+import type App from "./components/App";
+export declare class LaserTrails implements Trail {
+    private animationFrameHandler;
+    private app;
+    localTrail: AnimatedTrail;
+    private collabTrails;
+    private container?;
+    constructor(animationFrameHandler: AnimationFrameHandler, app: App);
+    private getTrailOptions;
+    startPath(x: number, y: number): void;
+    addPointToPath(x: number, y: number): void;
+    endPath(): void;
+    start(container: SVGSVGElement): void;
+    stop(): void;
+    onFrame(): void;
+    private updateCollabTrails;
+}

package/dist/excalidraw/laser-trails.js

@@ -0,0 +1,95 @@
+import { AnimatedTrail } from "./animated-trail";
+import { easeOut } from "./utils";
+import { getClientColor } from "./clients";
+export class LaserTrails {
+    animationFrameHandler;
+    app;
+    localTrail;
+    collabTrails = new Map();
+    container;
+    constructor(animationFrameHandler, app) {
+        this.animationFrameHandler = animationFrameHandler;
+        this.app = app;
+        this.animationFrameHandler.register(this, this.onFrame.bind(this));
+        this.localTrail = new AnimatedTrail(animationFrameHandler, app, {
+            ...this.getTrailOptions(),
+            fill: () => "red",
+        });
+    }
+    getTrailOptions() {
+        return {
+            simplify: 0,
+            streamline: 0.4,
+            sizeMapping: (c) => {
+                const DECAY_TIME = 1000;
+                const DECAY_LENGTH = 50;
+                const t = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);
+                const l = (DECAY_LENGTH -
+                    Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) /
+                    DECAY_LENGTH;
+                return Math.min(easeOut(l), easeOut(t));
+            },
+        };
+    }
+    startPath(x, y) {
+        this.localTrail.startPath(x, y);
+    }
+    addPointToPath(x, y) {
+        this.localTrail.addPointToPath(x, y);
+    }
+    endPath() {
+        this.localTrail.endPath();
+    }
+    start(container) {
+        this.container = container;
+        this.animationFrameHandler.start(this);
+        this.localTrail.start(container);
+    }
+    stop() {
+        this.animationFrameHandler.stop(this);
+        this.localTrail.stop();
+    }
+    onFrame() {
+        this.updateCollabTrails();
+    }
+    updateCollabTrails() {
+        if (!this.container || this.app.state.collaborators.size === 0) {
+            return;
+        }
+        for (const [key, collabolator] of this.app.state.collaborators.entries()) {
+            let trail;
+            if (!this.collabTrails.has(key)) {
+                trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
+                    ...this.getTrailOptions(),
+                    fill: () => getClientColor(key),
+                });
+                trail.start(this.container);
+                this.collabTrails.set(key, trail);
+            }
+            else {
+                trail = this.collabTrails.get(key);
+            }
+            if (collabolator.pointer && collabolator.pointer.tool === "laser") {
+                if (collabolator.button === "down" && !trail.hasCurrentTrail) {
+                    trail.startPath(collabolator.pointer.x, collabolator.pointer.y);
+                }
+                if (collabolator.button === "down" &&
+                    trail.hasCurrentTrail &&
+                    !trail.hasLastPoint(collabolator.pointer.x, collabolator.pointer.y)) {
+                    trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);
+                }
+                if (collabolator.button === "up" && trail.hasCurrentTrail) {
+                    trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);
+                    trail.endPath();
+                }
+            }
+        }
+        for (const key of this.collabTrails.keys()) {
+            if (!this.app.state.collaborators.has(key)) {
+                const trail = this.collabTrails.get(key);
+                trail.stop();
+                this.collabTrails.delete(key);
+            }
+        }
+    }
+}

package/dist/excalidraw/locales/en.json

@@ -138,7 +138,9 @@
         "removeAllElementsFromFrame": "Remove all elements from frame",
         "eyeDropper": "Pick color from canvas",
         "textToDiagram": "Text to diagram",
-        "prompt": "Prompt"
+        "prompt": "Prompt",
+        "followUs": "Follow us",
+        "discordChat": "Discord chat"
     },
     "library": {
         "noItems": "No items added yet...",
@@ -212,9 +214,9 @@
         "fileTooBig": "File is too big. Maximum allowed size is {{maxSize}}.",
         "svgImageInsertError": "Couldn't insert SVG image. The SVG markup looks invalid.",
         "failedToFetchImage": "Failed to fetch image.",
-        "invalidSVGString": "Invalid SVG.",
         "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
         "importLibraryError": "Couldn't load library",
+        "saveLibraryError": "Couldn't save library to storage. Please save your library to a file locally to make sure you don't lose changes.",
         "collabSaveFailed": "Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work.",
         "collabSaveFailed_sizeExceeded": "Couldn't save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don't lose your work.",
         "imageToolNotSupported": "Images are disabled.",
@@ -246,7 +248,7 @@
         "library": "Library",
         "lock": "Keep selected tool active after drawing",
         "penMode": "Pen mode - prevent touch",
-        "link": "Add/ Update link for a selected shape",
+        "link": "Add / Update link for a selected shape",
         "eraser": "Eraser",
         "frame": "Frame tool",
         "magicframe": "Wireframe to code",
@@ -299,9 +301,12 @@
         "openIssueMessage": "We were very cautious not to include your scene information on the error. If your scene is not private, please consider following up on our <button>bug tracker</button>. Please include information below by copying and pasting into the GitHub issue.",
         "sceneContent": "Scene content:"
     },
+    "shareDialog": {
+        "or": "Or"
+    },
     "roomDialog": {
-        "desc_intro": "You can invite people to your current scene to collaborate with you.",
-        "desc_privacy": "Don't worry, the session uses end-to-end encryption, so whatever you draw will stay private. Not even our server will be able to see what you come up with.",
+        "desc_intro": "Invite people to collaborate on your drawing.",
+        "desc_privacy": "Don't worry, the session is end-to-end encrypted, and fully private. Not even our server can see what you draw.",
         "button_startSession": "Start session",
         "button_stopSession": "Stop session",
         "desc_inProgressIntro": "Live-collaboration session is now in progress.",

package/dist/excalidraw/queue.d.ts

@@ -0,0 +1,9 @@
+import { MaybePromise } from "./utility-types";
+type Job<T, TArgs extends unknown[]> = (...args: TArgs) => MaybePromise<T>;
+export declare class Queue {
+    private jobs;
+    private running;
+    private tick;
+    push<TValue, TArgs extends unknown[]>(jobFactory: Job<TValue, TArgs>, ...args: TArgs): Promise<TValue>;
+}
+export {};

package/dist/excalidraw/queue.js

@@ -0,0 +1,27 @@
+import { promiseTry, resolvablePromise } from "./utils";
+export class Queue {
+    jobs = [];
+    running = false;
+    tick() {
+        if (this.running) {
+            return;
+        }
+        const job = this.jobs.shift();
+        if (job) {
+            this.running = true;
+            job.promise.resolve(promiseTry(job.jobFactory, ...job.args).finally(() => {
+                this.running = false;
+                this.tick();
+            }));
+        }
+        else {
+            this.running = false;
+        }
+    }
+    push(jobFactory, ...args) {
+        const promise = resolvablePromise();
+        this.jobs.push({ jobFactory, promise, args });
+        this.tick();
+        return promise;
+    }
+}

package/dist/excalidraw/reactUtils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @param func handler taking at most single parameter (event).
+ */
+export declare const withBatchedUpdates: <TFunction extends ((event: any) => void) | (() => void)>(func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never) => TFunction;
+/**
+ * barches React state updates and throttles the calls to a single call per
+ * animation frame
+ */
+export declare const withBatchedUpdatesThrottled: <TFunction extends ((event: any) => void) | (() => void)>(func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never) => {
+    (...args: Parameters<TFunction>): void;
+    flush(): void;
+    cancel(): void;
+};
+export declare const isRenderThrottlingEnabled: () => boolean;

package/dist/excalidraw/reactUtils.js

@@ -0,0 +1,45 @@
+/**
+ * @param func handler taking at most single parameter (event).
+ */
+import { unstable_batchedUpdates } from "react-dom";
+import { version as ReactVersion } from "react";
+import { throttleRAF } from "./utils";
+export const withBatchedUpdates = (func) => ((event) => {
+    unstable_batchedUpdates(func, event);
+});
+/**
+ * barches React state updates and throttles the calls to a single call per
+ * animation frame
+ */
+export const withBatchedUpdatesThrottled = (func) => {
+    // @ts-ignore
+    return throttleRAF(((event) => {
+        unstable_batchedUpdates(func, event);
+    }));
+};
+export const isRenderThrottlingEnabled = (() => {
+    // we don't want to throttle in react < 18 because of #5439 and it was
+    // getting more complex to maintain the fix
+    let IS_REACT_18_AND_UP;
+    try {
+        const version = ReactVersion.split(".");
+        IS_REACT_18_AND_UP = Number(version[0]) > 17;
+    }
+    catch {
+        IS_REACT_18_AND_UP = false;
+    }
+    let hasWarned = false;
+    return () => {
+        if (window.EXCALIDRAW_THROTTLE_RENDER === true) {
+            if (!IS_REACT_18_AND_UP) {
+                if (!hasWarned) {
+                    hasWarned = true;
+                    console.warn("Excalidraw: render throttling is disabled on React versions < 18.");
+                }
+                return false;
+            }
+            return true;
+        }
+        return false;
+    };
+})();

package/dist/excalidraw/renderer/helpers.d.ts

@@ -0,0 +1,13 @@
+import { StaticCanvasAppState, AppState } from "../types";
+import { StaticCanvasRenderConfig } from "../scene/types";
+export declare const fillCircle: (context: CanvasRenderingContext2D, cx: number, cy: number, radius: number, stroke?: boolean) => void;
+export declare const getNormalizedCanvasDimensions: (canvas: HTMLCanvasElement, scale: number) => [number, number];
+export declare const bootstrapCanvas: ({ canvas, scale, normalizedWidth, normalizedHeight, theme, isExporting, viewBackgroundColor, }: {
+    canvas: HTMLCanvasElement;
+    scale: number;
+    normalizedWidth: number;
+    normalizedHeight: number;
+    theme?: import("../element/types").Theme | undefined;
+    isExporting?: boolean | undefined;
+    viewBackgroundColor?: string | null | undefined;
+}) => CanvasRenderingContext2D;

package/dist/excalidraw/renderer/helpers.js

@@ -0,0 +1,39 @@
+import { THEME_FILTER } from "../constants";
+export const fillCircle = (context, cx, cy, radius, stroke = true) => {
+    context.beginPath();
+    context.arc(cx, cy, radius, 0, Math.PI * 2);
+    context.fill();
+    if (stroke) {
+        context.stroke();
+    }
+};
+export const getNormalizedCanvasDimensions = (canvas, scale) => {
+    // When doing calculations based on canvas width we should used normalized one
+    return [canvas.width / scale, canvas.height / scale];
+};
+export const bootstrapCanvas = ({ canvas, scale, normalizedWidth, normalizedHeight, theme, isExporting, viewBackgroundColor, }) => {
+    const context = canvas.getContext("2d");
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.scale(scale, scale);
+    if (isExporting && theme === "dark") {
+        context.filter = THEME_FILTER;
+    }
+    // Paint background
+    if (typeof viewBackgroundColor === "string") {
+        const hasTransparence = viewBackgroundColor === "transparent" ||
+            viewBackgroundColor.length === 5 || // #RGBA
+            viewBackgroundColor.length === 9 || // #RRGGBBA
+            /(hsla|rgba)\(/.test(viewBackgroundColor);
+        if (hasTransparence) {
+            context.clearRect(0, 0, normalizedWidth, normalizedHeight);
+        }
+        context.save();
+        context.fillStyle = viewBackgroundColor;
+        context.fillRect(0, 0, normalizedWidth, normalizedHeight);
+        context.restore();
+    }
+    else {
+        context.clearRect(0, 0, normalizedWidth, normalizedHeight);
+    }
+    return context;
+};

package/dist/excalidraw/renderer/interactiveScene.d.ts

@@ -0,0 +1,20 @@
+import { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
+/** throttled to animation framerate */
+export declare const renderInteractiveSceneThrottled: {
+    (config: InteractiveSceneRenderConfig): void;
+    flush(): void;
+    cancel(): void;
+};
+/**
+ * Interactive scene is the ui-canvas where we render bounding boxes, selections
+ * and other ui stuff.
+ */
+export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }: InteractiveSceneRenderConfig) => {
+    atLeastOneVisibleElement: boolean;
+    elementsMap: RenderableElementsMap;
+    scrollBars?: undefined;
+} | {
+    scrollBars: import("../scene/types").ScrollBars | undefined;
+    atLeastOneVisibleElement: boolean;
+    elementsMap: RenderableElementsMap;
+}, T extends boolean = false>(renderConfig: InteractiveSceneRenderConfig, throttle?: T | undefined) => T extends true ? void : ReturnType<U>;