@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

package/dist/excalidraw/components/Stats/MultiPosition.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { rotate } from "../../math";
+import StatsDragInput from "./DragInput";
+import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
+import { getCommonBounds, isTextElement } from "../../element";
+import { useMemo } from "react";
+import { getElementsInAtomicUnit, moveElement } from "./utils";
+const STEP_SIZE = 10;
+const moveElements = (property, changeInTopX, changeInTopY, elements, originalElements, elementsMap, originalElementsMap) => {
+    for (let i = 0; i < elements.length; i++) {
+        const origElement = originalElements[i];
+        const [cx, cy] = [
+            origElement.x + origElement.width / 2,
+            origElement.y + origElement.height / 2,
+        ];
+        const [topLeftX, topLeftY] = rotate(origElement.x, origElement.y, cx, cy, origElement.angle);
+        const newTopLeftX = property === "x" ? Math.round(topLeftX + changeInTopX) : topLeftX;
+        const newTopLeftY = property === "y" ? Math.round(topLeftY + changeInTopY) : topLeftY;
+        moveElement(newTopLeftX, newTopLeftY, origElement, elementsMap, originalElementsMap, false);
+    }
+};
+const moveGroupTo = (nextX, nextY, originalElements, elementsMap, originalElementsMap, scene) => {
+    const [x1, y1, ,] = getCommonBounds(originalElements);
+    const offsetX = nextX - x1;
+    const offsetY = nextY - y1;
+    for (let i = 0; i < originalElements.length; i++) {
+        const origElement = originalElements[i];
+        const latestElement = elementsMap.get(origElement.id);
+        if (!latestElement) {
+            continue;
+        }
+        // bound texts are moved with their containers
+        if (!isTextElement(latestElement) || !latestElement.containerId) {
+            const [cx, cy] = [
+                latestElement.x + latestElement.width / 2,
+                latestElement.y + latestElement.height / 2,
+            ];
+            const [topLeftX, topLeftY] = rotate(latestElement.x, latestElement.y, cx, cy, latestElement.angle);
+            moveElement(topLeftX + offsetX, topLeftY + offsetY, origElement, elementsMap, originalElementsMap, false);
+        }
+    }
+};
+const handlePositionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldChangeByStepSize, nextValue, property, scene, originalAppState, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    if (nextValue !== undefined) {
+        for (const atomicUnit of getAtomicUnits(originalElements, originalAppState)) {
+            const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap, originalElementsMap);
+            if (elementsInUnit.length > 1) {
+                const [x1, y1, ,] = getCommonBounds(elementsInUnit.map((el) => el.latest));
+                const newTopLeftX = property === "x" ? nextValue : x1;
+                const newTopLeftY = property === "y" ? nextValue : y1;
+                moveGroupTo(newTopLeftX, newTopLeftY, elementsInUnit.map((el) => el.original), elementsMap, originalElementsMap, scene);
+            }
+            else {
+                const origElement = elementsInUnit[0]?.original;
+                const latestElement = elementsInUnit[0]?.latest;
+                if (origElement &&
+                    latestElement &&
+                    isPropertyEditable(latestElement, property)) {
+                    const [cx, cy] = [
+                        origElement.x + origElement.width / 2,
+                        origElement.y + origElement.height / 2,
+                    ];
+                    const [topLeftX, topLeftY] = rotate(origElement.x, origElement.y, cx, cy, origElement.angle);
+                    const newTopLeftX = property === "x" ? nextValue : topLeftX;
+                    const newTopLeftY = property === "y" ? nextValue : topLeftY;
+                    moveElement(newTopLeftX, newTopLeftY, origElement, elementsMap, originalElementsMap, false);
+                }
+            }
+        }
+        scene.triggerUpdate();
+        return;
+    }
+    const change = shouldChangeByStepSize
+        ? getStepSizedValue(accumulatedChange, STEP_SIZE)
+        : accumulatedChange;
+    const changeInTopX = property === "x" ? change : 0;
+    const changeInTopY = property === "y" ? change : 0;
+    moveElements(property, changeInTopX, changeInTopY, originalElements, originalElements, elementsMap, originalElementsMap);
+    scene.triggerUpdate();
+};
+const MultiPosition = ({ property, elements, elementsMap, atomicUnits, scene, appState, }) => {
+    const positions = useMemo(() => atomicUnits.map((atomicUnit) => {
+        const elementsInUnit = Object.keys(atomicUnit)
+            .map((id) => elementsMap.get(id))
+            .filter((el) => el !== undefined);
+        // we're dealing with a group
+        if (elementsInUnit.length > 1) {
+            const [x1, y1] = getCommonBounds(elementsInUnit);
+            return Math.round((property === "x" ? x1 : y1) * 100) / 100;
+        }
+        const [el] = elementsInUnit;
+        const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
+        const [topLeftX, topLeftY] = rotate(el.x, el.y, cx, cy, el.angle);
+        return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
+    }), [atomicUnits, elementsMap, property]);
+    const value = new Set(positions).size === 1 ? positions[0] : "Mixed";
+    return (_jsx(StatsDragInput, { label: property === "x" ? "X" : "Y", elements: elements, dragInputCallback: handlePositionChange, value: value, property: property, scene: scene, appState: appState }));
+};
+export default MultiPosition;

