[dyad] Added 'Keep Orientation' checkbox - wrote 1 file(s)

src/components/image-converter.tsx

@@ -21,6 +21,7 @@ import { Upload, Download, X, Trash2, Check } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Accordion,
   AccordionContent,
@@ -45,6 +46,7 @@ export function ImageConverter() {
   const [width, setWidth] = useState<number | string>("");
   const [height, setHeight] = useState<number | string>("");
   const [aspectRatio, setAspectRatio] = useState<string>("custom");
+  const [keepOrientation, setKeepOrientation] = useState<boolean>(true);
   const [format, setFormat] = useState<"png" | "jpeg" | "webp">("webp");
   const [quality, setQuality] = useState<number>(90);
   
@@ -145,7 +147,7 @@ export function ImageConverter() {
     setFilenames(newFilenames);
   };
 
-  const generateFinalFilename = (index: number, withDimensions: boolean = false) => {
+  const generateFinalFilename = (index: number) => {
     const baseName = filenames[index] || "filename";
     let finalName = `${prefix}${baseName}${suffix}`;
 
@@ -154,10 +156,6 @@ export function ImageConverter() {
       finalName += `${counter}`;
     }
     
-    if (withDimensions && width && height) {
-      finalName += `_${width}x${height}`;
-    }
-
     return finalName;
   };
 
@@ -169,8 +167,16 @@ export function ImageConverter() {
 
       img.onload = () => {
         const canvas = document.createElement("canvas");
-        const targetWidth = width ? Number(width) : img.naturalWidth;
-        const targetHeight = height ? Number(height) : img.naturalHeight;
+        let targetWidth = width ? Number(width) : img.naturalWidth;
+        let targetHeight = height ? Number(height) : img.naturalHeight;
+
+        if (keepOrientation && width && height) {
+          const isOriginalPortrait = img.naturalHeight > img.naturalWidth;
+          const isTargetPortrait = Number(height) > Number(width);
+          if (isOriginalPortrait !== isTargetPortrait) {
+            [targetWidth, targetHeight] = [targetHeight, targetWidth];
+          }
+        }
 
         canvas.width = targetWidth;
         canvas.height = targetHeight;
@@ -225,7 +231,7 @@ export function ImageConverter() {
           const link = document.createElement("a");
           link.href = dataUrl;
           
-          const dimensionSuffix = width && height ? `_${width}x${height}` : '';
+          const dimensionSuffix = width && height ? `_${targetWidth}x${targetHeight}` : '';
           link.download = `${generateFinalFilename(index)}${dimensionSuffix}.${format}`;
           
           document.body.appendChild(link);
@@ -369,6 +375,10 @@ export function ImageConverter() {
                     <Input id="height" type="number" placeholder="Original" value={height} onChange={handleHeightChange} />
                   </div>
                 </div>
+                <div className="flex items-center space-x-2 pt-2">
+                  <Checkbox id="keep-orientation" checked={keepOrientation} onCheckedChange={(checked) => setKeepOrientation(Boolean(checked))} />
+                  <Label htmlFor="keep-orientation" className="cursor-pointer">Keep original orientation</Label>
+                </div>
               </div>
               <div className="mt-4 space-y-2">
                 <Label htmlFor="scale-mode">Scaling</Label>
@@ -527,7 +537,9 @@ export function ImageConverter() {
             <CardContent>
               <div className="space-y-4">
                 {previewUrls.map((url, index) => {
-                  const finalFilename = generateFinalFilename(index, true);
+                  const baseFilename = generateFinalFilename(index);
+                  const dimensionSuffix = width && height ? `_${width}x${height}` : '';
+                  const finalFilename = `${baseFilename}${dimensionSuffix}`;
                   return (
                     <div key={url} className="p-4 border rounded-lg flex items-center gap-4">
                       <img src={url} alt={`Preview ${index + 1}`} className="w-20 h-20 object-cover rounded-md shrink-0" />