Daniel Bedeleanu
37b3ae7ae8
- Shows which edge is Top, Bottom, Left, Right on crop rectangle - Removes ambiguity about crop box orientation - Green labels on all four edges for clear visual reference
394 lines
15 KiB
TypeScript
394 lines
15 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect, useRef } from 'react';
|
||
import { Item } from '@/lib/db';
|
||
import { X } from 'lucide-react';
|
||
|
||
interface DebugRotationPanelProps {
|
||
item: Item;
|
||
imageUrl: string;
|
||
originalPhotoPath?: string;
|
||
originalCropBounds?: { x: number; y: number; width: number; height: number };
|
||
originalRotation?: number;
|
||
imageProcessing?: any;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export function DebugRotationPanel({
|
||
item,
|
||
imageUrl,
|
||
originalPhotoPath,
|
||
originalCropBounds,
|
||
originalRotation = 0,
|
||
imageProcessing,
|
||
onClose,
|
||
}: DebugRotationPanelProps) {
|
||
const [rotation, setRotation] = useState(originalRotation);
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const [log, setLog] = useState('');
|
||
const imageRef = useRef<HTMLImageElement | null>(null);
|
||
const [imageLoaded, setImageLoaded] = useState(false);
|
||
const [scaledDimensions, setScaledDimensions] = useState({ width: 0, height: 0, scale: 1 });
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Adjustable crop bounds (in original image coordinates)
|
||
const [adjustedCropBounds, setAdjustedCropBounds] = useState<{ x: number; y: number; width: number; height: number } | null>(null);
|
||
const [draggingState, setDraggingState] = useState<{ type: string; startX: number; startY: number; startBounds: any } | null>(null);
|
||
|
||
// Use original photo path if available, otherwise fall back to processed image URL
|
||
const displayImageUrl = originalPhotoPath ? originalPhotoPath : imageUrl;
|
||
|
||
const commonAngles = [
|
||
{ label: '0°', value: 0 },
|
||
{ label: '+22°', value: 22 },
|
||
{ label: '-22°', value: -22 },
|
||
{ label: '+45°', value: 45 },
|
||
{ label: '-45°', value: -45 },
|
||
{ label: '+90°', value: 90 },
|
||
{ label: '-90°', value: -90 },
|
||
{ label: '±180°', value: 180 },
|
||
];
|
||
|
||
const updateLog = (message: string) => {
|
||
setLog(message);
|
||
};
|
||
|
||
// Get the crop bounds to display (adjusted if user modified, otherwise original)
|
||
const displayCropBounds = adjustedCropBounds || originalCropBounds;
|
||
|
||
// Handle mouse down on canvas for dragging/resizing
|
||
const handleCanvasMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||
if (!canvasRef.current || !displayCropBounds) return;
|
||
|
||
const rect = canvasRef.current.getBoundingClientRect();
|
||
const mouseX = (e.clientX - rect.left) / (rect.width / scaledDimensions.width);
|
||
const mouseY = (e.clientY - rect.top) / (rect.height / scaledDimensions.height);
|
||
|
||
// Convert screen coords to original image coords
|
||
const scale = scaledDimensions.scale;
|
||
const origX = mouseX / scale;
|
||
const origY = mouseY / scale;
|
||
|
||
const cropX = displayCropBounds.x;
|
||
const cropY = displayCropBounds.y;
|
||
const cropW = displayCropBounds.width;
|
||
const cropH = displayCropBounds.height;
|
||
|
||
const margin = 15; // pixels in original coords for resize handles
|
||
|
||
let dragType = '';
|
||
if (origX >= cropX - margin && origX <= cropX + margin && origY >= cropY - margin && origY <= cropY + margin) {
|
||
dragType = 'nw'; // NW corner
|
||
} else if (origX >= cropX + cropW - margin && origX <= cropX + cropW + margin && origY >= cropY - margin && origY <= cropY + margin) {
|
||
dragType = 'ne'; // NE corner
|
||
} else if (origX >= cropX - margin && origX <= cropX + margin && origY >= cropY + cropH - margin && origY <= cropY + cropH + margin) {
|
||
dragType = 'sw'; // SW corner
|
||
} else if (origX >= cropX + cropW - margin && origX <= cropX + cropW + margin && origY >= cropY + cropH - margin && origY <= cropY + cropH + margin) {
|
||
dragType = 'se'; // SE corner
|
||
} else if (origX >= cropX && origX <= cropX + cropW && origY >= cropY && origY <= cropY + cropH) {
|
||
dragType = 'move'; // Inside the box
|
||
}
|
||
|
||
if (dragType) {
|
||
setDraggingState({
|
||
type: dragType,
|
||
startX: origX,
|
||
startY: origY,
|
||
startBounds: { ...displayCropBounds },
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleCanvasMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||
if (!draggingState || !canvasRef.current || !displayCropBounds) return;
|
||
|
||
const rect = canvasRef.current.getBoundingClientRect();
|
||
const mouseX = (e.clientX - rect.left) / (rect.width / scaledDimensions.width);
|
||
const mouseY = (e.clientY - rect.top) / (rect.height / scaledDimensions.height);
|
||
|
||
const scale = scaledDimensions.scale;
|
||
const origX = mouseX / scale;
|
||
const origY = mouseY / scale;
|
||
|
||
const dx = origX - draggingState.startX;
|
||
const dy = origY - draggingState.startY;
|
||
|
||
const startBounds = draggingState.startBounds;
|
||
let newBounds = { ...startBounds };
|
||
|
||
if (draggingState.type === 'move') {
|
||
newBounds.x = Math.max(0, startBounds.x + dx);
|
||
newBounds.y = Math.max(0, startBounds.y + dy);
|
||
} else if (draggingState.type === 'nw') {
|
||
newBounds.x = Math.max(0, startBounds.x + dx);
|
||
newBounds.y = Math.max(0, startBounds.y + dy);
|
||
newBounds.width = Math.max(50, startBounds.width - dx);
|
||
newBounds.height = Math.max(50, startBounds.height - dy);
|
||
} else if (draggingState.type === 'ne') {
|
||
newBounds.y = Math.max(0, startBounds.y + dy);
|
||
newBounds.width = Math.max(50, startBounds.width + dx);
|
||
newBounds.height = Math.max(50, startBounds.height - dy);
|
||
} else if (draggingState.type === 'sw') {
|
||
newBounds.x = Math.max(0, startBounds.x + dx);
|
||
newBounds.width = Math.max(50, startBounds.width - dx);
|
||
newBounds.height = Math.max(50, startBounds.height + dy);
|
||
} else if (draggingState.type === 'se') {
|
||
newBounds.width = Math.max(50, startBounds.width + dx);
|
||
newBounds.height = Math.max(50, startBounds.height + dy);
|
||
}
|
||
|
||
setAdjustedCropBounds(newBounds);
|
||
};
|
||
|
||
const handleCanvasMouseUp = () => {
|
||
setDraggingState(null);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const img = new Image();
|
||
img.crossOrigin = 'anonymous';
|
||
img.onload = () => {
|
||
imageRef.current = img;
|
||
setImageLoaded(true);
|
||
|
||
// Calculate scaled dimensions to fit available space (much larger)
|
||
const maxWidth = 900;
|
||
const maxHeight = 600;
|
||
const scale = Math.min(maxWidth / img.width, maxHeight / img.height);
|
||
const scaledW = img.width * scale;
|
||
const scaledH = img.height * scale;
|
||
setScaledDimensions({ width: scaledW, height: scaledH, scale });
|
||
updateLog(`📸 ${img.width}×${img.height}px → scaled ${scaledW.toFixed(0)}×${scaledH.toFixed(0)}px (${scale.toFixed(2)}x)`);
|
||
};
|
||
img.onerror = () => updateLog('❌ Failed to load image');
|
||
img.src = displayImageUrl;
|
||
}, [displayImageUrl]);
|
||
|
||
useEffect(() => {
|
||
if (!imageLoaded || !imageRef.current || !canvasRef.current || !displayCropBounds) return;
|
||
|
||
const canvas = canvasRef.current;
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) return;
|
||
|
||
const img = imageRef.current;
|
||
const { scale } = scaledDimensions;
|
||
|
||
// Set canvas size to match scaled image
|
||
canvas.width = scaledDimensions.width;
|
||
canvas.height = scaledDimensions.height;
|
||
|
||
// Draw scaled image
|
||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||
|
||
// Calculate crop box in scaled coordinates
|
||
const cropX = displayCropBounds.x * scale;
|
||
const cropY = displayCropBounds.y * scale;
|
||
const cropW = displayCropBounds.width * scale;
|
||
const cropH = displayCropBounds.height * scale;
|
||
|
||
// Save state
|
||
ctx.save();
|
||
|
||
// Draw orientation indicators at corners
|
||
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
|
||
ctx.font = 'bold 14px monospace';
|
||
ctx.textAlign = 'left';
|
||
ctx.textBaseline = 'top';
|
||
ctx.fillText('⬆ UP', 10, 5);
|
||
ctx.fillText('⬅ LEFT', 5, 20);
|
||
|
||
ctx.textAlign = 'right';
|
||
ctx.textBaseline = 'top';
|
||
ctx.fillText('RIGHT ➡', canvas.width - 10, 20);
|
||
|
||
ctx.textAlign = 'left';
|
||
ctx.textBaseline = 'bottom';
|
||
ctx.fillText('⬇ DOWN', 10, canvas.height - 5);
|
||
|
||
// Draw crop bounds rectangle (bright green)
|
||
ctx.strokeStyle = '#00FF00';
|
||
ctx.lineWidth = 4;
|
||
ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
|
||
ctx.shadowBlur = 3;
|
||
ctx.strokeRect(cropX, cropY, cropW, cropH);
|
||
|
||
// Draw edge orientation labels on crop box
|
||
ctx.fillStyle = '#00FF00';
|
||
ctx.font = 'bold 12px monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
|
||
ctx.shadowBlur = 2;
|
||
|
||
// Top edge label
|
||
ctx.fillText('T', cropX + cropW / 2, cropY - 8);
|
||
// Bottom edge label
|
||
ctx.fillText('B', cropX + cropW / 2, cropY + cropH + 8);
|
||
// Left edge label
|
||
ctx.textAlign = 'right';
|
||
ctx.fillText('L', cropX - 8, cropY + cropH / 2);
|
||
// Right edge label
|
||
ctx.textAlign = 'left';
|
||
ctx.fillText('R', cropX + cropW + 8, cropY + cropH / 2);
|
||
|
||
// Draw resize handles at corners
|
||
const handleSize = 8;
|
||
ctx.fillStyle = '#FFB800';
|
||
ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
|
||
ctx.shadowBlur = 2;
|
||
// NW, NE, SW, SE corners
|
||
ctx.fillRect(cropX - handleSize / 2, cropY - handleSize / 2, handleSize, handleSize);
|
||
ctx.fillRect(cropX + cropW - handleSize / 2, cropY - handleSize / 2, handleSize, handleSize);
|
||
ctx.fillRect(cropX - handleSize / 2, cropY + cropH - handleSize / 2, handleSize, handleSize);
|
||
ctx.fillRect(cropX + cropW - handleSize / 2, cropY + cropH - handleSize / 2, handleSize, handleSize);
|
||
|
||
// Draw rotation indicator (rotated rectangle inside crop area)
|
||
if (Math.abs(rotation) > 0.5) {
|
||
ctx.strokeStyle = '#FFB800';
|
||
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();
|
||
ctx.translate(cropX + cropW / 2, cropY + cropH / 2);
|
||
ctx.rotate((rotation * Math.PI) / 180);
|
||
ctx.strokeRect(-cropW / 2, -cropH / 2, cropW, cropH);
|
||
|
||
// Add direction markers to rotated box
|
||
ctx.setLineDash([]);
|
||
ctx.fillStyle = '#FFB800';
|
||
ctx.font = 'bold 12px monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText('↑ TOP', 0, -cropH / 2 - 10);
|
||
ctx.fillText('↓ BTM', 0, cropH / 2 + 10);
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
ctx.restore();
|
||
|
||
// Update log with current state
|
||
let logText = `Rotation: ${rotation}°`;
|
||
if (adjustedCropBounds) {
|
||
logText += ` | Adjusted: (${adjustedCropBounds.x}, ${adjustedCropBounds.y}) ${adjustedCropBounds.width}×${adjustedCropBounds.height}px`;
|
||
} else {
|
||
logText += ` | AI Crop: (${displayCropBounds.x}, ${displayCropBounds.y}) ${displayCropBounds.width}×${displayCropBounds.height}px`;
|
||
}
|
||
updateLog(logText);
|
||
}, [imageLoaded, rotation, displayCropBounds, scaledDimensions, adjustedCropBounds]);
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
|
||
<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-3 border-b border-slate-700 flex items-center justify-between bg-slate-800 flex-shrink-0">
|
||
<h2 className="text-lg font-normal text-white">Debug Rotation & Crop</h2>
|
||
<button
|
||
onClick={onClose}
|
||
className="p-2 hover:bg-slate-700 rounded text-gray-400 hover:text-white transition"
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex gap-4 p-4 flex-1 overflow-hidden">
|
||
{/* Left: Controls */}
|
||
<div className="w-48 bg-slate-800 p-3 rounded space-y-4 flex-shrink-0 overflow-y-auto">
|
||
{/* Rotation Slider */}
|
||
<div>
|
||
<label className="block text-sm font-normal text-white mb-2">
|
||
Rotation: <span className="text-yellow-400">{rotation}°</span>
|
||
</label>
|
||
<input
|
||
type="range"
|
||
min="-180"
|
||
max="180"
|
||
value={rotation}
|
||
onChange={(e) => setRotation(Number(e.target.value))}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
{/* Quick Presets */}
|
||
<div>
|
||
<label className="block text-sm font-normal text-white mb-2">Quick Angles</label>
|
||
<div className="grid grid-cols-2 gap-1">
|
||
{commonAngles.map((angle) => (
|
||
<button
|
||
key={angle.value}
|
||
onClick={() => setRotation(angle.value)}
|
||
className={`py-1 px-2 rounded text-xs font-normal transition ${
|
||
rotation === angle.value
|
||
? 'bg-yellow-600 text-white'
|
||
: 'bg-slate-700 text-gray-300 hover:bg-slate-600'
|
||
}`}
|
||
>
|
||
{angle.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Reset Button */}
|
||
<button
|
||
onClick={() => setAdjustedCropBounds(null)}
|
||
disabled={!adjustedCropBounds}
|
||
className="w-full py-2 px-3 rounded text-sm font-normal bg-slate-700 text-gray-300 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed transition"
|
||
>
|
||
Reset Crop Box
|
||
</button>
|
||
|
||
{/* Original Values */}
|
||
{originalRotation !== undefined && (
|
||
<div className="bg-slate-700 p-3 rounded text-xs space-y-1">
|
||
<h3 className="font-normal text-white">Original AI Values</h3>
|
||
<div className="text-gray-300 font-mono text-xs">
|
||
<div>Rotation: {originalRotation}°</div>
|
||
{originalCropBounds && (
|
||
<>
|
||
<div>Crop ({originalCropBounds.x}, {originalCropBounds.y})</div>
|
||
<div>Size {originalCropBounds.width}×{originalCropBounds.height}</div>
|
||
</>
|
||
)}
|
||
{imageProcessing?.confidence && (
|
||
<div>Confidence: {(imageProcessing.confidence * 100).toFixed(0)}%</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Right: Canvas + Log */}
|
||
<div className="flex-1 flex flex-col gap-3 min-w-0 overflow-hidden">
|
||
{/* Canvas - takes most space */}
|
||
<div className="flex-1 flex flex-col bg-slate-800 p-3 rounded border border-slate-700 overflow-hidden">
|
||
<h3 className="text-xs font-normal text-white mb-2">Preview (Green = Crop, Orange = Rotation)</h3>
|
||
<div className="flex-1 flex items-center justify-center bg-black/70 rounded border border-slate-600 overflow-auto">
|
||
<canvas
|
||
ref={canvasRef}
|
||
className="rounded cursor-move"
|
||
onMouseDown={handleCanvasMouseDown}
|
||
onMouseMove={handleCanvasMouseMove}
|
||
onMouseUp={handleCanvasMouseUp}
|
||
onMouseLeave={handleCanvasMouseUp}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Log - single line */}
|
||
<div className="bg-slate-800 p-2 rounded border border-slate-700 flex-shrink-0">
|
||
<div className="bg-black text-green-400 p-2 rounded font-mono text-xs">
|
||
{log}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|