Sebastian Krüger
841d6ca0a5
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>
73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useToolStore } from '@/store';
|
|
import type { ToolType } from '@/types';
|
|
import {
|
|
Pencil,
|
|
Paintbrush,
|
|
Eraser,
|
|
PaintBucket,
|
|
Blend,
|
|
MousePointer,
|
|
Pipette,
|
|
Type,
|
|
Stamp,
|
|
Droplet,
|
|
Sun,
|
|
Crop,
|
|
} from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const tools: { type: ToolType; icon: React.ReactNode; label: string; shortcut: string }[] = [
|
|
{ type: 'pencil', icon: <Pencil className="h-5 w-5" />, label: 'Pencil', shortcut: '1' },
|
|
{ type: 'brush', icon: <Paintbrush className="h-5 w-5" />, label: 'Brush', shortcut: '2' },
|
|
{ type: 'eraser', icon: <Eraser className="h-5 w-5" />, label: 'Eraser', shortcut: '3' },
|
|
{ type: 'fill', icon: <PaintBucket className="h-5 w-5" />, label: 'Fill', shortcut: '4' },
|
|
{ type: 'gradient', icon: <Blend className="h-5 w-5" />, label: 'Gradient (Drag to create)', shortcut: 'G' },
|
|
{ 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' },
|
|
];
|
|
|
|
export function ToolPalette() {
|
|
const { activeTool, setActiveTool } = useToolStore();
|
|
|
|
return (
|
|
<nav
|
|
className="flex flex-col bg-card border-r border-border w-16"
|
|
role="toolbar"
|
|
aria-label="Drawing tools"
|
|
>
|
|
<div className="border-b border-border p-2">
|
|
<h2 className="text-xs font-semibold text-card-foreground text-center">
|
|
Tools
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-2 space-y-1">
|
|
{tools.map((tool) => (
|
|
<button
|
|
key={tool.type}
|
|
onClick={() => setActiveTool(tool.type)}
|
|
className={cn(
|
|
'w-full aspect-square flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
|
activeTool === tool.type
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'hover:bg-accent text-muted-foreground hover:text-foreground'
|
|
)}
|
|
aria-label={`${tool.label} (${tool.shortcut})`}
|
|
aria-pressed={activeTool === tool.type}
|
|
title={`${tool.label} (${tool.shortcut})`}
|
|
>
|
|
{tool.icon}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|