Sebastian Krüger
69a468141c
- Replaced modal dialog with inline on-canvas text editor - Text objects stored as editable entities (non-rasterized) - Live preview with transparent textarea overlay - Click on existing text to re-edit - Drag transform handles to move text - Auto-commit on click outside (via overlay) - Text selection with visible highlight - Hidden original text during editing to prevent double vision - Position alignment fixes for editing existing text - Keyboard shortcuts: Ctrl+Enter to commit, Escape to cancel 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
export type TextAlign = 'left' | 'center' | 'right';
|
|
export type TextBaseline = 'top' | 'middle' | 'bottom' | 'alphabetic';
|
|
export type FontStyle = 'normal' | 'italic';
|
|
export type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
|
|
|
|
export interface TextSettings {
|
|
text: string;
|
|
fontFamily: string;
|
|
fontSize: number;
|
|
fontStyle: FontStyle;
|
|
fontWeight: FontWeight;
|
|
color: string;
|
|
align: TextAlign;
|
|
baseline: TextBaseline;
|
|
lineHeight: number;
|
|
letterSpacing: number;
|
|
}
|
|
|
|
export interface TextObject {
|
|
id: string;
|
|
layerId: string;
|
|
x: number;
|
|
y: number;
|
|
text: string;
|
|
fontFamily: string;
|
|
fontSize: number;
|
|
fontStyle: FontStyle;
|
|
fontWeight: FontWeight;
|
|
color: string;
|
|
align: TextAlign;
|
|
baseline: TextBaseline;
|
|
lineHeight: number;
|
|
letterSpacing: number;
|
|
}
|
|
|
|
export interface TextStore {
|
|
settings: TextSettings;
|
|
|
|
// Text objects (non-rasterized text)
|
|
textObjects: TextObject[];
|
|
|
|
// On-canvas editor state
|
|
isOnCanvasEditorActive: boolean;
|
|
editorPosition: { x: number; y: number } | null; // Canvas coordinates
|
|
editorText: string; // Current text being edited
|
|
editingTextId: string | null; // ID of text object being edited (null for new text)
|
|
|
|
// Setters
|
|
setText: (text: string) => void;
|
|
setFontFamily: (fontFamily: string) => void;
|
|
setFontSize: (fontSize: number) => void;
|
|
setFontStyle: (fontStyle: FontStyle) => void;
|
|
setFontWeight: (fontWeight: FontWeight) => void;
|
|
setColor: (color: string) => void;
|
|
setAlign: (align: TextAlign) => void;
|
|
setBaseline: (baseline: TextBaseline) => void;
|
|
setLineHeight: (lineHeight: number) => void;
|
|
setLetterSpacing: (letterSpacing: number) => void;
|
|
updateSettings: (settings: Partial<TextSettings>) => void;
|
|
|
|
// Text object management
|
|
addTextObject: (textObject: Omit<TextObject, 'id'>) => void;
|
|
updateTextObject: (id: string, updates: Partial<TextObject>) => void;
|
|
deleteTextObject: (id: string) => void;
|
|
getTextObjectAt: (x: number, y: number, layerId: string) => TextObject | null;
|
|
|
|
// On-canvas editor control
|
|
activateOnCanvasEditor: (canvasX: number, canvasY: number, textId?: string) => void;
|
|
deactivateOnCanvasEditor: () => void;
|
|
updateEditorPosition: (canvasX: number, canvasY: number) => void;
|
|
updateEditorText: (text: string) => void;
|
|
}
|