fix: disable cropping, keep rotation only

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 <noreply@anthropic.com>
This commit is contained in:
2026-04-22 14:11:02 +03:00
parent e032d3a308
commit 533d6ddf1b
2 changed files with 23 additions and 23 deletions

View File

@@ -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
<div className="bg-slate-900 border border-slate-700 rounded-lg shadow-2xl max-w-6xl w-full max-h-[95vh] overflow-hidden flex flex-col">
{/* Header */}
<div className="p-4 border-b border-slate-700 flex items-center justify-between bg-slate-800">
<h2 className="text-xl font-normal text-white">Adjust Image</h2>
<h2 className="text-xl font-normal text-white">Rotate Image</h2>
<button
onClick={onCancel}
className="p-2 hover:bg-slate-700 rounded text-gray-400 hover:text-white transition"
@@ -276,8 +276,8 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
/>
</div>
{/* Aspect Ratio */}
<div>
{/* Aspect Ratio - DISABLED (cropping not implemented) */}
{/* <div>
<label className="block text-sm font-normal text-white mb-2">Aspect Ratio</label>
<div className="space-y-2">
{aspectRatios.map((ratio) => (
@@ -294,7 +294,7 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
</button>
))}
</div>
</div>
</div> */}
{/* Reset */}
<button

File diff suppressed because one or more lines are too long