From 97629decb1a09f83164b7dc9eff03643f66bdcdb Mon Sep 17 00:00:00 2001 From: Daniel Bedeleanu Date: Wed, 22 Apr 2026 12:57:19 +0300 Subject: [PATCH] fix: canvas displays full image by default with auto-fit zoom Fixes issue where image was too small to see full item in modal canvas. Changes: - Calculate initial zoom to fit entire image in 800x600 canvas - Don't zoom in (only zoom out to fit), preserving image clarity - Reset button also resets to fit zoom instead of always 1.0 This ensures users can see the full item from the start and understand what they're adjusting. Co-Authored-By: Claude Haiku 4.5 --- frontend/components/ImageAdjustmentModal.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/frontend/components/ImageAdjustmentModal.tsx b/frontend/components/ImageAdjustmentModal.tsx index ec2dd0fb..3a86de68 100644 --- a/frontend/components/ImageAdjustmentModal.tsx +++ b/frontend/components/ImageAdjustmentModal.tsx @@ -45,6 +45,14 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj setImageDimensions({ width: img.width, height: img.height }); // Initialize crop bounds to full image setCropBounds({ x: 0, y: 0, width: img.width, height: img.height }); + + // Calculate initial zoom to fit image in canvas (800x600) + const canvasWidth = 800; + const canvasHeight = 600; + const zoomX = canvasWidth / img.width; + const zoomY = canvasHeight / img.height; + const fitZoom = Math.min(zoomX, zoomY, 1); // Don't zoom in, only out to fit + setZoom(fitZoom); }; img.src = imageUrl; }, [imageUrl]); @@ -93,11 +101,17 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj const handleReset = () => { setRotation(0); - setZoom(1); setPanX(0); setPanY(0); if (imageRef.current) { setCropBounds({ x: 0, y: 0, width: imageRef.current.width, height: imageRef.current.height }); + // Reset to initial fit zoom + const canvasWidth = 800; + const canvasHeight = 600; + const zoomX = canvasWidth / imageRef.current.width; + const zoomY = canvasHeight / imageRef.current.height; + const fitZoom = Math.min(zoomX, zoomY, 1); + setZoom(fitZoom); } };