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:
@@ -14,6 +14,7 @@ import {
|
||||
Stamp,
|
||||
Droplet,
|
||||
Sun,
|
||||
Crop,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -26,6 +27,7 @@ const tools: { type: ToolType; icon: React.ReactNode; label: string; shortcut: s
|
||||
{ type: 'eyedropper', icon: <Pipette className="h-5 w-5" />, label: 'Eyedropper', shortcut: '5' },
|
||||
{ type: 'text', icon: <Type className="h-5 w-5" />, label: 'Text', shortcut: '6' },
|
||||
{ type: 'select', icon: <MousePointer className="h-5 w-5" />, label: 'Select', shortcut: '7' },
|
||||
{ type: 'crop', icon: <Crop className="h-5 w-5" />, label: 'Crop', shortcut: 'C' },
|
||||
{ type: 'clone', icon: <Stamp className="h-5 w-5" />, label: 'Clone Stamp (Alt+Click source)', shortcut: '8' },
|
||||
{ type: 'smudge', icon: <Droplet className="h-5 w-5" />, label: 'Smudge', shortcut: '9' },
|
||||
{ type: 'dodge', icon: <Sun className="h-5 w-5" />, label: 'Dodge/Burn (Alt for burn)', shortcut: '0' },
|
||||
|
||||
Reference in New Issue
Block a user