@solidtv/renderer 1.0.0

package/dist/src/core/text-rendering/SdfTextRenderer.js

@@ -0,0 +1,249 @@
+import { hasZeroWidthSpace } from './Utils.js';
+import * as SdfFontHandler from './SdfFontHandler.js';
+import { WebGlRenderer } from '../renderers/webgl/WebGlRenderer.js';
+import { Sdf } from '../shaders/webgl/SdfShader.js';
+import { isProductionEnvironment } from '../../utils.js';
+import { mapTextLayout } from './TextLayoutEngine.js';
+// Type definition to match interface
+const type = 'sdf';
+let sdfShader = null;
+// Initialize the SDF text renderer
+const init = (stage) => {
+    SdfFontHandler.init();
+    // Register SDF shader with the shader manager
+    stage.shManager.registerShaderType('Sdf', Sdf);
+    sdfShader = stage.shManager.createShader('Sdf');
+};
+const font = SdfFontHandler;
+/**
+ * SDF text renderer using MSDF/SDF fonts with WebGL
+ *
+ * @param stage - Stage instance for font resolution
+ * @param props - Text rendering properties
+ * @returns Object containing ImageData and dimensions
+ */
+const renderText = (props) => {
+    // Early return if no text
+    if (props.text.length === 0) {
+        return {
+            width: 0,
+            height: 0,
+        };
+    }
+    // Get font cache for this font family
+    const fontData = SdfFontHandler.getFontData(props.fontFamily);
+    if (fontData === undefined) {
+        // Font not loaded, return empty result
+        return {
+            width: 0,
+            height: 0,
+        };
+    }
+    // Calculate text layout and generate glyph data for caching
+    const layout = generateTextLayout(props, fontData);
+    // For SDF renderer, ImageData is null since we render via WebGL
+    return {
+        remainingLines: 0,
+        hasRemainingText: false,
+        width: layout.width,
+        height: layout.height,
+        layout, // Cache layout for addQuads
+    };
+};
+/**
+ * addQuads is a no-op for the batched SDF path.
+ * Vertex data is now written directly into the shared SDF buffer
+ * by `WebGlRenderer.addSdfQuads` during `renderQuads`.
+ */
+const addQuads = (_layout) => {
+    return null;
+};
+/**
+ * Submit SDF glyphs to the renderer's shared batched buffer.
+ *
+ * Two paths:
+ * 1. **Cache hit** — layout, transform, color, and alpha haven't changed.
+ *    The cached pre-transformed Float32Array is mem-copied directly into the
+ *    shared SDF buffer (no per-glyph matrix math).
+ * 2. **Cache miss** — re-computes per-glyph world-space vertices via
+ *    `addSdfQuads`, then snapshots the result into the cache.
+ */
+const renderQuads = (renderer, layout, _vertexBuffer, renderProps) => {
+    const fontFamily = renderProps.fontFamily;
+    const atlasTexture = SdfFontHandler.getAtlas(fontFamily);
+    if (atlasTexture === null) {
+        return null;
+    }
+    const webGlRenderer = renderer;
+    const cache = renderProps.sdfCache;
+    const ctxTexture = atlasTexture.ctxTexture;
+    // --- Cache-hit fast path ------------------------------------------------
+    if (cache !== undefined && cache.vertices !== null) {
+        const ct = cache.transform;
+        const t = renderProps.globalTransform;
+        if (cache.layoutRef === layout &&
+            cache.color === renderProps.color &&
+            cache.alpha === renderProps.worldAlpha &&
+            ct[0] === t[0] &&
+            ct[1] === t[1] &&
+            ct[2] === t[3] &&
+            ct[3] === t[4] &&
+            ct[4] === t[6] &&
+            ct[5] === t[7]) {
+            webGlRenderer.addSdfCachedQuads(cache.vertices, cache.glyphCount, ctxTexture, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            renderProps.clippingRect, renderProps.worldAlpha, layout.width, layout.height, renderProps.parentHasRenderTexture, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            renderProps.framebufferDimensions, sdfShader);
+            return null;
+        }
+    }
+    // --- Cache-miss slow path -----------------------------------------------
+    const startIdx = webGlRenderer.sdfBufferIdx;
+    webGlRenderer.addSdfQuads(layout.glyphs, layout.fontScale, renderProps.globalTransform, renderProps.color, renderProps.worldAlpha, layout.distanceRange, ctxTexture, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    renderProps.clippingRect, layout.width, layout.height, renderProps.parentHasRenderTexture, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    renderProps.framebufferDimensions, sdfShader);
+    // Snapshot the written vertex data into the cache for future frames
+    if (cache !== undefined) {
+        const endIdx = webGlRenderer.sdfBufferIdx;
+        const len = endIdx - startIdx;
+        if (len > 0) {
+            if (cache.vertices === null || cache.vertices.length !== len) {
+                cache.vertices = new Float32Array(len);
+            }
+            cache.vertices.set(webGlRenderer.fSdfBuffer.subarray(startIdx, endIdx));
+            cache.glyphCount = layout.glyphs.length;
+            cache.color = renderProps.color;
+            cache.alpha = renderProps.worldAlpha;
+            cache.layoutRef = layout;
+            const t = renderProps.globalTransform;
+            const ct = cache.transform;
+            ct[0] = t[0];
+            ct[1] = t[1];
+            ct[2] = t[3];
+            ct[3] = t[4];
+            ct[4] = t[6];
+            ct[5] = t[7];
+        }
+    }
+    return null;
+};
+/**
+ * Generate complete text layout with glyph positioning for caching
+ */
+const generateTextLayout = (props, fontCache) => {
+    const fontSize = props.fontSize;
+    const fontFamily = props.fontFamily;
+    const lineHeight = props.lineHeight;
+    const metrics = SdfFontHandler.getFontMetrics(fontFamily, fontSize);
+    const verticalAlign = props.verticalAlign;
+    const fontData = fontCache.data;
+    const commonFontData = fontData.common;
+    const designFontSize = fontData.info.size;
+    const atlasWidth = commonFontData.scaleW;
+    const atlasHeight = commonFontData.scaleH;
+    const invAtlasWidth = 1 / atlasWidth;
+    const invAtlasHeight = 1 / atlasHeight;
+    const glyphMap = fontCache.glyphMap;
+    const kernings = fontCache.kernings;
+    const fallbackGlyphId = isProductionEnvironment ? 32 : 63;
+    // Calculate the pixel scale from design units to pixels
+    const fontScale = fontSize / designFontSize;
+    const letterSpacing = props.letterSpacing / fontScale;
+    const maxWidth = props.maxWidth / fontScale;
+    const maxHeight = props.maxHeight;
+    const [lines, remainingLines, hasRemainingText, bareLineHeight, lineHeightPx, effectiveWidth, effectiveHeight,] = mapTextLayout(SdfFontHandler.measureText, metrics, props.text, props.textAlign, fontFamily, lineHeight, props.overflowSuffix, props.wordBreak, letterSpacing, props.maxLines, maxWidth, maxHeight);
+    const lineAmount = lines.length;
+    const glyphs = [];
+    let currentX = 0;
+    let currentY = 0;
+    for (let i = 0; i < lineAmount; i++) {
+        const line = lines[i];
+        const textLine = line[0];
+        const textLineLength = textLine.length;
+        let prevGlyphId = 0;
+        currentX = line[3];
+        //convert Y coord to vertex value
+        currentY = line[4] / fontScale;
+        for (let j = 0; j < textLineLength; j++) {
+            const codepoint = textLine.codePointAt(j);
+            if (codepoint > 0xffff) {
+                j++;
+            }
+            if (codepoint === 0x200b) {
+                continue;
+            }
+            const char = textLine[j];
+            if (hasZeroWidthSpace(char) === true) {
+                continue;
+            }
+            // Get glyph data from font handler
+            let glyph = glyphMap.get(codepoint);
+            if (glyph === undefined) {
+                glyph = glyphMap.get(fallbackGlyphId);
+                if (glyph === undefined) {
+                    continue;
+                }
+            }
+            // Kerning offsets the current glyph relative to the previous glyph.
+            let kerning = 0;
+            // Add kerning if there's a previous character
+            if (prevGlyphId !== 0) {
+                const seconds = kernings[glyph.id];
+                if (seconds !== undefined) {
+                    const amount = seconds[prevGlyphId];
+                    if (amount !== undefined) {
+                        kerning = amount;
+                    }
+                }
+            }
+            // Apply pair kerning before placing this glyph.
+            currentX += kerning;
+            // Calculate glyph position and atlas coordinates (in design units)
+            const glyphLayout = {
+                codepoint,
+                glyphId: glyph.id,
+                x: currentX + glyph.xoffset,
+                y: currentY + glyph.yoffset,
+                width: glyph.width,
+                height: glyph.height,
+                xOffset: glyph.xoffset,
+                yOffset: glyph.yoffset,
+                atlasX: glyph.x * invAtlasWidth,
+                atlasY: glyph.y * invAtlasHeight,
+                atlasWidth: glyph.width * invAtlasWidth,
+                atlasHeight: glyph.height * invAtlasHeight,
+            };
+            glyphs.push(glyphLayout);
+            // Advance position with letter spacing (in design units)
+            currentX += glyph.xadvance + letterSpacing;
+            prevGlyphId = glyph.id;
+        }
+        currentY += lineHeightPx;
+    }
+    // Convert final dimensions to pixel space for the layout
+    return {
+        glyphs,
+        distanceRange: fontScale * fontData.distanceField.distanceRange,
+        width: effectiveWidth * fontScale,
+        height: effectiveHeight,
+        fontScale: fontScale,
+        lineHeight: lineHeightPx,
+        fontFamily,
+    };
+};
+/**
+ * SDF Text Renderer - implements TextRenderer interface
+ */
+const SdfTextRenderer = {
+    type,
+    font,
+    renderText,
+    addQuads,
+    renderQuads,
+    init,
+};
+export default SdfTextRenderer;
+//# sourceMappingURL=SdfTextRenderer.js.map

