@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

package/dist/excalidraw/components/PropertiesPopover.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import clsx from "clsx";
+import * as Popover from "@radix-ui/react-popover";
+import { useDevice } from "./App";
+import { Island } from "./Island";
+import { isInteractive } from "../utils";
+export const PropertiesPopover = React.forwardRef(({ className, container, children, style, onClose, onKeyDown, onFocusOutside, onPointerLeave, onPointerDownOutside, }, ref) => {
+    const device = useDevice();
+    return (_jsx(Popover.Portal, { container: container, children: _jsxs(Popover.Content, { ref: ref, className: clsx("focus-visible-none", className), "data-prevent-outside-click": true, side: device.editor.isMobile && !device.viewport.isLandscape
+                ? "bottom"
+                : "right", align: device.editor.isMobile && !device.viewport.isLandscape
+                ? "center"
+                : "start", alignOffset: -16, sideOffset: 20, style: {
+                zIndex: "var(--zIndex-popup)",
+            }, onPointerLeave: onPointerLeave, onKeyDown: onKeyDown, onFocusOutside: onFocusOutside, onPointerDownOutside: onPointerDownOutside, onCloseAutoFocus: (e) => {
+                e.stopPropagation();
+                // prevents focusing the trigger
+                e.preventDefault();
+                // return focus to excalidraw container unless
+                // user focuses an interactive element, such as a button, or
+                // enters the text editor by clicking on canvas with the text tool
+                if (container && !isInteractive(document.activeElement)) {
+                    container.focus();
+                }
+                onClose();
+            }, children: [_jsx(Island, { padding: 3, style: style, children: children }), _jsx(Popover.Arrow, { width: 20, height: 10, style: {
+                        fill: "var(--popup-bg-color)",
+                        filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
+                    } })] }) }));
+});

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LibraryItems, UIAppState } from "../types";
+import type { LibraryItems, UIAppState } from "../types";
 import "./PublishLibrary.scss";
 declare const PublishLibrary: ({ onClose, libraryItems, appState, onSuccess, onError, updateItemsInStorage, onRemove, }: {
     onClose: () => void;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import "./QuickSearch.scss";
+interface QuickSearchProps {
+    className?: string;
+    placeholder: string;
+    onChange: (term: string) => void;
+}
+export declare const QuickSearch: React.ForwardRefExoticComponent<QuickSearchProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/excalidraw/components/QuickSearch.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import React from "react";
+import { searchIcon } from "./icons";
+import "./QuickSearch.scss";
+export const QuickSearch = React.forwardRef(({ className, placeholder, onChange }, ref) => {
+    return (_jsxs("div", { className: clsx("QuickSearch__wrapper", className), children: [searchIcon, _jsx("input", { ref: ref, className: "QuickSearch__input", type: "text", placeholder: placeholder, onChange: (e) => onChange(e.target.value.trim().toLowerCase()) })] }));
+});

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Trail } from "../animated-trail";
+import type { Trail } from "../animated-trail";
 import "./SVGLayer.scss";
 type SVGLayerProps = {
     trails: Trail[];

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "./ScrollableList.scss";
+interface ScrollableListProps {
+    className?: string;
+    placeholder: string;
+    children: React.ReactNode;
+}
+export declare const ScrollableList: ({ className, placeholder, children, }: ScrollableListProps) => JSX.Element;
+export {};

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/Sidebar/Sidebar.js

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useRef, useState, forwardRef, useImperative
 import { Island } from "../Island";
 import { atom, useSetAtom } from "jotai";
 import { jotaiScope } from "../../jotai";
-import { SidebarPropsContext, } from "./common";
+import { SidebarPropsContext } from "./common";
 import { SidebarHeader } from "./SidebarHeader";
 import clsx from "clsx";
 import { useDevice, useExcalidrawSetAppState } from "../App";

package/dist/excalidraw/components/Sidebar/SidebarTab.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTabName } from "../../types";
+import type { SidebarTabName } from "../../types";
 export declare const SidebarTab: {
     ({ tab, children, ...rest }: {
         tab: SidebarTabName;

package/dist/excalidraw/components/Sidebar/SidebarTabTrigger.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTabName } from "../../types";
+import type { SidebarTabName } from "../../types";
 export declare const SidebarTabTrigger: {
     ({ children, tab, onSelect, ...rest }: {
         children: React.ReactNode;

package/dist/excalidraw/components/Sidebar/SidebarTrigger.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTriggerProps } from "./common";
+import type { SidebarTriggerProps } from "./common";
 import "./SidebarTrigger.scss";
 export declare const SidebarTrigger: {
     ({ name, tab, icon, title, children, onToggle, className, style, }: SidebarTriggerProps): JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState, SidebarName, SidebarTabName } from "../../types";
+import type { AppState, SidebarName, SidebarTabName } from "../../types";
 export type SidebarTriggerProps = {
     name: SidebarName;
     tab?: SidebarTabName;

package/dist/excalidraw/components/Stats/Angle.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 AngleProps {
+    element: ExcalidrawElement;
+    scene: Scene;
+    appState: AppState;
+    property: "angle";
+}
+declare const Angle: ({ element, scene, appState, property }: AngleProps) => JSX.Element;
+export default Angle;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mutateElement } from "../../element/mutateElement";
+import { getBoundTextElement } from "../../element/textElement";
+import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
+import { degreeToRadian, radianToDegree } from "../../math";
+import { angleIcon } from "../icons";
+import DragInput from "./DragInput";
+import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
+const STEP_SIZE = 15;
+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,
+            });
+            updateBindings(latestElement, elementsMap, elements, scene);
+            const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+            if (boundTextElement && !isArrowElement(latestElement)) {
+                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(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/Collapsible.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface CollapsibleProps {
+    label: React.ReactNode;
+    open: boolean;
+    openTrigger: () => void;
+    children: React.ReactNode;
+}
+declare const Collapsible: ({ label, open, openTrigger, children, }: CollapsibleProps) => JSX.Element;
+export default Collapsible;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { InlineIcon } from "../InlineIcon";
+import { collapseDownIcon, collapseUpIcon } from "../icons";
+const Collapsible = ({ label, open, openTrigger, children, }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                    cursor: "pointer",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, onClick: openTrigger, children: [label, _jsx(InlineIcon, { icon: open ? collapseUpIcon : collapseDownIcon })] }), open && _jsx(_Fragment, { children: children })] }));
+};
+export default Collapsible;