package/dist/excalidraw/components/Stats/Position.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+interface PositionProps {
+    property: "x" | "y";
+    element: ExcalidrawElement;
+    elementsMap: ElementsMap;
+    scene: Scene;
+    appState: AppState;
+}
+declare const Position: ({ property, element, elementsMap, scene, appState, }: PositionProps) => JSX.Element;
+export default Position;

package/dist/excalidraw/components/Stats/Position.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { rotate } from "../../math";
+import StatsDragInput from "./DragInput";
+import { getStepSizedValue, moveElement } from "./utils";
+const STEP_SIZE = 10;
+const handlePositionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldChangeByStepSize, nextValue, property, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const origElement = originalElements[0];
+    const [cx, cy] = [
+        origElement.x + origElement.width / 2,
+        origElement.y + origElement.height / 2,
+    ];
+    const [topLeftX, topLeftY] = rotate(origElement.x, origElement.y, cx, cy, origElement.angle);
+    if (nextValue !== undefined) {
+        const newTopLeftX = property === "x" ? nextValue : topLeftX;
+        const newTopLeftY = property === "y" ? nextValue : topLeftY;
+        moveElement(newTopLeftX, newTopLeftY, origElement, elementsMap, originalElementsMap);
+        return;
+    }
+    const changeInTopX = property === "x" ? accumulatedChange : 0;
+    const changeInTopY = property === "y" ? accumulatedChange : 0;
+    const newTopLeftX = property === "x"
+        ? Math.round(shouldChangeByStepSize
+            ? getStepSizedValue(origElement.x + changeInTopX, STEP_SIZE)
+            : topLeftX + changeInTopX)
+        : topLeftX;
+    const newTopLeftY = property === "y"
+        ? Math.round(shouldChangeByStepSize
+            ? getStepSizedValue(origElement.y + changeInTopY, STEP_SIZE)
+            : topLeftY + changeInTopY)
+        : topLeftY;
+    moveElement(newTopLeftX, newTopLeftY, origElement, elementsMap, originalElementsMap);
+};
+const Position = ({ property, element, elementsMap, scene, appState, }) => {
+    const [topLeftX, topLeftY] = rotate(element.x, element.y, element.x + element.width / 2, element.y + element.height / 2, element.angle);
+    const value = Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
+    return (_jsx(StatsDragInput, { label: property === "x" ? "X" : "Y", elements: [element], dragInputCallback: handlePositionChange, value: value, property: property, scene: scene, appState: appState }));
+};
+export default Position;

package/dist/excalidraw/components/Stats/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, ExcalidrawProps } from "../../types";
+import type Scene from "../../scene/Scene";
+interface StatsProps {
+    scene: Scene;
+    onClose: () => void;
+    renderCustomStats: ExcalidrawProps["renderCustomStats"];
+}
+export declare const Stats: (props: StatsProps) => JSX.Element;
+export declare const StatsInner: import("react").MemoExoticComponent<({ scene, onClose, renderCustomStats, selectedElements, appState, sceneNonce, }: StatsProps & {
+    sceneNonce: number;
+    selectedElements: readonly NonDeletedExcalidrawElement[];
+    appState: AppState;
+}) => JSX.Element>;
+export {};

