Text Tool & Typography

Relevant source files

The following files were used as context for generating this wiki page:

• src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-dialog.ts
• src/app/script/klecks/image-operations/render-text.ts
• src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-viewport-ui.ts
• src/app/script/app/kl-app.ts
• src/app/fonts/font-licenses.ts

The Text Tool & Typography system provides the functionality for users to insert, format, and render text onto the painting canvas. It encompasses a high-level UI for property configuration (font, size, color, alignment) and a rendering engine that handles the conversion of text strings into pixel data on specific layers.

The system is integrated into the core application via the Easel toolset and uses a dedicated modal dialog for complex text manipulation. This ensures that typography is treated as a distinct operation with a precise preview before being committed to the KlCanvas.

Sources: src/app/script/app/kl-app.ts:792-835, src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-dialog.ts:16-160

Architecture and Data Flow

The Text Tool follows a modular architecture where the user interface, preview logic, and final rendering are decoupled. When a user activates the Text Tool and clicks the canvas, the application initializes a textToolDialog, which manages the temporary state of the text until the user confirms the action.

Core Components

The typography system is divided into several specialized classes and functions:

Component	Responsibility
textToolDialog	Main coordinator function for the text entry modal. Manages tabs for text content, font settings, and color.
TextToolViewportUI	Provides a live, interactive preview of the text on the canvas. Handles zooming, panning, and rotation within the modal.
renderText	The core rendering function. Uses the Canvas 2D API to draw text strings based on provided parameters.
TRenderTextParam	The primary data structure containing all typography attributes (font, size, color, spacing, etc.).

Sources: src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-dialog.ts:16-35, src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-viewport-ui.ts:28-60, src/app/script/klecks/image-operations/render-text.ts:5-28

Interaction Flow

The following diagram illustrates the lifecycle of a text operation from tool selection to canvas commitment:

Explanation: This sequence diagram shows how the textToolDialog and its components manage the live preview cycle before passing final data back to KlApp for canvas rendering.

Sources: src/app/script/app/kl-app.ts:792-835, src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-dialog.ts:133-149

Text Rendering Logic

The renderText function is responsible for the actual drawing of characters onto a target canvas. It supports multi-line text, custom letter spacing, and line height adjustments.

Bounds Calculation

Before drawing, the system calculates precise text metrics using ctx.measureText. This is crucial for determining the bounding box, especially when text includes complex characters or specific alignment needs.

Explanation: This flowchart details the internal steps taken by the rendering engine to ensure text is correctly positioned and measured relative to its origin point.

Sources: src/app/script/klecks/image-operations/render-text.ts:60-142

Rendering Parameters (TRenderTextParam)

The typography system uses a comprehensive set of parameters to define text appearance:

• Geometry: x, y, and angleRad (rotation).
• Typography: size (px), font (family name), align (left, center, right).
• Styling: isBold, isItalic.
• Layout: letterSpacing (px) and lineHeight (em).
• Appearance: fill (color) and stroke (color and lineWidth).

Sources: src/app/script/klecks/image-operations/render-text.ts:8-28

Typography and Fonts

The project includes a wide range of embedded fonts, often licensed under the SIL Open Font License (OFL).

Font Licensing

The repository explicitly tracks font credits and licenses to ensure compliance. Major fonts included are:

• Caveat: Pablo Impallari.
• Climate Crisis: Eino Korkala & Daniel Coull.
• Dancing Script: Pablo Impallari.
• Silkscreen: Jason Kottke.
• Playpen Sans: Veronika Burian, Laura Meseguer, José Scaglione.

Sources: src/app/fonts/font-licenses.ts:3-1000

User Interface Implementation

The textToolDialog creates a tabbed interface to manage typography complexity:

1. Text Tab: Content entry via TextToolTextUI.
2. Font Tab: Selection of font family and size via TextToolFontUI.
3. Color Tab: Management of fill and stroke colors via TextToolFillUI and TextToolStrokeUI.

The TextToolViewportUI manages the preview area within the modal. It allows users to:

• Pan: Drag with left mouse button or arrow keys.
• Zoom: Use the mouse wheel or UI buttons (-2 to +2 zoom factor).
• Rotate: Adjust a rotation slider (-π to π).

Sources: src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-dialog.ts:77-113, src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-viewport-ui.ts:133-214

Summary

The Text Tool & Typography system provides a robust mechanism for adding vector-like text capabilities to a raster-based painting application. By utilizing a modal-based preview system (TextToolViewportUI) and a precise rendering engine (renderText), it ensures high-quality typography that respects user configurations for layout, style, and canvas transformation.

Sources: src/app/script/app/kl-app.ts:810-835, src/app/script/klecks/ui/modals/text-tool-dialog/text-tool-dialog.ts:133-149