diff --git a/frontend/components/DebugRotationPanel.tsx b/frontend/components/DebugRotationPanel.tsx index ba05f9ca..8ce3a22c 100644 --- a/frontend/components/DebugRotationPanel.tsx +++ b/frontend/components/DebugRotationPanel.tsx @@ -213,6 +213,25 @@ export function DebugRotationPanel({ 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';