Refactor AI image handling in useAiFeatures hook for improved canvas integration and aspect ratio management

hooks/useAiFeatures.ts

@@ -25,22 +25,22 @@ interface UseAiFeaturesProps {
   currentDataURL: string | null;
   showToast: (message: string, type: ToastMessage['type']) => void;
   updateCanvasState: CanvasHistoryHook['updateCanvasState'];
-  setZoomLevel: (zoom: number) => void;
+  setZoomLevel: (zoom: number) => void; 
   aiImageQuality: AiImageQuality;
   aiApiEndpoint: string;
-  currentCanvasWidth: number; // Added
-  currentCanvasHeight: number; // Added
+  currentCanvasWidth: number; 
+  currentCanvasHeight: number; 
 }
 
 export const useAiFeatures = ({
   currentDataURL,
   showToast,
   updateCanvasState,
-  setZoomLevel,
+  setZoomLevel, 
   aiImageQuality,
   aiApiEndpoint,
-  currentCanvasWidth, // Destructure
-  currentCanvasHeight, // Destructure
+  currentCanvasWidth, 
+  currentCanvasHeight, 
 }: UseAiFeaturesProps): AiFeaturesHook => {
   const [isMagicUploading, setIsMagicUploading] = useState<boolean>(false);
   const [showAiEditModal, setShowAiEditModal] = useState<boolean>(false);
@@ -52,50 +52,48 @@ export const useAiFeatures = ({
   const loadAiImageOntoCanvas = useCallback((aiImageDataUrl: string) => {
     const img = new Image();
     img.onload = () => {
-        const targetCanvasWidth = currentCanvasWidth;
-        const targetCanvasHeight = currentCanvasHeight;
-
-        // Calculate dimensions to draw the AI image, maintaining aspect ratio
-        let drawWidth = img.naturalWidth;
-        let drawHeight = img.naturalHeight;
-
-        const canvasAspectRatio = targetCanvasWidth / targetCanvasHeight;
-        const imageAspectRatio = img.naturalWidth / img.naturalHeight;
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = currentCanvasWidth;
+        tempCanvas.height = currentCanvasHeight;
+        const tempCtx = tempCanvas.getContext('2d');
 
-        if (imageAspectRatio > canvasAspectRatio) {
-            // Image is wider relative to canvas: fit by width
-            drawWidth = targetCanvasWidth;
-            drawHeight = targetCanvasWidth / imageAspectRatio;
-        } else {
-            // Image is taller or same aspect ratio: fit by height
-            drawHeight = targetCanvasHeight;
-            drawWidth = targetCanvasHeight * imageAspectRatio;
-        }
+        if (tempCtx) {
+            // Fill background (e.g., white)
+            tempCtx.fillStyle = '#FFFFFF';
+            tempCtx.fillRect(0, 0, currentCanvasWidth, currentCanvasHeight);
 
-        // Ensure dimensions are at least 1px and integers
-        drawWidth = Math.max(1, Math.floor(drawWidth));
-        drawHeight = Math.max(1, Math.floor(drawHeight));
+            let drawWidth = img.naturalWidth;
+            let drawHeight = img.naturalHeight;
 
-        const drawX = (targetCanvasWidth - drawWidth) / 2;
-        const drawY = (targetCanvasHeight - drawHeight) / 2;
+            // Scale image if it's larger than the canvas, preserving aspect ratio
+            if (img.naturalWidth > currentCanvasWidth || img.naturalHeight > currentCanvasHeight) {
+                const aspectRatio = img.naturalWidth / img.naturalHeight;
+                if (currentCanvasWidth / aspectRatio <= currentCanvasHeight) {
+                    drawWidth = currentCanvasWidth;
+                    drawHeight = currentCanvasWidth / aspectRatio;
+                } else {
+                    drawHeight = currentCanvasHeight;
+                    drawWidth = currentCanvasHeight * aspectRatio;
+                }
+            }
+            
+            // Ensure dimensions are at least 1px
+            drawWidth = Math.max(1, Math.floor(drawWidth));
+            drawHeight = Math.max(1, Math.floor(drawHeight));
 
-        const tempCanvas = document.createElement('canvas');
-        tempCanvas.width = targetCanvasWidth;
-        tempCanvas.height = targetCanvasHeight;
-        const tempCtx = tempCanvas.getContext('2d');
+            // Calculate coordinates to center the image
+            const drawX = (currentCanvasWidth - drawWidth) / 2;
+            const drawY = (currentCanvasHeight - drawHeight) / 2;
 
-        if (tempCtx) {
-            tempCtx.fillStyle = '#FFFFFF'; // White background for the canvas
-            tempCtx.fillRect(0, 0, targetCanvasWidth, targetCanvasHeight);
             tempCtx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+            
             const newCanvasState = tempCanvas.toDataURL('image/png');
 
-            // Use current canvas dimensions, not AI image's natural dimensions
-            updateCanvasState(newCanvasState, targetCanvasWidth, targetCanvasHeight);
+            // Update canvas state with the new image, but keep original canvas dimensions
+            updateCanvasState(newCanvasState, currentCanvasWidth, currentCanvasHeight);
 
             setShowAiEditModal(false);
-            showToast('AI image applied!', 'success');
-            setZoomLevel(1); 
+            showToast('AI image applied to canvas!', 'success');
             setAiPrompt(''); 
             setSharedImageUrlForAi(null);
         } else {
@@ -109,7 +107,7 @@ export const useAiFeatures = ({
     };
     img.crossOrigin = "anonymous"; 
     img.src = aiImageDataUrl;
-  }, [showToast, updateCanvasState, setZoomLevel, currentCanvasWidth, currentCanvasHeight]); // Added currentCanvasWidth, currentCanvasHeight
+  }, [showToast, updateCanvasState, currentCanvasWidth, currentCanvasHeight]);
 
   const handleMagicUpload = useCallback(async () => {
     if (isMagicUploading || !currentDataURL) {
@@ -266,4 +264,4 @@ export const useAiFeatures = ({
     handleCancelAiEdit,
     setAiPrompt,
   };
-};
+};