@lightningjs/renderer 3.0.0-beta14 → 3.0.0-beta16

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

@@ -28,6 +28,8 @@ import type { ImageTexture } from '../textures/ImageTexture.js';
 import type { Stage } from '../Stage.js';
 import type { CoreTextNode } from '../CoreTextNode.js';
 import { UpdateType } from '../CoreNode.js';
+import { hasZeroWidthSpace } from './Utils.js';
+import { normalizeFontMetrics } from './TextLayoutEngine.js';
 
 /**
  * SDF Font Data structure matching msdf-bmfont-xml output
@@ -115,31 +117,24 @@ type KerningTable = Record<
  * @typedef {Object} SdfFontCache
  * Cached font data for performance
  */
-interface SdfFontCache {
+export interface SdfFont {
   data: SdfFontData;
   glyphMap: Map<number, SdfFontData['chars'][0]>;
   kernings: KerningTable;
   atlasTexture: ImageTexture;
-  metrics: NormalizedFontMetrics;
+  metrics: FontMetrics;
   maxCharHeight: number;
 }
 
 //global state variables for SdfFontHandler
-const fontCache: Record<string, SdfFontCache> = Object.create(null);
-const loadedFonts = new Set<string>();
+const fontCache = new Map<string, SdfFont>();
 const fontLoadPromises = new Map<string, Promise<void>>();
-const nodesWaitingForFont: Record<string, CoreTextNode[]> = Object.create(null);
+const normalizedMetrics = new Map<string, NormalizedFontMetrics>();
+const nodesWaitingForFont: Record<string, CoreTextNode[]> = Object.create(
+  null,
+) as Record<string, CoreTextNode[]>;
 let initialized = false;
 
-/**
- * Normalize font metrics to be in the range of 0 to 1
- */
-const normalizeMetrics = (metrics: FontMetrics): NormalizedFontMetrics => ({
-  ascender: metrics.ascender / metrics.unitsPerEm,
-  descender: metrics.descender / metrics.unitsPerEm,
-  lineGap: metrics.lineGap / metrics.unitsPerEm,
-});
-
 /**
  * Build kerning lookup table for fast access
  * @param {Array} kernings - Kerning data from font
@@ -236,35 +231,31 @@ const processFontData = (
     i++;
   }
 
-  // Determine metrics
-  let normalizedMetrics: NormalizedFontMetrics;
-
-  if (metrics !== undefined) {
-    normalizedMetrics = normalizeMetrics(metrics);
-  } else if (fontData.lightningMetrics !== undefined) {
-    normalizedMetrics = normalizeMetrics(fontData.lightningMetrics);
-  } else {
+  if (metrics === undefined && fontData.lightningMetrics === undefined) {
     console.warn(
       `Font metrics not found for SDF font ${fontFamily}. ` +
         'Make sure you are using the latest version of the Lightning ' +
         '3 msdf-generator tool to generate your SDF fonts. Using default metrics.',
     );
-    // Use default metrics
-    normalizedMetrics = {
-      ascender: 0.8,
-      descender: -0.2,
-      lineGap: 0.2,
-    };
   }
+
+  metrics = metrics ||
+    fontData.lightningMetrics || {
+      ascender: 800,
+      descender: -200,
+      lineGap: 200,
+      unitsPerEm: 1000,
+    };
+
   // Cache processed data
-  fontCache[fontFamily] = {
+  fontCache.set(fontFamily, {
     data: fontData,
     glyphMap,
     kernings,
     atlasTexture,
-    metrics: normalizedMetrics,
+    metrics,
     maxCharHeight,
-  };
+  });
 };
 
 /**
@@ -292,7 +283,7 @@ export const loadFont = async (
 ): Promise<void> => {
   const { fontFamily, atlasUrl, atlasDataUrl, metrics } = options;
   // Early return if already loaded
-  if (loadedFonts.has(fontFamily) === true) {
+  if (fontCache.get(fontFamily) !== undefined) {
     return;
   }
 
@@ -341,7 +332,6 @@ export const loadFont = async (
       if (atlasTexture.state === 'loaded') {
         // If already loaded, process immediately
         processFontData(fontFamily, fontData, atlasTexture, metrics);
-        loadedFonts.add(fontFamily);
         fontLoadPromises.delete(fontFamily);
 
         for (let key in nwff) {
@@ -355,8 +345,7 @@ export const loadFont = async (
         // Process and cache font data
         processFontData(fontFamily, fontData, atlasTexture, metrics);
 
-        // Mark as loaded
-        loadedFonts.add(fontFamily);
+        // remove from promises
         fontLoadPromises.delete(fontFamily);
 
         for (let key in nwff) {
@@ -388,6 +377,9 @@ export const loadFont = async (
  * @param {CoreTextNode} node - Node that was waiting for the font
  */
 export const waitingForFont = (fontFamily: string, node: CoreTextNode) => {
+  if (nodesWaitingForFont[fontFamily] === undefined) {
+    return;
+  }
   nodesWaitingForFont[fontFamily]![node.id] = node;
 };
 
@@ -435,7 +427,7 @@ export const type = 'sdf';
  * Check if a font is already loaded by font family
  */
 export const isFontLoaded = (fontFamily: string): boolean => {
-  return loadedFonts.has(fontFamily);
+  return fontCache.has(fontFamily);
 };
 
 /**
@@ -443,24 +435,26 @@ export const isFontLoaded = (fontFamily: string): boolean => {
  */
 export const getFontMetrics = (
   fontFamily: string,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   fontSize: number,
 ): NormalizedFontMetrics => {
-  const cache = fontCache[fontFamily];
-  return cache ? cache.metrics : { ascender: 0, descender: 0, lineGap: 0 };
+  const out = normalizedMetrics.get(fontFamily);
+  if (out !== undefined) {
+    return out;
+  }
+  let metrics = fontCache.get(fontFamily)!.metrics;
+  return processFontMetrics(fontFamily, fontSize, metrics);
 };
 
-/**
- * Set font metrics for a font family
- */
-export const setFontMetrics = (
+export const processFontMetrics = (
   fontFamily: string,
-  metrics: NormalizedFontMetrics,
-): void => {
-  const cache = fontCache[fontFamily];
-  if (cache !== undefined) {
-    cache.metrics = metrics;
-  }
+  fontSize: number,
+  metrics: FontMetrics,
+): NormalizedFontMetrics => {
+  const label = fontFamily + fontSize;
+  const normalized = normalizeFontMetrics(metrics, fontSize);
+  normalizedMetrics.set(label, normalized);
+  return normalized;
 };
 
 /**
@@ -473,7 +467,7 @@ export const getGlyph = (
   fontFamily: string,
   codepoint: number,
 ): SdfFontData['chars'][0] | null => {
-  const cache = fontCache[fontFamily];
+  const cache = fontCache.get(fontFamily);
   if (cache === undefined) return null;
 
   return cache.glyphMap.get(codepoint) || cache.glyphMap.get(63) || null; // 63 = '?'
@@ -491,7 +485,7 @@ export const getKerning = (
   firstGlyph: number,
   secondGlyph: number,
 ): number => {
-  const cache = fontCache[fontFamily];
+  const cache = fontCache.get(fontFamily);
   if (cache === undefined) return 0;
 
   const seconds = cache.kernings[secondGlyph];
@@ -504,7 +498,7 @@ export const getKerning = (
  * @returns {ImageTexture|null} Atlas texture or null
  */
 export const getAtlas = (fontFamily: string): ImageTexture | null => {
-  const cache = fontCache[fontFamily];
+  const cache = fontCache.get(fontFamily);
   return cache !== undefined ? cache.atlasTexture : null;
 };
 
@@ -513,9 +507,8 @@ export const getAtlas = (fontFamily: string): ImageTexture | null => {
  * @param {string} fontFamily - Font family name
  * @returns {SdfFontData|null} Font data or null
  */
-export const getFontData = (fontFamily: string): SdfFontData | null => {
-  const cache = fontCache[fontFamily];
-  return cache !== undefined ? cache.data : null;
+export const getFontData = (fontFamily: string): SdfFont | undefined => {
+  return fontCache.get(fontFamily);
 };
 
 /**
@@ -524,7 +517,7 @@ export const getFontData = (fontFamily: string): SdfFontData | null => {
  * @returns {number} Max character height or 0
  */
 export const getMaxCharHeight = (fontFamily: string): number => {
-  const cache = fontCache[fontFamily];
+  const cache = fontCache.get(fontFamily);
   return cache !== undefined ? cache.maxCharHeight : 0;
 };
 
@@ -533,7 +526,7 @@ export const getMaxCharHeight = (fontFamily: string): number => {
  * @returns {string[]} Array of font family names
  */
 export const getLoadedFonts = (): string[] => {
-  return Array.from(loadedFonts);
+  return Array.from(fontCache.keys());
 };
 
 /**
@@ -541,14 +534,58 @@ export const getLoadedFonts = (): string[] => {
  * @param {string} fontFamily - Font family name
  */
 export const unloadFont = (fontFamily: string): void => {
-  const cache = fontCache[fontFamily];
+  const cache = fontCache.get(fontFamily);
   if (cache !== undefined) {
     // Free texture if needed
     if (typeof cache.atlasTexture.free === 'function') {
       cache.atlasTexture.free();
     }
 
-    delete fontCache[fontFamily];
-    loadedFonts.delete(fontFamily);
+    fontCache.delete(fontFamily);
   }
 };
+
+export const measureText = (
+  text: string,
+  fontFamily: string,
+  letterSpacing: number,
+): number => {
+  if (text.length === 1) {
+    const char = text.charAt(0);
+    const codepoint = text.codePointAt(0);
+    if (codepoint === undefined) return 0;
+    if (hasZeroWidthSpace(char) === true) return 0;
+
+    const glyph = getGlyph(fontFamily, codepoint);
+    if (glyph === null) return 0;
+    return glyph.xadvance + letterSpacing;
+  }
+  let width = 0;
+  let prevCodepoint = 0;
+  for (let i = 0; i < text.length; i++) {
+    const char = text.charAt(i);
+    const codepoint = text.codePointAt(i);
+    if (codepoint === undefined) continue;
+
+    // Skip zero-width spaces in width calculations
+    if (hasZeroWidthSpace(char)) {
+      continue;
+    }
+
+    const glyph = getGlyph(fontFamily, codepoint);
+    if (glyph === null) continue;
+
+    let advance = glyph.xadvance;
+
+    // Add kerning if there's a previous character
+    if (prevCodepoint !== 0) {
+      const kerning = getKerning(fontFamily, prevCodepoint, codepoint);
+      advance += kerning;
+    }
+
+    width += advance + letterSpacing;
+    prevCodepoint = codepoint;
+  }
+
+  return width;
+};

package/src/core/text-rendering/SdfTextRenderer.ts

@@ -20,11 +20,12 @@
 import type { Stage } from '../Stage.js';
 import type {
   FontHandler,
+  TextLineStruct,
   TextRenderInfo,
   TextRenderProps,
 } from './TextRenderer.js';
 import type { CoreTextNodeProps } from '../CoreTextNode.js';
-import { isZeroWidthSpace } from './Utils.js';
+import { hasZeroWidthSpace } from './Utils.js';
 import * as SdfFontHandler from './SdfFontHandler.js';
 import type { CoreRenderer } from '../renderers/CoreRenderer.js';
 import { WebGlRenderer } from '../renderers/webgl/WebGlRenderer.js';
@@ -35,7 +36,7 @@ import type { WebGlCtxTexture } from '../renderers/webgl/WebGlCtxTexture.js';
 import type { WebGlShaderNode } from '../renderers/webgl/WebGlShaderNode.js';
 import { mergeColorAlpha } from '../../utils.js';
 import type { TextLayout, GlyphLayout } from './TextRenderer.js';
-import { wrapText, measureLines } from './sdf/index.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;
@@ -64,7 +65,7 @@ const font: FontHandler = SdfFontHandler;
  * @param props - Text rendering properties
  * @returns Object containing ImageData and dimensions
  */
-const renderText = (stage: Stage, props: CoreTextNodeProps): TextRenderInfo => {
+const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   // Early return if no text
   if (props.text.length === 0) {
     return {
@@ -75,7 +76,7 @@ const renderText = (stage: Stage, props: CoreTextNodeProps): TextRenderInfo => {
 
   // Get font cache for this font family
   const fontData = SdfFontHandler.getFontData(props.fontFamily);
-  if (fontData === null) {
+  if (fontData === undefined) {
     // Font not loaded, return empty result
     return {
       width: 0,
@@ -88,6 +89,8 @@ const renderText = (stage: Stage, props: CoreTextNodeProps): TextRenderInfo => {
 
   // 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
@@ -187,7 +190,6 @@ const renderQuads = (
 ): void => {
   const fontFamily = renderProps.fontFamily;
   const color = renderProps.color;
-  const offsetY = renderProps.offsetY;
   const worldAlpha = renderProps.worldAlpha;
   const globalTransform = renderProps.globalTransform;
 
@@ -243,9 +245,7 @@ const renderQuads = (
         transform: globalTransform,
         color: mergeColorAlpha(color, worldAlpha),
         size: layout.fontScale, // Use proper font scaling in shader
-        scrollY: offsetY || 0,
         distanceRange: layout.distanceRange,
-        debug: false, // Disable debug mode
       } satisfies SdfShaderProps,
       sdfBuffers: webGlBuffers,
       shader: sdfShader,
@@ -274,132 +274,79 @@ const renderQuads = (
  */
 const generateTextLayout = (
   props: CoreTextNodeProps,
-  fontData: SdfFontHandler.SdfFontData,
+  fontCache: SdfFontHandler.SdfFont,
 ): TextLayout => {
-  const commonFontData = fontData.common;
-  const text = props.text;
   const fontSize = props.fontSize;
-  const letterSpacing = props.letterSpacing;
   const fontFamily = props.fontFamily;
-  const textAlign = props.textAlign;
-  const maxWidth = props.maxWidth;
-  const maxHeight = props.maxHeight;
-  const maxLines = props.maxLines;
-  const overflowSuffix = props.overflowSuffix;
-  const wordBreak = props.wordBreak;
-
-  // Use the font's design size for proper scaling
-  const designLineHeight = commonFontData.lineHeight;
+  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 lineHeight =
-    props.lineHeight || (designLineHeight * fontSize) / designFontSize;
   const atlasWidth = commonFontData.scaleW;
   const atlasHeight = commonFontData.scaleH;
 
   // Calculate the pixel scale from design units to pixels
-  const finalScale = fontSize / designFontSize;
-
-  // Calculate design letter spacing
-  const designLetterSpacing = (letterSpacing * designFontSize) / fontSize;
-
-  // Determine text wrapping behavior based on contain mode
-  const shouldWrapText = maxWidth > 0;
-  const heightConstraint = maxHeight > 0;
-
-  // Calculate maximum lines constraint from height if needed
-  let effectiveMaxLines = maxLines;
-  if (heightConstraint === true) {
-    const maxLinesFromHeight = Math.floor(
-      maxHeight / (lineHeight * finalScale),
-    );
-    if (effectiveMaxLines === 0 || maxLinesFromHeight < effectiveMaxLines) {
-      effectiveMaxLines = maxLinesFromHeight;
-    }
-  }
+  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 hasMaxLines = effectiveMaxLines > 0;
-
-  // Split text into lines based on wrapping constraints
-  const [lines, remainingLines, remainingText] = shouldWrapText
-    ? wrapText(
-        text,
-        fontFamily,
-        finalScale,
-        maxWidth,
-        letterSpacing,
-        overflowSuffix,
-        wordBreak,
-        effectiveMaxLines,
-        hasMaxLines,
-      )
-    : measureLines(
-        text.split('\n'),
-        fontFamily,
-        letterSpacing,
-        finalScale,
-        effectiveMaxLines,
-        hasMaxLines,
-      );
+  const lineAmount = lines.length;
 
   const glyphs: GlyphLayout[] = [];
-  let maxWidthFound = 0;
+  let currentX = 0;
   let currentY = 0;
-
-  for (let i = 0; i < lines.length; i++) {
-    if (lines[i]![1] > maxWidthFound) {
-      maxWidthFound = lines[i]![1];
-    }
-  }
-
-  // Second pass: Generate glyph layouts with proper alignment
-  let lineIndex = 0;
-  const linesLength = lines.length;
-
-  while (lineIndex < linesLength) {
-    const [line, lineWidth] = lines[lineIndex]!;
-    lineIndex++;
-
-    // Calculate line X offset based on text alignment
-    let lineXOffset = 0;
-    if (textAlign === 'center') {
-      const availableWidth = shouldWrapText
-        ? maxWidth / finalScale
-        : maxWidthFound;
-      lineXOffset = (availableWidth - lineWidth) / 2;
-    } else if (textAlign === 'right') {
-      const availableWidth = shouldWrapText
-        ? maxWidth / finalScale
-        : maxWidthFound;
-      lineXOffset = availableWidth - lineWidth;
-    }
-
-    let currentX = lineXOffset;
-    let charIndex = 0;
-    const lineLength = line.length;
+  for (let i = 0; i < lineAmount; i++) {
+    const line = lines[i] as TextLineStruct;
+    const textLine = line[0];
+    const textLineLength = textLine.length;
     let prevCodepoint = 0;
+    currentX = line[2];
+    //convert Y coord to vertex value
+    currentY = line[3] / fontScale;
 
-    while (charIndex < lineLength) {
-      const char = line.charAt(charIndex);
-      const codepoint = char.codePointAt(0);
-      charIndex++;
-
-      if (codepoint === undefined) {
+    for (let j = 0; j < textLineLength; j++) {
+      const char = textLine.charAt(j);
+      if (hasZeroWidthSpace(char) === true) {
         continue;
       }
-
-      // Skip zero-width spaces for rendering but keep them in the text flow
-      if (isZeroWidthSpace(char)) {
+      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;
 
@@ -432,21 +379,20 @@ const generateTextLayout = (
       glyphs.push(glyphLayout);
 
       // Advance position with letter spacing (in design units)
-      currentX += advance + designLetterSpacing;
+      currentX += advance + letterSpacing;
       prevCodepoint = codepoint;
     }
-
-    currentY += designLineHeight;
+    currentY += lineHeightPx;
   }
 
   // Convert final dimensions to pixel space for the layout
   return {
     glyphs,
-    distanceRange: finalScale * fontData.distanceField.distanceRange,
-    width: Math.ceil(maxWidthFound * finalScale),
-    height: Math.ceil(designLineHeight * lines.length * finalScale),
-    fontScale: finalScale,
-    lineHeight,
+    distanceRange: fontScale * fontData.distanceField.distanceRange,
+    width: effectiveWidth * fontScale,
+    height: effectiveHeight,
+    fontScale: fontScale,
+    lineHeight: lineHeightPx,
     fontFamily,
   };
 };