package/dist/src/core/text-rendering/SdfTextRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SdfTextRenderer.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/SdfTextRenderer.ts"],"names":[],"mappings":"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"}

package/dist/src/core/text-rendering/TextLayoutEngine.d.ts

@@ -0,0 +1,18 @@
+import type { FontMetrics, MeasureTextFn, NormalizedFontMetrics, TextLayoutStruct, TextLineStruct, WrappedLinesStruct } from './TextRenderer.js';
+export declare const defaultFontMetrics: FontMetrics;
+export declare const normalizeFontMetrics: (metrics: FontMetrics, fontSize: number) => NormalizedFontMetrics;
+export declare const mapTextLayout: (measureText: MeasureTextFn, metrics: NormalizedFontMetrics, text: string, textAlign: string, fontFamily: string, lineHeight: number, overflowSuffix: string, wordBreak: string, letterSpacing: number, maxLines: number, maxWidth: number, maxHeight: number) => TextLayoutStruct;
+export declare const measureLines: (measureText: MeasureTextFn, lines: string[], fontFamily: string, letterSpacing: number, maxLines: number) => WrappedLinesStruct;
+export declare const wrapText: (measureText: MeasureTextFn, text: string, fontFamily: string, maxWidth: number, letterSpacing: number, overflowSuffix: string, wordBreak: string, maxLines: number) => WrappedLinesStruct;
+export declare const wrapLine: (measureText: MeasureTextFn, line: string, fontFamily: string, maxWidth: number, letterSpacing: number, spaceWidth: number, overflowSuffix: string, overflowWidth: number, wordBreak: string, remainingLines: number) => WrappedLinesStruct;
+/**
+ * Overflow wordBreak strategy, if a word partially fits add it to the line, start new line if necessary or add overflowSuffix.
+ *
+ * @remarks This strategy is similar to 'normal' in html/CSS. However
+ */
+export declare const overflow: (measureText: MeasureTextFn, word: string, wordWidth: number, fontFamily: string, letterSpacing: number, wrappedLines: TextLineStruct[], currentLine: string, currentLineWidth: number, remainingLines: number, remainingWord: string, maxWidth: number, space: string, spaceWidth: number, overflowSuffix: string, overflowWidth: number) => [string, number, string];
+export declare const breakWord: (measureText: MeasureTextFn, word: string, wordWidth: number, fontFamily: string, letterSpacing: number, wrappedLines: TextLineStruct[], currentLine: string, currentLineWidth: number, remainingLines: number, remainingWord: string, maxWidth: number, space: string, spaceWidth: number, overflowSuffix: string, overflowWidth: number) => [string, number, string];
+export declare const breakAll: (measureText: MeasureTextFn, word: string, wordWidth: number, fontFamily: string, letterSpacing: number, wrappedLines: TextLineStruct[], currentLine: string, currentLineWidth: number, remainingLines: number, remainingWord: string, maxWidth: number, space: string, spaceWidth: number, overflowSuffix: string, overflowWidth: number) => [string, number, string];
+export declare const truncateLineEnd: (measureText: MeasureTextFn, fontFamily: string, letterSpacing: number, currentLine: string, currentLineWidth: number, remainingWord: string, maxWidth: number, overflowSuffix: string, overflowWidth: number) => [string, number, string];
+export declare const truncateWord: (measureText: MeasureTextFn, word: string, wordWidth: number, maxWidth: number, fontFamily: string, letterSpacing: number, overflowSuffix: string, overflowWidth: number) => [string, string, number];
+export declare const splitWord: (measureText: MeasureTextFn, word: string, wordWidth: number, maxWidth: number, fontFamily: string, letterSpacing: number) => [string, string, number];

