@basementuniverse/image-font 1.2.0 → 1.3.0

package/README.md

@@ -119,6 +119,238 @@ font.drawText(context, 'ABC', 0, 0, options);
 
 See './example/example.html' for a full example.
 
+## Glyph layout
+
+For effects that require per-character control — typewriter reveals, path-following, per-character animations — you can separate the *layout* phase from the *draw* phase using `layoutText` and `drawLayout`.
+
+`layoutText` runs the same line-splitting, alignment, and cursor-advance logic as `drawText`, but instead of drawing immediately it returns a `GlyphLayout` object containing a `glyphs` array. Each element of the array is a `GlyphInfo` object describing one character in the rendered output. You can inspect and mutate these objects freely before passing the layout to `drawLayout`.
+
+`drawText` is unchanged and continues to work as before.
+
+### Typewriter reveal
+
+```ts
+const layout = font.layoutText('HELLO WORLD', x, y, options);
+
+// In your update loop, track how many characters have been revealed:
+layout.glyphs.forEach((glyph, i) => {
+  glyph.visible = i < revealedCount;
+});
+
+// In your draw loop:
+font.drawLayout(context, layout);
+```
+
+### Per-character animation (wave)
+
+```ts
+const layout = font.layoutText('HELLO WORLD', x, y, options);
+
+// Each frame, apply a sine-wave vertical offset to every glyph:
+layout.glyphs.forEach((glyph, i) => {
+  glyph.offset = { x: 0, y: Math.sin(Date.now() / 200 + i * 0.5) * 4 };
+});
+
+font.drawLayout(context, layout);
+```
+
+### Per-character colour gradient
+
+```ts
+const layout = font.layoutText('RAINBOW', x, y, options);
+const hueStep = 360 / layout.glyphs.length;
+
+layout.glyphs.forEach((glyph, i) => {
+  glyph.color = `hsl(${i * hueStep}, 100%, 50%)`;
+});
+
+font.drawLayout(context, layout);
+```
+
+### Text along a path
+
+```ts
+const layout = font.layoutText('ALONG A CURVE', 0, 0, options);
+
+// Place each glyph at a point on a path, rotating it to follow the tangent:
+let distance = 0;
+layout.glyphs.forEach(glyph => {
+  const { point, tangentAngle } = samplePath(path, distance + glyph.advance / 2);
+  glyph.position = { x: point.x - glyph.size.x / 2, y: point.y - glyph.size.y / 2 };
+  glyph.rotation = tangentAngle;
+  distance += glyph.advance;
+});
+
+font.drawLayout(context, layout);
+```
+
+### `preDraw` / `postDraw` callbacks
+
+For effects that require additional canvas operations around individual characters (outlines, drop shadows, debug bounds), use the `preDraw` and `postDraw` callbacks on each `GlyphInfo`. The context is saved before and restored after each glyph when any per-glyph property is set.
+
+```ts
+const layout = font.layoutText('OUTLINED', x, y, options);
+
+layout.glyphs.forEach(glyph => {
+  glyph.postDraw = (ctx, g) => {
+    ctx.strokeStyle = 'black';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(g.bounds.x, g.bounds.y, g.bounds.width, g.bounds.height);
+  };
+});
+
+font.drawLayout(context, layout);
+```
+
+## GlyphLayout and GlyphInfo types
+
+```ts
+type GlyphLayout = {
+  /** The original text string that was laid out */
+  text: string;
+
+  /** The x position originally passed to layoutText */
+  x: number;
+
+  /** The y position originally passed to layoutText */
+  y: number;
+
+  /** The rendering options used to produce this layout */
+  options?: ImageFontRenderingOptions;
+
+  /**
+   * The total bounding box of the laid-out text in canvas pixels
+   *
+   * Equivalent to the value returned by measureText with the same arguments
+   */
+  bounds: vec2;
+
+  /**
+   * Per-glyph layout information, one entry per character in the rendered
+   * output (after wrapping/truncation)
+   *
+   * Glyphs with no atlas texture (e.g. spaces) are included with
+   * visible: false so that index-based effects remain aligned with the string
+   */
+  glyphs: GlyphInfo[];
+};
+
+type GlyphInfo = {
+  /** The character this glyph represents */
+  character: string;
+
+  /**
+   * The sequential index of this glyph in the layout (0-based)
+   *
+   * This is the glyph's position in the rendered output (after any wrapping
+   * or truncation applied by the overflow options), not necessarily its index
+   * in the original input string
+   */
+  index: number;
+
+  /** The line index this glyph is on (0-based) */
+  lineIndex: number;
+
+  /**
+   * The top-left draw position of this glyph in canvas pixels
+   *
+   * Computed from the cursor position minus any configured per-character or
+   * global offset, with the font and render scale already applied
+   */
+  position: vec2;
+
+  /**
+   * The size of this glyph's atlas tile in canvas pixels (post-scale)
+   *
+   * Will be (0, 0) for glyphs that have no texture in the atlas (e.g. spaces)
+   */
+  size: vec2;
+
+  /**
+   * The advance width of this glyph in canvas pixels
+   *
+   * This is how far the cursor moves after this glyph, including kerning
+   */
+  advance: number;
+
+  /**
+   * The bounding box of this glyph in canvas pixels
+   *
+   * Equivalent to { x: position.x, y: position.y, width: size.x, height: size.y }.
+   * Useful for hit-testing, debug overlays, and path-following calculations
+   */
+  bounds: { x: number; y: number; width: number; height: number };
+
+  /**
+   * Whether this glyph should be rendered
+   *
+   * Automatically false for characters with no texture in the atlas (e.g.
+   * spaces). Set to false manually to hide individual glyphs (typewriter
+   * reveal etc.)
+   */
+  visible: boolean;
+
+  /**
+   * Additional per-glyph draw offset in canvas pixels, applied on top of the
+   * computed position
+   */
+  offset?: vec2;
+
+  /**
+   * Per-glyph scale multiplier, applied around the pivot point
+   *
+   * Multiplied on top of the font and render scale already baked into
+   * position and size
+   */
+  scale?: number;
+
+  /**
+   * Rotation in radians, applied around the pivot point
+   */
+  rotation?: number;
+
+  /**
+   * The pivot point for rotation and scale transforms, in canvas pixels
+   *
+   * Defaults to the centre of the glyph's bounding box (after any per-glyph
+   * offset is applied)
+   */
+  pivot?: vec2;
+
+  /**
+   * Opacity multiplier (0–1), multiplied against the context's current
+   * globalAlpha at the time drawLayout is called
+   */
+  alpha?: number;
+
+  /**
+   * Per-glyph color override
+   *
+   * Overrides the color set in the layout's ImageFontRenderingOptions for this
+   * glyph only. The coloringMode and coloringFunction from the layout options
+   * are still used
+   */
+  color?: string;
+
+  /**
+   * Called immediately before this glyph is drawn, after all canvas transforms
+   * have been applied
+   *
+   * The context is saved and restored around each glyph when any per-glyph
+   * property (alpha, rotation, scale, preDraw, postDraw) is set
+   */
+  preDraw?: (context: CanvasRenderingContext2D, glyph: GlyphInfo) => void;
+
+  /**
+   * Called immediately after this glyph is drawn, before the context is
+   * restored
+   *
+   * Useful for outlines, drop shadows, or debug bounding boxes
+   */
+  postDraw?: (context: CanvasRenderingContext2D, glyph: GlyphInfo) => void;
+};
+```
+
 ## ImageFont configuration
 
 ```ts
@@ -179,6 +411,8 @@ Also, each character configuration should have a `textureAtlasPosition: vec2` pr
 ## Rendering and measuring options
 
 ```ts