package/dist/excalidraw/components/Stats/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, memo } from "react";
+import { getCommonBounds } from "../../element/bounds";
+import { t } from "../../i18n";
+import { CloseIcon } from "../icons";
+import { Island } from "../Island";
+import { throttle } from "lodash";
+import Dimension from "./Dimension";
+import Angle from "./Angle";
+import FontSize from "./FontSize";
+import MultiDimension from "./MultiDimension";
+import { elementsAreInSameGroup } from "../../groups";
+import MultiAngle from "./MultiAngle";
+import MultiFontSize from "./MultiFontSize";
+import Position from "./Position";
+import MultiPosition from "./MultiPosition";
+import Collapsible from "./Collapsible";
+import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
+import { getAtomicUnits } from "./utils";
+import { STATS_PANELS } from "../../constants";
+const STATS_TIMEOUT = 50;
+export const Stats = (props) => {
+    const appState = useExcalidrawAppState();
+    const sceneNonce = props.scene.getSceneNonce() || 1;
+    const selectedElements = props.scene.getSelectedElements({
+        selectedElementIds: appState.selectedElementIds,
+        includeBoundTextElement: false,
+    });
+    return (_jsx(StatsInner, { ...props, appState: appState, sceneNonce: sceneNonce, selectedElements: selectedElements }));
+};
+export const StatsInner = memo(({ scene, onClose, renderCustomStats, selectedElements, appState, sceneNonce, }) => {
+    const elements = scene.getNonDeletedElements();
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const setAppState = useExcalidrawSetAppState();
+    const singleElement = selectedElements.length === 1 ? selectedElements[0] : null;
+    const multipleElements = selectedElements.length > 1 ? selectedElements : null;
+    const [sceneDimension, setSceneDimension] = useState({
+        width: 0,
+        height: 0,
+    });
+    const throttledSetSceneDimension = useMemo(() => throttle((elements) => {
+        const boundingBox = getCommonBounds(elements);
+        setSceneDimension({
+            width: Math.round(boundingBox[2]) - Math.round(boundingBox[0]),
+            height: Math.round(boundingBox[3]) - Math.round(boundingBox[1]),
+        });
+    }, STATS_TIMEOUT), []);
+    useEffect(() => {
+        throttledSetSceneDimension(elements);
+    }, [sceneNonce, elements, throttledSetSceneDimension]);
+    useEffect(() => () => throttledSetSceneDimension.cancel(), [throttledSetSceneDimension]);
+    const atomicUnits = useMemo(() => {
+        return getAtomicUnits(selectedElements, appState);
+    }, [selectedElements, appState]);
+    return (_jsx("div", { className: "Stats", children: _jsxs(Island, { padding: 3, children: [_jsxs("div", { className: "title", children: [_jsx("h2", { children: t("stats.title") }), _jsx("div", { className: "close", onClick: onClose, children: CloseIcon })] }), _jsx(Collapsible, { label: _jsx("h3", { children: t("stats.generalStats") }), open: !!(appState.stats.panels & STATS_PANELS.generalStats), openTrigger: () => setAppState((state) => {
+                        return {
+                            ...state,
+                            stats: {
+                                open: true,
+                                panels: state.stats.panels ^ STATS_PANELS.generalStats,
+                            },
+                        };
+                    }), children: _jsx("table", { children: _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("th", { colSpan: 2, children: t("stats.scene") }) }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.elements") }), _jsx("td", { children: elements.length })] }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.width") }), _jsx("td", { children: sceneDimension.width })] }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.height") }), _jsx("td", { children: sceneDimension.height })] }), renderCustomStats?.(elements, appState)] }) }) }), selectedElements.length > 0 && (_jsx("div", { id: "elementStats", style: {
+                        marginTop: 12,
+                    }, children: _jsxs(Collapsible, { label: _jsx("h3", { children: t("stats.elementProperties") }), open: !!(appState.stats.panels & STATS_PANELS.elementProperties), openTrigger: () => setAppState((state) => {
+                            return {
+                                ...state,
+                                stats: {
+                                    open: true,
+                                    panels: state.stats.panels ^ STATS_PANELS.elementProperties,
+                                },
+                            };
+                        }), children: [singleElement && (_jsxs("div", { className: "sectionContent", children: [_jsx("div", { className: "elementType", children: t(`element.${singleElement.type}`) }), _jsxs("div", { className: "statsItem", children: [_jsx(Position, { element: singleElement, property: "x", elementsMap: elementsMap, scene: scene, appState: appState }), _jsx(Position, { element: singleElement, property: "y", elementsMap: elementsMap, scene: scene, appState: appState }), _jsx(Dimension, { property: "width", element: singleElement, scene: scene, appState: appState }), _jsx(Dimension, { property: "height", element: singleElement, scene: scene, appState: appState }), _jsx(Angle, { property: "angle", element: singleElement, scene: scene, appState: appState }), _jsx(FontSize, { property: "fontSize", element: singleElement, scene: scene, appState: appState })] })] })), multipleElements && (_jsxs("div", { className: "sectionContent", children: [elementsAreInSameGroup(multipleElements) && (_jsx("div", { className: "elementType", children: t("element.group") })), _jsxs("div", { className: "elementsCount", children: [_jsx("div", { children: t("stats.elements") }), _jsx("div", { children: selectedElements.length })] }), _jsxs("div", { className: "statsItem", children: [_jsx(MultiPosition, { property: "x", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }), _jsx(MultiPosition, { property: "y", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }), _jsx(MultiDimension, { property: "width", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }), _jsx(MultiDimension, { property: "height", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }), _jsx(MultiAngle, { property: "angle", elements: multipleElements, scene: scene, appState: appState }), _jsx(MultiFontSize, { property: "fontSize", elements: multipleElements, scene: scene, appState: appState, elementsMap: elementsMap })] })] }))] }) }))] }) }));
+}, (prev, next) => {
+    return (prev.sceneNonce === next.sceneNonce &&
+        prev.selectedElements === next.selectedElements &&
+        prev.appState.stats.panels === next.appState.stats.panels);
+});

