@lightningjs/renderer 2.18.2 → 2.18.4

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

@@ -0,0 +1,157 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 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 { assertTruthy } from '../../utils.js';
+import * as CanvasFontHandler from './CanvasFontHandler.js';
+import { hasZeroWidthSpace } from './Utils.js';
+import { mapTextLayout } from './TextLayoutEngine.js';
+const MAX_TEXTURE_DIMENSION = 4096;
+const type = 'canvas';
+let canvas = null;
+let context = null;
+// Separate canvas and context for text measurements
+let measureCanvas = null;
+let measureContext = null;
+// Cache for text layout calculations
+const layoutCache = new Map();
+// Initialize the Text Renderer
+const init = (stage) => {
+    const dpr = window.devicePixelRatio || 1;
+    // Drawing canvas and context
+    canvas = stage.platform.createCanvas();
+    context = canvas.getContext('2d', { willReadFrequently: true });
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.textRendering = 'optimizeSpeed';
+    // Separate measuring canvas and context
+    measureCanvas = stage.platform.createCanvas();
+    measureContext = measureCanvas.getContext('2d');
+    measureContext.setTransform(dpr, 0, 0, dpr, 0, 0);
+    measureContext.textRendering = 'optimizeSpeed';
+    // Set up a minimal size for the measuring canvas since we only use it for measurements
+    measureCanvas.width = 1;
+    measureCanvas.height = 1;
+    CanvasFontHandler.init(context, measureContext);
+};
+/**
+ * Canvas text renderer
+ *
+ * @param stage - Stage instance for font resolution
+ * @param props - Text rendering properties
+ * @returns Object containing ImageData and dimensions
+ */
+const renderText = (props) => {
+    assertTruthy(canvas, 'Canvas is not initialized');
+    assertTruthy(context, 'Canvas context is not available');
+    assertTruthy(measureContext, 'Canvas measureContext is not available');
+    // Extract already normalized properties
+    const { text, fontFamily, fontStyle, fontSize, textAlign, maxLines, lineHeight, verticalAlign, overflowSuffix, maxWidth, maxHeight, wordBreak, } = props;
+    const font = `${fontStyle} ${fontSize}px Unknown, ${fontFamily}`;
+    // Get font metrics and calculate line height
+    measureContext.font = font;
+    measureContext.textBaseline = 'hanging';
+    const metrics = CanvasFontHandler.getFontMetrics(fontFamily, fontSize);
+    const letterSpacing = props.letterSpacing;
+    const [lines, remainingLines, hasRemainingText, bareLineHeight, lineHeightPx, effectiveWidth, effectiveHeight,] = mapTextLayout(CanvasFontHandler.measureText, metrics, text, textAlign, verticalAlign, fontFamily, lineHeight, overflowSuffix, wordBreak, letterSpacing, maxLines, maxWidth, maxHeight);
+    const lineAmount = lines.length;
+    const canvasW = Math.ceil(maxWidth || effectiveWidth);
+    const canvasH = Math.ceil(maxHeight || effectiveHeight);
+    canvas.width = canvasW;
+    canvas.height = canvasH;
+    context.fillStyle = 'white';
+    context.font = font;
+    context.textBaseline = 'hanging';
+    // Performance optimization for large fonts
+    if (fontSize >= 128) {
+        context.globalAlpha = 0.01;
+        context.fillRect(0, 0, 0.01, 0.01);
+        context.globalAlpha = 1.0;
+    }
+    for (let i = 0; i < lineAmount; i++) {
+        const line = lines[i];
+        const textLine = line[0];
+        let currentX = Math.ceil(line[2]);
+        const currentY = Math.ceil(line[3]);
+        if (letterSpacing === 0) {
+            context.fillText(textLine, currentX, currentY);
+        }
+        else {
+            const textLineLength = textLine.length;
+            for (let j = 0; j < textLineLength; j++) {
+                const char = textLine.charAt(j);
+                if (hasZeroWidthSpace(char) === true) {
+                    continue;
+                }
+                context.fillText(char, currentX, currentY);
+                currentX += CanvasFontHandler.measureText(char, fontFamily, letterSpacing);
+            }
+        }
+    }
+    // Extract image data
+    let imageData = null;
+    if (canvas.width > 0 && canvas.height > 0) {
+        imageData = context.getImageData(0, 0, canvasW, canvasH);
+    }
+    return {
+        imageData,
+        width: canvasW,
+        height: canvasH,
+        remainingLines,
+        hasRemainingText,
+    };
+};
+/**
+ * Generate a cache key for text layout calculations
+ */
+function generateLayoutCacheKey(text, fontFamily, fontSize, fontStyle, wordWrap, wordWrapWidth, letterSpacing, maxLines, overflowSuffix) {
+    return `${text}-${fontFamily}-${fontSize}-${fontStyle}-${wordWrap}-${wordWrapWidth}-${letterSpacing}-${maxLines}-${overflowSuffix}`;
+}
+/**
+ * Clear layout cache for memory management
+ */
+const clearLayoutCache = () => {
+    layoutCache.clear();
+};
+/**
+ * Add quads for rendering (Canvas doesn't use quads)
+ */
+const addQuads = () => {
+    // Canvas renderer doesn't use quad-based rendering
+    // Return null for interface compatibility
+    return null;
+};
+/**
+ * Render quads for Canvas renderer (Canvas doesn't use quad-based rendering)
+ */
+const renderQuads = () => {
+    // Canvas renderer doesn't use quad-based rendering
+    // This method is for interface compatibility only
+};
+/**
+ * Canvas Text Renderer - implements TextRenderer interface
+ */
+const CanvasTextRenderer = {
+    type,
+    font: CanvasFontHandler,
+    renderText,
+    addQuads,
+    renderQuads,
+    init,
+    clearLayoutCache,
+};
+export default CanvasTextRenderer;
+//# sourceMappingURL=CanvasTextRenderer.js.map

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

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

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

