Sebastian Krüger
fea87d3a1e
Add complete text rendering system with the following features: **Text Tool Core:** - TextTool class with click-to-place text functionality - Text cursor and pointer event handling - Integration with DrawCommand for undo/redo support **Text Rendering:** - Multi-line text support with line height control - Custom letter spacing - Text alignment (left/center/right) - Font families: 13 web-safe fonts + 14 popular Google Fonts - Dynamic Google Font loading via Web Font Loader API - Font styles (normal/italic) and weights (100-900) **Text Dialog UI:** - Full-featured text editor dialog - Live preview of text with all formatting - Font family selection (web-safe + Google Fonts) - Font size (8-500px), style, and weight controls - Color picker with hex input - Text alignment options - Line height slider (0.5-3x) - Letter spacing slider (-10 to 50px) - Multi-line text input with textarea **State Management:** - text-store with Zustand + persist middleware - All text settings preserved across sessions - Dialog state management (open/close) - Click position tracking **Integration:** - Added text tool to tool palette with Type icon - Registered TextTool in canvas tool system - Added TextDialog to editor layout - Full type safety with TypeScript interfaces **Undoable:** - Text rendering fully integrated with command pattern - Each text insertion creates single undo point - Proper before/after state capture This completes Phase 11 of the implementation plan, marking the transition from MVP to a fully-featured image editor. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useToolStore } from '@/store';
|
|
import type { ToolType } from '@/types';
|
|
import {
|
|
Pencil,
|
|
Paintbrush,
|
|
Eraser,
|
|
PaintBucket,
|
|
MousePointer,
|
|
Pipette,
|
|
Type,
|
|
} 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: 'text', icon: <Type className="h-5 w-5" />, label: 'Text' },
|
|
{ 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>
|
|
);
|
|
}
|