@alpaca-editor/core 1.0.3978 → 1.0.3980

package/dist/editor/PictureCropper.js

@@ -1,15 +1,25 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog } from "primereact/dialog";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "../components/ui/dialog";
 import { useEditContext } from "./client/editContext";
 import { useEffect, useRef, useState } from "react";
-import { Button } from "primereact/button";
+import { Button } from "../components/ui/button";
 import DialogButtons from "./ui/DialogButtons";
 import { classNames } from "primereact/utils";
-export function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
+import { RotateCcw } from "lucide-react";
+import { SimpleTabs } from "./ui/SimpleTabs";
+import { AspectRatioSelector } from "./AspectRatioSelector";
+export function PictureCropper({ field, onClose, variantName: initialVariantName, }) {
     const [pictureValue, setPictureValue] = useState();
     const [isValid, setIsValid] = useState(true);
     const [rawValue, setRawValue] = useState();
     const [actualImageDimensions, setActualImageDimensions] = useState(null);
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    // Track selected aspect ratio for each variant
+    const [selectedAspectRatio, setSelectedAspectRatio] = useState(null);
+    // Track crop rectangles for each variant separately
+    const [variantRects, setVariantRects] = useState(new Map());
+    // Cache image dimensions by URL to avoid showing loading indicator for already loaded images
+    const imageDimensionsCache = useRef(new Map());
     const imageRef = useRef(null);
     const [rect, setRect] = useState();
     const rectRef = useRef(rect);
@@ -23,6 +33,29 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
     const EDGE_THRESHOLD = 10; // pixels from edge to detect resize
     const [resizeEdge, setResizeEdge] = useState(null);
     const resizeEdgeRef = useRef(null);
+    // Helper function to create default region for aspect ratio locked variants
+    const createDefaultRegion = () => {
+        if (!selectedAspectRatio || !actualImageDimensions) {
+            return undefined;
+        }
+        // Always use the actual loaded image dimensions for aspect ratio calculations
+        const sourceWidth = actualImageDimensions.width;
+        const sourceHeight = actualImageDimensions.height;
+        const sourceAspectRatio = sourceHeight > 0 ? sourceWidth / sourceHeight : 1;
+        const targetAspectRatio = selectedAspectRatio;
+        // Calculate maximum size that fits the target aspect ratio within the source image
+        let width = 1.0; // Start with full width
+        let height = (width / targetAspectRatio) * sourceAspectRatio;
+        // If height exceeds bounds, start with full height instead
+        if (height > 1.0) {
+            height = 1.0;
+            width = (height * targetAspectRatio) / sourceAspectRatio;
+        }
+        // Center the rectangle
+        const x = (1.0 - width) / 2;
+        const y = (1.0 - height) / 2;
+        return { x, y, width, height };
+    };
     const getResizeEdge = (pos, rect, bounds) => {
         if (!rect || !bounds)
             return null;
@@ -62,28 +95,106 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
             : { Variants: [] };
         setRawValue(raw);
     }, [field]);
-    const selectedVariant = pictureValue && pictureValue.variants
-        ? pictureValue.variants?.find((x) => x.name == selectedVariantName)
+    // Set initial tab based on the provided variant name
+    useEffect(() => {
+        if (pictureValue?.variants && initialVariantName) {
+            const initialIndex = pictureValue.variants.findIndex((variant) => variant.name === initialVariantName);
+            if (initialIndex >= 0) {
+                setActiveTabIndex(initialIndex);
+            }
+        }
+    }, [pictureValue, initialVariantName]);
+    const selectedVariant = pictureValue &&
+        pictureValue.variants &&
+        pictureValue.variants[activeTabIndex]
+        ? pictureValue.variants[activeTabIndex]
         : null;
