From 7c493c656ad0fe85a498bef03640e5ac1d996a51 Mon Sep 17 00:00:00 2001 From: Daniel Bedeleanu Date: Wed, 22 Apr 2026 11:27:16 +0300 Subject: [PATCH] fix: remove dark overlay from debug panel crop visualization - Removed black overlay that was hiding the image - Draw crop box directly on full-brightness image with drop shadow - Item under crop area now fully visible - Improved visibility of both crop bounds (green) and rotation (orange) --- frontend/components/DebugRotationPanel.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/frontend/components/DebugRotationPanel.tsx b/frontend/components/DebugRotationPanel.tsx index 531d56ea..e43175a9 100644 --- a/frontend/components/DebugRotationPanel.tsx +++ b/frontend/components/DebugRotationPanel.tsx @@ -95,23 +95,20 @@ export function DebugRotationPanel({ // Save state ctx.save(); - // Draw semi-transparent overlay (darken everything outside crop) - ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - - // Clear the crop area (show full brightness) - ctx.clearRect(cropX, cropY, cropW, cropH); - - // Draw crop bounds rectangle + // Draw crop bounds rectangle (bright green) ctx.strokeStyle = '#00FF00'; - ctx.lineWidth = 3; + ctx.lineWidth = 4; + ctx.shadowColor = 'rgba(0, 0, 0, 0.8)'; + ctx.shadowBlur = 3; ctx.strokeRect(cropX, cropY, cropW, cropH); // Draw rotation indicator (rotated rectangle inside crop area) if (Math.abs(rotation) > 0.5) { ctx.strokeStyle = '#FFB800'; - ctx.lineWidth = 2; + ctx.lineWidth = 3; ctx.setLineDash([5, 5]); + ctx.shadowColor = 'rgba(0, 0, 0, 0.8)'; + ctx.shadowBlur = 2; // Draw a rotated rectangle showing where text will be after rotation ctx.save();