@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

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,199 @@
+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, scene) => {
+    const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
+    const { width: oldWidth, height: oldHeight } = latestElement;
+    mutateElement(latestElement, updates, false);
+    const boundTextElement = getBoundTextElement(origElement, originalElementsMap);
+    if (boundTextElement) {
+        const newFontSize = boundTextElement.fontSize * scale;
+        updateBoundElements(latestElement, elementsMap, scene, {
+            oldSize: { width: oldWidth, height: oldHeight },
+        });
+        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, scene) => {
+    // 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, scene);
+    }
+};
+const handleDimensionChange = ({ accumulatedChange, originalElements, originalElementsMap, originalAppState, shouldChangeByStepSize, nextValue, scene, property, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const elements = scene.getNonDeletedElements();
+    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, scene);
+            }
+            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, elements, scene, 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, scene);
+        }
+        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, elements, scene);
+            }
+        }
+    }
+    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;

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

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

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

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

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

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

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

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

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

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