+    const selectedVariantName = selectedVariant?.name || "";
+    // Update selected aspect ratio when switching variants
+    useEffect(() => {
+        if (selectedVariant) {
+            // If variant has locked aspect ratio, use that
+            if (selectedVariant.aspectRatioLock) {
+                setSelectedAspectRatio(selectedVariant.aspectRatioLock);
+            }
+            else {
+                // Default to free form if no lock
+                setSelectedAspectRatio(null);
+            }
+        }
+    }, [selectedVariant]);
+    // Manage image dimensions when the image source changes between variants
+    const currentImageSrc = selectedVariant?.originalSrc ?? selectedVariant?.src;
+    const previousImageSrcRef = useRef(undefined);
     useEffect(() => {
+        if (currentImageSrc && currentImageSrc !== previousImageSrcRef.current) {
+            // Check if we have cached dimensions for this image
+            const cachedDimensions = imageDimensionsCache.current.get(currentImageSrc);
+            if (cachedDimensions) {
+                setActualImageDimensions(cachedDimensions);
+            }
+            else {
+                // Only reset to null if we don't have cached dimensions
+                setActualImageDimensions(null);
+            }
+            previousImageSrcRef.current = currentImageSrc;
+        }
+    }, [currentImageSrc]);
+    // Load crop rectangle when switching variants
+    useEffect(() => {
+        if (!selectedVariantName)
+            return;
+        // Check if we have a current working rect for this variant
+        const existingRect = variantRects.get(selectedVariantName);
+        // If we have a valid rect, use it
+        if (existingRect !== undefined) {
+            setRect(existingRect);
+            return;
+        }
+        // Initialize rect for this variant if not already done
+        let initialRect;
+        // Try to load from saved region if this variant hasn't been touched yet
         if (selectedVariant?.region &&
-            (!selectedVariant.aspectRatioLock ||
-                Math.abs(selectedVariant.aspectRatioLock -
+            (!selectedAspectRatio ||
+                Math.abs(selectedAspectRatio -
                     (selectedVariant.region.width * selectedVariant.width) /
                         (selectedVariant.region.height * selectedVariant.height)) < 0.1) &&
             selectedVariant.region.width > 0 &&
             selectedVariant.region.height > 0) {
-            setRect({
+            initialRect = {
                 width: selectedVariant.region.width,
                 height: selectedVariant.region.height,
                 y: selectedVariant.region.y,
                 x: selectedVariant.region.x,
-            });
+            };
         }
         else {
-            setRect(undefined);
+            // Try to create a default region if aspect ratio is locked
+            initialRect = createDefaultRegion();
         }
-    }, [selectedVariant]);
+        // Store in variantRects and set as current rect
+        setVariantRects((prev) => new Map(prev).set(selectedVariantName, initialRect));
+        setRect(initialRect);
+    }, [selectedVariant, selectedVariantName]);
+    // Create default region when image dimensions become available
+    useEffect(() => {
+        if (selectedVariant &&
+            actualImageDimensions &&
+            !selectedVariant?.region &&
+            selectedAspectRatio) {
+            const defaultRect = createDefaultRegion();
+            setVariantRects((prev) => new Map(prev).set(selectedVariant.name, defaultRect));
+            setRect(defaultRect);
+        }
+    }, [actualImageDimensions, selectedVariant, selectedAspectRatio]);
+    // Update working state when rect changes (but only if user is actively editing)
+    const isUserEditingRef = useRef(false);
+    useEffect(() => {
+        if (selectedVariantName && isUserEditingRef.current) {
+            setVariantRects((prev) => new Map(prev).set(selectedVariantName, rect));
+            isUserEditingRef.current = false;
+        }
+    }, [rect, selectedVariantName]);
     useEffect(() => {
         if (!rect)
             return;
@@ -101,13 +212,18 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
         if (!selectedVariantName)
             return;
         if (selectedVariant) {
-            let selected = rawValue.Variants?.find((x) => x.Name == selectedVariantName);
+            // Create a deep copy of rawValue to avoid mutations
+            const newRawValue = JSON.parse(JSON.stringify(rawValue));
+            let selected = newRawValue.Variants?.find((x) => x.Name == selectedVariantName);
             if (!selected) {
                 selected = {
                     Name: selectedVariantName,
                     MediaId: selectedVariant.mediaId,
                 };
-                rawValue.Variants?.push(selected);
+                if (!newRawValue.Variants) {
+                    newRawValue.Variants = [];
+                }
+                newRawValue.Variants.push(selected);
             }
             if (selected) {
                 if (rect)
@@ -119,7 +235,7 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
                     };
                 else
                     selected.Region = undefined;
-                setRawValue(rawValue);
+                setRawValue(newRawValue);
             }
         }
     }, [rect]);
@@ -152,68 +268,256 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
                     y: (ev.clientY - bounds.top) / bounds.height,
                 };
                 let newRect = { ...rect };
