@lightningjs/renderer 2.18.2 → 2.18.4

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

@@ -0,0 +1,311 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2025 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { hasZeroWidthSpace } from './Utils.js';
+import * as SdfFontHandler from './SdfFontHandler.js';
+import { WebGlRenderer } from '../renderers/webgl/WebGlRenderer.js';
+import { WebGlRenderOp } from '../renderers/webgl/WebGlRenderOp.js';
+import { Sdf } from '../shaders/webgl/SdfShader.js';
+import { BufferCollection } from '../renderers/webgl/internal/BufferCollection.js';
+import { mergeColorAlpha } from '../../utils.js';
+import { mapTextLayout } from './TextLayoutEngine.js';
+// Each glyph requires 6 vertices (2 triangles) with 4 floats each (x, y, u, v)
+const FLOATS_PER_VERTEX = 4;
+const VERTICES_PER_GLYPH = 6;
+// 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
+    };
+};
+/**
+ * Add quads for rendering using cached layout data
+ */
+const addQuads = (layout) => {
+    if (layout === undefined) {
+        return null; // No layout data available
+    }
+    const glyphs = layout.glyphs;
+    const glyphsLength = glyphs.length;
+    if (glyphsLength === 0) {
+        return null;
+    }
+    const vertexBuffer = new Float32Array(glyphsLength * VERTICES_PER_GLYPH * FLOATS_PER_VERTEX);
+    let bufferIndex = 0;
+    let glyphIndex = 0;
+    while (glyphIndex < glyphsLength) {
+        const glyph = glyphs[glyphIndex];
+        glyphIndex++;
+        if (glyph === undefined) {
+            continue;
+        }
+        const x1 = glyph.x;
+        const y1 = glyph.y;
+        const x2 = x1 + glyph.width;
+        const y2 = y1 + glyph.height;
+        const u1 = glyph.atlasX;
+        const v1 = glyph.atlasY;
+        const u2 = u1 + glyph.atlasWidth;
+        const v2 = v1 + glyph.atlasHeight;
+        // Triangle 1: Top-left, top-right, bottom-left
+        // Vertex 1: Top-left
+        vertexBuffer[bufferIndex++] = x1;
+        vertexBuffer[bufferIndex++] = y1;
+        vertexBuffer[bufferIndex++] = u1;
+        vertexBuffer[bufferIndex++] = v1;
+        // Vertex 2: Top-right
+        vertexBuffer[bufferIndex++] = x2;
+        vertexBuffer[bufferIndex++] = y1;
+        vertexBuffer[bufferIndex++] = u2;
+        vertexBuffer[bufferIndex++] = v1;
+        // Vertex 3: Bottom-left
+        vertexBuffer[bufferIndex++] = x1;
+        vertexBuffer[bufferIndex++] = y2;
+        vertexBuffer[bufferIndex++] = u1;
+        vertexBuffer[bufferIndex++] = v2;
+        // Triangle 2: Top-right, bottom-right, bottom-left
+        // Vertex 4: Top-right (duplicate)
+        vertexBuffer[bufferIndex++] = x2;
+        vertexBuffer[bufferIndex++] = y1;
+        vertexBuffer[bufferIndex++] = u2;
+        vertexBuffer[bufferIndex++] = v1;
+        // Vertex 5: Bottom-right
+        vertexBuffer[bufferIndex++] = x2;
+        vertexBuffer[bufferIndex++] = y2;
+        vertexBuffer[bufferIndex++] = u2;
+        vertexBuffer[bufferIndex++] = v2;
+        // Vertex 6: Bottom-left (duplicate)
+        vertexBuffer[bufferIndex++] = x1;
+        vertexBuffer[bufferIndex++] = y2;
+        vertexBuffer[bufferIndex++] = u1;
+        vertexBuffer[bufferIndex++] = v2;
+    }
+    return vertexBuffer;
+};
+/**
+ * Create and submit WebGL render operations for SDF text
+ * This is called from CoreTextNode during rendering to add SDF text to the render pipeline
+ */
+const renderQuads = (renderer, layout, vertexBuffer, renderProps) => {
+    const fontFamily = renderProps.fontFamily;
+    const color = renderProps.color;
+    const worldAlpha = renderProps.worldAlpha;
+    const globalTransform = renderProps.globalTransform;
+    const atlasTexture = SdfFontHandler.getAtlas(fontFamily);
+    if (atlasTexture === null) {
+        console.warn(`SDF atlas texture not found for font: ${fontFamily}`);
+        return;
+    }
+    // We can safely assume this is a WebGL renderer else this wouldn't be called
+    const glw = renderer.glw;
+    const stride = 4 * Float32Array.BYTES_PER_ELEMENT;
+    const webGlBuffer = glw.createBuffer();
+    if (!webGlBuffer) {
+        console.warn('Failed to create WebGL buffer for SDF text');
+        return;
+    }
+    const webGlBuffers = new BufferCollection([
+        {
+            buffer: webGlBuffer,
+            attributes: {
+                a_position: {
+                    name: 'a_position',
+                    size: 2,
+                    type: glw.FLOAT,
+                    normalized: false,
+                    stride,
+                    offset: 0,
+                },
+                a_textureCoords: {
+                    name: 'a_textureCoords',
+                    size: 2,
+                    type: glw.FLOAT,
+                    normalized: false,
+                    stride,
+                    offset: 2 * Float32Array.BYTES_PER_ELEMENT,
+                },
+            },
+        },
+    ]);
+    const buffer = webGlBuffers.getBuffer('a_position');
+    if (buffer !== undefined) {
+        glw.arrayBufferData(buffer, vertexBuffer, glw.STATIC_DRAW);
+    }
+    const renderOp = new WebGlRenderOp(renderer, {
+        sdfShaderProps: {
+            transform: globalTransform,
+            color: mergeColorAlpha(color, worldAlpha),
+            size: layout.fontScale, // Use proper font scaling in shader
+            distanceRange: layout.distanceRange,
+        },
+        sdfBuffers: webGlBuffers,
+        shader: sdfShader,
+        alpha: worldAlpha,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
+        clippingRect: renderProps.clippingRect,
+        height: layout.height,
+        width: layout.width,
+        rtt: false,
+        parentHasRenderTexture: renderProps.parentHasRenderTexture,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
+        framebufferDimensions: renderProps.framebufferDimensions,
+    }, 0);
+    // Add atlas texture and set quad count
+    renderOp.addTexture(atlasTexture.ctxTexture);
+    renderOp.numQuads = layout.glyphs.length;
+    renderer.addRenderOp(renderOp);
+};
+/**
+ * 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;
+    // 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, verticalAlign, 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 prevCodepoint = 0;
+        currentX = line[2];
+        //convert Y coord to vertex value
+        currentY = line[3] / fontScale;
+        for (let j = 0; j < textLineLength; j++) {
+            const char = textLine.charAt(j);
+            if (hasZeroWidthSpace(char) === true) {
+                continue;
+            }
+            const codepoint = char.codePointAt(0);
+            if (codepoint === undefined) {
+                continue;
+            }
+            // Get glyph data from font handler
+            const glyph = SdfFontHandler.getGlyph(fontFamily, codepoint);
+            if (glyph === null) {
+                continue;
+            }
+            // Calculate advance with kerning (in design units)
+            let advance = glyph.xadvance;
+            // Add kerning if there's a previous character
+            if (prevCodepoint !== 0) {
+                const kerning = SdfFontHandler.getKerning(fontFamily, prevCodepoint, codepoint);
+                advance += 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 / atlasWidth,
+                atlasY: glyph.y / atlasHeight,
+                atlasWidth: glyph.width / atlasWidth,
+                atlasHeight: glyph.height / atlasHeight,
+            };
+            glyphs.push(glyphLayout);
+            // Advance position with letter spacing (in design units)
+            currentX += advance + letterSpacing;
+            prevCodepoint = codepoint;
+        }
+        currentY += lineHeightPx;
+    }
+    // Convert final dimensions to pixel space for the layout
+    return {
+        glyphs,
+        distanceRange: fontScale * fontData.distanceField.distanceRange,
+        width: maxWidth || effectiveWidth * fontScale,
+        height: maxHeight || 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,19 @@
+import type { FontMetrics, MeasureTextFn, NormalizedFontMetrics, TextLayoutStruct, 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, verticalAlign: 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, wordBreak: string, remainingLines: number, hasMaxLines: boolean) => WrappedLinesStruct;
+/**
+ * Truncate a line with overflow suffix to fit within width
+ */
+export declare const truncateLineWithSuffix: (measureText: MeasureTextFn, line: string, fontFamily: string, maxWidth: number, letterSpacing: number, overflowSuffix: string) => string;
+/**
+ * wordbreak function: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+export declare const breakWord: (measureText: MeasureTextFn, word: string, fontFamily: string, maxWidth: number, letterSpacing: number, remainingLines: number) => WrappedLinesStruct;
+/**
+ * wordbreak function: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+export declare const breakAll: (measureText: MeasureTextFn, word: string, fontFamily: string, initial: number, maxWidth: number, letterSpacing: number, remainingLines: number) => WrappedLinesStruct;

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

@@ -0,0 +1,324 @@
+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, verticalAlign, 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) {
+        const maxFromHeight = Math.floor(maxHeight / lineHeightPx);
+        if (effectiveMaxLines === 0 || maxFromHeight < effectiveMaxLines) {
+            effectiveMaxLines = maxFromHeight;
+        }
+    }
+    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, maxLines)
+        : measureLines(measureText, text.split('\n'), fontFamily, letterSpacing, maxLines);
+    let effectiveLineAmount = lines.length;
+    let 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') {
+        const maxW = wrappedText === true ? maxWidth : effectiveMaxWidth;
+        for (let i = 0; i < effectiveLineAmount; i++) {
+            const line = lines[i];
+            const w = line[1];
+            line[2] = textAlign === 'right' ? maxW - w : (maxW - w) / 2;
+        }
+    }
+    const effectiveMaxHeight = effectiveLineAmount * lineHeightPx;
+    let firstBaseLine = halfDelta;
+    if (maxHeight > 0 && verticalAlign !== 'top') {
+        if (verticalAlign === 'middle') {
+            firstBaseLine += (maxHeight - effectiveMaxHeight) / 2;
+        }
+        else {
+            firstBaseLine += maxHeight - effectiveMaxHeight;
+        }
+    }
+    const startY = firstBaseLine;
+    for (let i = 0; i < effectiveLineAmount; i++) {
+        const line = lines[i];
+        line[3] = 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, 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);
+    let wrappedLine = [];
+    let remainingLines = maxLines;
+    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, wordBreak, remainingLines, hasMaxLines)
+                : [[['', 0, 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) {
+                if (lastLine[0].endsWith(overflowSuffix) === false) {
+                    lastLine[0] = truncateLineWithSuffix(measureText, lastLine[0], fontFamily, maxWidth, letterSpacing, overflowSuffix);
+                }
+            }
+            break;
+        }
+    }
+    return [wrappedLines, remainingLines, hasRemainingText];
+};
+export const wrapLine = (measureText, line, fontFamily, maxWidth, letterSpacing, spaceWidth, overflowSuffix, wordBreak, remainingLines, hasMaxLines) => {
+    // Use the same space regex as Canvas renderer to handle ZWSP
+    const spaceRegex = / |\u200B/g;
+    const words = line.split(spaceRegex);
+    const spaces = line.match(spaceRegex) || [];
+    const wrappedLines = [];
+    let currentLine = '';
+    let currentLineWidth = 0;
+    let hasRemainingText = true;
+    let i = 0;
+    for (; i < words.length; i++) {
+        const word = words[i];
+        if (word === undefined) {
+            continue;
+        }
+        const space = spaces[i - 1] || '';
+        const wordWidth = measureText(word, fontFamily, letterSpacing);
+        // 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 ((i === 0 && wordWidth <= maxWidth) ||
+            (i > 0 && totalWidth <= maxWidth)) {
+            // Word fits on current line
+            if (currentLine.length > 0) {
+                // Add space - for ZWSP, don't add anything to output (it's invisible)
+                if (space !== '\u200B') {
+                    currentLine += space;
+                    currentLineWidth += effectiveSpaceWidth;
+                }
+            }
+            currentLine += word;
+            currentLineWidth += wordWidth;
+        }
+        else {
+            if (remainingLines === 1) {
+                if (currentLine.length > 0) {
+                    // Add space - for ZWSP, don't add anything to output (it's invisible)
+                    if (space !== '\u200B') {
+                        currentLine += space;
+                        currentLineWidth += effectiveSpaceWidth;
+                    }
+                }
+                currentLine += word;
+                currentLineWidth += wordWidth;
+                remainingLines = 0;
+                hasRemainingText = i < words.length;
+                break;
+            }
+            if (wordBreak !== 'break-all' && currentLine.length > 0) {
+                wrappedLines.push([currentLine, currentLineWidth, 0, 0]);
+            }
+            if (wordBreak !== 'break-all') {
+                remainingLines--;
+                currentLine = word;
+                currentLineWidth = wordWidth;
+            }
+            if (wordBreak === 'break-word') {
+                const [lines, rl, rt] = breakWord(measureText, word, fontFamily, maxWidth, letterSpacing, remainingLines);
+                remainingLines = rl;
+                hasRemainingText = rt;
+                if (lines.length === 1) {
+                    [currentLine, currentLineWidth] = lines[lines.length - 1];
+                }
+                else {
+                    for (let j = 0; j < lines.length; j++) {
+                        [currentLine, currentLineWidth] = lines[j];
+                        if (j < lines.length - 1) {
+                            wrappedLines.push(lines[j]);
+                        }
+                    }
+                }
+            }
+            else if (wordBreak === 'break-all') {
+                const firstLetterWidth = measureText(word.charAt(0), fontFamily, letterSpacing);
+                let linebreak = false;
+                if (currentLineWidth + firstLetterWidth + effectiveSpaceWidth >
+                    maxWidth) {
+                    wrappedLines.push([currentLine, currentLineWidth, 0, 0]);
+                    remainingLines -= 1;
+                    currentLine = '';
+                    currentLineWidth = 0;
+                    linebreak = true;
+                }
+                const initial = maxWidth - currentLineWidth;
+                const [lines, rl, rt] = breakAll(measureText, word, fontFamily, initial, maxWidth, letterSpacing, remainingLines);
+                remainingLines = rl;
+                hasRemainingText = rt;
+                if (linebreak === false) {
+                    const [text, width] = lines[0];
+                    currentLine += ' ' + text;
+                    currentLineWidth = width;
+                    wrappedLines.push([currentLine, currentLineWidth, 0, 0]);
+                }
+                for (let j = 1; j < lines.length; j++) {
+                    [currentLine, currentLineWidth] = lines[j];
+                    if (j < lines.length - 1) {
+                        wrappedLines.push([currentLine, currentLineWidth, 0, 0]);
+                    }
+                }
+            }
+        }
+    }
+    // Add the last line if it has content
+    if (currentLine.length > 0 && hasMaxLines === true && remainingLines === 0) {
+        currentLine = truncateLineWithSuffix(measureText, currentLine, fontFamily, maxWidth, letterSpacing, overflowSuffix);
+    }
+    if (currentLine.length > 0) {
+        wrappedLines.push([currentLine, currentLineWidth, 0, 0]);
+    }
+    return [wrappedLines, remainingLines, hasRemainingText];
+};
+/**
+ * Truncate a line with overflow suffix to fit within width
+ */
+export const truncateLineWithSuffix = (measureText, line, fontFamily, maxWidth, letterSpacing, overflowSuffix) => {
+    const suffixWidth = measureText(overflowSuffix, fontFamily, letterSpacing);
+    if (suffixWidth >= maxWidth) {
+        return overflowSuffix.substring(0, Math.max(1, overflowSuffix.length - 1));
+    }
+    let truncatedLine = line;
+    while (truncatedLine.length > 0) {
+        const lineWidth = measureText(truncatedLine, fontFamily, letterSpacing);
+        if (lineWidth + suffixWidth <= maxWidth) {
+            return truncatedLine + overflowSuffix;
+        }
+        truncatedLine = truncatedLine.substring(0, truncatedLine.length - 1);
+    }
+    return overflowSuffix;
+};
+/**
+ * wordbreak function: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+export const breakWord = (measureText, word, fontFamily, maxWidth, letterSpacing, remainingLines) => {
+    const lines = [];
+    let currentPart = '';
+    let currentWidth = 0;
+    let i = 0;
+    for (let i = 0; i < word.length; i++) {
+        const char = word.charAt(i);
+        const codepoint = char.codePointAt(0);
+        if (codepoint === undefined)
+            continue;
+        const charWidth = measureText(char, fontFamily, letterSpacing);
+        if (currentWidth + charWidth > maxWidth && currentPart.length > 0) {
+            remainingLines--;
+            if (remainingLines === 0) {
+                break;
+            }
+            lines.push([currentPart, currentWidth, 0, 0]);
+            currentPart = char;
+            currentWidth = charWidth;
+        }
+        else {
+            currentPart += char;
+            currentWidth += charWidth;
+        }
+    }
+    if (currentPart.length > 0) {
+        lines.push([currentPart, currentWidth, 0, 0]);
+    }
+    return [lines, remainingLines, i < word.length - 1];
+};
+/**
+ * wordbreak function: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+export const breakAll = (measureText, word, fontFamily, initial, maxWidth, letterSpacing, remainingLines) => {
+    const lines = [];
+    let currentPart = '';
+    let currentWidth = 0;
+    let max = initial;
+    let i = 0;
+    let hasRemainingText = false;
+    for (; i < word.length; i++) {
+        if (remainingLines === 0) {
+            hasRemainingText = true;
+            break;
+        }
+        const char = word.charAt(i);
+        const charWidth = measureText(char, fontFamily, letterSpacing);
+        if (currentWidth + charWidth > max && currentPart.length > 0) {
+            lines.push([currentPart, currentWidth, 0, 0]);
+            currentPart = char;
+            currentWidth = charWidth;
+            max = maxWidth;
+            remainingLines--;
+        }
+        else {
+            currentPart += char;
+            currentWidth += charWidth;
+        }
+    }
+    if (currentPart.length > 0) {
+        lines.push([currentPart, currentWidth, 0, 0]);
+    }
+    return [lines, remainingLines, hasRemainingText];
+};
+//# sourceMappingURL=TextLayoutEngine.js.map