package/dist/excalidraw/components/Stats/Dimension.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 DimensionDragInputProps {
+    property: "width" | "height";
+    element: ExcalidrawElement;
+    scene: Scene;
+    appState: AppState;
+}
+declare const DimensionDragInput: ({ property, element, scene, appState, }: DimensionDragInputProps) => JSX.Element;
+export default DimensionDragInput;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DragInput from "./DragInput";
+import { getStepSizedValue, isPropertyEditable, resizeElement } from "./utils";
+import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+const STEP_SIZE = 10;
+const _shouldKeepAspectRatio = (element) => {
+    return element.type === "image";
+};
+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);
+            }
+            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);
+            }
+        }
+        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, 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), scene: scene, appState: appState, property: property }));
+};
+export default DimensionDragInput;

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

@@ -0,0 +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";
+import type { AppState } from "../../types";
+export type DragInputCallbackType<P extends StatsInputProperty, E = ExcalidrawElement> = (props: {
+    accumulatedChange: number;
+    instantChange: number;
+    originalElements: readonly E[];
+    originalElementsMap: ElementsMap;
+    shouldKeepAspectRatio: boolean;
+    shouldChangeByStepSize: boolean;
+    scene: Scene;
+    nextValue?: number;
+    property: P;
+    originalAppState: AppState;
+}) => void;
+interface StatsDragInputProps<T extends StatsInputProperty, E = ExcalidrawElement> {
+    label: string | React.ReactNode;
+    icon?: React.ReactNode;
+    value: number | "Mixed";
+    elements: readonly E[];
+    editable?: boolean;
+    shouldKeepAspectRatio?: boolean;
+    dragInputCallback: DragInputCallbackType<T, E>;
+    property: T;
+    scene: Scene;
+    appState: AppState;
+}
+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

@@ -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,
+                scene,
+                nextValue: rounded,
+                property,
+                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;