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

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

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { EVENT } from "../../constants";
+import { KEYS } from "../../keys";
+import { deepCopyElement } from "../../element/newElement";
+import clsx from "clsx";
+import { useApp } from "../App";
+import { InlineIcon } from "../InlineIcon";
+import { SMALLEST_DELTA } from "./utils";
+import { StoreAction } from "../../store";
+import "./DragInput.scss";
+import { cloneJSON } from "../../utils";
+const StatsDragInput = ({ label, icon, dragInputCallback, value, elements, editable = true, shouldKeepAspectRatio, property, scene, appState, }) => {
+    const app = useApp();
+    const inputRef = useRef(null);
+    const labelRef = useRef(null);
+    const [inputValue, setInputValue] = useState(value.toString());
+    const stateRef = useRef(null);
+    if (!stateRef.current) {
+        stateRef.current = {
+            originalAppState: cloneJSON(appState),
+            originalElements: elements,
+            lastUpdatedValue: inputValue,
+            updatePending: false,
+        };
+    }
+    useEffect(() => {
+        const inputValue = value.toString();
+        setInputValue(inputValue);
+        stateRef.current.lastUpdatedValue = inputValue;
+    }, [value]);
+    const handleInputValue = (updatedValue, elements, appState) => {
+        if (!stateRef.current.updatePending) {
+            return false;
+        }
+        stateRef.current.updatePending = false;
+        const parsed = Number(updatedValue);
+        if (isNaN(parsed)) {
+            setInputValue(value.toString());
+            return;
+        }
+        const rounded = Number(parsed.toFixed(2));
+        const original = Number(value);
+        // only update when
+        // 1. original was "Mixed" and we have a new value
+        // 2. original was not "Mixed" and the difference between a new value and previous value is greater
+        //    than the smallest delta allowed, which is 0.01
+        // reason: idempotent to avoid unnecessary
+        if (isNaN(original) || Math.abs(rounded - original) >= SMALLEST_DELTA) {
+            stateRef.current.lastUpdatedValue = updatedValue;
+            dragInputCallback({
+                accumulatedChange: 0,
+                instantChange: 0,
+                originalElements: elements,
+                originalElementsMap: app.scene.getNonDeletedElementsMap(),
+                shouldKeepAspectRatio: shouldKeepAspectRatio,
+                shouldChangeByStepSize: false,
+                nextValue: rounded,
+                property,
+                scene,
+                originalAppState: appState,
+            });
+            app.syncActionResult({ storeAction: StoreAction.CAPTURE });
+        }
+    };
+    const handleInputValueRef = useRef(handleInputValue);
+    handleInputValueRef.current = handleInputValue;
+    // make sure that clicking on canvas (which umounts the component)
+    // updates current input value (blur isn't triggered)
+    useEffect(() => {
+        const input = inputRef.current;
+        return () => {
+            const nextValue = input?.value;
+            if (nextValue) {
+                handleInputValueRef.current(nextValue, stateRef.current.originalElements, stateRef.current.originalAppState);
+            }
+        };
+    }, [
+        // we need to track change of `editable` state as mount/unmount
+        // because react doesn't trigger `blur` when a an input is blurred due
+        // to being disabled (https://github.com/facebook/react/issues/9142).
+        // As such, if we keep rendering disabled inputs, then change in selection
+        // to an element that has a given property as non-editable would not trigger
+        // blur/unmount and wouldn't update the value.
+        editable,
+    ]);
+    if (!editable) {
+        return null;
+    }
+    return (_jsxs("div", { className: clsx("drag-input-container", !editable && "disabled"), "data-testid": label, children: [_jsx("div", { className: "drag-input-label", ref: labelRef, onPointerDown: (event) => {
+                    if (inputRef.current && editable) {
+                        let startValue = Number(inputRef.current.value);
+                        if (isNaN(startValue)) {
+                            startValue = 0;
+                        }
+                        let lastPointer = null;
+                        let originalElementsMap = app.scene
+                            .getNonDeletedElements()
+                            .reduce((acc, element) => {
+                            acc.set(element.id, deepCopyElement(element));
+                            return acc;
+                        }, new Map());
+                        let originalElements = elements.map((element) => originalElementsMap.get(element.id));
+                        const originalAppState = cloneJSON(appState);
+                        let accumulatedChange = null;
+                        document.body.classList.add("excalidraw-cursor-resize");
+                        const onPointerMove = (event) => {
+                            if (!accumulatedChange) {
+                                accumulatedChange = 0;
+                            }
+                            if (lastPointer &&
+                                originalElementsMap !== null &&
+                                originalElements !== null &&
+                                accumulatedChange !== null) {
+                                const instantChange = event.clientX - lastPointer.x;
+                                accumulatedChange += instantChange;
+                                dragInputCallback({
+                                    accumulatedChange,
+                                    instantChange,
+                                    originalElements,
+                                    originalElementsMap,
+                                    shouldKeepAspectRatio: shouldKeepAspectRatio,
+                                    shouldChangeByStepSize: event.shiftKey,
+                                    property,
+                                    scene,
+                                    originalAppState,
+                                });
+                            }
+                            lastPointer = {
+                                x: event.clientX,
+                                y: event.clientY,
+                            };
+                        };
+                        window.addEventListener(EVENT.POINTER_MOVE, onPointerMove, false);
+                        window.addEventListener(EVENT.POINTER_UP, () => {
+                            window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove, false);
+                            app.syncActionResult({ storeAction: StoreAction.CAPTURE });
+                            lastPointer = null;
+                            accumulatedChange = null;
+                            originalElements = null;
+                            originalElementsMap = null;
+                            document.body.classList.remove("excalidraw-cursor-resize");
+                        }, false);
+                    }
+                }, onPointerEnter: () => {
+                    if (labelRef.current) {
+                        labelRef.current.style.cursor = "ew-resize";
+                    }
+                }, children: icon ? _jsx(InlineIcon, { icon: icon }) : label }), _jsx("input", { className: "drag-input", autoComplete: "off", spellCheck: "false", onKeyDown: (event) => {
+                    if (editable) {
+                        const eventTarget = event.target;
+                        if (eventTarget instanceof HTMLInputElement &&
+                            event.key === KEYS.ENTER) {
+                            handleInputValue(eventTarget.value, elements, appState);
+                            app.focusContainer();
+                        }
+                    }
+                }, ref: inputRef, value: inputValue, onChange: (event) => {
+                    stateRef.current.updatePending = true;
+                    setInputValue(event.target.value);
+                }, onFocus: (event) => {
+                    event.target.select();
+                    stateRef.current.originalElements = elements;
+                    stateRef.current.originalAppState = cloneJSON(appState);
+                }, onBlur: (event) => {
+                    if (!inputValue) {
+                        setInputValue(value.toString());
+                    }
+                    else if (editable) {
+                        handleInputValue(event.target.value, stateRef.current.originalElements, stateRef.current.originalAppState);
+                    }
+                }, disabled: !editable })] }));
+};
+export default StatsDragInput;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+interface FontSizeProps {
+    element: ExcalidrawElement;
+    scene: Scene;
+    appState: AppState;
+    property: "fontSize";
+}
+declare const FontSize: ({ element, scene, appState, property }: FontSizeProps) => JSX.Element | null;
+export default FontSize;

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import StatsDragInput from "./DragInput";
+import { mutateElement } from "../../element/mutateElement";
+import { getStepSizedValue } from "./utils";
+import { fontSizeIcon } from "../icons";
+import { isTextElement, redrawTextBoundingBox } from "../../element";
+import { hasBoundTextElement } from "../../element/typeChecks";
+import { getBoundTextElement } from "../../element/textElement";
+const MIN_FONT_SIZE = 4;
+const STEP_SIZE = 4;
+const handleFontSizeChange = ({ accumulatedChange, originalElements, shouldChangeByStepSize, nextValue, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const origElement = originalElements[0];
+    if (origElement) {
+        const latestElement = elementsMap.get(origElement.id);
+        if (!latestElement || !isTextElement(latestElement)) {
+            return;
+        }
+        let nextFontSize;
+        if (nextValue !== undefined) {
+            nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
+        }
+        else if (origElement.type === "text") {
+            const originalFontSize = Math.round(origElement.fontSize);
+            const changeInFontSize = Math.round(accumulatedChange);
+            nextFontSize = Math.max(originalFontSize + changeInFontSize, MIN_FONT_SIZE);
+            if (shouldChangeByStepSize) {
+                nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
+            }
+        }
+        if (nextFontSize) {
+            mutateElement(latestElement, {
+                fontSize: nextFontSize,
+            });
+            redrawTextBoundingBox(latestElement, scene.getContainerElement(latestElement), scene.getNonDeletedElementsMap());
+        }
+    }
+};
+const FontSize = ({ element, scene, appState, property }) => {
+    const _element = isTextElement(element)
+        ? element
+        : hasBoundTextElement(element)
+            ? getBoundTextElement(element, scene.getNonDeletedElementsMap())
+            : null;
+    if (!_element) {
+        return null;
+    }
+    return (_jsx(StatsDragInput, { label: "F", value: Math.round(_element.fontSize * 10) / 10, elements: [_element], dragInputCallback: handleFontSizeChange, icon: fontSizeIcon, appState: appState, scene: scene, property: property }));
+};
+export default FontSize;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+interface MultiAngleProps {
+    elements: readonly ExcalidrawElement[];
+    scene: Scene;
+    appState: AppState;
+    property: "angle";
+}
+declare const MultiAngle: ({ elements, scene, appState, property, }: MultiAngleProps) => JSX.Element;
+export default MultiAngle;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mutateElement } from "../../element/mutateElement";
+import { getBoundTextElement } from "../../element/textElement";
+import { isArrowElement } from "../../element/typeChecks";
+import { isInGroup } from "../../groups";
+import { degreeToRadian, radianToDegree } from "../../math";
+import { angleIcon } from "../icons";
+import DragInput from "./DragInput";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
+const STEP_SIZE = 15;
+const handleDegreeChange = ({ accumulatedChange, originalElements, shouldChangeByStepSize, nextValue, property, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const editableLatestIndividualElements = originalElements
+        .map((el) => elementsMap.get(el.id))
+        .filter((el) => el && !isInGroup(el) && isPropertyEditable(el, property));
+    const editableOriginalIndividualElements = originalElements.filter((el) => !isInGroup(el) && isPropertyEditable(el, property));
+    if (nextValue !== undefined) {
+        const nextAngle = degreeToRadian(nextValue);
+        for (const element of editableLatestIndividualElements) {
+            if (!element) {
+                continue;
+            }
+            mutateElement(element, {
+                angle: nextAngle,
+            }, false);
+            const boundTextElement = getBoundTextElement(element, elementsMap);
+            if (boundTextElement && !isArrowElement(element)) {
+                mutateElement(boundTextElement, { angle: nextAngle }, false);
+            }
+        }
+        scene.triggerUpdate();
+        return;
+    }
+    for (let i = 0; i < editableLatestIndividualElements.length; i++) {
+        const latestElement = editableLatestIndividualElements[i];
+        if (!latestElement) {
+            continue;
+        }
+        const originalElement = editableOriginalIndividualElements[i];
+        const originalAngleInDegrees = Math.round(radianToDegree(originalElement.angle) * 100) / 100;
+        const changeInDegrees = Math.round(accumulatedChange);
+        let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
+        if (shouldChangeByStepSize) {
+            nextAngleInDegrees = getStepSizedValue(nextAngleInDegrees, STEP_SIZE);
+        }
+        nextAngleInDegrees =
+            nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
+        const nextAngle = degreeToRadian(nextAngleInDegrees);
+        mutateElement(latestElement, {
+            angle: nextAngle,
+        }, false);
+        const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+        if (boundTextElement && !isArrowElement(latestElement)) {
+            mutateElement(boundTextElement, { angle: nextAngle }, false);
+        }
+    }
+    scene.triggerUpdate();
+};
+const MultiAngle = ({ elements, scene, appState, property, }) => {
+    const editableLatestIndividualElements = elements.filter((el) => !isInGroup(el) && isPropertyEditable(el, "angle"));
+    const angles = editableLatestIndividualElements.map((el) => Math.round((radianToDegree(el.angle) % 360) * 100) / 100);
+    const value = new Set(angles).size === 1 ? angles[0] : "Mixed";
+    const editable = editableLatestIndividualElements.some((el) => isPropertyEditable(el, "angle"));
+    return (_jsx(DragInput, { label: "A", icon: angleIcon, value: value, elements: elements, dragInputCallback: handleDegreeChange, editable: editable, appState: appState, scene: scene, property: property }));
+};
+export default MultiAngle;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+import type { AtomicUnit } from "./utils";
+interface MultiDimensionProps {
+    property: "width" | "height";
+    elements: readonly ExcalidrawElement[];
+    elementsMap: NonDeletedSceneElementsMap;
+    atomicUnits: AtomicUnit[];
+    scene: Scene;
+    appState: AppState;
+}
+declare const MultiDimension: ({ property, elements, elementsMap, atomicUnits, scene, appState, }: MultiDimensionProps) => JSX.Element;
+export default MultiDimension;

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

@@ -0,0 +1,197 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getCommonBounds, isTextElement } from "../../element";
+import { updateBoundElements } from "../../element/binding";
+import { mutateElement } from "../../element/mutateElement";
+import { rescalePointsInElement } from "../../element/resizeElements";
+import { getBoundTextElement, handleBindTextResize, } from "../../element/textElement";
+import DragInput from "./DragInput";
+import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
+import { getElementsInAtomicUnit, resizeElement } from "./utils";
+import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+const STEP_SIZE = 10;
+const getResizedUpdates = (anchorX, anchorY, scale, origElement) => {
+    const offsetX = origElement.x - anchorX;
+    const offsetY = origElement.y - anchorY;
+    const nextWidth = origElement.width * scale;
+    const nextHeight = origElement.height * scale;
+    const x = anchorX + offsetX * scale;
+    const y = anchorY + offsetY * scale;
+    return {
+        width: nextWidth,
+        height: nextHeight,
+        x,
+        y,
+        ...rescalePointsInElement(origElement, nextWidth, nextHeight, false),
+        ...(isTextElement(origElement)
+            ? { fontSize: origElement.fontSize * scale }
+            : {}),
+    };
+};
+const resizeElementInGroup = (anchorX, anchorY, property, scale, latestElement, origElement, elementsMap, originalElementsMap) => {
+    const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
+    mutateElement(latestElement, updates, false);
+    const boundTextElement = getBoundTextElement(origElement, originalElementsMap);
+    if (boundTextElement) {
+        const newFontSize = boundTextElement.fontSize * scale;
+        updateBoundElements(latestElement, elementsMap, {
+            newSize: { width: updates.width, height: updates.height },
+        });
+        const latestBoundTextElement = elementsMap.get(boundTextElement.id);
+        if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
+            mutateElement(latestBoundTextElement, {
+                fontSize: newFontSize,
+            }, false);
+            handleBindTextResize(latestElement, elementsMap, property === "width" ? "e" : "s", true);
+        }
+    }
+};
+const resizeGroup = (nextWidth, nextHeight, initialHeight, aspectRatio, anchor, property, latestElements, originalElements, elementsMap, originalElementsMap) => {
+    // keep aspect ratio for groups
+    if (property === "width") {
+        nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
+    }
+    else {
+        nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
+    }
+    const scale = nextHeight / initialHeight;
+    for (let i = 0; i < originalElements.length; i++) {
+        const origElement = originalElements[i];
+        const latestElement = latestElements[i];
+        resizeElementInGroup(anchor[0], anchor[1], property, scale, latestElement, origElement, elementsMap, originalElementsMap);
+    }
+};
+const handleDimensionChange = ({ accumulatedChange, originalElements, originalElementsMap, originalAppState, shouldChangeByStepSize, nextValue, scene, property, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const atomicUnits = getAtomicUnits(originalElements, originalAppState);
+    if (nextValue !== undefined) {
+        for (const atomicUnit of atomicUnits) {
+            const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap, originalElementsMap);
+            if (elementsInUnit.length > 1) {
+                const latestElements = elementsInUnit.map((el) => el.latest);
+                const originalElements = elementsInUnit.map((el) => el.original);
+                const [x1, y1, x2, y2] = getCommonBounds(originalElements);
+                const initialWidth = x2 - x1;
+                const initialHeight = y2 - y1;
+                const aspectRatio = initialWidth / initialHeight;
+                const nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, property === "width" ? Math.max(0, nextValue) : initialWidth);
+                const nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, property === "height" ? Math.max(0, nextValue) : initialHeight);
+                resizeGroup(nextWidth, nextHeight, initialHeight, aspectRatio, [x1, y1], property, latestElements, originalElements, elementsMap, originalElementsMap);
+            }
+            else {
+                const [el] = elementsInUnit;
+                const latestElement = el?.latest;
+                const origElement = el?.original;
+                if (latestElement &&
+                    origElement &&
+                    isPropertyEditable(latestElement, property)) {
+                    let nextWidth = property === "width" ? Math.max(0, nextValue) : latestElement.width;
+                    if (property === "width") {
+                        if (shouldChangeByStepSize) {
+                            nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
+                        }
+                        else {
+                            nextWidth = Math.round(nextWidth);
+                        }
+                    }
+                    let nextHeight = property === "height"
+                        ? Math.max(0, nextValue)
+                        : latestElement.height;
+                    if (property === "height") {
+                        if (shouldChangeByStepSize) {
+                            nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
+                        }
+                        else {
+                            nextHeight = Math.round(nextHeight);
+                        }
+                    }
+                    nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
+                    nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
+                    resizeElement(nextWidth, nextHeight, false, origElement, elementsMap, false);
+                }
+            }
+        }
+        scene.triggerUpdate();
+        return;
+    }
+    const changeInWidth = property === "width" ? accumulatedChange : 0;
+    const changeInHeight = property === "height" ? accumulatedChange : 0;
+    for (const atomicUnit of atomicUnits) {
+        const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap, originalElementsMap);
+        if (elementsInUnit.length > 1) {
+            const latestElements = elementsInUnit.map((el) => el.latest);
+            const originalElements = elementsInUnit.map((el) => el.original);
+            const [x1, y1, x2, y2] = getCommonBounds(originalElements);
+            const initialWidth = x2 - x1;
+            const initialHeight = y2 - y1;
+            const aspectRatio = initialWidth / initialHeight;
+            let nextWidth = Math.max(0, initialWidth + changeInWidth);
+            if (property === "width") {
+                if (shouldChangeByStepSize) {
+                    nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
+                }
+                else {
+                    nextWidth = Math.round(nextWidth);
+                }
+            }
+            let nextHeight = Math.max(0, initialHeight + changeInHeight);
+            if (property === "height") {
+                if (shouldChangeByStepSize) {
+                    nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
+                }
+                else {
+                    nextHeight = Math.round(nextHeight);
+                }
+            }
+            nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
+            nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
+            resizeGroup(nextWidth, nextHeight, initialHeight, aspectRatio, [x1, y1], property, latestElements, originalElements, elementsMap, originalElementsMap);
+        }
+        else {
+            const [el] = elementsInUnit;
+            const latestElement = el?.latest;
+            const origElement = el?.original;
+            if (latestElement &&
+                origElement &&
+                isPropertyEditable(latestElement, property)) {
+                let nextWidth = Math.max(0, origElement.width + changeInWidth);
+                if (property === "width") {
+                    if (shouldChangeByStepSize) {
+                        nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
+                    }
+                    else {
+                        nextWidth = Math.round(nextWidth);
+                    }
+                }
+                let nextHeight = Math.max(0, origElement.height + changeInHeight);
+                if (property === "height") {
+                    if (shouldChangeByStepSize) {
+                        nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
+                    }
+                    else {
+                        nextHeight = Math.round(nextHeight);
+                    }
+                }
+                nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
+                nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
+                resizeElement(nextWidth, nextHeight, false, origElement, elementsMap);
+            }
+        }
+    }
+    scene.triggerUpdate();
+};
+const MultiDimension = ({ property, elements, elementsMap, atomicUnits, scene, appState, }) => {
+    const sizes = useMemo(() => atomicUnits.map((atomicUnit) => {
+        const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap);
+        if (elementsInUnit.length > 1) {
+            const [x1, y1, x2, y2] = getCommonBounds(elementsInUnit.map((el) => el.latest));
+            return (Math.round((property === "width" ? x2 - x1 : y2 - y1) * 100) / 100);
+        }
+        const [el] = elementsInUnit;
+        return (Math.round((property === "width" ? el.latest.width : el.latest.height) * 100) / 100);
+    }), [elementsMap, atomicUnits, property]);
+    const value = new Set(sizes).size === 1 ? Math.round(sizes[0] * 100) / 100 : "Mixed";
+    const editable = sizes.length > 0;
+    return (_jsx(DragInput, { label: property === "width" ? "W" : "H", elements: elements, dragInputCallback: handleDimensionChange, value: value, editable: editable, appState: appState, property: property, scene: scene }));
+};
+export default MultiDimension;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+interface MultiFontSizeProps {
+    elements: readonly ExcalidrawElement[];
+    scene: Scene;
+    elementsMap: NonDeletedSceneElementsMap;
+    appState: AppState;
+    property: "fontSize";
+}
+declare const MultiFontSize: ({ elements, scene, appState, property, elementsMap, }: MultiFontSizeProps) => JSX.Element | null;
+export default MultiFontSize;

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isTextElement, redrawTextBoundingBox } from "../../element";
+import { mutateElement } from "../../element/mutateElement";
+import { hasBoundTextElement } from "../../element/typeChecks";
+import { isInGroup } from "../../groups";
+import { fontSizeIcon } from "../icons";
+import StatsDragInput from "./DragInput";
+import { getStepSizedValue } from "./utils";
+import { getBoundTextElement } from "../../element/textElement";
+const MIN_FONT_SIZE = 4;
+const STEP_SIZE = 4;
+const getApplicableTextElements = (elements, elementsMap) => elements.reduce((acc, el) => {
+    if (!el || isInGroup(el)) {
+        return acc;
+    }
+    if (isTextElement(el)) {
+        acc.push(el);
+        return acc;
+    }
+    if (hasBoundTextElement(el)) {
+        const boundTextElement = getBoundTextElement(el, elementsMap);
+        if (boundTextElement) {
+            acc.push(boundTextElement);
+            return acc;
+        }
+    }
+    return acc;
+}, []);
+const handleFontSizeChange = ({ accumulatedChange, originalElements, shouldChangeByStepSize, nextValue, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const latestTextElements = originalElements.map((el) => elementsMap.get(el.id));
+    let nextFontSize;
+    if (nextValue) {
+        nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
+        for (const textElement of latestTextElements) {
+            mutateElement(textElement, {
+                fontSize: nextFontSize,
+            }, false);
+            redrawTextBoundingBox(textElement, scene.getContainerElement(textElement), elementsMap, false);
+        }
+        scene.triggerUpdate();
+    }
+    else {
+        const originalTextElements = originalElements;
+        for (let i = 0; i < latestTextElements.length; i++) {
+            const latestElement = latestTextElements[i];
+            const originalElement = originalTextElements[i];
+            const originalFontSize = Math.round(originalElement.fontSize);
+            const changeInFontSize = Math.round(accumulatedChange);
+            let nextFontSize = Math.max(originalFontSize + changeInFontSize, MIN_FONT_SIZE);
+            if (shouldChangeByStepSize) {
+                nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
+            }
+            mutateElement(latestElement, {
+                fontSize: nextFontSize,
+            }, false);
+            redrawTextBoundingBox(latestElement, scene.getContainerElement(latestElement), elementsMap, false);
+        }
+        scene.triggerUpdate();
+    }
+};
+const MultiFontSize = ({ elements, scene, appState, property, elementsMap, }) => {
+    const latestTextElements = getApplicableTextElements(elements, elementsMap);
+    if (!latestTextElements.length) {
+        return null;
+    }
+    const fontSizes = latestTextElements.map((textEl) => Math.round(textEl.fontSize * 10) / 10);
+    const value = new Set(fontSizes).size === 1 ? fontSizes[0] : "Mixed";
+    const editable = fontSizes.length > 0;
+    return (_jsx(StatsDragInput, { label: "F", icon: fontSizeIcon, elements: latestTextElements, dragInputCallback: handleFontSizeChange, value: value, editable: editable, scene: scene, property: property, appState: appState }));
+};
+export default MultiFontSize;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AtomicUnit } from "./utils";
+import type { AppState } from "../../types";
+interface MultiPositionProps {
+    property: "x" | "y";
+    elements: readonly ExcalidrawElement[];
+    elementsMap: ElementsMap;
+    atomicUnits: AtomicUnit[];
+    scene: Scene;
+    appState: AppState;
+}
+declare const MultiPosition: ({ property, elements, elementsMap, atomicUnits, scene, appState, }: MultiPositionProps) => JSX.Element;
+export default MultiPosition;