@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/components/LibraryMenuHeaderContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { t } from "../i18n";
 import Trans from "./Trans";
-import { jotaiScope } from "../jotai";
+import { useAtom } from "../editor-jotai";
 import { useApp, useExcalidrawSetAppState } from "./App";
 import { saveLibraryAsJSON } from "../data/json";
 import { libraryItemsAtom } from "../data/library";
@@ -10,7 +10,6 @@ import { DotsIcon, ExportIcon, LoadIcon, publishIcon, TrashIcon, } from "./icons
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { useAtom } from "jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
@@ -21,8 +20,8 @@ import clsx from "clsx";
 import { useLibraryCache } from "../hooks/useLibraryItemSvg";
 const getSelectedItems = (libraryItems, selectedItems) => libraryItems.filter((item) => selectedItems.includes(item.id));
 export const LibraryDropdownMenuButton = ({ setAppState, selectedItems, library, onRemoveFromLibrary, resetLibrary, onSelectItems, appState, className, }) => {
-    const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-    const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(isLibraryMenuOpenAtom, jotaiScope);
+    const [libraryItemsData] = useAtom(libraryItemsAtom);
+    const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(isLibraryMenuOpenAtom);
     const renderRemoveLibAlert = () => {
         const content = selectedItems.length
             ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
@@ -109,7 +108,7 @@ export const LibraryDropdownMenu = ({ selectedItems, onSelectItems, className, }
     const { clearLibraryCache, deleteItemsFromLibraryCache } = useLibraryCache();
     const appState = useUIAppState();
     const setAppState = useExcalidrawSetAppState();
-    const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+    const [libraryItemsData] = useAtom(libraryItemsAtom);
     const removeFromLibrary = async (libraryItems) => {
         const nextItems = libraryItems.filter((item) => !selectedItems.includes(item.id));
         library.setLibrary(nextItems).catch(() => {

package/dist/excalidraw/components/MobileMenu.js

@@ -36,7 +36,7 @@ export const MobileMenu = ({ appState, elements, actionManager, setAppState, onL
                 }, children: _jsxs(Island, { padding: 0, children: [appState.openMenu === "shape" &&
                             !appState.viewModeEnabled &&
                             appState.openDialog?.name !== "elementLinkSelector" &&
-                            showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
+                            showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction, app: app }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
                                     !appState.openMenu &&
                                     !appState.openSidebar && (_jsx("button", { type: "button", className: "scroll-back-to-content", onClick: () => {
                                         setAppState((appState) => ({

package/dist/excalidraw/components/OverwriteConfirm/OverwriteConfirm.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAtom } from "jotai";
 import { useTunnels } from "../../context/tunnels";
-import { jotaiScope } from "../../jotai";
+import { useAtom } from "../../editor-jotai";
 import { Dialog } from "../Dialog";
 import { withInternalFallback } from "../hoc/withInternalFallback";
 import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
@@ -11,7 +10,7 @@ import { Actions, Action } from "./OverwriteConfirmActions";
 import "./OverwriteConfirm.scss";
 const OverwriteConfirmDialog = Object.assign(withInternalFallback("OverwriteConfirmDialog", ({ children }) => {
     const { OverwriteConfirmDialogTunnel } = useTunnels();
-    const [overwriteConfirmState, setState] = useAtom(overwriteConfirmStateAtom, jotaiScope);
+    const [overwriteConfirmState, setState] = useAtom(overwriteConfirmStateAtom);
     if (!overwriteConfirmState.active) {
         return null;
     }

package/dist/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.d.ts

@@ -11,7 +11,7 @@ export type OverwriteConfirmState = {
 } | {
     active: false;
 };
-export declare const overwriteConfirmStateAtom: import("jotai").PrimitiveAtom<OverwriteConfirmState> & {
+export declare const overwriteConfirmStateAtom: import("jotai/vanilla/atom").PrimitiveAtom<OverwriteConfirmState> & {
     init: OverwriteConfirmState;
 };
 export declare function openConfirmModal({ title, description, actionLabel, color, }: {

package/dist/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.js

@@ -1,11 +1,10 @@
-import { atom } from "jotai";
-import { jotaiStore } from "../../jotai";
+import { atom, editorJotaiStore } from "../../editor-jotai";
 export const overwriteConfirmStateAtom = atom({
     active: false,
 });
 export async function openConfirmModal({ title, description, actionLabel, color, }) {
     return new Promise((resolve) => {
-        jotaiStore.set(overwriteConfirmStateAtom, {
+        editorJotaiStore.set(overwriteConfirmStateAtom, {
             active: true,
             onConfirm: () => resolve(true),
             onClose: () => resolve(false),

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "./Range.scss";
+export type RangeProps = {
+    updateData: (value: number) => void;
+    appState: any;
+    elements: any;
+    testId?: string;
+};
+export declare const Range: ({ updateData, appState, elements, testId, }: RangeProps) => JSX.Element;

package/dist/excalidraw/components/Range.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import { getFormValue } from "../actions/actionProperties";
+import { t } from "../i18n";
+import "./Range.scss";
+export const Range = ({ updateData, appState, elements, testId, }) => {
+    const rangeRef = React.useRef(null);
+    const valueRef = React.useRef(null);
+    const value = getFormValue(elements, appState, (element) => element.opacity, true, appState.currentItemOpacity);
+    useEffect(() => {
+        if (rangeRef.current && valueRef.current) {
+            const rangeElement = rangeRef.current;
+            const valueElement = valueRef.current;
+            const inputWidth = rangeElement.offsetWidth;
+            const thumbWidth = 15; // 15 is the width of the thumb
+            const position = (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
+            valueElement.style.left = `${position}px`;
+            rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
+        }
+    }, [value]);
+    return (_jsxs("label", { className: "control-label", children: [t("labels.opacity"), _jsxs("div", { className: "range-wrapper", children: [_jsx("input", { ref: rangeRef, type: "range", min: "0", max: "100", step: "10", onChange: (event) => {
+                            updateData(+event.target.value);
+                        }, value: value, className: "range-input", "data-testid": testId }), _jsx("div", { className: "value-bubble", ref: valueRef, children: value !== 0 ? value : null }), _jsx("div", { className: "zero-label", children: "0" })] })] }));
+};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./SearchMenu.scss";
-export declare const searchItemInFocusAtom: import("jotai").PrimitiveAtom<number | null> & {
+export declare const searchItemInFocusAtom: import("jotai/vanilla/atom").PrimitiveAtom<number | null> & {
     init: number | null;
 };
 export declare const SearchMenu: () => JSX.Element;

package/dist/excalidraw/components/SearchMenu.js

@@ -10,8 +10,7 @@ import { measureText } from "../element/textElement";
 import { addEventListener, getFontString } from "../utils";
 import { KEYS } from "../keys";
 import clsx from "clsx";
-import { atom, useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
+import { atom, useAtom } from "../editor-jotai";
 import { t } from "../i18n";
 import { isElementCompletelyInViewport } from "../element/sizeHelpers";
 import { randomInteger } from "../random";
@@ -26,7 +25,7 @@ export const SearchMenu = () => {
     const app = useApp();
     const setAppState = useExcalidrawSetAppState();
     const searchInputRef = useRef(null);
-    const [inputValue, setInputValue] = useAtom(searchQueryAtom, jotaiScope);
+    const [inputValue, setInputValue] = useAtom(searchQueryAtom);
     const searchQuery = inputValue.trim();
     const [isSearching, setIsSearching] = useState(false);
     const [searchMatches, setSearchMatches] = useState({
@@ -35,7 +34,7 @@ export const SearchMenu = () => {
     });
     const searchedQueryRef = useRef(null);
     const lastSceneNonceRef = useRef(undefined);
-    const [focusIndex, setFocusIndex] = useAtom(searchItemInFocusAtom, jotaiScope);
+    const [focusIndex, setFocusIndex] = useAtom(searchItemInFocusAtom);
     const elementsMap = app.scene.getNonDeletedElementsMap();
     useEffect(() => {
         if (isSearching) {

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

@@ -8,7 +8,7 @@ import "./Sidebar.scss";
  *
  * Since we can only render one Sidebar at a time, we can use a simple flag.
  */
-export declare const isSidebarDockedAtom: import("jotai").PrimitiveAtom<boolean> & {
+export declare const isSidebarDockedAtom: import("jotai/vanilla/atom").PrimitiveAtom<boolean> & {
     init: boolean;
 };
 export declare const SidebarInner: React.ForwardRefExoticComponent<Omit<{

package/dist/excalidraw/components/Sidebar/Sidebar.js

@@ -2,8 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState, forwardRef, useImperativeHandle, useCallback, } from "react";
 import { Island } from "../Island";
-import { atom, useSetAtom } from "jotai";
-import { jotaiScope } from "../../jotai";
+import { atom, useSetAtom } from "../../editor-jotai";
 import { SidebarPropsContext } from "./common";
 import { SidebarHeader } from "./SidebarHeader";
 import clsx from "clsx";
@@ -33,7 +32,7 @@ export const SidebarInner = forwardRef(({ name, children, onDock, docked, classN
         console.warn("Sidebar: `docked` must be set when `onDock` is supplied for the sidebar to be user-dockable. To hide this message, either pass `docked` or remove `onDock`");
     }
     const setAppState = useExcalidrawSetAppState();
-    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom, jotaiScope);
+    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom);
     useLayoutEffect(() => {
         setIsSidebarDockedAtom(!!docked);
         return () => {

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

@@ -4,6 +4,7 @@ interface CollapsibleProps {
     open: boolean;
     openTrigger: () => void;
     children: React.ReactNode;
+    className?: string;
 }
-declare const Collapsible: ({ label, open, openTrigger, children, }: CollapsibleProps) => JSX.Element;
+declare const Collapsible: ({ label, open, openTrigger, children, className, }: CollapsibleProps) => JSX.Element;
 export default Collapsible;

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

@@ -1,12 +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, }) => {
+const Collapsible = ({ label, open, openTrigger, children, className, }) => {
     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("div", { style: { display: "flex", flexDirection: "column" }, children: children }))] }));
+                }, className: className, onClick: openTrigger, children: [label, _jsx(InlineIcon, { icon: open ? collapseUpIcon : collapseDownIcon })] }), open && (_jsx("div", { style: { display: "flex", flexDirection: "column" }, children: children }))] }));
 };
 export default Collapsible;

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

@@ -1,18 +1,87 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DragInput from "./DragInput";
-import { getStepSizedValue, isPropertyEditable, resizeElement } from "./utils";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+import { resizeSingleElement } from "../../element/resizeElements";
+import { isImageElement } from "../../element/typeChecks";
+import { MINIMAL_CROP_SIZE, getUncroppedWidthAndHeight, } from "../../element/cropElement";
+import { mutateElement } from "../../element/mutateElement";
+import { clamp, round } from "../../../math";
 const STEP_SIZE = 10;
 const _shouldKeepAspectRatio = (element) => {
     return element.type === "image";
 };
-const handleDimensionChange = ({ accumulatedChange, originalElements, shouldKeepAspectRatio, shouldChangeByStepSize, nextValue, property, scene, }) => {
+const handleDimensionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldKeepAspectRatio, shouldChangeByStepSize, nextValue, property, originalAppState, instantChange, scene, }) => {
     const elementsMap = scene.getNonDeletedElementsMap();
-    const elements = scene.getNonDeletedElements();
     const origElement = originalElements[0];
-    if (origElement) {
+    const latestElement = elementsMap.get(origElement.id);
+    if (origElement && latestElement) {
         const keepAspectRatio = shouldKeepAspectRatio || _shouldKeepAspectRatio(origElement);
         const aspectRatio = origElement.width / origElement.height;
+        if (originalAppState.croppingElementId === origElement.id) {
+            const element = elementsMap.get(origElement.id);
+            if (!element || !isImageElement(element) || !element.crop) {
+                return;
+            }
+            const crop = element.crop;
+            let nextCrop = { ...crop };
+            const isFlippedByX = element.scale[0] === -1;
+            const isFlippedByY = element.scale[1] === -1;
+            const { width: uncroppedWidth, height: uncroppedHeight } = getUncroppedWidthAndHeight(element);
+            const naturalToUncroppedWidthRatio = crop.naturalWidth / uncroppedWidth;
+            const naturalToUncroppedHeightRatio = crop.naturalHeight / uncroppedHeight;
+            const MAX_POSSIBLE_WIDTH = isFlippedByX
+                ? crop.width + crop.x
+                : crop.naturalWidth - crop.x;
+            const MAX_POSSIBLE_HEIGHT = isFlippedByY
+                ? crop.height + crop.y
+                : crop.naturalHeight - crop.y;
+            const MIN_WIDTH = MINIMAL_CROP_SIZE * naturalToUncroppedWidthRatio;
+            const MIN_HEIGHT = MINIMAL_CROP_SIZE * naturalToUncroppedHeightRatio;
+            if (nextValue !== undefined) {
+                if (property === "width") {
+                    const nextValueInNatural = nextValue * naturalToUncroppedWidthRatio;
+                    const nextCropWidth = clamp(nextValueInNatural, MIN_WIDTH, MAX_POSSIBLE_WIDTH);
+                    nextCrop = {
+                        ...nextCrop,
+                        width: nextCropWidth,
+                        x: isFlippedByX ? crop.x + crop.width - nextCropWidth : crop.x,
+                    };
+                }
+                else if (property === "height") {
+                    const nextValueInNatural = nextValue * naturalToUncroppedHeightRatio;
+                    const nextCropHeight = clamp(nextValueInNatural, MIN_HEIGHT, MAX_POSSIBLE_HEIGHT);
+                    nextCrop = {
+                        ...nextCrop,
+                        height: nextCropHeight,
+                        y: isFlippedByY ? crop.y + crop.height - nextCropHeight : crop.y,
+                    };
+                }
+                mutateElement(element, {
+                    crop: nextCrop,
+                    width: nextCrop.width / (crop.naturalWidth / uncroppedWidth),
+                    height: nextCrop.height / (crop.naturalHeight / uncroppedHeight),
+                });
+                return;
+            }
+            const changeInWidth = property === "width" ? instantChange : 0;
+            const changeInHeight = property === "height" ? instantChange : 0;
+            const nextCropWidth = clamp(crop.width + changeInWidth, MIN_WIDTH, MAX_POSSIBLE_WIDTH);
+            const nextCropHeight = clamp(crop.height + changeInHeight, MIN_WIDTH, MAX_POSSIBLE_HEIGHT);
+            nextCrop = {
+                ...crop,
+                x: isFlippedByX ? crop.x + crop.width - nextCropWidth : crop.x,
+                y: isFlippedByY ? crop.y + crop.height - nextCropHeight : crop.y,
+                width: nextCropWidth,
+                height: nextCropHeight,
+            };
+            mutateElement(element, {
+                crop: nextCrop,
+                width: nextCrop.width / (crop.naturalWidth / uncroppedWidth),
+                height: nextCrop.height / (crop.naturalHeight / uncroppedHeight),
+            });
+            return;
+        }
         if (nextValue !== undefined) {
             const nextWidth = Math.max(property === "width"
                 ? nextValue
@@ -24,7 +93,9 @@ const handleDimensionChange = ({ accumulatedChange, originalElements, shouldKeep
                 : keepAspectRatio
                     ? nextValue / aspectRatio
                     : origElement.height, MIN_WIDTH_OR_HEIGHT);
-            resizeElement(nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap, elements, scene);
+            resizeSingleElement(nextWidth, nextHeight, latestElement, origElement, elementsMap, originalElementsMap, property === "width" ? "e" : "s", {
+                shouldMaintainAspectRatio: keepAspectRatio,
+            });
             return;
         }
         const changeInWidth = property === "width" ? accumulatedChange : 0;
@@ -57,12 +128,27 @@ const handleDimensionChange = ({ accumulatedChange, originalElements, shouldKeep
         }
         nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
         nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
-        resizeElement(nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap, elements, scene);
+        resizeSingleElement(nextWidth, nextHeight, latestElement, origElement, elementsMap, originalElementsMap, property === "width" ? "e" : "s", {
+            shouldMaintainAspectRatio: keepAspectRatio,
+        });
     }
 };
 const DimensionDragInput = ({ property, element, scene, appState, }) => {
-    const value = Math.round((property === "width" ? element.width : element.height) * 100) /
-        100;
+    let value = round(property === "width" ? element.width : element.height, 2);
+    if (appState.croppingElementId &&
+        appState.croppingElementId === element.id &&
+        isImageElement(element) &&
+        element.crop) {
+        const { width: uncroppedWidth, height: uncroppedHeight } = getUncroppedWidthAndHeight(element);
+        if (property === "width") {
+            const ratio = uncroppedWidth / element.crop.naturalWidth;
+            value = round(element.crop.width * ratio, 2);
+        }
+        if (property === "height") {
+            const ratio = uncroppedHeight / element.crop.naturalHeight;
+            value = round(element.crop.height * ratio, 2);
+        }
+    }
     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/MultiDimension.js

@@ -3,11 +3,11 @@ 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 { rescalePointsInElement, resizeSingleElement, } 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 { getElementsInAtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
 import { pointFrom } from "../../../math";
 const STEP_SIZE = 10;
@@ -64,7 +64,6 @@ const resizeGroup = (nextWidth, nextHeight, initialHeight, aspectRatio, anchor,
 };
 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) {
@@ -109,7 +108,9 @@ const handleDimensionChange = ({ accumulatedChange, originalElements, originalEl
                     }
                     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);
+                    resizeSingleElement(nextWidth, nextHeight, latestElement, origElement, elementsMap, originalElementsMap, property === "width" ? "e" : "s", {
+                        shouldInformMutation: false,
+                    });
                 }
             }
         }
@@ -176,7 +177,9 @@ const handleDimensionChange = ({ accumulatedChange, originalElements, originalEl
                 }
                 nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
                 nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
-                resizeElement(nextWidth, nextHeight, false, origElement, elementsMap, elements, scene);
+                resizeSingleElement(nextWidth, nextHeight, latestElement, origElement, elementsMap, originalElementsMap, property === "width" ? "e" : "s", {
+                    shouldInformMutation: false,
+                });
             }
         }
     }

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

@@ -1,9 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { clamp, pointFrom, pointRotateRads, round } from "../../../math";
+import { isImageElement } from "../../element/typeChecks";
+import { getFlipAdjustedCropPosition, getUncroppedWidthAndHeight, } from "../../element/cropElement";
+import { mutateElement } from "../../element/mutateElement";
 const STEP_SIZE = 10;
-const handlePositionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldChangeByStepSize, nextValue, property, scene, }) => {
+const handlePositionChange = ({ accumulatedChange, instantChange, originalElements, originalElementsMap, shouldChangeByStepSize, nextValue, property, scene, originalAppState, }) => {
     const elementsMap = scene.getNonDeletedElementsMap();
     const elements = scene.getNonDeletedElements();
     const origElement = originalElements[0];
@@ -12,6 +15,55 @@ const handlePositionChange = ({ accumulatedChange, originalElements, originalEle
         origElement.y + origElement.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(pointFrom(origElement.x, origElement.y), pointFrom(cx, cy), origElement.angle);
+    if (originalAppState.croppingElementId === origElement.id) {
+        const element = elementsMap.get(origElement.id);
+        if (!element || !isImageElement(element) || !element.crop) {
+            return;
+        }
+        const crop = element.crop;
+        let nextCrop = crop;
+        const isFlippedByX = element.scale[0] === -1;
+        const isFlippedByY = element.scale[1] === -1;
+        const { width: uncroppedWidth, height: uncroppedHeight } = getUncroppedWidthAndHeight(element);
+        if (nextValue !== undefined) {
+            if (property === "x") {
+                const nextValueInNatural = nextValue * (crop.naturalWidth / uncroppedWidth);
+                if (isFlippedByX) {
+                    nextCrop = {
+                        ...crop,
+                        x: clamp(crop.naturalWidth - nextValueInNatural - crop.width, 0, crop.naturalWidth - crop.width),
+                    };
+                }
+                else {
+                    nextCrop = {
+                        ...crop,
+                        x: clamp(nextValue * (crop.naturalWidth / uncroppedWidth), 0, crop.naturalWidth - crop.width),
+                    };
+                }
+            }
+            if (property === "y") {
+                nextCrop = {
+                    ...crop,
+                    y: clamp(nextValue * (crop.naturalHeight / uncroppedHeight), 0, crop.naturalHeight - crop.height),
+                };
+            }
+            mutateElement(element, {
+                crop: nextCrop,
+            });
+            return;
+        }
+        const changeInX = (property === "x" ? instantChange : 0) * (isFlippedByX ? -1 : 1);
+        const changeInY = (property === "y" ? instantChange : 0) * (isFlippedByY ? -1 : 1);
+        nextCrop = {
+            ...crop,
+            x: clamp(crop.x + changeInX, 0, crop.naturalWidth - crop.width),
+            y: clamp(crop.y + changeInY, 0, crop.naturalHeight - crop.height),
+        };
+        mutateElement(element, {
+            crop: nextCrop,
+        });
+        return;
+    }
     if (nextValue !== undefined) {
         const newTopLeftX = property === "x" ? nextValue : topLeftX;
         const newTopLeftY = property === "y" ? nextValue : topLeftY;
@@ -34,7 +86,15 @@ const handlePositionChange = ({ accumulatedChange, originalElements, originalEle
 };
 const Position = ({ property, element, elementsMap, scene, appState, }) => {
     const [topLeftX, topLeftY] = pointRotateRads(pointFrom(element.x, element.y), pointFrom(element.x + element.width / 2, element.y + element.height / 2), element.angle);
-    const value = Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
+    let value = round(property === "x" ? topLeftX : topLeftY, 2);
+    if (appState.croppingElementId === element.id &&
+        isImageElement(element) &&
+        element.crop) {
+        const flipAdjustedPosition = getFlipAdjustedCropPosition(element);
+        if (flipAdjustedPosition) {
+            value = round(property === "x" ? flipAdjustedPosition.x : flipAdjustedPosition.y, 2);
+        }
+    }
     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.js

@@ -18,11 +18,14 @@ import Collapsible from "./Collapsible";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
 import { getAtomicUnits } from "./utils";
 import { STATS_PANELS } from "../../constants";
-import { isElbowArrow } from "../../element/typeChecks";
+import { isElbowArrow, isImageElement } from "../../element/typeChecks";
 import CanvasGrid from "./CanvasGrid";
 import clsx from "clsx";
 import "./Stats.scss";
 import { isGridModeEnabled } from "../../snapping";
+import { getUncroppedWidthAndHeight } from "../../element/cropElement";
+import { round } from "../../../math";
+import { frameAndChildrenSelectedTogether } from "../../frame";
 const STATS_TIMEOUT = 50;
 export const Stats = (props) => {
     const appState = useExcalidrawAppState();
@@ -50,6 +53,10 @@ export const StatsInner = memo(({ app, onClose, renderCustomStats, selectedEleme
     const setAppState = useExcalidrawSetAppState();
     const singleElement = selectedElements.length === 1 ? selectedElements[0] : null;
     const multipleElements = selectedElements.length > 1 ? selectedElements : null;
+    const cropMode = appState.croppingElementId && isImageElement(singleElement);
+    const unCroppedDimension = cropMode
+        ? getUncroppedWidthAndHeight(singleElement)
+        : null;
     const [sceneDimension, setSceneDimension] = useState({
         width: 0,
         height: 0,
@@ -68,6 +75,9 @@ export const StatsInner = memo(({ app, onClose, renderCustomStats, selectedEleme
     const atomicUnits = useMemo(() => {
         return getAtomicUnits(selectedElements, appState);
     }, [selectedElements, appState]);
+    const _frameAndChildrenSelectedTogether = useMemo(() => {
+        return frameAndChildrenSelectedTogether(selectedElements);
+    }, [selectedElements]);
     return (_jsx("div", { className: "exc-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 })] }), _jsxs(Collapsible, { label: _jsx("h3", { children: t("stats.generalStats") }), open: !!(appState.stats.panels & STATS_PANELS.generalStats), openTrigger: () => setAppState((state) => {
                         return {
                             stats: {
@@ -75,7 +85,7 @@ export const StatsInner = memo(({ app, onClose, renderCustomStats, selectedEleme
                                 panels: state.stats.panels ^ STATS_PANELS.generalStats,
                             },
                         };
-                    }), children: [_jsxs(StatsRows, { children: [_jsx(StatsRow, { heading: true, children: t("stats.scene") }), _jsxs(StatsRow, { columns: 2, children: [_jsx("div", { children: t("stats.shapes") }), _jsx("div", { children: elements.length })] }), _jsxs(StatsRow, { columns: 2, children: [_jsx("div", { children: t("stats.width") }), _jsx("div", { children: sceneDimension.width })] }), _jsxs(StatsRow, { columns: 2, children: [_jsx("div", { children: t("stats.height") }), _jsx("div", { children: sceneDimension.height })] }), gridModeEnabled && (_jsxs(_Fragment, { children: [_jsx(StatsRow, { heading: true, children: "Canvas" }), _jsx(StatsRow, { children: _jsx(CanvasGrid, { property: "gridStep", scene: scene, appState: appState, setAppState: setAppState }) })] }))] }), renderCustomStats?.(elements, appState)] }), selectedElements.length > 0 && (_jsx("div", { id: "elementStats", style: {
+                    }), children: [_jsxs(StatsRows, { children: [_jsx(StatsRow, { heading: true, children: t("stats.scene") }), _jsxs(StatsRow, { columns: 2, children: [_jsx("div", { children: t("stats.shapes") }), _jsx("div", { children: elements.length })] }), _jsxs(StatsRow, { columns: 2, children: [_jsx("div", { children: t("stats.width") }), _jsx("div", { children: sceneDimension.width })] }), _jsxs(StatsRow, { columns: 2, children: [_jsx("div", { children: t("stats.height") }), _jsx("div", { children: sceneDimension.height })] }), gridModeEnabled && (_jsxs(_Fragment, { children: [_jsx(StatsRow, { heading: true, children: "Canvas" }), _jsx(StatsRow, { children: _jsx(CanvasGrid, { property: "gridStep", scene: scene, appState: appState, setAppState: setAppState }) })] }))] }), renderCustomStats?.(elements, appState)] }), !_frameAndChildrenSelectedTogether && selectedElements.length > 0 && (_jsx("div", { id: "elementStats", style: {
                         marginTop: 12,
                     }, children: _jsx(Collapsible, { label: _jsx("h3", { children: t("stats.elementProperties") }), open: !!(appState.stats.panels & STATS_PANELS.elementProperties), openTrigger: () => setAppState((state) => {
                             return {
@@ -84,11 +94,18 @@ export const StatsInner = memo(({ app, onClose, renderCustomStats, selectedEleme
                                     panels: state.stats.panels ^ STATS_PANELS.elementProperties,
                                 },
                             };
-                        }), children: _jsxs(StatsRows, { children: [singleElement && (_jsxs(_Fragment, { children: [_jsx(StatsRow, { heading: true, "data-testid": "stats-element-type", children: t(`element.${singleElement.type}`) }), _jsx(StatsRow, { children: _jsx(Position, { element: singleElement, property: "x", elementsMap: elementsMap, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(Position, { element: singleElement, property: "y", elementsMap: elementsMap, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(Dimension, { property: "width", element: singleElement, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(Dimension, { property: "height", element: singleElement, scene: scene, appState: appState }) }), !isElbowArrow(singleElement) && (_jsx(StatsRow, { children: _jsx(Angle, { property: "angle", element: singleElement, scene: scene, appState: appState }) })), _jsx(StatsRow, { children: _jsx(FontSize, { property: "fontSize", element: singleElement, scene: scene, appState: appState }) })] })), multipleElements && (_jsxs(_Fragment, { children: [elementsAreInSameGroup(multipleElements) && (_jsx(StatsRow, { heading: true, children: t("element.group") })), _jsxs(StatsRow, { columns: 2, style: { margin: "0.3125rem 0" }, children: [_jsx("div", { children: t("stats.shapes") }), _jsx("div", { children: selectedElements.length })] }), _jsx(StatsRow, { children: _jsx(MultiPosition, { property: "x", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiPosition, { property: "y", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiDimension, { property: "width", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiDimension, { property: "height", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiAngle, { property: "angle", elements: multipleElements, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiFontSize, { property: "fontSize", elements: multipleElements, scene: scene, appState: appState, elementsMap: elementsMap }) })] }))] }) }) }))] }) }));
+                        }), children: _jsxs(StatsRows, { children: [singleElement && (_jsxs(_Fragment, { children: [cropMode && (_jsx(StatsRow, { heading: true, children: t("labels.unCroppedDimension") })), appState.croppingElementId &&
+                                            isImageElement(singleElement) &&
+                                            unCroppedDimension && (_jsxs(StatsRow, { columns: 2, children: [_jsx("div", { children: t("stats.width") }), _jsx("div", { children: round(unCroppedDimension.width, 2) })] })), appState.croppingElementId &&
+                                            isImageElement(singleElement) &&
+                                            unCroppedDimension && (_jsxs(StatsRow, { columns: 2, children: [_jsx("div", { children: t("stats.height") }), _jsx("div", { children: round(unCroppedDimension.height, 2) })] })), _jsx(StatsRow, { heading: true, "data-testid": "stats-element-type", children: appState.croppingElementId
+                                                ? t("labels.imageCropping")
+                                                : t(`element.${singleElement.type}`) }), _jsx(StatsRow, { children: _jsx(Position, { element: singleElement, property: "x", elementsMap: elementsMap, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(Position, { element: singleElement, property: "y", elementsMap: elementsMap, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(Dimension, { property: "width", element: singleElement, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(Dimension, { property: "height", element: singleElement, scene: scene, appState: appState }) }), !isElbowArrow(singleElement) && (_jsx(StatsRow, { children: _jsx(Angle, { property: "angle", element: singleElement, scene: scene, appState: appState }) })), _jsx(StatsRow, { children: _jsx(FontSize, { property: "fontSize", element: singleElement, scene: scene, appState: appState }) })] })), multipleElements && (_jsxs(_Fragment, { children: [elementsAreInSameGroup(multipleElements) && (_jsx(StatsRow, { heading: true, children: t("element.group") })), _jsxs(StatsRow, { columns: 2, style: { margin: "0.3125rem 0" }, children: [_jsx("div", { children: t("stats.shapes") }), _jsx("div", { children: selectedElements.length })] }), _jsx(StatsRow, { children: _jsx(MultiPosition, { property: "x", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiPosition, { property: "y", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiDimension, { property: "width", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiDimension, { property: "height", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _jsx(MultiAngle, { property: "angle", elements: multipleElements, scene: scene, appState: appState }) }), _jsx(StatsRow, { children: _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 &&
         prev.gridModeEnabled === next.gridModeEnabled &&
-        prev.appState.gridStep === next.appState.gridStep);
+        prev.appState.gridStep === next.appState.gridStep &&
+        prev.appState.croppingElementId === next.appState.croppingElementId);
 });

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

@@ -14,7 +14,6 @@ export declare const newOrigin: (x1: number, y1: number, w1: number, h1: number,
     x: number;
     y: number;
 };
-export declare const resizeElement: (nextWidth: number, nextHeight: number, keepAspectRatio: boolean, origElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, shouldInformMutation?: boolean) => void;
 export declare const moveElement: (newTopLeftX: number, newTopLeftY: number, originalElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, originalElementsMap: ElementsMap, shouldInformMutation?: boolean) => void;
 export declare const getAtomicUnits: (targetElements: readonly ExcalidrawElement[], appState: AppState) => AtomicUnit[];
 export declare const updateBindings: (latestElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, options?: {
@@ -23,4 +22,5 @@ export declare const updateBindings: (latestElement: ExcalidrawElement, elements
         width: number;
         height: number;
     };
+    zoom?: AppState["zoom"];
 }) => void;