package/dist/src/core/text-rendering/TextLayoutEngine.js

@@ -0,0 +1,380 @@
+// Use the same space regex as Canvas renderer to handle ZWSP
+const spaceRegex = /[ \u200B]+/g;
+export const defaultFontMetrics = {
+    ascender: 800,
+    descender: -200,
+    lineGap: 200,
+    unitsPerEm: 1000,
+};
+export const normalizeFontMetrics = (metrics, fontSize) => {
+    const scale = fontSize / metrics.unitsPerEm;
+    return {
+        ascender: metrics.ascender * scale,
+        descender: metrics.descender * scale,
+        lineGap: metrics.lineGap * scale,
+    };
+};
+export const mapTextLayout = (measureText, metrics, text, textAlign, fontFamily, lineHeight, overflowSuffix, wordBreak, letterSpacing, maxLines, maxWidth, maxHeight) => {
+    const ascPx = metrics.ascender;
+    const descPx = metrics.descender;
+    const bareLineHeight = ascPx - descPx;
+    const lineHeightPx = lineHeight <= 3 ? lineHeight * bareLineHeight : lineHeight;
+    const lineHeightDelta = lineHeightPx - bareLineHeight;
+    const halfDelta = lineHeightDelta * 0.5;
+    let effectiveMaxLines = maxLines;
+    if (maxHeight > 0) {
+        let maxFromHeight = Math.floor(maxHeight / lineHeightPx);
+        //ensure at least 1 line
+        if (maxFromHeight < 1) {
+            maxFromHeight = 1;
+        }
+        if (effectiveMaxLines === 0 || maxFromHeight < effectiveMaxLines) {
+            effectiveMaxLines = maxFromHeight;
+        }
+    }
+    //trim start/end whitespace
+    // text = text.trim();
+    const wrappedText = maxWidth > 0;
+    //wrapText or just measureLines based on maxWidth
+    const [lines, remainingLines, remainingText] = wrappedText === true
+        ? wrapText(measureText, text, fontFamily, maxWidth, letterSpacing, overflowSuffix, wordBreak, effectiveMaxLines)
+        : measureLines(measureText, text.split('\n'), fontFamily, letterSpacing, effectiveMaxLines);
+    let effectiveLineAmount = lines.length;
+    let effectiveMaxWidth = 0;
+    if (effectiveLineAmount > 0) {
+        effectiveMaxWidth = lines[0][1];
+        //check for longest line
+        if (effectiveLineAmount > 1) {
+            for (let i = 1; i < effectiveLineAmount; i++) {
+                effectiveMaxWidth = Math.max(effectiveMaxWidth, lines[i][1]);
+            }
+        }
+    }
+    //update line x offsets
+    if (textAlign !== 'left') {
+        for (let i = 0; i < effectiveLineAmount; i++) {
+            const line = lines[i];
+            const w = line[1];
+            line[3] =
+                textAlign === 'right'
+                    ? effectiveMaxWidth - w
+                    : (effectiveMaxWidth - w) / 2;
+        }
+    }
+    const effectiveMaxHeight = effectiveLineAmount * lineHeightPx;
+    let firstBaseLine = halfDelta;
+    const startY = firstBaseLine;
+    for (let i = 0; i < effectiveLineAmount; i++) {
+        const line = lines[i];
+        line[4] = startY + lineHeightPx * i;
+    }
+    return [
+        lines,
+        remainingLines,
+        remainingText,
+        bareLineHeight,
+        lineHeightPx,
+        effectiveMaxWidth,
+        effectiveMaxHeight,
+    ];
+};
+export const measureLines = (measureText, lines, fontFamily, letterSpacing, maxLines) => {
+    const measuredLines = [];
+    let remainingLines = maxLines > 0 ? maxLines : lines.length;
+    let i = 0;
+    while (remainingLines > 0) {
+        const line = lines[i];
+        i++;
+        remainingLines--;
+        if (line === undefined) {
+            continue;
+        }
+        const width = measureText(line, fontFamily, letterSpacing);
+        measuredLines.push([line, width, false, 0, 0]);
+    }
+    return [
+        measuredLines,
+        remainingLines,
+        maxLines > 0 ? lines.length - measuredLines.length > 0 : false,
+    ];
+};
+export const wrapText = (measureText, text, fontFamily, maxWidth, letterSpacing, overflowSuffix, wordBreak, maxLines) => {
+    const lines = text.split('\n');
+    const wrappedLines = [];
+    // Calculate space width for line wrapping
+    const spaceWidth = measureText(' ', fontFamily, letterSpacing);
+    const overflowWidth = measureText(overflowSuffix, fontFamily, letterSpacing);
+    let wrappedLine = [];
+    let remainingLines = maxLines > 0 ? maxLines : 1000;
+    let hasRemainingText = true;
+    let hasMaxLines = maxLines > 0;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line === undefined) {
+            continue;
+        }
+        [wrappedLine, remainingLines, hasRemainingText] =
+            line.length > 0
+                ? wrapLine(measureText, line, fontFamily, maxWidth, letterSpacing, spaceWidth, overflowSuffix, overflowWidth, wordBreak, remainingLines)
+                : [[['', 0, false, 0, 0]], remainingLines, i < lines.length - 1];
+        remainingLines--;
+        wrappedLines.push(...wrappedLine);
+        if (hasMaxLines === true && remainingLines <= 0) {
+            const lastLine = wrappedLines[wrappedLines.length - 1];
+            if (i < lines.length - 1) {
+                //check if line is truncated already
+                if (lastLine[2] === false) {
+                    let remainingText = '';
+                    const [line, lineWidth] = truncateLineEnd(measureText, fontFamily, letterSpacing, lastLine[0], lastLine[1], remainingText, maxWidth, overflowSuffix, overflowWidth);
+                    lastLine[0] = line;
+                    lastLine[1] = lineWidth;
+                    lastLine[2] = true;
+                }
+            }
+            break;
+        }
+    }
+    return [wrappedLines, remainingLines, hasRemainingText];
+};
+export const wrapLine = (measureText, line, fontFamily, maxWidth, letterSpacing, spaceWidth, overflowSuffix, overflowWidth, wordBreak, remainingLines) => {
+    const words = line.split(spaceRegex);
+    const spaces = line.match(spaceRegex) || [];
+    const wrappedLines = [];
+    let currentLine = '';
+    let currentLineWidth = 0;
+    let hasRemainingText = true;
+    const wrapFn = getWrapStrategy(wordBreak);
+    while (words.length > 0 && remainingLines > 0) {
+        let word = words.shift();
+        let wordWidth = measureText(word, fontFamily, letterSpacing);
+        let remainingWord = '';
+        //handle first word of new line separately to avoid empty line issues
+        if (currentLineWidth === 0) {
+            // Word doesn't fit on current line
+            //if first word doesn't fit on empty line
+            if (wordWidth > maxWidth) {
+                remainingLines--;
+                //truncate word to fit
+                [word, remainingWord, wordWidth] =
+                    remainingLines === 0
+                        ? truncateWord(measureText, word, wordWidth, maxWidth, fontFamily, letterSpacing, overflowSuffix, overflowWidth)
+                        : splitWord(measureText, word, wordWidth, maxWidth, fontFamily, letterSpacing);
+                if (remainingWord.length > 0) {
+                    words.unshift(remainingWord);
+                }
+                // first word doesn't fit on an empty line
+                wrappedLines.push([word, wordWidth, false, 0, 0]);
+            }
+            else if (wordWidth + spaceWidth >= maxWidth) {
+                remainingLines--;
+                // word with space doesn't fit, but word itself fits - put on new line
+                wrappedLines.push([word, wordWidth, false, 0, 0]);
+            }
+            else {
+                currentLine = word;
+                currentLineWidth = wordWidth;
+            }
+            continue;
+        }
+        const space = spaces.shift() || '';
+        // For width calculation, treat ZWSP as having 0 width but regular space functionality
+        const effectiveSpaceWidth = space === '\u200B' ? 0 : spaceWidth;
+        const totalWidth = currentLineWidth + effectiveSpaceWidth + wordWidth;
+        if (totalWidth < maxWidth) {
+            currentLine += effectiveSpaceWidth > 0 ? space + word : word;
+            currentLineWidth = totalWidth;
+            continue;
+        }
+        // Will move to next line after loop finishes
+        remainingLines--;
+        if (totalWidth === maxWidth) {
+            currentLine += effectiveSpaceWidth > 0 ? space + word : word;
+            currentLineWidth = totalWidth;
+            wrappedLines.push([currentLine, currentLineWidth, false, 0, 0]);
+            currentLine = '';
+            currentLineWidth = 0;
+            continue;
+        }
+        [currentLine, currentLineWidth, remainingWord] = wrapFn(measureText, word, wordWidth, fontFamily, letterSpacing, wrappedLines, currentLine, currentLineWidth, remainingLines, remainingWord, maxWidth, space, spaceWidth, overflowSuffix, overflowWidth);
+        if (remainingWord.length > 0) {
+            words.unshift(remainingWord);
+        }
+    }
+    if (currentLineWidth > 0 && remainingLines > 0) {
+        wrappedLines.push([currentLine, currentLineWidth, false, 0, 0]);
+    }
+    return [wrappedLines, remainingLines, hasRemainingText];
+};
+const getWrapStrategy = (wordBreak) => {
+    //** default so probably first out */
+    if (wordBreak === 'break-word') {
+        return breakWord;
+    }
+    //** second most used */
+    if (wordBreak === 'break-all') {
+        return breakAll;
+    }
+    //** most similar to html/CSS 'normal' not really used in TV apps */
+    if (wordBreak === 'overflow') {
+        return overflow;
+    }
+    //fallback
+    return breakWord;
+};
+//break strategies
+/**
+ * Overflow wordBreak strategy, if a word partially fits add it to the line, start new line if necessary or add overflowSuffix.
+ *
+ * @remarks This strategy is similar to 'normal' in html/CSS. However
+ */
+export const overflow = (measureText, word, wordWidth, fontFamily, letterSpacing, wrappedLines, currentLine, currentLineWidth, remainingLines, remainingWord, maxWidth, space, spaceWidth, overflowSuffix, overflowWidth) => {
+    currentLine += space + word;
+    currentLineWidth += spaceWidth + wordWidth;
+    if (remainingLines === 0) {
+        currentLine += overflowSuffix;
+        currentLineWidth += overflowWidth;
+    }
+    wrappedLines.push([currentLine, currentLineWidth, true, 0, 0]);
+    return ['', 0, ''];
+};
+export const breakWord = (measureText, word, wordWidth, fontFamily, letterSpacing, wrappedLines, currentLine, currentLineWidth, remainingLines, remainingWord, maxWidth, space, spaceWidth, overflowSuffix, overflowWidth) => {
+    remainingWord = word;
+    if (remainingLines === 0) {
+        [currentLine, currentLineWidth, remainingWord] = truncateLineEnd(measureText, fontFamily, letterSpacing, currentLine, currentLineWidth, remainingWord, maxWidth, overflowSuffix, overflowWidth);
+        wrappedLines.push([currentLine, currentLineWidth, true, 0, 0]);
+    }
+    else {
+        wrappedLines.push([currentLine, currentLineWidth, false, 0, 0]);
+        currentLine = '';
+        currentLineWidth = 0;
+    }
+    return [currentLine, currentLineWidth, remainingWord];
+};
+export const breakAll = (measureText, word, wordWidth, fontFamily, letterSpacing, wrappedLines, currentLine, currentLineWidth, remainingLines, remainingWord, maxWidth, space, spaceWidth, overflowSuffix, overflowWidth) => {
+    let remainingSpace = maxWidth - currentLineWidth;
+    if (currentLineWidth > 0) {
+        remainingSpace -= spaceWidth;
+    }
+    const truncate = remainingLines === 0;
+    [word, remainingWord, wordWidth] = truncate
+        ? truncateWord(measureText, word, wordWidth, remainingSpace, fontFamily, letterSpacing, overflowSuffix, overflowWidth)
+        : splitWord(measureText, word, wordWidth, remainingSpace, fontFamily, letterSpacing);
+    currentLine += space + word;
+    currentLineWidth += spaceWidth + wordWidth;
+    // first word doesn't fit on an empty line
+    wrappedLines.push([currentLine, currentLineWidth, truncate, 0, 0]);
+    currentLine = '';
+    currentLineWidth = 0;
+    return [currentLine, currentLineWidth, remainingWord];
+};
+export const truncateLineEnd = (measureText, fontFamily, letterSpacing, currentLine, currentLineWidth, remainingWord, maxWidth, overflowSuffix, overflowWidth) => {
+    if (currentLineWidth + overflowWidth <= maxWidth) {
+        currentLine += overflowSuffix;
+        currentLineWidth += overflowWidth;
+        remainingWord = '';
+        return [currentLine, currentLineWidth, remainingWord];
+    }
+    let truncated = false;
+    for (let i = currentLine.length - 1; i > 0; i--) {
+        const char = currentLine.charAt(i);
+        const charWidth = measureText(char, fontFamily, letterSpacing);
+        currentLineWidth -= charWidth;
+        if (currentLineWidth + overflowWidth <= maxWidth) {
+            currentLine = currentLine.substring(0, i) + overflowSuffix;
+            currentLineWidth += overflowWidth;
+            remainingWord = currentLine.substring(i) + ' ' + remainingWord;
+            truncated = true;
+            break;
+        }
+    }
+    if (truncated === false) {
+        currentLine = overflowSuffix;
+        currentLineWidth = overflowWidth;
+        remainingWord = currentLine;
+    }
+    return [currentLine, currentLineWidth, remainingWord];
+};
+export const truncateWord = (measureText, word, wordWidth, maxWidth, fontFamily, letterSpacing, overflowSuffix, overflowWidth) => {
+    const targetWidth = maxWidth - overflowWidth;
+    if (targetWidth <= 0) {
+        return ['', word, 0];
+    }
+    const excessWidth = wordWidth - targetWidth;
+    // If excess is small (< 50%), we're keeping most - start from back and remove
+    // If excess is large (>= 50%), we're removing most - start from front and add
+    const shouldStartFromBack = excessWidth < wordWidth / 2;
+    if (shouldStartFromBack === false) {
+        // Start from back - remove characters until it fits (keeping most of word)
+        let currentWidth = wordWidth;
+        for (let i = word.length - 1; i > 0; i--) {
+            const char = word.charAt(i);
+            const charWidth = measureText(char, fontFamily, letterSpacing);
+            currentWidth -= charWidth;
+            if (currentWidth <= targetWidth) {
+                const remainingWord = word.substring(i);
+                return [
+                    word.substring(0, i) + overflowSuffix,
+                    remainingWord,
+                    currentWidth + overflowWidth,
+                ];
+            }
+        }
+        // Even first character doesn't fit
+        return [overflowSuffix, word, overflowWidth];
+    }
+    // Start from front - add characters until we exceed limit (removing most of word)
+    let currentWidth = 0;
+    for (let i = 0; i < word.length; i++) {
+        const char = word.charAt(i);
+        const charWidth = measureText(char, fontFamily, letterSpacing);
+        if (currentWidth + charWidth > targetWidth) {
+            const remainingWord = word.substring(i);
+            return [
+                word.substring(0, i) + overflowSuffix,
+                remainingWord,
+                currentWidth + overflowWidth,
+            ];
+        }
+        currentWidth += charWidth;
+    }
+    // Entire word fits (shouldn't happen, but safe fallback)
+    return [word + overflowSuffix, '', wordWidth + overflowWidth];
+};
+export const splitWord = (measureText, word, wordWidth, maxWidth, fontFamily, letterSpacing) => {
+    if (maxWidth <= 0) {
+        return ['', word, 0];
+    }
+    const excessWidth = wordWidth - maxWidth;
+    // If excess is small (< 50%), we're keeping most - start from back and remove
+    // If excess is large (>= 50%), we're removing most - start from front and add
+    const shouldStartFromBack = excessWidth < wordWidth / 2;
+    if (shouldStartFromBack === false) {
+        // Start from back - remove characters until it fits (keeping most of word)
+        let currentWidth = wordWidth;
+        for (let i = word.length - 1; i > 0; i--) {
+            const char = word.charAt(i);
+            const charWidth = measureText(char, fontFamily, letterSpacing);
+            currentWidth -= charWidth;
+            if (currentWidth <= maxWidth) {
+                const remainingWord = word.substring(i);
+                return [word.substring(0, i), remainingWord, currentWidth];
+            }
+        }
+        // Even first character doesn't fit
+        return ['', word, 0];
+    }
+    // Start from front - add characters until we exceed limit (removing most of word)
+    let currentWidth = 0;
+    for (let i = 0; i < word.length; i++) {
+        const char = word.charAt(i);
+        const charWidth = measureText(char, fontFamily, letterSpacing);
+        if (currentWidth + charWidth > maxWidth) {
+            const remainingWord = word.substring(i);
+            return [word.substring(0, i), remainingWord, currentWidth];
+        }
+        currentWidth += charWidth;
+    }
+    // Entire word fits (shouldn't happen, but safe fallback)
+    return [word, '', wordWidth];
+};
+//# sourceMappingURL=TextLayoutEngine.js.map