package/dist/excalidraw/components/Stats/utils.d.ts

@@ -0,0 +1,25 @@
+import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
+import type { AppState } from "../../types";
+export type StatsInputProperty = "x" | "y" | "width" | "height" | "angle" | "fontSize";
+export declare const SMALLEST_DELTA = 0.01;
+export declare const isPropertyEditable: (element: ExcalidrawElement, property: keyof ExcalidrawElement) => boolean;
+export declare const getStepSizedValue: (value: number, stepSize: number) => number;
+export type AtomicUnit = Record<string, true>;
+export declare const getElementsInAtomicUnit: (atomicUnit: AtomicUnit, elementsMap: ElementsMap, originalElementsMap?: ElementsMap) => {
+    original: NonDeletedExcalidrawElement;
+    latest: NonDeletedExcalidrawElement;
+}[];
+export declare const newOrigin: (x1: number, y1: number, w1: number, h1: number, w2: number, h2: number, angle: number) => {
+    x: number;
+    y: number;
+};
+export declare const resizeElement: (nextWidth: number, nextHeight: number, keepAspectRatio: boolean, origElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, shouldInformMutation?: boolean) => void;
+export declare const moveElement: (newTopLeftX: number, newTopLeftY: number, originalElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, originalElementsMap: ElementsMap, shouldInformMutation?: boolean) => void;
+export declare const getAtomicUnits: (targetElements: readonly ExcalidrawElement[], appState: AppState) => AtomicUnit[];
+export declare const updateBindings: (latestElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, options?: {
+    simultaneouslyUpdated?: readonly ExcalidrawElement[];
+    newSize?: {
+        width: number;
+        height: number;
+    };
+}) => void;

package/dist/excalidraw/components/Stats/utils.js

