From 533d6ddf1bfe11d89cef0c23b7adffc3b0ba4e3a Mon Sep 17 00:00:00 2001 From: Daniel Bedeleanu Date: Wed, 22 Apr 2026 14:11:02 +0300 Subject: [PATCH] fix: disable cropping, keep rotation only MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cropping UI was a placeholder and never fully implemented. Users couldn't actually select a crop region - it always used full image bounds. Simplified modal to focus on what works: - Rotation adjustment ✅ (fully working) - Zoom/pan for preview ✅ (fully working) - Removed aspect ratio controls (crop not functional) - Changed header to "Rotate Image" Image processing now: 1. Takes user's rotation adjustment 2. Applies rotation to full image 3. No cropping (uses full bounds) 4. Saves rotated image This ensures saved image matches the rotation user selected in modal. Co-Authored-By: Claude Haiku 4.5 --- frontend/components/ImageAdjustmentModal.tsx | 44 ++++++++++---------- frontend/public/sw.js | 2 +- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/frontend/components/ImageAdjustmentModal.tsx b/frontend/components/ImageAdjustmentModal.tsx index f7d53509..b062d3ca 100644 --- a/frontend/components/ImageAdjustmentModal.tsx +++ b/frontend/components/ImageAdjustmentModal.tsx @@ -119,22 +119,18 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj }; const handleConfirm = async () => { - if (!useImage || !cropBounds || !imageRef.current) { - console.log('[Modal] User clicked confirm - no image/crop/useImage flag'); + if (!useImage || !imageRef.current) { + console.log('[Modal] User clicked confirm - no image/useImage flag'); onConfirm(null); return; } console.log('=== IMAGE ADJUSTMENT MODAL DEBUG ==='); console.log('[Original] Image dimensions:', imageDimensions); - console.log('[Original] Image URL:', imageRef.current?.src?.substring(0, 50) + '...'); console.log('[User] Rotation:', rotation, '°'); - console.log('[User] Zoom level:', zoom); - console.log('[User] Pan X/Y:', panX, '/', panY); - console.log('[User] Crop bounds:', cropBounds); console.log('[User] Use image flag:', useImage); - // Process image: apply rotation and crop + // Process image: apply rotation ONLY (no crop) const processCanvas = document.createElement('canvas'); const ctx = processCanvas.getContext('2d'); if (!ctx) { @@ -142,22 +138,21 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj return; } - const { x, y, width, height } = cropBounds; - - console.log('[Processing] Canvas dimensions will be:', width, 'x', height); - console.log('[Processing] Crop region from original:', { x, y, width, height }); - - // Set canvas to crop dimensions + // Use full image dimensions (no cropping) + const { width, height } = imageDimensions; processCanvas.width = width; processCanvas.height = height; - // Apply rotation around crop center and crop + console.log('[Processing] Canvas dimensions:', width, 'x', height); + console.log('[Processing] Applying rotation:', rotation, '°'); + + // Apply rotation around center ctx.save(); ctx.translate(width / 2, height / 2); ctx.rotate((rotation * Math.PI) / 180); - ctx.translate(-imageDimensions.width / 2 + x, -imageDimensions.height / 2 + y); + ctx.translate(-width / 2, -height / 2); - console.log('[Processing] Drawing image to canvas with transforms applied'); + console.log('[Processing] Drawing image with rotation applied'); ctx.drawImage(imageRef.current, 0, 0); ctx.restore(); @@ -169,10 +164,15 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj console.log('[Result] Processed image blob size:', blob.size, 'bytes'); console.log('[Result] Blob type:', blob.type); console.log('=== END DEBUG ==='); - onConfirm({ rotation, cropBounds, imageBlob: blob }); + // Return with full image bounds (no crop) and rotation + onConfirm({ + rotation, + cropBounds: { x: 0, y: 0, width, height }, + imageBlob: blob + }); } else { console.log('[ERROR] Failed to convert canvas to blob'); - onConfirm({ rotation, cropBounds }); + onConfirm({ rotation, cropBounds: { x: 0, y: 0, width, height } }); } }, 'image/jpeg', 0.95); }; @@ -233,7 +233,7 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
{/* Header */}
-

Adjust Image

+

Rotate Image

- {/* Aspect Ratio */} -
+ {/* Aspect Ratio - DISABLED (cropping not implemented) */} + {/*
{aspectRatios.map((ratio) => ( @@ -294,7 +294,7 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj ))}
-
+
*/} {/* Reset */}