-                const aspectRatio = selectedVariant.aspectRatioLock;
-                const actualWidth = selectedVariant.width > 0
-                    ? selectedVariant.width
-                    : actualImageDimensions?.width || 0;
-                const actualHeight = selectedVariant.height > 0
-                    ? selectedVariant.height
-                    : actualImageDimensions?.height || 0;
-                const originalAspectRatio = actualHeight > 0 ? actualWidth / actualHeight : 1;
-                if (resizeEdgeRef.current.includes("w")) {
-                    const newWidth = rect.width + rect.x - pos.x;
-                    if (newWidth > 0) {
-                        newRect.width = newWidth;
-                        newRect.x = pos.x;
-                        if (aspectRatio) {
-                            newRect.height =
-                                (newRect.width / aspectRatio) * originalAspectRatio;
-                        }
+                const aspectRatio = selectedAspectRatio;
+                const sourceWidth = actualImageDimensions?.width || 0;
+                const sourceHeight = actualImageDimensions?.height || 0;
+                const sourceAspectRatio = sourceHeight > 0 ? sourceWidth / sourceHeight : 1;
+                // Handle resize based on edge - structure to avoid conflicts between corner handles
+                if (resizeEdgeRef.current === "w") {
+                    // Pure west edge - resize from left, keep right edge fixed
+                    const rightEdge = rect.x + rect.width;
+                    const newWidth = Math.max(0.01, rightEdge - pos.x);
+                    newRect.width = newWidth;
+                    newRect.x = rightEdge - newWidth;
+                    if (aspectRatio) {
+                        const newHeight = (newWidth / aspectRatio) * sourceAspectRatio;
+                        const centerY = rect.y + rect.height / 2;
+                        newRect.y = centerY - newHeight / 2;
+                        newRect.height = newHeight;
                     }
                 }
-                if (resizeEdgeRef.current.includes("e")) {
+                else if (resizeEdgeRef.current === "e") {
+                    // Pure east edge - resize from right, keep left edge fixed
                     const newWidth = pos.x - rect.x;
                     if (newWidth > 0) {
                         newRect.width = newWidth;
                         if (aspectRatio) {
-                            newRect.height =
-                                (newRect.width / aspectRatio) * originalAspectRatio;
+                            const newHeight = (newWidth / aspectRatio) * sourceAspectRatio;
+                            const centerY = rect.y + rect.height / 2;
+                            newRect.y = centerY - newHeight / 2;
+                            newRect.height = newHeight;
                         }
                     }
                 }
-                if (resizeEdgeRef.current.includes("n")) {
-                    const newHeight = rect.height + rect.y - pos.y;
+                else if (resizeEdgeRef.current === "n") {
+                    // Pure north edge - resize from top, keep bottom edge fixed
+                    const bottomEdge = rect.y + rect.height;
+                    const newHeight = bottomEdge - pos.y;
                     if (newHeight > 0) {
                         newRect.height = newHeight;
                         newRect.y = pos.y;
                         if (aspectRatio) {
-                            newRect.width =
-                                (newRect.height * aspectRatio) / originalAspectRatio;
+                            const newWidth = (newHeight * aspectRatio) / sourceAspectRatio;
+                            const centerX = rect.x + rect.width / 2;
+                            newRect.x = centerX - newWidth / 2;
+                            newRect.width = newWidth;
                         }
                     }
                 }
-                if (resizeEdgeRef.current.includes("s")) {
+                else if (resizeEdgeRef.current === "s") {
+                    // Pure south edge - resize from bottom, keep top edge fixed
                     const newHeight = pos.y - rect.y;
                     if (newHeight > 0) {
                         newRect.height = newHeight;
                         if (aspectRatio) {
-                            newRect.width =
-                                (newRect.height * aspectRatio) / originalAspectRatio;
+                            const newWidth = (newHeight * aspectRatio) / sourceAspectRatio;
+                            const centerX = rect.x + rect.width / 2;
+                            newRect.x = centerX - newWidth / 2;
+                            newRect.width = newWidth;
+                        }
+                    }
+                }
+                else if (resizeEdgeRef.current.includes("w") &&
+                    resizeEdgeRef.current.includes("n")) {
+                    // Northwest corner - keep southeast corner fixed
+                    const rightEdge = rect.x + rect.width;
+                    const bottomEdge = rect.y + rect.height;
+                    const newWidth = Math.max(0.01, rightEdge - pos.x);
+                    const newHeight = Math.max(0.01, bottomEdge - pos.y);
+                    newRect.width = newWidth;
+                    newRect.height = newHeight;
+                    newRect.x = rightEdge - newWidth;
+                    newRect.y = bottomEdge - newHeight;
+                    if (aspectRatio) {
+                        // Use mouse movement direction to determine primary dimension
+                        if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                            newRect.height = (newWidth / aspectRatio) * sourceAspectRatio;
+                            newRect.y = bottomEdge - newRect.height;
+                        }
+                        else {
+                            newRect.width = (newHeight * aspectRatio) / sourceAspectRatio;
+                            newRect.x = rightEdge - newRect.width;
                         }
                     }
                 }
-                // Constrain to bounds
-                if (newRect.x < 0)
-                    newRect.x = 0;
-                if (newRect.y < 0)
-                    newRect.y = 0;
-                if (newRect.x + newRect.width > 1)
-                    newRect.width = 1 - newRect.x;
-                if (newRect.y + newRect.height > 1)
-                    newRect.height = 1 - newRect.y;
+                else if (resizeEdgeRef.current.includes("w") &&
+                    resizeEdgeRef.current.includes("s")) {
+                    // Southwest corner - keep northeast corner fixed
+                    const rightEdge = rect.x + rect.width;
+                    const newWidth = Math.max(0.01, rightEdge - pos.x);
+                    const newHeight = Math.max(0.01, pos.y - rect.y);
+                    newRect.width = newWidth;
+                    newRect.height = newHeight;
+                    newRect.x = rightEdge - newWidth;
+                    if (aspectRatio) {
+                        // Use mouse movement direction to determine primary dimension
+                        if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                            newRect.height = (newWidth / aspectRatio) * sourceAspectRatio;
+                        }
+                        else {
+                            newRect.width = (newHeight * aspectRatio) / sourceAspectRatio;
+                            newRect.x = rightEdge - newRect.width;
+                        }
+                    }
+                }
+                else if (resizeEdgeRef.current.includes("e") &&
+                    resizeEdgeRef.current.includes("n")) {
+                    // Northeast corner - keep southwest corner fixed
+                    const bottomEdge = rect.y + rect.height;
+                    const newWidth = Math.max(0.01, pos.x - rect.x);
+                    const newHeight = Math.max(0.01, bottomEdge - pos.y);
+                    newRect.width = newWidth;
+                    newRect.height = newHeight;
+                    newRect.y = bottomEdge - newHeight;
+                    if (aspectRatio) {
+                        // Use mouse movement direction to determine primary dimension
+                        if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                            newRect.height = (newWidth / aspectRatio) * sourceAspectRatio;
+                            newRect.y = bottomEdge - newRect.height;
+                        }
+                        else {
+                            newRect.width = (newHeight * aspectRatio) / sourceAspectRatio;
+                        }
+                    }
+                }
+                else if (resizeEdgeRef.current.includes("e") &&
+                    resizeEdgeRef.current.includes("s")) {
+                    // Southeast corner - keep northwest corner fixed
+                    const newWidth = Math.max(0.01, pos.x - rect.x);
+                    const newHeight = Math.max(0.01, pos.y - rect.y);
+                    newRect.width = newWidth;
+                    newRect.height = newHeight;
+                    if (aspectRatio) {
+                        // Use mouse movement direction to determine primary dimension
+                        if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                            newRect.height = (newWidth / aspectRatio) * sourceAspectRatio;
+                        }
+                        else {
+                            newRect.width = (newHeight * aspectRatio) / sourceAspectRatio;
+                        }
+                    }
+                }
+                // Constrain to bounds while maintaining aspect ratio
+                // For west edge resizes, maintain the right edge position when hitting left bound
+                if (newRect.x < 0) {
+                    if (resizeEdgeRef.current?.includes("w")) {
+                        const rightEdge = rect.x + rect.width; // Original right edge position
+                        newRect.x = 0;
+                        newRect.width = rightEdge; // Width = distance from left bound to original right edge
+                        // Recalculate height if aspect ratio is locked
+                        if (aspectRatio) {
+                            const newHeight = (rightEdge / aspectRatio) * sourceAspectRatio;
+                            if (resizeEdgeRef.current === "w") {
+                                const centerY = rect.y + rect.height / 2;
+                                newRect.y = centerY - newHeight / 2;
+                            }
+                            newRect.height = newHeight;
+                        }
+                    }
+                    else {
+                        newRect.x = 0;
+                    }
+                }
+                // For north edge resizes, maintain the bottom edge position when hitting top bound
+                if (newRect.y < 0) {
+                    if (resizeEdgeRef.current?.includes("n")) {
+                        const bottomEdge = rect.y + rect.height;
+                        newRect.y = 0;
+                        newRect.height = bottomEdge; // Keep bottom edge fixed
+                        // Recalculate width if aspect ratio is locked
+                        if (aspectRatio) {
+                            const newWidth = (newRect.height * aspectRatio) / sourceAspectRatio;
+                            if (resizeEdgeRef.current === "n") {
+                                const centerX = rect.x + rect.width / 2;
+                                newRect.x = centerX - newWidth / 2;
+                            }
+                            newRect.width = newWidth;
+                        }
+                    }
+                    else {
+                        newRect.y = 0;
+                    }
+                }
+                // Apply bounds constraints and maintain aspect ratio
+                let boundedRect = { ...newRect };
+                if (boundedRect.x + boundedRect.width > 1) {
+                    boundedRect.width = 1 - boundedRect.x;
+                    // Re-apply aspect ratio if it was locked
+                    if (aspectRatio) {
+                        const newHeight = (boundedRect.width / aspectRatio) * sourceAspectRatio;
+                        // Maintain anchoring behavior based on resize edge
+                        if (resizeEdgeRef.current === "w" ||
+                            resizeEdgeRef.current === "e") {
+                            // For horizontal resizes, keep centered vertically
+                            const centerY = rect.y + rect.height / 2;
+                            boundedRect.y = centerY - newHeight / 2;
+                        }
+                        boundedRect.height = newHeight;
+                    }
+                }
+                if (boundedRect.y + boundedRect.height > 1) {
+                    boundedRect.height = 1 - boundedRect.y;
+                    // Re-apply aspect ratio if it was locked
+                    if (aspectRatio) {
+                        const newWidth = (boundedRect.height * aspectRatio) / sourceAspectRatio;
+                        // Maintain anchoring behavior based on resize edge
+                        if (resizeEdgeRef.current === "n" ||
+                            resizeEdgeRef.current === "s") {
+                            // For vertical resizes, keep centered horizontally
+                            const centerX = rect.x + rect.width / 2;
+                            boundedRect.x = centerX - newWidth / 2;
+                        }
+                        boundedRect.width = newWidth;
+                    }
+                }
+                // Final check - if aspect ratio re-calculation pushes us out of bounds again,
+                // we need to find the maximum size that fits both constraints
+                if (aspectRatio &&
+                    (boundedRect.x + boundedRect.width > 1 ||
+                        boundedRect.y + boundedRect.height > 1)) {
+                    const maxWidth = 1 - boundedRect.x;
+                    const maxHeight = 1 - boundedRect.y;
+                    const maxHeightFromWidth = (maxWidth / aspectRatio) * sourceAspectRatio;
+                    const maxWidthFromHeight = (maxHeight * aspectRatio) / sourceAspectRatio;
+                    if (maxHeightFromWidth <= maxHeight) {
+                        // Width is the limiting factor
+                        boundedRect.width = maxWidth;
+                        boundedRect.height = maxHeightFromWidth;
+                        // Maintain anchoring for horizontal resizes
+                        if (resizeEdgeRef.current === "w" ||
+                            resizeEdgeRef.current === "e") {
+                            const centerY = rect.y + rect.height / 2;
+                            boundedRect.y = Math.max(0, Math.min(1 - boundedRect.height, centerY - boundedRect.height / 2));
+                        }
+                    }
+                    else {
+                        // Height is the limiting factor
+                        boundedRect.height = maxHeight;
+                        boundedRect.width = maxWidthFromHeight;
+                        // Maintain anchoring for vertical resizes
+                        if (resizeEdgeRef.current === "n" ||
+                            resizeEdgeRef.current === "s") {
+                            const centerX = rect.x + rect.width / 2;
+                            boundedRect.x = Math.max(0, Math.min(1 - boundedRect.width, centerX - boundedRect.width / 2));
+                        }
+                    }
+                }
+                newRect = boundedRect;
+                isUserEditingRef.current = true;
                 setRect(newRect);
             }
             else if (movingRef.current) {
+                isUserEditingRef.current = true;
                 setRect({
                     ...rect,
                     x: Math.max(0, Math.min(1 - rectRef.current.width, (ev.clientX - bounds.left) / bounds.width - offset.current.x)),
@@ -221,14 +525,10 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
                 });
             }
             else {
-                const actualWidth = selectedVariant.width > 0
-                    ? selectedVariant.width
-                    : actualImageDimensions?.width || 0;
-                const actualHeight = selectedVariant.height > 0
-                    ? selectedVariant.height
-                    : actualImageDimensions?.height || 0;
-                const originalAspectRatio = actualHeight > 0 ? actualWidth / actualHeight : 1;
-                const aspectRatio = selectedVariant.aspectRatioLock;
+                const sourceWidth = actualImageDimensions?.width || 0;
+                const sourceHeight = actualImageDimensions?.height || 0;
+                const sourceAspectRatio = sourceHeight > 0 ? sourceWidth / sourceHeight : 1;
+                const aspectRatio = selectedAspectRatio;
                 const currentX = (ev.clientX - bounds.left) / bounds.width;
                 const currentY = (ev.clientY - bounds.top) / bounds.height;
                 const minX = Math.min(rect.x, currentX);
@@ -239,26 +539,47 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
                 let height = maxY - minY;
                 if (aspectRatio) {
                     if (Math.abs(deltaX) > Math.abs(deltaY)) {
-                        height = (width / aspectRatio) * originalAspectRatio;
+                        height = (width / aspectRatio) * sourceAspectRatio;
                     }
                     else {
-                        width = (height * aspectRatio) / originalAspectRatio;
+                        width = (height * aspectRatio) / sourceAspectRatio;
                     }
                 }
-                if (width + minX > 1) {
-                    width = 1 - minX;
-                    if (aspectRatio)
-                        height = (width / aspectRatio) * originalAspectRatio;
+                // Apply bounds constraints and maintain aspect ratio
+                if (aspectRatio) {
+                    const maxWidth = 1 - minX;
+                    const maxHeight = 1 - minY;
+                    const maxHeightFromWidth = (maxWidth / aspectRatio) * sourceAspectRatio;
+                    const maxWidthFromHeight = (maxHeight * aspectRatio) / sourceAspectRatio;
+                    if (maxHeightFromWidth <= maxHeight) {
+                        // Width is the limiting factor
+                        if (width > maxWidth) {
+                            width = maxWidth;
+                            height = maxHeightFromWidth;
+                        }
+                    }
+                    else {
+                        // Height is the limiting factor
+                        if (height > maxHeight) {
+                            height = maxHeight;
+                            width = maxWidthFromHeight;
+                        }
+                    }
                 }
-                if (height + minY > 1) {
-                    height = 1 - minY;
-                    if (aspectRatio)
-                        width = (height * aspectRatio) / originalAspectRatio;
+                else {
+                    // No aspect ratio lock, just apply simple bounds
+                    if (width + minX > 1) {
+                        width = 1 - minX;
+                    }
+                    if (height + minY > 1) {
+                        height = 1 - minY;
+                    }
                 }
                 // Ensure final dimensions are non-negative
                 width = Math.max(0, width);
                 height = Math.max(0, height);
                 const newRect = { x: minX, y: minY, width, height };
+                isUserEditingRef.current = true;
                 setRect(newRect);
             }
             ev.preventDefault();
@@ -267,6 +588,7 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
     };
     const handleMouseUp = () => {
         if (!rectRef.current || !rectRef.current.width || !rectRef.current.height) {
+            isUserEditingRef.current = true;
             setRect(undefined);
         }
         movingRef.current = false;
@@ -304,6 +626,7 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
             };
         }
         else {
+            isUserEditingRef.current = true;
             setRect({
                 x: (ev.clientX - bounds.left) / bounds.width,
                 y: (ev.clientY - bounds.top) / bounds.height,
@@ -314,56 +637,86 @@ export function PictureCropper({ field, onClose, variantName: selectedVariantNam
         setStartPos({ x: ev.clientX, y: ev.clientY });
         window.addEventListener("mouseup", handleMouseUp);
     };
-    if (!selectedVariant)
+    if (!pictureValue?.variants || pictureValue.variants.length === 0) {
         return null;
+    }
+    // Create tabs for each variant
+    const variantTabs = pictureValue.variants.map((variant, index) => ({
+        id: `variant-${index}`,
+        label: variant.name,
+        content: null, // Content will be rendered separately
+    }));
     const imageBounds = imageRef.current?.getBoundingClientRect();
-    const actualWidth = selectedVariant.width > 0
+    const sourceWidth = actualImageDimensions?.width || 0;
+    const sourceHeight = actualImageDimensions?.height || 0;
+    // For output dimensions, prefer variant dimensions if specified
+    const outputWidth = selectedVariant?.width && selectedVariant.width > 0
         ? selectedVariant.width
-        : actualImageDimensions?.width || 0;
-    const actualHeight = selectedVariant.height > 0
+        : sourceWidth;
+    const outputHeight = selectedVariant?.height && selectedVariant.height > 0
         ? selectedVariant.height
-        : actualImageDimensions?.height || 0;
-    const scale = imageBounds && actualWidth > 0 ? actualWidth / imageBounds.width : 1;
-    const widthPx = rect ? Math.round(rect.width * actualWidth) : 0;
-    const heightPx = rect ? Math.round(rect.height * actualHeight) : 0;
-    return (_jsx(_Fragment, { children: _jsx(Dialog, { header: "Crop " + field.name + " - " + selectedVariantName, pt: { content: { style: { paddingLeft: "0" } } }, visible: true, style: { width: "75vw", height: "75vh" }, onHide: onClose, children: _jsxs("div", { className: "justify flex h-full flex-col gap-1", children: [_jsxs("div", { className: "flex flex-1 gap-2", children: [_jsxs("div", { className: "flex w-56 flex-col gap-3 bg-gray-100 p-4 text-sm", children: [_jsx(LabelAndValue, { label: "Variant:", value: selectedVariantName }), _jsx(LabelAndValue, { label: "Image Dimensions:", value: selectedVariant.width > 0 && selectedVariant.height > 0 ? (_jsxs(_Fragment, { children: [selectedVariant.width, " x ", selectedVariant.height] })) : actualImageDimensions ? (_jsxs(_Fragment, { children: [actualImageDimensions.width, " x", " ", actualImageDimensions.height, " (actual)"] })) : (_jsx("span", { className: "text-gray-500", children: "Loading..." })) }), selectedVariant.aspectRatioLock && (_jsx(LabelAndValue, { label: "Required Aspect Ratio:", value: selectedVariant.aspectRatioLockText })), selectedVariant.minWidth && (_jsx(LabelAndValue, { label: "Minimum Width:", value: selectedVariant.minWidth })), selectedVariant.minHeight && (_jsx(LabelAndValue, { label: "Minimum Height:", value: selectedVariant.minHeight })), rect && (_jsxs(_Fragment, { children: [_jsx(LabelAndValue, { label: "Selection:", value: _jsxs(_Fragment, { children: [widthPx, " x ", heightPx] }) }), selectedVariant.minWidth &&
-                                                widthPx < selectedVariant.minWidth && (_jsx("div", { className: "text-red-500", children: "Minimum width not met!" })), selectedVariant.minHeight &&
-                                                heightPx < selectedVariant.minHeight && (_jsx("div", { className: "text-red-500", children: "Minimum height not met!" }))] }))] }), _jsx("div", { className: "relative flex-1 p-3", children: _jsx("div", { className: "absolute inset-0 top-3 flex items-center justify-center select-none", children: _jsxs("div", { ref: imageRef, className: "relative max-h-full cursor-crosshair", style: {
-                                            ...(actualWidth > 0 && actualHeight > 0
-                                                ? { aspectRatio: `${actualWidth}/${actualHeight}` }
-                                                : {}),
-                                        }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, children: [_jsx("img", { className: "max-h-full max-w-full object-scale-down", src: selectedVariant.originalSrc ?? selectedVariant.src, onLoad: (e) => {
-                                                    const img = e.target;
-                                                    setActualImageDimensions({
-                                                        width: img.naturalWidth,
-                                                        height: img.naturalHeight,
+        : sourceHeight;
+    const scale = imageBounds && outputWidth > 0 ? outputWidth / imageBounds.width : 1;
+    const widthPx = rect ? Math.round(rect.width * outputWidth) : 0;
+    const heightPx = rect ? Math.round(rect.height * outputHeight) : 0;
+    return (_jsx(_Fragment, { children: _jsx(Dialog, { open: true, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogContent, { className: "h-[75vh] max-h-none w-[75vw] max-w-none", children: [_jsx(DialogHeader, { children: _jsxs(DialogTitle, { children: ["Crop ", field.name] }) }), _jsxs("div", { className: "justify flex h-full flex-col", children: [_jsxs("div", { className: "flex flex-1 gap-2", children: [_jsxs("div", { className: "flex w-72 flex-col gap-3 p-6 text-sm", children: [_jsx("div", { className: "mb-4", children: _jsx(SimpleTabs, { tabs: variantTabs, activeTab: activeTabIndex, setActiveTab: setActiveTabIndex, className: "border-gray-2 border-b text-xs", tabClassName: "flex-1 text-center" }) }), selectedVariant && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4", children: _jsx(AspectRatioSelector, { selectedRatio: selectedAspectRatio, onRatioChange: (ratio) => {
+                                                                setSelectedAspectRatio(ratio);
+                                                                // Reset the crop rect to default when aspect ratio changes
+                                                                const defaultRect = createDefaultRegion();
+                                                                isUserEditingRef.current = true;
+                                                                setRect(defaultRect);
+                                                            }, lockedRatio: selectedVariant.aspectRatioLock }) }), _jsx(LabelAndValue, { label: "Image Dimensions", value: selectedVariant.width > 0 &&
+                                                            selectedVariant.height > 0 ? (_jsxs(_Fragment, { children: [selectedVariant.width, " x ", selectedVariant.height] })) : actualImageDimensions ? (_jsxs(_Fragment, { children: [actualImageDimensions.width, " x", " ", actualImageDimensions.height, " (actual)"] })) : (_jsx("span", { className: "text-gray-500", children: "Loading..." })) }), selectedVariant.minWidth && (_jsx(LabelAndValue, { label: "Minimum Width:", value: selectedVariant.minWidth })), selectedVariant.minHeight && (_jsx(LabelAndValue, { label: "Minimum Height:", value: selectedVariant.minHeight })), rect && (_jsxs(_Fragment, { children: [_jsx(LabelAndValue, { label: "Selection", value: _jsxs(_Fragment, { children: [widthPx, " x ", heightPx] }) }), selectedVariant.minWidth &&
+                                                                widthPx < selectedVariant.minWidth && (_jsx("div", { className: "text-red-500", children: "Minimum width not met!" })), selectedVariant.minHeight &&
+                                                                heightPx < selectedVariant.minHeight && (_jsx("div", { className: "text-red-500", children: "Minimum height not met!" }))] }))] }))] }), _jsx("div", { className: "bg-gray-4 relative flex-1", children: selectedVariant && (_jsxs("div", { className: "absolute inset-3 flex items-center justify-center select-none", children: [!actualImageDimensions && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "text-gray-500", children: "Loading image..." }) })), !actualImageDimensions && (_jsx("img", { className: "pointer-events-none absolute opacity-0", src: selectedVariant.originalSrc ?? selectedVariant.src, onLoad: (e) => {
+                                                        const img = e.target;
+                                                        const dimensions = {
+                                                            width: img.naturalWidth,
+                                                            height: img.naturalHeight,
+                                                        };
+                                                        // Cache the dimensions for this image URL
+                                                        const imgSrc = selectedVariant.originalSrc ?? selectedVariant.src;
+                                                        if (imgSrc) {
+                                                            imageDimensionsCache.current.set(imgSrc, dimensions);
+                                                        }
+                                                        setActualImageDimensions(dimensions);
+                                                    } })), actualImageDimensions && (_jsxs("div", { ref: imageRef, className: "relative max-h-full cursor-crosshair", style: {
+                                                        aspectRatio: `${sourceWidth}/${sourceHeight}`,
+                                                    }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, children: [_jsx("img", { className: "max-h-full max-w-full object-scale-down", src: selectedVariant.originalSrc ?? selectedVariant.src }), rect && (_jsxs(_Fragment, { children: [_jsx("div", { className: "pointer-events-none absolute inset-0 bg-black/40", style: {
+                                                                        clipPath: `polygon(0% 0%, 0% 100%, ${rect.x * 100}% 100%, ${rect.x * 100}% ${rect.y * 100}%, ${(rect.x + rect.width) * 100}% ${rect.y * 100}%, ${(rect.x + rect.width) * 100}% ${(rect.y + rect.height) * 100}%, ${rect.x * 100}% ${(rect.y + rect.height) * 100}%, ${rect.x * 100}% 100%, 100% 100%, 100% 0%)`,
+                                                                    } }), _jsxs("div", { className: classNames("absolute cursor-move border-2 border-dashed", isValid
+                                                                        ? "border-theme-secondary"
+                                                                        : "border-red-400"), style: {
+                                                                        left: rect.x * 100 + "%",
+                                                                        top: rect.y * 100 + "%",
+                                                                        width: rect.width * 100 + "%",
+                                                                        height: rect.height * 100 + "%",
+                                                                        cursor: resizeEdge
+                                                                            ? resizeEdge.length === 1
+                                                                                ? `${resizeEdge}-resize`
+                                                                                : `${resizeEdge}-resize`
+                                                                            : "move",
+                                                                    }, children: [_jsx("div", { className: "absolute -top-1.5 -left-1.5 h-3 w-3 cursor-nw-resize rounded-full bg-white/90 shadow-lg" }), _jsx("div", { className: "absolute -top-1.5 -right-1.5 h-3 w-3 cursor-ne-resize rounded-full bg-white/90 shadow-lg" }), _jsx("div", { className: "absolute -bottom-1.5 -left-1.5 h-3 w-3 cursor-sw-resize rounded-full bg-white/90 shadow-lg" }), _jsx("div", { className: "absolute -right-1.5 -bottom-1.5 h-3 w-3 cursor-se-resize rounded-full bg-white/90 shadow-lg" }), _jsx("div", { className: "absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 transform cursor-n-resize rounded-full bg-white/90 shadow-lg" }), _jsx("div", { className: "absolute -bottom-1.5 left-1/2 h-3 w-3 -translate-x-1/2 transform cursor-s-resize rounded-full bg-white/90 shadow-lg" }), _jsx("div", { className: "absolute top-1/2 -left-1.5 h-3 w-3 -translate-y-1/2 transform cursor-w-resize rounded-full bg-white/90 shadow-lg" }), _jsx("div", { className: "absolute top-1/2 -right-1.5 h-3 w-3 -translate-y-1/2 transform cursor-e-resize rounded-full bg-white/90 shadow-lg" }), rect.width > 0.05 && (_jsxs("div", { className: classNames("absolute right-1 bottom-1 rounded p-2 text-xs text-nowrap", isValid
+                                                                                ? "bg-black/40 text-white"
+                                                                                : "bg-red-400/40 text-white"), children: [widthPx, " x ", heightPx] }))] })] }))] }))] })) })] }), _jsxs(DialogButtons, { children: [_jsx(Button, { onClick: onClose, variant: "ghost", children: "Cancel" }), _jsxs(Button, { onClick: () => {
+                                            // If there's an aspect ratio lock, restore the default centered, maximum-sized region
+                                            const defaultRect = createDefaultRegion();
+                                            isUserEditingRef.current = true;
+                                            setRect(defaultRect);
+                                        }, variant: "outline", children: [_jsx(RotateCcw, { strokeWidth: 1 }), "Reset"] }), _jsx(Button, { disabled: !isValid, onClick: () => {
+                                            if (pictureValue) {
+                                                if (field) {
+                                                    editContext?.operations.editField({
+                                                        field: field.descriptor,
+                                                        rawValue: JSON.stringify(rawValue),
+                                                        refresh: "immediate",
                                                     });
-                                                } }), rect && (_jsx("div", { className: classNames("absolute cursor-move border text-xs opacity-70", isValid
-                                                    ? "border-blue-400 bg-blue-200 text-blue-500"
-                                                    : "border-red-400 bg-red-200 text-red-500"), style: {
-                                                    left: rect.x * 100 + "%",
-                                                    top: rect.y * 100 + "%",
-                                                    width: widthPx / scale + "px",
-                                                    height: heightPx / scale + "px",
-                                                    cursor: resizeEdge
-                                                        ? resizeEdge.length === 1
-                                                            ? `${resizeEdge}-resize`
-                                                            : `${resizeEdge}-resize`
-                                                        : "move",
-                                                }, children: widthPx / scale > 50 && (_jsxs("div", { className: "absolute right-2 bottom-1 text-nowrap", style: { textShadow: "white 1px 1px" }, children: [widthPx, " x ", heightPx] })) }))] }) }) })] }), _jsxs(DialogButtons, { children: [_jsx(Button, { onClick: () => setRect(undefined), children: "Reset" }), _jsx(Button, { size: "small", disabled: !isValid, onClick: () => {
-                                    if (pictureValue) {
-                                        if (field) {
-                                            editContext?.operations.editField({
-                                                field: field.descriptor,
-                                                rawValue: JSON.stringify(rawValue),
-                                                refresh: "immediate",
-                                            });
-                                        }
-                                    }
-                                    onClose();
-                                }, children: "Ok" }), _jsx(Button, { onClick: onClose, size: "small", children: "Cancel" })] })] }) }) }));
+                                                }
+                                            }
+                                            onClose();
+                                        }, children: "Save" })] })] })] }) }) }));
 }
 function LabelAndValue({ label, value, }) {
-    return (_jsxs("div", { children: [_jsx("div", { className: "font-bold", children: label }), _jsx("div", { children: value })] }));
+    return (_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: label }), _jsx("div", { className: "text-xs font-light", children: value })] }));
 }
 //# sourceMappingURL=PictureCropper.js.map