@@ -0,0 +1,158 @@
+import { bindOrUnbindLinearElements, updateBoundElements, } from "../../element/binding";
+import { mutateElement } from "../../element/mutateElement";
+import { measureFontSizeFromWidth, rescalePointsInElement, } from "../../element/resizeElements";
+import { getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getBoundTextMaxWidth, handleBindTextResize, } from "../../element/textElement";
+import { isFrameLikeElement, isLinearElement, isTextElement, } from "../../element/typeChecks";
+import { getSelectedGroupIds, getElementsInGroup, isInGroup, } from "../../groups";
+import { rotate } from "../../math";
+import { getFontString } from "../../utils";
+export const SMALLEST_DELTA = 0.01;
+export const isPropertyEditable = (element, property) => {
+    if (property === "height" && isTextElement(element)) {
+        return false;
+    }
+    if (property === "width" && isTextElement(element)) {
+        return false;
+    }
+    if (property === "angle" && isFrameLikeElement(element)) {
+        return false;
+    }
+    return true;
+};
+export const getStepSizedValue = (value, stepSize) => {
+    const v = value + stepSize / 2;
+    return v - (v % stepSize);
+};
+export const getElementsInAtomicUnit = (atomicUnit, elementsMap, originalElementsMap) => {
+    return Object.keys(atomicUnit)
+        .map((id) => ({
+        original: (originalElementsMap ?? elementsMap).get(id),
+        latest: elementsMap.get(id),
+    }))
+        .filter((el) => el.original !== undefined && el.latest !== undefined);
+};
+export const newOrigin = (x1, y1, w1, h1, w2, h2, angle) => {
+    /**
+     * The formula below is the result of solving
+     *   rotate(x1, y1, cx1, cy1, angle) = rotate(x2, y2, cx2, cy2, angle)
+     * where rotate is the function defined in math.ts
+     *
+     * This is so that the new origin (x2, y2),
+     * when rotated against the new center (cx2, cy2),
+     * coincides with (x1, y1) rotated against (cx1, cy1)
+     *
+     * The reason for doing this computation is so the element's top left corner
+     * on the canvas remains fixed after any changes in its dimension.
+     */
+    return {
+        x: x1 +
+            (w1 - w2) / 2 +
+            ((w2 - w1) / 2) * Math.cos(angle) +
+            ((h1 - h2) / 2) * Math.sin(angle),
+        y: y1 +
+            (h1 - h2) / 2 +
+            ((w2 - w1) / 2) * Math.sin(angle) +
+            ((h2 - h1) / 2) * Math.cos(angle),
+    };
+};
+export const resizeElement = (nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap, shouldInformMutation = true) => {
+    const latestElement = elementsMap.get(origElement.id);
+    if (!latestElement) {
+        return;
+    }
+    let boundTextFont = {};
+    const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+    if (boundTextElement) {
+        const minWidth = getApproxMinLineWidth(getFontString(boundTextElement), boundTextElement.lineHeight);
+        const minHeight = getApproxMinLineHeight(boundTextElement.fontSize, boundTextElement.lineHeight);
+        nextWidth = Math.max(nextWidth, minWidth);
+        nextHeight = Math.max(nextHeight, minHeight);
+    }
+    mutateElement(latestElement, {
+        ...newOrigin(latestElement.x, latestElement.y, latestElement.width, latestElement.height, nextWidth, nextHeight, latestElement.angle),
+        width: nextWidth,
+        height: nextHeight,
+        ...rescalePointsInElement(origElement, nextWidth, nextHeight, true),
+    }, shouldInformMutation);
+    updateBindings(latestElement, elementsMap, {
+        newSize: {
+            width: nextWidth,
+            height: nextHeight,
+        },
+    });
+    if (boundTextElement) {
+        boundTextFont = {
+            fontSize: boundTextElement.fontSize,
+        };
+        if (keepAspectRatio) {
+            const updatedElement = {
+                ...latestElement,
+                width: nextWidth,
+                height: nextHeight,
+            };
+            const nextFont = measureFontSizeFromWidth(boundTextElement, elementsMap, getBoundTextMaxWidth(updatedElement, boundTextElement));
+            boundTextFont = {
+                fontSize: nextFont?.size ?? boundTextElement.fontSize,
+            };
+        }
+    }
+    if (boundTextElement && boundTextFont) {
+        mutateElement(boundTextElement, {
+            fontSize: boundTextFont.fontSize,
+        });
+    }
+    handleBindTextResize(latestElement, elementsMap, "e", keepAspectRatio);
+};
+export const moveElement = (newTopLeftX, newTopLeftY, originalElement, elementsMap, originalElementsMap, shouldInformMutation = true) => {
+    const latestElement = elementsMap.get(originalElement.id);
+    if (!latestElement) {
+        return;
+    }
+    const [cx, cy] = [
+        originalElement.x + originalElement.width / 2,
+        originalElement.y + originalElement.height / 2,
+    ];
+    const [topLeftX, topLeftY] = rotate(originalElement.x, originalElement.y, cx, cy, originalElement.angle);
+    const changeInX = newTopLeftX - topLeftX;
+    const changeInY = newTopLeftY - topLeftY;
+    const [x, y] = rotate(newTopLeftX, newTopLeftY, cx + changeInX, cy + changeInY, -originalElement.angle);
+    mutateElement(latestElement, {
+        x,
+        y,
+    }, shouldInformMutation);
+    updateBindings(latestElement, elementsMap);
+    const boundTextElement = getBoundTextElement(originalElement, originalElementsMap);
+    if (boundTextElement) {
+        const latestBoundTextElement = elementsMap.get(boundTextElement.id);
+        latestBoundTextElement &&
+            mutateElement(latestBoundTextElement, {
+                x: boundTextElement.x + changeInX,
+                y: boundTextElement.y + changeInY,
+            }, shouldInformMutation);
+    }
+};
+export const getAtomicUnits = (targetElements, appState) => {
+    const selectedGroupIds = getSelectedGroupIds(appState);
+    const _atomicUnits = selectedGroupIds.map((gid) => {
+        return getElementsInGroup(targetElements, gid).reduce((acc, el) => {
+            acc[el.id] = true;
+            return acc;
+        }, {});
+    });
+    targetElements
+        .filter((el) => !isInGroup(el))
+        .forEach((el) => {
+        _atomicUnits.push({
+            [el.id]: true,
+        });
+    });
+    return _atomicUnits;
+};
+export const updateBindings = (latestElement, elementsMap, options) => {
+    if (isLinearElement(latestElement)) {
+        bindOrUnbindLinearElements([latestElement], elementsMap, true, []);
+    }
+    else {
+        updateBoundElements(latestElement, elementsMap, options);
+    }
+};

