feat: editable element stats (#6382)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/components/Stats/FontSize.tsx

@@ -0,0 +1,75 @@
+import type { ElementsMap, ExcalidrawTextElement } from "../../element/types";
+import { refreshTextDimensions } from "../../element/newElement";
+import StatsDragInput from "./DragInput";
+import type { DragInputCallbackType } from "./DragInput";
+import { mutateElement } from "../../element/mutateElement";
+import { getStepSizedValue } from "./utils";
+import { fontSizeIcon } from "../icons";
+
+interface FontSizeProps {
+  element: ExcalidrawTextElement;
+  elementsMap: ElementsMap;
+}
+
+const MIN_FONT_SIZE = 4;
+const STEP_SIZE = 4;
+
+const FontSize = ({ element, elementsMap }: FontSizeProps) => {
+  const handleFontSizeChange: DragInputCallbackType = ({
+    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,
+        });
+      }
+    }
+  };
+
+  return (
+    <StatsDragInput
+      label="F"
+      value={Math.round(element.fontSize * 10) / 10}
+      elements={[element]}
+      dragInputCallback={handleFontSizeChange}
+      icon={fontSizeIcon}
+    />
+  );
+};
+
+export default FontSize;