[dyad] Implemented automatic aspect ratio locking - wrote 1 file(s)

src/components/image-converter.tsx

@@ -38,6 +38,7 @@ import {
 } from "@/components/ui/tooltip";
 
 const aspectRatios = [
+  { name: "Original", value: "original" },
   { name: "Custom", value: "custom" },
   { name: "1:1 (Square)", value: "1/1" },
   { name: "4:3 (Standard)", value: "4/3" },
@@ -70,6 +71,7 @@ export function ImageConverter() {
   const [width, setWidth] = useState<number | string>(initialSettings.width);
   const [height, setHeight] = useState<number | string>(initialSettings.height);
   const [aspectRatio, setAspectRatio] = useState<string>(initialSettings.aspectRatio);
+  const [originalImageRatio, setOriginalImageRatio] = useState<number | null>(null);
   const [keepOrientation, setKeepOrientation] = useState<boolean>(initialSettings.keepOrientation);
   const [format, setFormat] = useState<"png" | "jpeg" | "webp">(initialSettings.format);
   const [quality, setQuality] = useState<number>(initialSettings.quality);
@@ -108,6 +110,19 @@ export function ImageConverter() {
       return;
     }
 
+    if (images.length === 0 && imageFiles.length > 0) {
+      const firstImage = imageFiles[0];
+      const img = new Image();
+      img.src = URL.createObjectURL(firstImage);
+      img.onload = () => {
+        setOriginalImageRatio(img.naturalWidth / img.naturalHeight);
+        setAspectRatio("original");
+        setWidth(img.naturalWidth);
+        setHeight(img.naturalHeight);
+        URL.revokeObjectURL(img.src);
+      };
+    }
+
     const newImages = [...images, ...imageFiles];
     const newPreviewUrls = [
       ...previewUrls,
@@ -159,6 +174,13 @@ export function ImageConverter() {
     setImages(newImages);
     setPreviewUrls(newPreviewUrls);
     setFilenames(newFilenames);
+
+    if (newImages.length === 0) {
+      setOriginalImageRatio(null);
+      setAspectRatio(initialSettings.aspectRatio);
+      setWidth(initialSettings.width);
+      setHeight(initialSettings.height);
+    }
   };
 
   const handleClearAll = () => {
@@ -166,6 +188,10 @@ export function ImageConverter() {
     setImages([]);
     setPreviewUrls([]);
     setFilenames([]);
+    setOriginalImageRatio(null);
+    setAspectRatio(initialSettings.aspectRatio);
+    setWidth(initialSettings.width);
+    setHeight(initialSettings.height);
     toast.info("All images cleared.");
   };
 
@@ -339,13 +365,14 @@ export function ImageConverter() {
     setDefaultBaseName(initialSettings.defaultBaseName);
     setScaleMode(initialSettings.scaleMode);
     setObjectPosition(initialSettings.objectPosition);
+    setOriginalImageRatio(null);
     toast.success("All settings have been reset to their defaults.");
   };
 
   const handleAspectRatioChange = (value: string) => {
     setAspectRatio(value);
 
-    if (value === "custom") {
+    if (value === "custom" || value === "original") {
       return;
     }
 
@@ -369,13 +396,27 @@ export function ImageConverter() {
   };
 
   const handleWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setWidth(e.target.value);
-    setAspectRatio("custom");
+    const newWidthValue = e.target.value;
+    setWidth(newWidthValue);
+
+    if (aspectRatio === 'original' && originalImageRatio && newWidthValue) {
+        const newHeight = Math.round(Number(newWidthValue) / originalImageRatio);
+        setHeight(newHeight);
+    } else if (aspectRatio !== 'original') {
+        setAspectRatio("custom");
+    }
   };
 
   const handleHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setHeight(e.target.value);
-    setAspectRatio("custom");
+    const newHeightValue = e.target.value;
+    setHeight(newHeightValue);
+
+    if (aspectRatio === 'original' && originalImageRatio && newHeightValue) {
+        const newWidth = Math.round(Number(newHeightValue) * originalImageRatio);
+        setWidth(newWidth);
+    } else if (aspectRatio !== 'original') {
+        setAspectRatio("custom");
+    }
   };
 
   const handleSwapDimensions = () => {
@@ -543,13 +584,13 @@ export function ImageConverter() {
                         </TooltipContent>
                       </Tooltip>
                     </div>
-                    <Select value={aspectRatio} onValueChange={handleAspectRatioChange}>
+                    <Select value={aspectRatio} onValueChange={handleAspectRatioChange} disabled={!hasImages && aspectRatio === 'original'}>
                       <SelectTrigger id="aspect-ratio" className="mt-2">
                         <SelectValue placeholder="Select aspect ratio" />
                       </SelectTrigger>
                       <SelectContent>
                         {aspectRatios.map((ratio) => (
-                          <SelectItem key={ratio.value} value={ratio.value}>
+                          <SelectItem key={ratio.value} value={ratio.value} disabled={ratio.value === 'original' && !originalImageRatio}>
                             {ratio.name}
                           </SelectItem>
                         ))}