package/dist/excalidraw/components/TTDDialog/MermaidToExcalidraw.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./MermaidToExcalidraw.scss";
-import { MermaidToExcalidrawLibProps } from "./common";
+import type { MermaidToExcalidrawLibProps } from "./common";
 declare const MermaidToExcalidraw: ({ mermaidToExcalidrawLib, }: {
     mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
 }) => JSX.Element;

package/dist/excalidraw/components/TTDDialog/MermaidToExcalidraw.js

@@ -12,7 +12,7 @@ import { TTDDialogInput } from "./TTDDialogInput";
 import { TTDDialogOutput } from "./TTDDialogOutput";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
 import { EDITOR_LS_KEYS } from "../../constants";
-import { debounce } from "../../utils";
+import { debounce, isDevEnv } from "../../utils";
 import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
 const MERMAID_EXAMPLE = "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
 const debouncedSaveMermaidDefinition = debounce(saveMermaidDataToStorage, 300);
@@ -31,7 +31,11 @@ const MermaidToExcalidraw = ({ mermaidToExcalidrawLib, }) => {
             mermaidToExcalidrawLib,
             setError,
             mermaidDefinition: deferredText,
-        }).catch(() => { });
+        }).catch((err) => {
+            if (isDevEnv()) {
+                console.error("Failed to parse mermaid definition", err);
+            }
+        });
         debouncedSaveMermaidDefinition(deferredText);
     }, [deferredText, mermaidToExcalidrawLib]);
     useEffect(() => () => {

package/dist/excalidraw/components/TTDDialog/TTDDialog.js

@@ -141,8 +141,8 @@ export const TTDDialogBase = withInternalFallback("TTDDialogBase", ({ tab, ...re
                                             marginLeft: "10px",
                                             fontSize: 10,
                                             borderRadius: "12px",
-                                            background: "pink",
-                                            color: "#000",
+                                            background: "var(--color-promo)",
+                                            color: "var(--color-surface-lowest)",
                                         }, children: "AI Beta" })] }) }), _jsx(TTDDialogTabTrigger, { tab: "mermaid", children: "Mermaid" })] })), _jsx(TTDDialogTab, { className: "ttd-dialog-content", tab: "mermaid", children: _jsx(MermaidToExcalidraw, { mermaidToExcalidrawLib: mermaidToExcalidrawLib }) }), !("__fallback" in rest) && (_jsxs(TTDDialogTab, { className: "ttd-dialog-content", tab: "text-to-diagram", children: [_jsx("div", { className: "ttd-dialog-desc", children: "Currently we use Mermaid as a middle step, so you'll get best results if you describe a diagram, workflow, flow chart, and similar." }), _jsxs(TTDDialogPanels, { children: [_jsx(TTDDialogPanel, { label: t("labels.prompt"), panelAction: {
                                         action: onGenerate,
                                         label: "Generate",

package/dist/excalidraw/components/TTDDialog/TTDDialogInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from "react";
+import type { ChangeEventHandler } from "react";
 interface TTDDialogInputProps {
     input: string;
     placeholder: string;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanel.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 interface TTDDialogPanelProps {
     label: string;
     children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanels.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogPanels: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;

package/dist/excalidraw/components/TTDDialog/TTDDialogTabs.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 declare const TTDDialogTabs: {
     (props: {
         children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogTrigger.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogTrigger: {
     ({ children, icon, }: {
         children?: ReactNode;

package/dist/excalidraw/components/TTDDialog/common.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
-import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { NonDeletedExcalidrawElement } from "../../element/types";
-import { AppClassProperties, BinaryFiles } from "../../types";
+import type { MermaidConfig } from "@excalidraw/mermaid-to-excalidraw";
+import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppClassProperties, BinaryFiles } from "../../types";
 export interface MermaidToExcalidrawLibProps {
     loaded: boolean;
     api: Promise<{
-        parseMermaidToExcalidraw: (definition: string, options: MermaidOptions) => Promise<MermaidToExcalidrawResult>;
+        parseMermaidToExcalidraw: (definition: string, config?: MermaidConfig) => Promise<MermaidToExcalidrawResult>;
     }>;
 }
 interface ConvertMermaidToExcalidrawFormatProps {

package/dist/excalidraw/components/TTDDialog/common.js

@@ -1,4 +1,4 @@
-import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE, EDITOR_LS_KEYS, } from "../../constants";
+import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "../../constants";
 import { convertToExcalidrawElements, exportToCanvas } from "../../index";
 import { canvasToBlob } from "../../data/blob";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
@@ -30,14 +30,10 @@ export const convertMermaidToExcalidraw = async ({ canvasRef, mermaidToExcalidra
         const api = await mermaidToExcalidrawLib.api;
         let ret;
         try {
-            ret = await api.parseMermaidToExcalidraw(mermaidDefinition, {
-                fontSize: DEFAULT_FONT_SIZE,
-            });
+            ret = await api.parseMermaidToExcalidraw(mermaidDefinition);
         }
         catch (err) {
-            ret = await api.parseMermaidToExcalidraw(mermaidDefinition.replace(/"/g, "'"), {
-                fontSize: DEFAULT_FONT_SIZE,
-            });
+            ret = await api.parseMermaidToExcalidraw(mermaidDefinition.replace(/"/g, "'"));
         }
         const { elements, files } = ret;
         setError(null);

package/dist/excalidraw/components/TextField.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent } from "react";
+import type { KeyboardEvent } from "react";
 import "./TextField.scss";
 type TextFieldProps = {
     onChange?: (value: string) => void;

package/dist/excalidraw/components/Toast.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 import "./Toast.scss";
 export declare const Toast: ({ message, onClose, closable, duration, style, }: {
     message: string;

package/dist/excalidraw/components/ToolButton.d.ts

@@ -1,6 +1,7 @@
 import "./ToolIcon.scss";
-import React, { CSSProperties } from "react";
-import { PointerType } from "../element/types";
+import type { CSSProperties } from "react";
+import React from "react";
+import type { PointerType } from "../element/types";
 export type ToolButtonSize = "small" | "medium";
 type ToolButtonBaseProps = {
     icon?: React.ReactNode;
@@ -17,6 +18,7 @@ type ToolButtonBaseProps = {
     hidden?: boolean;
     visible?: boolean;
     selected?: boolean;
+    disabled?: boolean;
     className?: string;
     style?: CSSProperties;
     isLoading?: boolean;

package/dist/excalidraw/components/ToolButton.js

@@ -52,7 +52,7 @@ export const ToolButton = React.forwardRef((props, ref) => {
                 ToolIcon: !props.hidden,
                 "ToolIcon--selected": props.selected,
                 "ToolIcon--plain": props.type === "icon",
-            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
+            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading || !!props.disabled, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", "aria-disabled": !!props.disabled, children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
     }
     return (_jsxs("label", { className: clsx("ToolIcon", props.className), title: props.title, onPointerDown: (event) => {
             lastPointerTypeRef.current = event.pointerType || null;

package/dist/excalidraw/components/Trans.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TranslationKeys } from "../i18n";
+import type { TranslationKeys } from "../i18n";
 declare const Trans: ({ i18nKey, children, ...props }: {
     [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
     i18nKey: TranslationKeys;

package/dist/excalidraw/components/UserList.d.ts

@@ -1,6 +1,6 @@
 import "./UserList.scss";
 import React from "react";
-import { Collaborator, SocketId } from "../types";
+import type { Collaborator, SocketId } from "../types";
 export type GoToCollaboratorComponentProps = {
     socketId: SocketId;
     collaborator: Collaborator;