feat(phase-13): implement crop tool with visual guides and handles

Add comprehensive crop tool with visual guides, resize handles, and Apply/Cancel UI.

Features:
- Interactive crop area selection with drag-to-create
- 8 resize handles (corners and edges) for precise cropping
- Visual overlay with dimmed areas outside crop region
- Rule of thirds grid overlay for composition guidance
- Drag crop area to reposition
- Apply/Cancel buttons in tool options
- White border and handles for clear visibility

Changes:
- Created tools/crop-tool.ts with CropTool class
- Added crop tool to lib/tool-loader.ts
- Added Crop icon and button to tool palette with 'C' shortcut
- Added crop tool options UI in components/editor/tool-options.tsx
- Exported CropTool from tools/index.ts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-21 19:54:05 +01:00
parent 8f595ac6c4
commit 841d6ca0a5
5 changed files with 411 additions and 1 deletions

View File

@@ -113,6 +113,11 @@ async function loadTool(toolKey: string): Promise<BaseTool> {
tool = new DodgeBurnTool();
break;
}
case 'crop': {
const { CropTool } = await import('@/tools/crop-tool');
tool = new CropTool();
break;
}
default: {
// Fallback to pencil tool
const { PencilTool } = await import('@/tools/pencil-tool');