import { BaseTool } from './base-tool'; import type { PointerState } from '@/types'; import { useTextStore } from '@/store/text-store'; import { useLayerStore } from '@/store/layer-store'; import { useHistoryStore } from '@/store/history-store'; import { DrawCommand } from '@/core/commands/draw-command'; import { renderText } from '@/lib/text-utils'; /** * Text tool - Click to place text on canvas */ export class TextTool extends BaseTool { constructor() { super('Text'); } onPointerDown(pointer: PointerState): void { const layer = this.getActiveLayer(); if (!layer) return; // Open text dialog at click position const { openDialog } = useTextStore.getState(); openDialog(pointer.x, pointer.y); } onPointerMove(): void { // No-op for text tool } onPointerUp(): void { // No-op for text tool } getCursor(): string { return 'text'; } /** * Render text on canvas (called from dialog) */ static renderTextOnCanvas(x: number, y: number): void { const layer = TextTool.getActiveLayerStatic(); if (!layer?.canvas) return; const ctx = layer.canvas.getContext('2d'); if (!ctx) return; const { settings } = useTextStore.getState(); // Create draw command for history const drawCommand = new DrawCommand(layer.id, 'Add Text'); // Render text renderText(ctx, x, y, settings); // Add to history drawCommand.captureAfterState(); const { executeCommand } = useHistoryStore.getState(); executeCommand(drawCommand); // Update layer to trigger re-render const { updateLayer } = useLayerStore.getState(); updateLayer(layer.id, { updatedAt: Date.now() }); } private getActiveLayer() { const { activeLayerId, layers } = useLayerStore.getState(); return layers.find((l) => l.id === activeLayerId); } private static getActiveLayerStatic() { const { activeLayerId, layers } = useLayerStore.getState(); return layers.find((l) => l.id === activeLayerId); } }