From fea87d3a1ed3d8164b880276fd7f049d8ff6d9ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Fri, 21 Nov 2025 09:45:05 +0100 Subject: [PATCH] feat: implement comprehensive text tool (Phase 11) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- components/canvas/canvas-with-tools.tsx | 2 + components/editor/editor-layout.tsx | 4 + components/modals/text-dialog.tsx | 288 ++++++++++++++++++++++++ components/tools/tool-palette.tsx | 2 + lib/text-utils.ts | 156 +++++++++++++ store/index.ts | 1 + store/text-store.ts | 97 ++++++++ tools/index.ts | 1 + tools/text-tool.ts | 75 ++++++ types/index.ts | 1 + types/text.ts | 40 ++++ 11 files changed, 667 insertions(+) create mode 100644 components/modals/text-dialog.tsx create mode 100644 lib/text-utils.ts create mode 100644 store/text-store.ts create mode 100644 tools/text-tool.ts create mode 100644 types/text.ts diff --git a/components/canvas/canvas-with-tools.tsx b/components/canvas/canvas-with-tools.tsx index c7fc75e..6dc909d 100644 --- a/components/canvas/canvas-with-tools.tsx +++ b/components/canvas/canvas-with-tools.tsx @@ -20,6 +20,7 @@ import { MoveTool, FreeTransformTool, ShapeTool, + TextTool, type BaseTool, } from '@/tools'; import type { PointerState } from '@/types'; @@ -40,6 +41,7 @@ const tools: Record = { move: new MoveTool(), transform: new FreeTransformTool(), shape: new ShapeTool(), + text: new TextTool(), }; export function CanvasWithTools() { diff --git a/components/editor/editor-layout.tsx b/components/editor/editor-layout.tsx index 8cf5803..565bebc 100644 --- a/components/editor/editor-layout.tsx +++ b/components/editor/editor-layout.tsx @@ -9,6 +9,7 @@ import { ToolOptions } from './tool-options'; import { PanelDock } from './panel-dock'; import { ThemeToggle } from './theme-toggle'; import { ToolPalette } from '@/components/tools'; +import { TextDialog } from '@/components/modals/text-dialog'; import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts'; import { useFileOperations } from '@/hooks/use-file-operations'; import { useDragDrop } from '@/hooks/use-drag-drop'; @@ -190,6 +191,9 @@ export function EditorLayout() { {/* Right: Panel Dock */} + + {/* Text Dialog */} + ); } diff --git a/components/modals/text-dialog.tsx b/components/modals/text-dialog.tsx new file mode 100644 index 0000000..5c1d3c5 --- /dev/null +++ b/components/modals/text-dialog.tsx @@ -0,0 +1,288 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { X, Type } from 'lucide-react'; +import { useTextStore } from '@/store/text-store'; +import { TextTool } from '@/tools/text-tool'; +import { WEB_SAFE_FONTS, GOOGLE_FONTS, loadGoogleFont } from '@/lib/text-utils'; +import type { FontStyle, FontWeight, TextAlign } from '@/types/text'; + +export function TextDialog() { + const { + settings, + isDialogOpen, + clickPosition, + setText, + setFontFamily, + setFontSize, + setFontStyle, + setFontWeight, + setColor, + setAlign, + setLineHeight, + setLetterSpacing, + closeDialog, + } = useTextStore(); + + const [text, setTextLocal] = useState(settings.text); + const [isLoadingFont, setIsLoadingFont] = useState(false); + + useEffect(() => { + if (isDialogOpen) { + setTextLocal(settings.text); + } + }, [isDialogOpen, settings.text]); + + if (!isDialogOpen || !clickPosition) return null; + + const handleInsert = async () => { + if (!text.trim()) { + closeDialog(); + return; + } + + // Update text in store + setText(text); + + // Load Google Font if needed + if (GOOGLE_FONTS.includes(settings.fontFamily as any)) { + try { + setIsLoadingFont(true); + await loadGoogleFont(settings.fontFamily); + } catch (error) { + console.error('Failed to load font:', error); + } finally { + setIsLoadingFont(false); + } + } + + // Render text on canvas + TextTool.renderTextOnCanvas(clickPosition.x, clickPosition.y); + + // Close dialog + closeDialog(); + setTextLocal(''); + }; + + const handleCancel = () => { + closeDialog(); + setTextLocal(''); + }; + + const allFonts = [...WEB_SAFE_FONTS, ...GOOGLE_FONTS]; + + return ( +
+
e.stopPropagation()} + > + {/* Header */} +
+
+ +

Add Text

+
+ +
+ + {/* Content */} +
+ {/* Text Input */} +
+ +