@@ -0,0 +1,182 @@
+import type { FontFamilyMap, FontMetrics, NormalizedFontMetrics, TrProps, FontLoadOptions } from './TextRenderer.js';
+import type { ImageTexture } from '../textures/ImageTexture.js';
+import type { Stage } from '../Stage.js';
+import type { CoreTextNode } from '../CoreTextNode.js';
+/**
+ * SDF Font Data structure matching msdf-bmfont-xml output
+ */
+export interface SdfFontData {
+    pages: string[];
+    chars: Array<{
+        id: number;
+        char: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        xoffset: number;
+        yoffset: number;
+        xadvance: number;
+        page: number;
+        chnl: number;
+    }>;
+    kernings: Array<{
+        first: number;
+        second: number;
+        amount: number;
+    }>;
+    info: {
+        face: string;
+        size: number;
+        bold: number;
+        italic: number;
+        charset: string[];
+        unicode: number;
+        stretchH: number;
+        smooth: number;
+        aa: number;
+        padding: [number, number, number, number];
+        spacing: [number, number];
+        outline: number;
+    };
+    common: {
+        lineHeight: number;
+        base: number;
+        scaleW: number;
+        scaleH: number;
+        pages: number;
+        packed: number;
+        alphaChnl: number;
+        redChnl: number;
+        greenChnl: number;
+        blueChnl: number;
+    };
+    distanceField: {
+        fieldType: 'sdf' | 'msdf';
+        distanceRange: number;
+    };
+    lightningMetrics?: FontMetrics;
+}
+/**
+ * @typedef {Object} SdfGlyph
+ * @property {number} id - Glyph ID
+ * @property {string} char - Character
+ * @property {number} x - Atlas x position
+ * @property {number} y - Atlas y position
+ * @property {number} width - Glyph width
+ * @property {number} height - Glyph height
+ * @property {number} xoffset - X offset
+ * @property {number} yoffset - Y offset
+ * @property {number} xadvance - Character advance width
+ * @property {number} page - Page number
+ * @property {number} chnl - Channel
+ */
+/**
+ * @typedef {Object} KerningTable
+ * Fast lookup table for kerning values
+ */
+type KerningTable = Record<number, Record<number, number | undefined> | undefined>;
+/**
+ * @typedef {Object} SdfFontCache
+ * Cached font data for performance
+ */
+export interface SdfFont {
+    data: SdfFontData;
+    glyphMap: Map<number, SdfFontData['chars'][0]>;
+    kernings: KerningTable;
+    atlasTexture: ImageTexture;
+    metrics: FontMetrics;
+    maxCharHeight: number;
+}
+/**
+ * Check if the SDF font handler can render a font
+ * @param {TrProps} trProps - Text rendering properties
+ * @returns {boolean} True if the font can be rendered
+ */
+export declare const canRenderFont: (trProps: TrProps) => boolean;
+/**
+ * Load SDF font from JSON + PNG atlas
+ * @param {Object} options - Font loading options
+ * @param {string} options.fontFamily - Font family name
+ * @param {string} options.fontUrl - JSON font data URL (atlasDataUrl)
+ * @param {string} options.atlasUrl - PNG atlas texture URL
+ * @param {FontMetrics} options.metrics - Optional font metrics
+ */
+export declare const loadFont: (stage: Stage, options: FontLoadOptions) => Promise<void>;
+/**
+ * Stop waiting for a font to load
+ * @param {string} fontFamily - Font family name
+ * @param {CoreTextNode} node - Node that was waiting for the font
+ */
+export declare const waitingForFont: (fontFamily: string, node: CoreTextNode) => void;
+/**
+ * Stop waiting for a font to load
+ *
+ * @param fontFamily
+ * @param node
+ * @returns
+ */
+export declare const stopWaitingForFont: (fontFamily: string, node: CoreTextNode) => void;
+/**
+ * Get the font families map for resolving fonts
+ */
+export declare const getFontFamilies: () => FontFamilyMap;
+/**
+ * Initialize the SDF font handler
+ */
+export declare const init: (c?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void;
+export declare const type = "sdf";
+/**
+ * Check if a font is already loaded by font family
+ */
+export declare const isFontLoaded: (fontFamily: string) => boolean;
+/**
+ * Get normalized font metrics for a font family
+ */
+export declare const getFontMetrics: (fontFamily: string, fontSize: number) => NormalizedFontMetrics;
+export declare const processFontMetrics: (fontFamily: string, fontSize: number, metrics: FontMetrics) => NormalizedFontMetrics;
+/**
+ * Get glyph data for a character in a specific font
+ * @param {string} fontFamily - Font family name
+ * @param {number} codepoint - Character codepoint
+ * @returns {Object|null} Glyph data or null if not found
+ */
+export declare const getGlyph: (fontFamily: string, codepoint: number) => SdfFontData["chars"][0] | null;
+/**
+ * Get kerning value between two glyphs
+ * @param {string} fontFamily - Font family name
+ * @param {number} firstGlyph - First glyph ID
+ * @param {number} secondGlyph - Second glyph ID
+ * @returns {number} Kerning value or 0
+ */
+export declare const getKerning: (fontFamily: string, firstGlyph: number, secondGlyph: number) => number;
+/**
+ * Get atlas texture for a font family
+ * @param {string} fontFamily - Font family name
+ * @returns {ImageTexture|null} Atlas texture or null
+ */
+export declare const getAtlas: (fontFamily: string) => ImageTexture | null;
+/**
+ * Get font data for a font family
+ * @param {string} fontFamily - Font family name
+ * @returns {SdfFontData|null} Font data or null
+ */
+export declare const getFontData: (fontFamily: string) => SdfFont | undefined;
+/**
+ * Get maximum character height for a font family
+ * @param {string} fontFamily - Font family name
+ * @returns {number} Max character height or 0
+ */
+export declare const getMaxCharHeight: (fontFamily: string) => number;
+/**
+ * Get all loaded font families
+ * @returns {string[]} Array of font family names
+ */
+export declare const getLoadedFonts: () => string[];
+/**
+ * Unload a font and free resources
+ * @param {string} fontFamily - Font family name
+ */
+export declare const unloadFont: (fontFamily: string) => void;
+export declare const measureText: (text: string, fontFamily: string, letterSpacing: number) => number;
+export {};