Sebastian Krüger
1dca4ccf89
Complete color management system with picker, swatches, and eyedropper: **Color Utilities (lib/color-utils.ts)** - RGB ↔ Hex conversion - RGB ↔ HSV conversion - Color validation (isValidHex) - getColorAtPoint for eyedropper - Default 20-color palette - Hex normalization **Color Store (store/color-store.ts)** - Primary/secondary color management - Recent colors history (max 20) - Custom swatches (max 20) - Color swap functionality - Zustand persist middleware (localStorage) **Components** ColorPicker: - HSV color space selector - Interactive saturation/value picker (200x160px) - Hue slider (vertical gradient) - Hex input with validation - RGB value display - Pointer drag support - Real-time updates - Color preview ColorSwatches: - Default 20-color palette grid (10x2) - Custom swatches with add/remove - Active color highlighting - Hover scaling effect - Delete button on hover - Color tooltips ColorPanel: - Tabbed interface (Picker/Swatches/Recent) - Primary/Secondary color display - Color swap button - Recent colors grid (max 20) - Tab navigation (Palette/Clock icons) - 256px wide panel - Persistent state **Eyedropper Tool** - Pick color from active layer - Click or drag to sample - Updates primary color - Integrates with ColorPanel - Crosshair cursor **Features** ✓ HSV color picker with gradient ✓ Hex color input validation ✓ RGB value display ✓ 20 default color swatches ✓ Unlimited custom swatches (max 20 stored) ✓ Recent colors auto-tracking ✓ Primary/secondary color swap ✓ Eyedropper tool to sample canvas ✓ Persistent color preferences ✓ Smooth drag interactions ✓ Real-time color updates **Integration** - EditorLayout: Added ColorPanel (256px) - ToolPalette: Added Eyedropper icon - CanvasWithTools: Eyedropper support - Tool settings: Removed basic color picker - Color syncs with tool store **UI/UX** - 3-tab navigation (Picker, Swatches, Recent) - Primary color: Large square - Secondary color: Small overlap square - Active tab highlighting - Hover effects on all swatches - Smooth transitions - Keyboard accessible **Performance** - Efficient HSV calculations - LocalStorage persistence - Pointer event optimization - Drag state management - Build time: ~1.3s **State Management** - Zustand store with persist - Auto-add to recent on use - Max limits prevent memory bloat - Clean swap operation Ready for Phase 6: File Operations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useToolStore } from '@/store';
|
|
import type { ToolType } from '@/types';
|
|
import {
|
|
Pencil,
|
|
Paintbrush,
|
|
Eraser,
|
|
PaintBucket,
|
|
MousePointer,
|
|
Pipette,
|
|
} from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const tools: { type: ToolType; icon: React.ReactNode; label: string }[] = [
|
|
{ type: 'pencil', icon: <Pencil className="h-5 w-5" />, label: 'Pencil' },
|
|
{ type: 'brush', icon: <Paintbrush className="h-5 w-5" />, label: 'Brush' },
|
|
{ type: 'eraser', icon: <Eraser className="h-5 w-5" />, label: 'Eraser' },
|
|
{ type: 'fill', icon: <PaintBucket className="h-5 w-5" />, label: 'Fill' },
|
|
{ type: 'eyedropper', icon: <Pipette className="h-5 w-5" />, label: 'Eyedropper' },
|
|
{ type: 'select', icon: <MousePointer className="h-5 w-5" />, label: 'Select' },
|
|
];
|
|
|
|
export function ToolPalette() {
|
|
const { activeTool, setActiveTool } = useToolStore();
|
|
|
|
return (
|
|
<div className="flex flex-col bg-card border-r border-border w-16">
|
|
<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',
|
|
activeTool === tool.type
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'hover:bg-accent text-muted-foreground hover:text-foreground'
|
|
)}
|
|
title={tool.label}
|
|
>
|
|
{tool.icon}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|