@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

package/dist/excalidraw/components/ScrollableList.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Children } from "react";
+import "./ScrollableList.scss";
+export const ScrollableList = ({ className, placeholder, children, }) => {
+    const isEmpty = !Children.count(children);
+    return (_jsx("div", { className: clsx("ScrollableList__wrapper", className), role: "menu", children: isEmpty ? _jsx("div", { className: "empty", children: placeholder }) : children }));
+};

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type { ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
 interface AngleProps {
     element: ExcalidrawElement;
-    elementsMap: ElementsMap;
+    scene: Scene;
+    appState: AppState;
+    property: "angle";
 }
-declare const Angle: ({ element, elementsMap }: AngleProps) => JSX.Element;
+declare const Angle: ({ element, scene, appState, property }: AngleProps) => JSX.Element;
 export default Angle;

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

@@ -1,45 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { mutateElement } from "../../element/mutateElement";
 import { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement } from "../../element/typeChecks";
+import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
 import { degreeToRadian, radianToDegree } from "../../math";
 import { angleIcon } from "../icons";
 import DragInput from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
+import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
 const STEP_SIZE = 15;
-const Angle = ({ element, elementsMap }) => {
-    const handleDegreeChange = ({ accumulatedChange, originalElements, shouldChangeByStepSize, nextValue, }) => {
-        const origElement = originalElements[0];
-        if (origElement) {
-            if (nextValue !== undefined) {
-                const nextAngle = degreeToRadian(nextValue);
-                mutateElement(element, {
-                    angle: nextAngle,
-                });
-                const boundTextElement = getBoundTextElement(element, elementsMap);
-                if (boundTextElement && !isArrowElement(element)) {
-                    mutateElement(boundTextElement, { angle: nextAngle });
-                }
-                return;
-            }
-            const originalAngleInDegrees = Math.round(radianToDegree(origElement.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(element, {
+const handleDegreeChange = ({ accumulatedChange, originalElements, shouldChangeByStepSize, nextValue, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const elements = scene.getNonDeletedElements();
+    const origElement = originalElements[0];
+    if (origElement && !isElbowArrow(origElement)) {
+        const latestElement = elementsMap.get(origElement.id);
+        if (!latestElement) {
+            return;
+        }
+        if (nextValue !== undefined) {
+            const nextAngle = degreeToRadian(nextValue);
+            mutateElement(latestElement, {
                 angle: nextAngle,
             });
-            const boundTextElement = getBoundTextElement(element, elementsMap);
-            if (boundTextElement && !isArrowElement(element)) {
+            updateBindings(latestElement, elementsMap, elements, scene);
+            const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+            if (boundTextElement && !isArrowElement(latestElement)) {
                 mutateElement(boundTextElement, { angle: nextAngle });
             }
+            return;
         }
-    };
-    return (_jsx(DragInput, { label: "A", icon: angleIcon, value: Math.round((radianToDegree(element.angle) % 360) * 100) / 100, elements: [element], dragInputCallback: handleDegreeChange, editable: isPropertyEditable(element, "angle") }));
+        const originalAngleInDegrees = Math.round(radianToDegree(origElement.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,
+        });
+        updateBindings(latestElement, elementsMap, elements, scene);
+        const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+        if (boundTextElement && !isArrowElement(latestElement)) {
+            mutateElement(boundTextElement, { angle: nextAngle });
+        }
+    }
+};
+const Angle = ({ element, scene, appState, property }) => {
+    return (_jsx(DragInput, { label: "A", icon: angleIcon, value: Math.round((radianToDegree(element.angle) % 360) * 100) / 100, elements: [element], dragInputCallback: handleDegreeChange, editable: isPropertyEditable(element, "angle"), scene: scene, appState: appState, property: property }));
 };
 export default Angle;

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

@@ -1,9 +1,12 @@
 /// <reference types="react" />
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type { ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
 interface DimensionDragInputProps {
     property: "width" | "height";
     element: ExcalidrawElement;
-    elementsMap: ElementsMap;
+    scene: Scene;
+    appState: AppState;
 }
-declare const DimensionDragInput: ({ property, element, elementsMap, }: DimensionDragInputProps) => JSX.Element;
+declare const DimensionDragInput: ({ property, element, scene, appState, }: DimensionDragInputProps) => JSX.Element;
 export default DimensionDragInput;

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

@@ -6,61 +6,63 @@ const STEP_SIZE = 10;
 const _shouldKeepAspectRatio = (element) => {
     return element.type === "image";
 };
-const DimensionDragInput = ({ property, element, elementsMap, }) => {
-    const handleDimensionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldKeepAspectRatio, shouldChangeByStepSize, nextValue, }) => {
-        const origElement = originalElements[0];
-        if (origElement) {
-            const keepAspectRatio = shouldKeepAspectRatio || _shouldKeepAspectRatio(element);
-            const aspectRatio = origElement.width / origElement.height;
-            if (nextValue !== undefined) {
-                const nextWidth = Math.max(property === "width"
-                    ? nextValue
-                    : keepAspectRatio
-                        ? nextValue * aspectRatio
-                        : origElement.width, MIN_WIDTH_OR_HEIGHT);
-                const nextHeight = Math.max(property === "height"
-                    ? nextValue
-                    : keepAspectRatio
-                        ? nextValue / aspectRatio
-                        : origElement.height, MIN_WIDTH_OR_HEIGHT);
-                resizeElement(nextWidth, nextHeight, keepAspectRatio, element, origElement, elementsMap, originalElementsMap);
-                return;
+const handleDimensionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldKeepAspectRatio, shouldChangeByStepSize, nextValue, property, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const elements = scene.getNonDeletedElements();
+    const origElement = originalElements[0];
+    if (origElement) {
+        const keepAspectRatio = shouldKeepAspectRatio || _shouldKeepAspectRatio(origElement);
+        const aspectRatio = origElement.width / origElement.height;
+        if (nextValue !== undefined) {
+            const nextWidth = Math.max(property === "width"
+                ? nextValue
+                : keepAspectRatio
+                    ? nextValue * aspectRatio
+                    : origElement.width, MIN_WIDTH_OR_HEIGHT);
+            const nextHeight = Math.max(property === "height"
+                ? nextValue
+                : keepAspectRatio
+                    ? nextValue / aspectRatio
+                    : origElement.height, MIN_WIDTH_OR_HEIGHT);
+            resizeElement(nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap, elements, scene);
+            return;
+        }
+        const changeInWidth = property === "width" ? accumulatedChange : 0;
+        const changeInHeight = property === "height" ? accumulatedChange : 0;
+        let nextWidth = Math.max(0, origElement.width + changeInWidth);
+        if (property === "width") {
+            if (shouldChangeByStepSize) {
+                nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
             }
-            const changeInWidth = property === "width" ? accumulatedChange : 0;
-            const changeInHeight = property === "height" ? accumulatedChange : 0;
-            let nextWidth = Math.max(0, origElement.width + changeInWidth);
-            if (property === "width") {
-                if (shouldChangeByStepSize) {
-                    nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
-                }
-                else {
-                    nextWidth = Math.round(nextWidth);
-                }
+            else {
+                nextWidth = Math.round(nextWidth);
+            }
+        }
+        let nextHeight = Math.max(0, origElement.height + changeInHeight);
+        if (property === "height") {
+            if (shouldChangeByStepSize) {
+                nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
             }
-            let nextHeight = Math.max(0, origElement.height + changeInHeight);
-            if (property === "height") {
-                if (shouldChangeByStepSize) {
-                    nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
-                }
-                else {
-                    nextHeight = Math.round(nextHeight);
-                }
+            else {
+                nextHeight = Math.round(nextHeight);
             }
-            if (keepAspectRatio) {
-                if (property === "width") {
-                    nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
-                }
-                else {
-                    nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
-                }
+        }
+        if (keepAspectRatio) {
+            if (property === "width") {
+                nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
+            }
+            else {
+                nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
             }
-            nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
-            nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
-            resizeElement(nextWidth, nextHeight, keepAspectRatio, element, origElement, elementsMap, originalElementsMap);
         }
-    };
+        nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
+        nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
+        resizeElement(nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap, elements, scene);
+    }
+};
+const DimensionDragInput = ({ property, element, scene, appState, }) => {
     const value = Math.round((property === "width" ? element.width : element.height) * 100) /
         100;
-    return (_jsx(DragInput, { label: property === "width" ? "W" : "H", elements: [element], dragInputCallback: handleDimensionChange, value: value, editable: isPropertyEditable(element, property) }));
+    return (_jsx(DragInput, { label: property === "width" ? "W" : "H", elements: [element], dragInputCallback: handleDimensionChange, value: value, editable: isPropertyEditable(element, property), scene: scene, appState: appState, property: property }));
 };
 export default DimensionDragInput;

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

@@ -1,23 +1,32 @@
 /// <reference types="react" />
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type { StatsInputProperty } from "./utils";
+import type Scene from "../../scene/Scene";
 import "./DragInput.scss";
-export type DragInputCallbackType = ({ accumulatedChange, instantChange, originalElements, originalElementsMap, shouldKeepAspectRatio, shouldChangeByStepSize, nextValue, }: {
+import type { AppState } from "../../types";
+export type DragInputCallbackType<P extends StatsInputProperty, E = ExcalidrawElement> = (props: {
     accumulatedChange: number;
     instantChange: number;
-    originalElements: readonly ExcalidrawElement[];
+    originalElements: readonly E[];
     originalElementsMap: ElementsMap;
     shouldKeepAspectRatio: boolean;
     shouldChangeByStepSize: boolean;
+    scene: Scene;
     nextValue?: number;
+    property: P;
+    originalAppState: AppState;
 }) => void;
-interface StatsDragInputProps {
+interface StatsDragInputProps<T extends StatsInputProperty, E = ExcalidrawElement> {
     label: string | React.ReactNode;
     icon?: React.ReactNode;
     value: number | "Mixed";
-    elements: readonly ExcalidrawElement[];
+    elements: readonly E[];
     editable?: boolean;
     shouldKeepAspectRatio?: boolean;
-    dragInputCallback: DragInputCallbackType;
+    dragInputCallback: DragInputCallbackType<T, E>;
+    property: T;
+    scene: Scene;
+    appState: AppState;
 }
-declare const StatsDragInput: ({ label, icon, dragInputCallback, value, elements, editable, shouldKeepAspectRatio, }: StatsDragInputProps) => JSX.Element;
+declare const StatsDragInput: <T extends StatsInputProperty, E extends ExcalidrawElement = ExcalidrawElement>({ label, icon, dragInputCallback, value, elements, editable, shouldKeepAspectRatio, property, scene, appState, }: StatsDragInputProps<T, E>) => JSX.Element | null;
 export default StatsDragInput;

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

@@ -1,24 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 "./DragInput.scss";
 import clsx from "clsx";
 import { useApp } from "../App";
 import { InlineIcon } from "../InlineIcon";
 import { SMALLEST_DELTA } from "./utils";
 import { StoreAction } from "../../store";
-const StatsDragInput = ({ label, icon, dragInputCallback, value, elements, editable = true, shouldKeepAspectRatio, }) => {
+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(() => {
-        setInputValue(value.toString());
-    }, [value, elements]);
-    const handleInputValue = (v) => {
-        const parsed = Number(v);
+        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;
@@ -31,6 +47,7 @@ const StatsDragInput = ({ label, icon, dragInputCallback, value, elements, edita
         //    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,
@@ -38,7 +55,10 @@ const StatsDragInput = ({ label, icon, dragInputCallback, value, elements, edita
                 originalElementsMap: app.scene.getNonDeletedElementsMap(),
                 shouldKeepAspectRatio: shouldKeepAspectRatio,
                 shouldChangeByStepSize: false,
+                scene,
                 nextValue: rounded,
+                property,
+                originalAppState: appState,
             });
             app.syncActionResult({ storeAction: StoreAction.CAPTURE });
         }
@@ -52,38 +72,45 @@ const StatsDragInput = ({ label, icon, dragInputCallback, value, elements, edita
         return () => {
             const nextValue = input?.value;
             if (nextValue) {
-                handleInputValueRef.current(nextValue);
+                handleInputValueRef.current(nextValue, stateRef.current.originalElements, stateRef.current.originalAppState);
             }
         };
-    }, []);
-    return editable ? (_jsxs("div", { className: clsx("drag-input-container", !editable && "disabled"), "data-testid": label, children: [_jsx("div", { className: "drag-input-label", ref: labelRef, onPointerDown: (event) => {
+    }, [
+        // 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 originalElements = null;
-                        let originalElementsMap = 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 (!originalElementsMap) {
-                                originalElementsMap = app.scene
-                                    .getNonDeletedElements()
-                                    .reduce((acc, element) => {
-                                    acc.set(element.id, deepCopyElement(element));
-                                    return acc;
-                                }, new Map());
-                            }
-                            if (!originalElements) {
-                                originalElements = elements.map((element) => originalElementsMap.get(element.id));
-                            }
                             if (!accumulatedChange) {
                                 accumulatedChange = 0;
                             }
                             if (lastPointer &&
                                 originalElementsMap !== null &&
+                                originalElements !== null &&
                                 accumulatedChange !== null) {
                                 const instantChange = event.clientX - lastPointer.x;
                                 accumulatedChange += instantChange;
@@ -94,6 +121,9 @@ const StatsDragInput = ({ label, icon, dragInputCallback, value, elements, edita
                                     originalElementsMap,
                                     shouldKeepAspectRatio: shouldKeepAspectRatio,
                                     shouldChangeByStepSize: event.shiftKey,
+                                    property,
+                                    scene,
+                                    originalAppState,
                                 });
                             }
                             lastPointer = {
@@ -121,21 +151,24 @@ const StatsDragInput = ({ label, icon, dragInputCallback, value, elements, edita
                         const eventTarget = event.target;
                         if (eventTarget instanceof HTMLInputElement &&
                             event.key === KEYS.ENTER) {
-                            handleInputValue(eventTarget.value);
+                            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);
+                        handleInputValue(event.target.value, stateRef.current.originalElements, stateRef.current.originalAppState);
                     }
-                }, disabled: !editable })] })) : (_jsx(_Fragment, {}));
+                }, disabled: !editable })] }));
 };
 export default StatsDragInput;

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

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

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

@@ -1,47 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { refreshTextDimensions } from "../../element/newElement";
 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 FontSize = ({ element, elementsMap }) => {
-    const handleFontSizeChange = ({ accumulatedChange, originalElements, shouldChangeByStepSize, nextValue, }) => {
-        const origElement = originalElements[0];
-        if (origElement) {
-            if (nextValue !== undefined) {
-                const nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
-                const newElement = {
-                    ...element,
-                    fontSize: nextFontSize,
-                };
-                const updates = refreshTextDimensions(newElement, null, elementsMap);
-                mutateElement(element, {
-                    ...updates,
-                    fontSize: nextFontSize,
-                });
-                return;
-            }
-            if (origElement.type === "text") {
-                const originalFontSize = Math.round(origElement.fontSize);
-                const changeInFontSize = Math.round(accumulatedChange);
-                let nextFontSize = Math.max(originalFontSize + changeInFontSize, MIN_FONT_SIZE);
-                if (shouldChangeByStepSize) {
-                    nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
-                }
-                const newElement = {
-                    ...element,
-                    fontSize: nextFontSize,
-                };
-                const updates = refreshTextDimensions(newElement, null, elementsMap);
-                mutateElement(element, {
-                    ...updates,
-                    fontSize: nextFontSize,
-                });
+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);
             }
         }
-    };
-    return (_jsx(StatsDragInput, { label: "F", value: Math.round(element.fontSize * 10) / 10, elements: [element], dragInputCallback: handleFontSizeChange, icon: fontSizeIcon }));
+        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

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