+type OverflowMode = 'word-wrap' | 'character-wrap' | 'hidden' | 'ellipsis' | 'none';
+
 type ImageFontRenderingOptions = {
   /**
    * The scale factor to apply to the font when rendering
@@ -245,9 +479,72 @@ type ImageFontRenderingOptions = {
     texture: HTMLCanvasElement,
     color: string
   ) => void;
+
+  /**
+   * Maximum width of the text in pixels (pre-scale)
+   *
+   * When set, text that exceeds this width will be handled according to the
+   * overflow option. Alignment works correctly regardless of maxWidth.
+   *
+   * If not specified, text will not be wrapped or clipped.
+   */
+  maxWidth?: number;
+
+  /**
+   * How to handle text that exceeds maxWidth
+   *
+   * - 'word-wrap': wrap at word boundaries (falls back to character-wrap for
+   *   single words that exceed maxWidth)
+   * - 'character-wrap': wrap at character boundaries
+   * - 'hidden': text is cut off at maxWidth
+   * - 'ellipsis': text is cut off and an ellipsis string is appended
+   * - 'none': maxWidth is ignored
+   *
+   * Default is 'word-wrap'
+   */
+  overflow?: OverflowMode;
+
+  /**
+   * The string to use as an ellipsis when overflow is 'ellipsis'
+   *
+   * Default is '...'
+   */
+  ellipsisString?: string;
+
+  /**
+   * The height of each line in pixels (pre-scale), scaled by the active scale
+   * factor
+   *
+   * If not specified, defaults to the tallest character defined in the font,
+   * giving consistent line spacing regardless of the actual string content.
+   */
+  lineHeight?: number;
 };
 ```
 
+### Multi-line text example
+
+```ts
+// Word-wrap within 200px, with custom line height
+font.drawText(context, 'HELLO WORLD THIS IS A LONG STRING', x, y, {
+  maxWidth: 200,
+  overflow: 'word-wrap',
+  lineHeight: 50,
+  align: 'center',
+  baseLine: 'top',
+});
+
+// Truncate with ellipsis
+font.drawText(context, 'HELLO WORLD', x, y, {
+  maxWidth: 100,
+  overflow: 'ellipsis',
+  ellipsisString: '...',
+});
+
+// measureText respects wrapping and returns the actual rendered bounding box
+const size = font.measureText('HELLO WORLD', { maxWidth: 100, overflow: 'word-wrap' });
+```
+
 ## Utility scripts
 
 It can be rather tedious creating data for large image-fonts with lots of characters, so I vibe-coded a utility script to help with that in './example/generate-data.html'.

package/build/index.d.ts

@@ -57,6 +57,7 @@ export type ImageFontCharacterConfig = {
     height?: number;
 };
 export type ColoringMode = 'multiply' | 'overlay' | 'hue' | 'custom';
+export type OverflowMode = 'word-wrap' | 'character-wrap' | 'hidden' | 'ellipsis' | 'none';
 export type ImageFontRenderingOptions = {
     /**
      * The scale factor to apply to the font when rendering
@@ -112,6 +113,191 @@ export type ImageFontRenderingOptions = {
      * 'multiply'
      */
     coloringFunction?: (context: CanvasRenderingContext2D, texture: HTMLCanvasElement, color: string) => void;
+    /**
+     * Maximum width of the text in pixels (pre-scale)
+     *
+     * When set, text that exceeds this width will be handled according to the
+     * overflow option
+     *
+     * If not specified, text will not be wrapped or clipped
+     */
+    maxWidth?: number;
+    /**
+     * How to handle text that exceeds maxWidth
+     *
+     * - 'word-wrap': wrap at word boundaries (falls back to character-wrap for
+     *   single words that exceed maxWidth)
+     * - 'character-wrap': wrap at character boundaries
+     * - 'hidden': text is cut off at maxWidth
+     * - 'ellipsis': text is cut off and an ellipsis string is appended
+     * - 'none': maxWidth is ignored
+     *
+     * Default is 'word-wrap'
+     */
+    overflow?: OverflowMode;
+    /**
+     * The string to use as an ellipsis when overflow is 'ellipsis'
+     *
+     * Default is '...'
+     */
+    ellipsisString?: string;
+    /**
+     * The height of each line in pixels (pre-scale)
+     *
+     * If not specified, defaults to the tallest character in the font
+     * (consistent across all strings in this font)
+     */
+    lineHeight?: number;
+};
+export type GlyphInfo = {
+    /**
+     * The character this glyph represents
+     */
+    character: string;
+    /**
+     * The sequential index of this glyph in the layout (0-based)
+     *
+     * This is the glyph's position in the rendered output (after any wrapping or
+     * truncation applied by the overflow options), not necessarily its index in
+     * the original input string
+     */
+    index: number;
+    /**
+     * The line index this glyph is on (0-based)
+     */
+    lineIndex: number;
+    /**
+     * The top-left draw position of this glyph in canvas pixels
+     *
+     * Computed from the cursor position minus any configured per-character or
+     * global offset, with the font and render scale already applied
+     */
+    position: vec2;
+    /**
+     * The size of this glyph's atlas tile in canvas pixels (post-scale)
+     *
+     * Will be (0, 0) for glyphs that have no texture in the atlas (e.g. spaces)
+     */
+    size: vec2;
+    /**
+     * The advance width of this glyph in canvas pixels
+     *
+     * This is how far the cursor moves after this glyph, including kerning
+     */
+    advance: number;
+    /**
+     * The bounding box of this glyph in canvas pixels
+     *
+     * Equivalent to { x: position.x, y: position.y, width: size.x, height: size.y }.
+     * Useful for hit-testing, debug overlays, and path-following calculations
+     */
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Whether this glyph should be rendered
+     *
+     * Automatically false for characters with no texture in the atlas (e.g.
+     * spaces). Set this to false manually to hide individual glyphs, e.g. for
+     * a typewriter reveal effect
+     */
+    visible: boolean;
+    /**
+     * Additional per-glyph draw offset in canvas pixels, applied on top of the
+     * computed position
+     *
+     * Useful for per-character animations such as bobbing, shaking, or
+     * path-following nudges
+     */
+    offset?: vec2;
+    /**
+     * Per-glyph scale multiplier, applied around the pivot point
+     *
+     * Multiplied on top of the font and render scale already baked into
+     * position and size. Useful for pop-in or emphasis animations
+     */
+    scale?: number;
+    /**
+     * Rotation in radians, applied around the pivot point
+     *
+     * Useful for text-along-a-path or per-character wobble animations
+     */
+    rotation?: number;
+    /**
+     * The pivot point for rotation and scale transforms, in canvas pixels
+     *
+     * Defaults to the centre of the glyph's bounding box (after any per-glyph
+     * offset is applied). Set this explicitly for path-following, where each
+     * glyph rotates around a specific point on the path
+     */
+    pivot?: vec2;
+    /**
+     * Opacity multiplier for this glyph (0–1), multiplied against the context's
+     * current globalAlpha at the time drawLayout is called
+     *
+     * Useful for fade-in typewriter effects or translucent ghost glyphs
+     */
+    alpha?: number;
+    /**
+     * Per-glyph color override
+     *
+     * Overrides the color set in the layout's ImageFontRenderingOptions for this
+     * glyph only. The coloringMode and coloringFunction from the layout options
+     * are still used
+     */
+    color?: string;
+    /**
+     * Called for each glyph immediately before it is drawn, after all canvas
+     * transforms (rotation, scale, alpha) have been applied
+     *
+     * Any context changes made here are isolated to this glyph — the context is
+     * saved before and restored after rendering each glyph whenever any
+     * per-glyph property (alpha, rotation, scale, preDraw, postDraw) is set
+     */
+    preDraw?: (context: CanvasRenderingContext2D, glyph: GlyphInfo) => void;
+    /**
+     * Called for each glyph immediately after it is drawn, before the context
+     * is restored
+     *
+     * Useful for drawing outlines, drop shadows, or debug bounding boxes on top
+     * of the glyph
+     */
+    postDraw?: (context: CanvasRenderingContext2D, glyph: GlyphInfo) => void;
+};
+export type GlyphLayout = {
+    /**
+     * The original text string that was laid out
+     */
+    text: string;
+    /**
+     * The x position originally passed to layoutText
+     */
+    x: number;
+    /**
+     * The y position originally passed to layoutText
+     */
+    y: number;
+    /**
+     * The rendering options used to produce this layout
+     */
+    options?: ImageFontRenderingOptions;
+    /**
+     * The total bounding box of the laid-out text in canvas pixels
+     *
+     * Equivalent to the value returned by measureText with the same arguments
+     */
+    bounds: vec2;
+    /**
+     * Per-glyph layout information, one entry per character in the rendered
+     * output (after wrapping/truncation)
+     *
+     * Glyphs with no atlas texture (e.g. spaces) are included with
+     * visible: false so that index-based effects remain aligned with the string
+     */
+    glyphs: GlyphInfo[];
 };
 export declare function isImageFontConfigData(value: unknown): value is ImageFontConfigData;
 export declare class ImageFont {
@@ -138,10 +324,80 @@ export declare class ImageFont {
      * Calculate the height of a single character when rendered with this font
      */
     private measureCharacterHeight;
+    /**
+     * Get the effective line height in scaled pixels
+     *
+     * If lineHeight is specified in options, it is used (scaled). Otherwise,
+     * defaults to the tallest character defined in the font config, which gives
+     * consistent line spacing regardless of the actual string being rendered.
+     */
+    private measureLineHeight;
+    /**
+     * Measure the width of a line of text (without kerning on the last character)
+     */
+    private measureLineWidth;
+    /**
+     * Split text into lines according to maxWidth and overflow mode
+     */
+    private getLines;
+    /**
+     * Wrap a string at character boundaries to fit within maxWidth (already scaled)
+     */
+    private characterWrapLine;
+    /**
+     * Truncate a line to fit within maxWidth (already scaled), cutting off overflow
+     */
+    private truncateLine;
+    /**
+     * Truncate a line to fit within maxWidth (already scaled), appending ellipsis
+     */
+    private truncateLineWithEllipsis;
+    /**
+     * Compute the glyph layout for a string of text without drawing it
+     *
+     * This is the internal core shared by layoutText and drawText. It runs the
+     * same line-splitting, alignment, and cursor-advance logic, recording each
+     * character's final canvas position and metadata into a GlyphLayout instead
+     * of drawing immediately.
+     */
+    private _computeLayout;
     /**
      * Get the width of a string of text when rendered with this font
      */
     measureText(text: string, options?: ImageFontRenderingOptions): vec2;
+    /**
+     * Compute the layout for a string of text without drawing it
+     *
+     * Returns a GlyphLayout containing per-glyph position, size, and metadata.
+     * The layout can be inspected and modified — for example setting per-glyph
+     * offset, rotation, scale, alpha, color, or visibility — before being passed
+     * to drawLayout to render it.
+     *
+     * This enables effects such as text along a path, typewriter reveals,
+     * per-character colour gradients, and frame-by-frame glyph animations
+     * without any breaking changes to the existing drawText API.
+     */
+    layoutText(text: string, x: number, y: number, options?: ImageFontRenderingOptions): GlyphLayout;
+    /**
+     * Draw a pre-computed GlyphLayout on a canvas
+     *
+     * Iterates the glyphs in the layout and draws each visible one, honouring
+     * any per-glyph properties that were set after layoutText was called:
+     *
+     * - visible    — set to false to skip a glyph (typewriter reveal etc.)
+     * - offset     — additional draw offset in canvas pixels
+     * - scale      — per-glyph scale multiplier applied around the pivot
+     * - rotation   — rotation in radians applied around the pivot
+     * - pivot      — pivot point for rotation/scale (defaults to glyph centre)
+     * - alpha      — opacity multiplier (0–1)
+     * - color      — per-glyph color override
+     * - preDraw    — callback invoked after transforms, before drawing
+     * - postDraw   — callback invoked after drawing, before context restore
+     *
+     * The context is saved and restored around each glyph when any of the
+     * per-glyph transform properties or callbacks are present.
+     */
+    drawLayout(context: CanvasRenderingContext2D, layout: GlyphLayout): void;
     /**
      * Draw text on a canvas using this font
      */

package/build/index.js

@@ -26,7 +26,7 @@ return /******/ (() => { // webpackBootstrap
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.imageFontContentProcessor = exports.ImageFont = exports.isImageFontConfigData = void 0;\nconst texture_atlas_1 = __webpack_require__(/*! @basementuniverse/texture-atlas */ \"./node_modules/@basementuniverse/texture-atlas/build/index.js\");\nconst vec_1 = __webpack_require__(/*! @basementuniverse/vec */ \"./node_modules/@basementuniverse/vec/vec.js\");\n// -----------------------------------------------------------------------------\n// TYPE GUARDS\n// -----------------------------------------------------------------------------\nfunction isImageFontConfigData(value) {\n    if (typeof value !== 'object' || value === null) {\n        return false;\n    }\n    if (!('textureAtlasSize' in value) ||\n        typeof value.textureAtlasSize !== 'object' ||\n        value.textureAtlasSize === null) {\n        return false;\n    }\n    if (!('x' in value.textureAtlasSize) ||\n        typeof value.textureAtlasSize.x !== 'number') {\n        return false;\n    }\n    if (!('y' in value.textureAtlasSize) ||\n        typeof value.textureAtlasSize.y !== 'number') {\n        return false;\n    }\n    if ('offset' in value) {\n        if (typeof value.offset !== 'object' || value.offset === null) {\n            return false;\n        }\n        if (!('x' in value.offset) || typeof value.offset.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.offset) || typeof value.offset.y !== 'number') {\n            return false;\n        }\n    }\n    if ('scale' in value && typeof value.scale !== 'number') {\n        return false;\n    }\n    if ('defaultCharacterConfig' in value) {\n        if (typeof value.defaultCharacterConfig !== 'object' ||\n            value.defaultCharacterConfig === null) {\n            return false;\n        }\n        if (!isImageFontCharacterConfigData(value.defaultCharacterConfig, false)) {\n            return false;\n        }\n    }\n    if (!('characters' in value) ||\n        typeof value.characters !== 'object' ||\n        value.characters === null) {\n        return false;\n    }\n    for (const [char, config] of Object.entries(value.characters)) {\n        // Character keys must be single characters / grapheme clusters\n        if (typeof char !== 'string' || [...char].length !== 1) {\n            return false;\n        }\n        if (!isImageFontCharacterConfigData(config)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.isImageFontConfigData = isImageFontConfigData;\nfunction isImageFontCharacterConfigData(value, includeTextureAtlasPosition = true) {\n    if (typeof value !== 'object' || value === null) {\n        return false;\n    }\n    if (includeTextureAtlasPosition) {\n        if (!('textureAtlasPosition' in value) ||\n            typeof value.textureAtlasPosition !== 'object' ||\n            value.textureAtlasPosition === null) {\n            return false;\n        }\n        if (!('x' in value.textureAtlasPosition) ||\n            typeof value.textureAtlasPosition.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.textureAtlasPosition) ||\n            typeof value.textureAtlasPosition.y !== 'number') {\n            return false;\n        }\n    }\n    if ('offset' in value) {\n        if (typeof value.offset !== 'object' || value.offset === null) {\n            return false;\n        }\n        if (!('x' in value.offset) || typeof value.offset.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.offset) || typeof value.offset.y !== 'number') {\n            return false;\n        }\n    }\n    if ('width' in value && typeof value.width !== 'number') {\n        return false;\n    }\n    if ('height' in value && typeof value.height !== 'number') {\n        return false;\n    }\n    return true;\n}\n// -----------------------------------------------------------------------------\n// IMAGE FONT CLASS\n// -----------------------------------------------------------------------------\nclass ImageFont {\n    constructor(textures, config) {\n        this.colorCache = new Map();\n        this.textures = textures;\n        this.config = {\n            ...ImageFont.DEFAULT_CONFIG,\n            ...config,\n            defaultCharacterConfig: {\n                ...ImageFont.DEFAULT_CONFIG.defaultCharacterConfig,\n                ...config.defaultCharacterConfig,\n            },\n            characters: {\n                ...ImageFont.DEFAULT_CONFIG.characters,\n                ...config.characters,\n            },\n        };\n    }\n    getCacheKey(character, color, mode) {\n        return `${character}:${color}:${mode}`;\n    }\n    /**\n     * Determine the coloring mode to use, falling back to 'multiply' if needed\n     */\n    getColoringMode(options) {\n        var _a;\n        const mode = (_a = options.coloringMode) !== null && _a !== void 0 ? _a : 'multiply';\n        // If mode is 'custom' but no coloring function is provided, we fall back\n        // to 'multiply'\n        if (mode === 'custom' && !options.coloringFunction) {\n            return 'multiply';\n        }\n        return mode;\n    }\n    /**\n     * Create a colored version of a texture using the specified coloring mode\n     */\n    createColoredTexture(texture, color, mode, coloringFunction) {\n        const canvas = document.createElement('canvas');\n        canvas.width = texture.width;\n        canvas.height = texture.height;\n        const context = canvas.getContext('2d');\n        // Draw the original texture\n        context.drawImage(texture, 0, 0);\n        // Apply coloring based on mode\n        switch (mode) {\n            case 'multiply':\n            case 'hue':\n                // Use a second canvas to preserve transparency for multiply/hue modes\n                const tempCanvas = document.createElement('canvas');\n                tempCanvas.width = texture.width;\n                tempCanvas.height = texture.height;\n                const tempContext = tempCanvas.getContext('2d');\n                // Draw the character on the temp canvas\n                tempContext.drawImage(texture, 0, 0);\n                // Apply the color effect (multiply or hue)\n                tempContext.globalCompositeOperation = mode;\n                tempContext.fillStyle = color;\n                tempContext.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n                // Clear the main canvas and draw the colored result using source-atop\n                // to preserve the original alpha channel\n                context.clearRect(0, 0, canvas.width, canvas.height);\n                context.drawImage(texture, 0, 0);\n                context.globalCompositeOperation = 'source-atop';\n                context.drawImage(tempCanvas, 0, 0);\n                break;\n            case 'overlay':\n                context.globalCompositeOperation = 'source-atop';\n                context.globalAlpha = 0.5;\n                context.fillStyle = color;\n                context.fillRect(0, 0, canvas.width, canvas.height);\n                context.globalAlpha = 1.0;\n                break;\n            case 'custom':\n                if (coloringFunction) {\n                    coloringFunction(context, texture, color);\n                }\n                break;\n        }\n        // Reset composite operation\n        context.globalCompositeOperation = 'source-over';\n        return canvas;\n    }\n    /**\n     * Calculate the width of a single character when rendered with this font\n     */\n    measureCharacterWidth(character, options) {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n        const characterConfig = this.config.characters[character];\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        const texture = this.textures[character];\n        let width = 0;\n        if (options === null || options === void 0 ? void 0 : options.monospace) {\n            if ((options === null || options === void 0 ? void 0 : options.kerning) !== undefined) {\n                width = options.kerning;\n            }\n            else {\n                width =\n                    (_e = (_d = (_c = this.config.defaultCharacterConfig) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : texture === null || texture === void 0 ? void 0 : texture.width) !== null && _e !== void 0 ? _e : 0;\n            }\n        }\n        else {\n            width =\n                ((_j = (_h = (_f = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.width) !== null && _f !== void 0 ? _f : (_g = this.config.defaultCharacterConfig) === null || _g === void 0 ? void 0 : _g.width) !== null && _h !== void 0 ? _h : texture === null || texture === void 0 ? void 0 : texture.width) !== null && _j !== void 0 ? _j : 0) * ((_k = options === null || options === void 0 ? void 0 : options.kerning) !== null && _k !== void 0 ? _k : 1);\n        }\n        return width * actualScale;\n    }\n    /**\n     * Calculate the height of a single character when rendered with this font\n     */\n    measureCharacterHeight(character, options) {\n        var _a, _b, _c, _d, _e;\n        const characterConfig = this.config.characters[character];\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        return (((_e = (_c = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.height) !== null && _c !== void 0 ? _c : (_d = this.config.defaultCharacterConfig) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 0) * actualScale);\n    }\n    /**\n     * Get the width of a string of text when rendered with this font\n     */\n    measureText(text, options) {\n        // When calculating the total width, ignore kerning for the last character\n        const characters = Array.from(text);\n        const lastCharacterWidth = this.measureCharacterWidth(characters[characters.length - 1], {\n            scale: options === null || options === void 0 ? void 0 : options.scale,\n        });\n        const width = characters\n            .slice(0, characters.length - 1)\n            .reduce((width, character) => width + this.measureCharacterWidth(character, options), 0) + lastCharacterWidth;\n        const height = Math.max(...characters.map(character => this.measureCharacterHeight(character, options)));\n        return (0, vec_1.vec2)(width, height);\n    }\n    /**\n     * Draw text on a canvas using this font\n     */\n    drawText(context, text, x, y, options) {\n        var _a, _b, _c, _d, _e, _f;\n        const size = this.measureText(text, options);\n        let currentX = x;\n        switch (options === null || options === void 0 ? void 0 : options.align) {\n            case 'center':\n                currentX -= size.x / 2;\n                break;\n            case 'right':\n                currentX -= size.x;\n                break;\n        }\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        let actualY = y;\n        switch (options === null || options === void 0 ? void 0 : options.baseLine) {\n            case 'middle':\n                actualY = y - size.y / 2;\n                break;\n            case 'bottom':\n                actualY = y - size.y;\n                break;\n        }\n        for (const character of text) {\n            const characterWidth = this.measureCharacterWidth(character, options);\n            const texture = this.textures[character];\n            if (!texture) {\n                currentX += characterWidth;\n                continue;\n            }\n            const characterConfig = this.config.characters[character];\n            const offset = vec_1.vec2.add((_c = this.config.offset) !== null && _c !== void 0 ? _c : (0, vec_1.vec2)(), (_f = (_d = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.offset) !== null && _d !== void 0 ? _d : (_e = this.config.defaultCharacterConfig) === null || _e === void 0 ? void 0 : _e.offset) !== null && _f !== void 0 ? _f : (0, vec_1.vec2)());\n            let finalTexture = texture;\n            // Apply coloring if color is provided\n            if (options === null || options === void 0 ? void 0 : options.color) {\n                const coloringMode = this.getColoringMode(options);\n                const cacheKey = this.getCacheKey(character, options.color, coloringMode);\n                // Check if colored texture is already cached\n                if (this.colorCache.has(cacheKey)) {\n                    finalTexture = this.colorCache.get(cacheKey);\n                }\n                else {\n                    // Create colored texture and cache it\n                    finalTexture = this.createColoredTexture(texture, options.color, coloringMode, options.coloringFunction);\n                    // Manage cache size\n                    if (this.colorCache.size >= ImageFont.MAX_COLOR_CACHE_SIZE) {\n                        // Remove oldest entry (first entry in the Map)\n                        const firstKey = this.colorCache.keys().next().value;\n                        if (firstKey !== undefined) {\n                            this.colorCache.delete(firstKey);\n                        }\n                    }\n                    this.colorCache.set(cacheKey, finalTexture);\n                }\n            }\n            context.drawImage(finalTexture, currentX - offset.x * actualScale, actualY - offset.y * actualScale, finalTexture.width * actualScale, finalTexture.height * actualScale);\n            currentX += characterWidth;\n        }\n    }\n}\nexports.ImageFont = ImageFont;\nImageFont.MAX_COLOR_CACHE_SIZE = 1000;\nImageFont.DEFAULT_CONFIG = {\n    offset: (0, vec_1.vec2)(),\n    scale: 1,\n    defaultCharacterConfig: {\n        offset: (0, vec_1.vec2)(),\n    },\n    characters: {},\n};\n// -----------------------------------------------------------------------------\n// CONTENT PROCESSOR\n// -----------------------------------------------------------------------------\n/**\n * Content Manager Processor for loading image fonts\n *\n * @see https://www.npmjs.com/package/@basementuniverse/content-manager\n */\nasync function imageFontContentProcessor(content, data, imageName) {\n    var _a;\n    if (!isImageFontConfigData(data.content)) {\n        throw new Error('Invalid image font config');\n    }\n    const image = (_a = content[imageName]) === null || _a === void 0 ? void 0 : _a.content;\n    if (!image) {\n        throw new Error(`Image '${imageName}' not found`);\n    }\n    // Create the texture atlas\n    const atlas = (0, texture_atlas_1.textureAtlas)(image, {\n        relative: true,\n        width: data.content.textureAtlasSize.x,\n        height: data.content.textureAtlasSize.y,\n        regions: Object.fromEntries(Object.entries(data.content.characters).map(([char, config]) => [\n            char,\n            {\n                x: config.textureAtlasPosition.x,\n                y: config.textureAtlasPosition.y,\n            },\n        ])),\n    });\n    // Create the image font\n    const font = new ImageFont(atlas, data.content);\n    // Store the font in the content manager\n    content[data.name] = {\n        name: data.name,\n        type: 'json',\n        content: font,\n        status: 'processed',\n    };\n}\nexports.imageFontContentProcessor = imageFontContentProcessor;\n\n\n//# sourceURL=webpack://@basementuniverse/image-font/./index.ts?\n}");
+eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.imageFontContentProcessor = exports.ImageFont = exports.isImageFontConfigData = void 0;\nconst texture_atlas_1 = __webpack_require__(/*! @basementuniverse/texture-atlas */ \"./node_modules/@basementuniverse/texture-atlas/build/index.js\");\nconst vec_1 = __webpack_require__(/*! @basementuniverse/vec */ \"./node_modules/@basementuniverse/vec/vec.js\");\n// -----------------------------------------------------------------------------\n// TYPE GUARDS\n// -----------------------------------------------------------------------------\nfunction isImageFontConfigData(value) {\n    if (typeof value !== 'object' || value === null) {\n        return false;\n    }\n    if (!('textureAtlasSize' in value) ||\n        typeof value.textureAtlasSize !== 'object' ||\n        value.textureAtlasSize === null) {\n        return false;\n    }\n    if (!('x' in value.textureAtlasSize) ||\n        typeof value.textureAtlasSize.x !== 'number') {\n        return false;\n    }\n    if (!('y' in value.textureAtlasSize) ||\n        typeof value.textureAtlasSize.y !== 'number') {\n        return false;\n    }\n    if ('offset' in value) {\n        if (typeof value.offset !== 'object' || value.offset === null) {\n            return false;\n        }\n        if (!('x' in value.offset) || typeof value.offset.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.offset) || typeof value.offset.y !== 'number') {\n            return false;\n        }\n    }\n    if ('scale' in value && typeof value.scale !== 'number') {\n        return false;\n    }\n    if ('defaultCharacterConfig' in value) {\n        if (typeof value.defaultCharacterConfig !== 'object' ||\n            value.defaultCharacterConfig === null) {\n            return false;\n        }\n        if (!isImageFontCharacterConfigData(value.defaultCharacterConfig, false)) {\n            return false;\n        }\n    }\n    if (!('characters' in value) ||\n        typeof value.characters !== 'object' ||\n        value.characters === null) {\n        return false;\n    }\n    for (const [char, config] of Object.entries(value.characters)) {\n        // Character keys must be single characters / grapheme clusters\n        if (typeof char !== 'string' || [...char].length !== 1) {\n            return false;\n        }\n        if (!isImageFontCharacterConfigData(config)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.isImageFontConfigData = isImageFontConfigData;\nfunction isImageFontCharacterConfigData(value, includeTextureAtlasPosition = true) {\n    if (typeof value !== 'object' || value === null) {\n        return false;\n    }\n    if (includeTextureAtlasPosition) {\n        if (!('textureAtlasPosition' in value) ||\n            typeof value.textureAtlasPosition !== 'object' ||\n            value.textureAtlasPosition === null) {\n            return false;\n        }\n        if (!('x' in value.textureAtlasPosition) ||\n            typeof value.textureAtlasPosition.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.textureAtlasPosition) ||\n            typeof value.textureAtlasPosition.y !== 'number') {\n            return false;\n        }\n    }\n    if ('offset' in value) {\n        if (typeof value.offset !== 'object' || value.offset === null) {\n            return false;\n        }\n        if (!('x' in value.offset) || typeof value.offset.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.offset) || typeof value.offset.y !== 'number') {\n            return false;\n        }\n    }\n    if ('width' in value && typeof value.width !== 'number') {\n        return false;\n    }\n    if ('height' in value && typeof value.height !== 'number') {\n        return false;\n    }\n    return true;\n}\n// -----------------------------------------------------------------------------\n// IMAGE FONT CLASS\n// -----------------------------------------------------------------------------\nclass ImageFont {\n    constructor(textures, config) {\n        this.colorCache = new Map();\n        this.textures = textures;\n        this.config = {\n            ...ImageFont.DEFAULT_CONFIG,\n            ...config,\n            defaultCharacterConfig: {\n                ...ImageFont.DEFAULT_CONFIG.defaultCharacterConfig,\n                ...config.defaultCharacterConfig,\n            },\n            characters: {\n                ...ImageFont.DEFAULT_CONFIG.characters,\n                ...config.characters,\n            },\n        };\n    }\n    getCacheKey(character, color, mode) {\n        return `${character}:${color}:${mode}`;\n    }\n    /**\n     * Determine the coloring mode to use, falling back to 'multiply' if needed\n     */\n    getColoringMode(options) {\n        var _a;\n        const mode = (_a = options.coloringMode) !== null && _a !== void 0 ? _a : 'multiply';\n        // If mode is 'custom' but no coloring function is provided, we fall back\n        // to 'multiply'\n        if (mode === 'custom' && !options.coloringFunction) {\n            return 'multiply';\n        }\n        return mode;\n    }\n    /**\n     * Create a colored version of a texture using the specified coloring mode\n     */\n    createColoredTexture(texture, color, mode, coloringFunction) {\n        const canvas = document.createElement('canvas');\n        canvas.width = texture.width;\n        canvas.height = texture.height;\n        const context = canvas.getContext('2d');\n        // Draw the original texture\n        context.drawImage(texture, 0, 0);\n        // Apply coloring based on mode\n        switch (mode) {\n            case 'multiply':\n            case 'hue':\n                // Use a second canvas to preserve transparency for multiply/hue modes\n                const tempCanvas = document.createElement('canvas');\n                tempCanvas.width = texture.width;\n                tempCanvas.height = texture.height;\n                const tempContext = tempCanvas.getContext('2d');\n                // Draw the character on the temp canvas\n                tempContext.drawImage(texture, 0, 0);\n                // Apply the color effect (multiply or hue)\n                tempContext.globalCompositeOperation = mode;\n                tempContext.fillStyle = color;\n                tempContext.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n                // Clear the main canvas and draw the colored result using source-atop\n                // to preserve the original alpha channel\n                context.clearRect(0, 0, canvas.width, canvas.height);\n                context.drawImage(texture, 0, 0);\n                context.globalCompositeOperation = 'source-atop';\n                context.drawImage(tempCanvas, 0, 0);\n                break;\n            case 'overlay':\n                context.globalCompositeOperation = 'source-atop';\n                context.globalAlpha = 0.5;\n                context.fillStyle = color;\n                context.fillRect(0, 0, canvas.width, canvas.height);\n                context.globalAlpha = 1.0;\n                break;\n            case 'custom':\n                if (coloringFunction) {\n                    coloringFunction(context, texture, color);\n                }\n                break;\n        }\n        // Reset composite operation\n        context.globalCompositeOperation = 'source-over';\n        return canvas;\n    }\n    /**\n     * Calculate the width of a single character when rendered with this font\n     */\n    measureCharacterWidth(character, options) {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n        const characterConfig = this.config.characters[character];\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        const texture = this.textures[character];\n        let width = 0;\n        if (options === null || options === void 0 ? void 0 : options.monospace) {\n            if ((options === null || options === void 0 ? void 0 : options.kerning) !== undefined) {\n                width = options.kerning;\n            }\n            else {\n                width =\n                    (_e = (_d = (_c = this.config.defaultCharacterConfig) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : texture === null || texture === void 0 ? void 0 : texture.width) !== null && _e !== void 0 ? _e : 0;\n            }\n        }\n        else {\n            width =\n                ((_j = (_h = (_f = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.width) !== null && _f !== void 0 ? _f : (_g = this.config.defaultCharacterConfig) === null || _g === void 0 ? void 0 : _g.width) !== null && _h !== void 0 ? _h : texture === null || texture === void 0 ? void 0 : texture.width) !== null && _j !== void 0 ? _j : 0) * ((_k = options === null || options === void 0 ? void 0 : options.kerning) !== null && _k !== void 0 ? _k : 1);\n        }\n        return width * actualScale;\n    }\n    /**\n     * Calculate the height of a single character when rendered with this font\n     */\n    measureCharacterHeight(character, options) {\n        var _a, _b, _c, _d, _e;\n        const characterConfig = this.config.characters[character];\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        return (((_e = (_c = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.height) !== null && _c !== void 0 ? _c : (_d = this.config.defaultCharacterConfig) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 0) * actualScale);\n    }\n    /**\n     * Get the effective line height in scaled pixels\n     *\n     * If lineHeight is specified in options, it is used (scaled). Otherwise,\n     * defaults to the tallest character defined in the font config, which gives\n     * consistent line spacing regardless of the actual string being rendered.\n     */\n    measureLineHeight(options) {\n        var _a, _b, _c, _d;\n        if ((options === null || options === void 0 ? void 0 : options.lineHeight) !== undefined) {\n            const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n            return options.lineHeight * actualScale;\n        }\n        // Use the tallest character defined in the font (consistent for any string)\n        const actualScale = ((_c = options === null || options === void 0 ? void 0 : options.scale) !== null && _c !== void 0 ? _c : 1) * ((_d = this.config.scale) !== null && _d !== void 0 ? _d : 1);\n        const allConfigs = [\n            ...Object.values(this.config.characters),\n            this.config.defaultCharacterConfig,\n        ].filter(Boolean);\n        const maxHeight = allConfigs.reduce((max, cfg) => { var _a; return Math.max(max, (_a = cfg.height) !== null && _a !== void 0 ? _a : 0); }, 0);\n        return maxHeight * actualScale;\n    }\n    /**\n     * Measure the width of a line of text (without kerning on the last character)\n     */\n    measureLineWidth(line, options) {\n        if (line.length === 0) {\n            return 0;\n        }\n        const characters = Array.from(line);\n        const lastCharacterWidth = this.measureCharacterWidth(characters[characters.length - 1], { scale: options === null || options === void 0 ? void 0 : options.scale });\n        return (characters\n            .slice(0, characters.length - 1)\n            .reduce((w, ch) => w + this.measureCharacterWidth(ch, options), 0) +\n            lastCharacterWidth);\n    }\n    /**\n     * Split text into lines according to maxWidth and overflow mode\n     */\n    getLines(text, options) {\n        var _a, _b, _c, _d;\n        // If no maxWidth, or overflow is 'none', return single line\n        if (!(options === null || options === void 0 ? void 0 : options.maxWidth) || (options === null || options === void 0 ? void 0 : options.overflow) === 'none') {\n            return [text];\n        }\n        const maxWidth = options.maxWidth * ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        const overflow = (_c = options === null || options === void 0 ? void 0 : options.overflow) !== null && _c !== void 0 ? _c : 'word-wrap';\n        if (overflow === 'hidden') {\n            return [this.truncateLine(text, maxWidth, options)];\n        }\n        if (overflow === 'ellipsis') {\n            const ellipsis = (_d = options === null || options === void 0 ? void 0 : options.ellipsisString) !== null && _d !== void 0 ? _d : '...';\n            return [this.truncateLineWithEllipsis(text, maxWidth, ellipsis, options)];\n        }\n        // word-wrap or character-wrap: build multiple lines\n        const lines = [];\n        if (overflow === 'word-wrap') {\n            // Split on spaces; re-join words greedily\n            const words = text.split(' ');\n            let currentLine = '';\n            for (let i = 0; i < words.length; i++) {\n                const word = words[i];\n                const candidate = currentLine.length > 0 ? currentLine + ' ' + word : word;\n                if (this.measureLineWidth(candidate, options) <= maxWidth) {\n                    currentLine = candidate;\n                }\n                else {\n                    // Flush current line if it has content\n                    if (currentLine.length > 0) {\n                        lines.push(currentLine);\n                        currentLine = '';\n                    }\n                    // Check if the single word itself exceeds maxWidth — fall back to\n                    // character-wrap for that word\n                    if (this.measureLineWidth(word, options) > maxWidth) {\n                        const charWrapped = this.characterWrapLine(word, maxWidth, options);\n                        // All but the last segment become complete lines\n                        for (let j = 0; j < charWrapped.length - 1; j++) {\n                            lines.push(charWrapped[j]);\n                        }\n                        currentLine = charWrapped[charWrapped.length - 1];\n                    }\n                    else {\n                        currentLine = word;\n                    }\n                }\n            }\n            if (currentLine.length > 0) {\n                lines.push(currentLine);\n            }\n        }\n        else {\n            // character-wrap\n            const charWrapped = this.characterWrapLine(text, maxWidth, options);\n            lines.push(...charWrapped);\n        }\n        return lines.length > 0 ? lines : [''];\n    }\n    /**\n     * Wrap a string at character boundaries to fit within maxWidth (already scaled)\n     */\n    characterWrapLine(text, maxWidth, options) {\n        const lines = [];\n        const characters = Array.from(text);\n        let currentLine = '';\n        for (const ch of characters) {\n            const candidate = currentLine + ch;\n            if (this.measureLineWidth(candidate, options) <= maxWidth) {\n                currentLine = candidate;\n            }\n            else {\n                if (currentLine.length > 0) {\n                    lines.push(currentLine);\n                }\n                currentLine = ch;\n            }\n        }\n        if (currentLine.length > 0) {\n            lines.push(currentLine);\n        }\n        return lines.length > 0 ? lines : [''];\n    }\n    /**\n     * Truncate a line to fit within maxWidth (already scaled), cutting off overflow\n     */\n    truncateLine(text, maxWidth, options) {\n        const characters = Array.from(text);\n        let result = '';\n        for (const ch of characters) {\n            const candidate = result + ch;\n            if (this.measureLineWidth(candidate, options) <= maxWidth) {\n                result = candidate;\n            }\n            else {\n                break;\n            }\n        }\n        return result;\n    }\n    /**\n     * Truncate a line to fit within maxWidth (already scaled), appending ellipsis\n     */\n    truncateLineWithEllipsis(text, maxWidth, ellipsis, options) {\n        // If the whole text already fits, no ellipsis needed\n        if (this.measureLineWidth(text, options) <= maxWidth) {\n            return text;\n        }\n        const characters = Array.from(text);\n        let result = '';\n        for (const ch of characters) {\n            const candidate = result + ch + ellipsis;\n            if (this.measureLineWidth(candidate, options) <= maxWidth) {\n                result = result + ch;\n            }\n            else {\n                break;\n            }\n        }\n        return result + ellipsis;\n    }\n    /**\n     * Compute the glyph layout for a string of text without drawing it\n     *\n     * This is the internal core shared by layoutText and drawText. It runs the\n     * same line-splitting, alignment, and cursor-advance logic, recording each\n     * character's final canvas position and metadata into a GlyphLayout instead\n     * of drawing immediately.\n     */\n    _computeLayout(text, x, y, options) {\n        var _a, _b, _c, _d, _e, _f;\n        const lines = this.getLines(text, options);\n        const totalSize = this.measureText(text, options);\n        const lineHeight = this.measureLineHeight(options);\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        // Apply baseline (vertical) alignment to the whole text block\n        let blockY = y;\n        switch (options === null || options === void 0 ? void 0 : options.baseLine) {\n            case 'middle':\n                blockY = y - totalSize.y / 2;\n                break;\n            case 'bottom':\n                blockY = y - totalSize.y;\n                break;\n        }\n        const glyphs = [];\n        let glyphIndex = 0;\n        for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {\n            const line = lines[lineIndex];\n            const lineWidth = this.measureLineWidth(line, options);\n            const actualY = blockY + lineIndex * lineHeight;\n            // Apply horizontal alignment per line\n            let currentX = x;\n            switch (options === null || options === void 0 ? void 0 : options.align) {\n                case 'center':\n                    currentX = x - lineWidth / 2;\n                    break;\n                case 'right':\n                    currentX = x - lineWidth;\n                    break;\n            }\n            for (const character of line) {\n                const characterWidth = this.measureCharacterWidth(character, options);\n                const texture = this.textures[character];\n                const characterConfig = this.config.characters[character];\n                const offset = vec_1.vec2.add((_c = this.config.offset) !== null && _c !== void 0 ? _c : (0, vec_1.vec2)(), (_f = (_d = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.offset) !== null && _d !== void 0 ? _d : (_e = this.config.defaultCharacterConfig) === null || _e === void 0 ? void 0 : _e.offset) !== null && _f !== void 0 ? _f : (0, vec_1.vec2)());\n                let position;\n                let size;\n                if (texture) {\n                    position = (0, vec_1.vec2)(currentX - offset.x * actualScale, actualY - offset.y * actualScale);\n                    size = (0, vec_1.vec2)(texture.width * actualScale, texture.height * actualScale);\n                }\n                else {\n                    position = (0, vec_1.vec2)(currentX, actualY);\n                    size = (0, vec_1.vec2)(0, 0);\n                }\n                glyphs.push({\n                    character,\n                    index: glyphIndex,\n                    lineIndex,\n                    position,\n                    size,\n                    advance: characterWidth,\n                    bounds: {\n                        x: position.x,\n                        y: position.y,\n                        width: size.x,\n                        height: size.y,\n                    },\n                    visible: !!texture,\n                });\n                currentX += characterWidth;\n                glyphIndex++;\n            }\n        }\n        return {\n            text,\n            x,\n            y,\n            options,\n            bounds: totalSize,\n            glyphs,\n        };\n    }\n    /**\n     * Get the width of a string of text when rendered with this font\n     */\n    measureText(text, options) {\n        const lines = this.getLines(text, options);\n        const lineHeight = this.measureLineHeight(options);\n        const width = Math.max(...lines.map(line => this.measureLineWidth(line, options)));\n        const height = lines.length === 1 ? lineHeight : lineHeight * lines.length;\n        return (0, vec_1.vec2)(width, height);\n    }\n    /**\n     * Compute the layout for a string of text without drawing it\n     *\n     * Returns a GlyphLayout containing per-glyph position, size, and metadata.\n     * The layout can be inspected and modified — for example setting per-glyph\n     * offset, rotation, scale, alpha, color, or visibility — before being passed\n     * to drawLayout to render it.\n     *\n     * This enables effects such as text along a path, typewriter reveals,\n     * per-character colour gradients, and frame-by-frame glyph animations\n     * without any breaking changes to the existing drawText API.\n     */\n    layoutText(text, x, y, options) {\n        return this._computeLayout(text, x, y, options);\n    }\n    /**\n     * Draw a pre-computed GlyphLayout on a canvas\n     *\n     * Iterates the glyphs in the layout and draws each visible one, honouring\n     * any per-glyph properties that were set after layoutText was called:\n     *\n     * - visible    — set to false to skip a glyph (typewriter reveal etc.)\n     * - offset     — additional draw offset in canvas pixels\n     * - scale      — per-glyph scale multiplier applied around the pivot\n     * - rotation   — rotation in radians applied around the pivot\n     * - pivot      — pivot point for rotation/scale (defaults to glyph centre)\n     * - alpha      — opacity multiplier (0–1)\n     * - color      — per-glyph color override\n     * - preDraw    — callback invoked after transforms, before drawing\n     * - postDraw   — callback invoked after drawing, before context restore\n     *\n     * The context is saved and restored around each glyph when any of the\n     * per-glyph transform properties or callbacks are present.\n     */\n    drawLayout(context, layout) {\n        var _a, _b, _c, _d, _e, _f;\n        const options = layout.options;\n        for (const glyph of layout.glyphs) {\n            if (!glyph.visible) {\n                continue;\n            }\n            const texture = this.textures[glyph.character];\n            if (!texture) {\n                continue;\n            }\n            const needsContextSave = glyph.alpha !== undefined ||\n                glyph.rotation !== undefined ||\n                glyph.scale !== undefined ||\n                glyph.preDraw !== undefined ||\n                glyph.postDraw !== undefined;\n            if (needsContextSave) {\n                context.save();\n            }\n            // Apply per-glyph alpha (multiplied against current globalAlpha)\n            if (glyph.alpha !== undefined) {\n                context.globalAlpha *= glyph.alpha;\n            }\n            // Resolve final draw position (including optional per-glyph offset)\n            const drawX = glyph.position.x + ((_b = (_a = glyph.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0);\n            const drawY = glyph.position.y + ((_d = (_c = glyph.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0);\n            // Apply rotation and/or per-glyph scale transforms around the pivot\n            if (glyph.rotation !== undefined || glyph.scale !== undefined) {\n                const pivot = (_e = glyph.pivot) !== null && _e !== void 0 ? _e : (0, vec_1.vec2)(drawX + glyph.size.x / 2, drawY + glyph.size.y / 2);\n                context.translate(pivot.x, pivot.y);\n                if (glyph.rotation !== undefined) {\n                    context.rotate(glyph.rotation);\n                }\n                if (glyph.scale !== undefined) {\n                    context.scale(glyph.scale, glyph.scale);\n                }\n                context.translate(-pivot.x, -pivot.y);\n            }\n            // Call preDraw callback (after transforms, before drawing)\n            if (glyph.preDraw) {\n                glyph.preDraw(context, glyph);\n            }\n            // Resolve the effective color: per-glyph color overrides the layout color\n            const effectiveColor = (_f = glyph.color) !== null && _f !== void 0 ? _f : options === null || options === void 0 ? void 0 : options.color;\n            let finalTexture = texture;\n            if (effectiveColor) {\n                const effectiveOptions = glyph.color\n                    ? { ...options, color: glyph.color }\n                    : (options !== null && options !== void 0 ? options : {});\n                const coloringMode = this.getColoringMode(effectiveOptions);\n                const cacheKey = this.getCacheKey(glyph.character, effectiveColor, coloringMode);\n                if (this.colorCache.has(cacheKey)) {\n                    finalTexture = this.colorCache.get(cacheKey);\n                }\n                else {\n                    finalTexture = this.createColoredTexture(texture, effectiveColor, coloringMode, effectiveOptions.coloringFunction);\n                    if (this.colorCache.size >= ImageFont.MAX_COLOR_CACHE_SIZE) {\n                        const firstKey = this.colorCache.keys().next().value;\n                        if (firstKey !== undefined) {\n                            this.colorCache.delete(firstKey);\n                        }\n                    }\n                    this.colorCache.set(cacheKey, finalTexture);\n                }\n            }\n            context.drawImage(finalTexture, drawX, drawY, glyph.size.x, glyph.size.y);\n            // Call postDraw callback (after drawing, before context restore)\n            if (glyph.postDraw) {\n                glyph.postDraw(context, glyph);\n            }\n            if (needsContextSave) {\n                context.restore();\n            }\n        }\n    }\n    /**\n     * Draw text on a canvas using this font\n     */\n    drawText(context, text, x, y, options) {\n        this.drawLayout(context, this._computeLayout(text, x, y, options));\n    }\n}\nexports.ImageFont = ImageFont;\nImageFont.MAX_COLOR_CACHE_SIZE = 1000;\nImageFont.DEFAULT_CONFIG = {\n    offset: (0, vec_1.vec2)(),\n    scale: 1,\n    defaultCharacterConfig: {\n        offset: (0, vec_1.vec2)(),\n    },\n    characters: {},\n};\n// -----------------------------------------------------------------------------\n// CONTENT PROCESSOR\n// -----------------------------------------------------------------------------\n/**\n * Content Manager Processor for loading image fonts\n *\n * @see https://www.npmjs.com/package/@basementuniverse/content-manager\n */\nasync function imageFontContentProcessor(content, data, imageName) {\n    var _a;\n    if (!isImageFontConfigData(data.content)) {\n        throw new Error('Invalid image font config');\n    }\n    const image = (_a = content[imageName]) === null || _a === void 0 ? void 0 : _a.content;\n    if (!image) {\n        throw new Error(`Image '${imageName}' not found`);\n    }\n    // Create the texture atlas\n    const atlas = (0, texture_atlas_1.textureAtlas)(image, {\n        relative: true,\n        width: data.content.textureAtlasSize.x,\n        height: data.content.textureAtlasSize.y,\n        regions: Object.fromEntries(Object.entries(data.content.characters).map(([char, config]) => [\n            char,\n            {\n                x: config.textureAtlasPosition.x,\n                y: config.textureAtlasPosition.y,\n            },\n        ])),\n    });\n    // Create the image font\n    const font = new ImageFont(atlas, data.content);\n    // Store the font in the content manager\n    content[data.name] = {\n        name: data.name,\n        type: 'json',\n        content: font,\n        status: 'processed',\n    };\n}\nexports.imageFontContentProcessor = imageFontContentProcessor;\n\n\n//# sourceURL=webpack://@basementuniverse/image-font/./index.ts?\n}");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basementuniverse/image-font",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A component for rendering text using image fonts",
   "author": "Gordon Larrigan <gordonlarrigan@gmail.com> (https://gordonlarrigan.com)",
   "license": "MIT",