@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta11

package/src/core/text-rendering/sdf/Utils.ts

@@ -0,0 +1,436 @@
+/*
+ * 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 { isZeroWidthSpace } from '../Utils.js';
+import * as SdfFontHandler from '../SdfFontHandler.js';
+import type { TextLineStruct, WrappedLinesStruct } from '../TextRenderer.js';
+
+export const measureLines = (
+  lines: string[],
+  fontFamily: string,
+  letterSpacing: number,
+  fontScale: number,
+  maxLines: number,
+  hasMaxLines: boolean,
+): WrappedLinesStruct => {
+  const measuredLines: TextLineStruct[] = [];
+  const designLetterSpacing = letterSpacing * fontScale;
+  let remainingLines = hasMaxLines === true ? maxLines : lines.length;
+  let i = 0;
+
+  while (remainingLines > 0) {
+    const line = lines[i];
+    if (line === undefined) {
+      continue;
+    }
+    const width = measureText(line, fontFamily, designLetterSpacing);
+    measuredLines.push([line, width]);
+    i++;
+    remainingLines--;
+  }
+
+  return [
+    measuredLines,
+    remainingLines,
+    hasMaxLines === true ? lines.length - measuredLines.length > 0 : false,
+  ];
+};
+/**
+ * Wrap text for SDF rendering with proper width constraints
+ */
+export const wrapText = (
+  text: string,
+  fontFamily: string,
+  fontScale: number,
+  maxWidth: number,
+  letterSpacing: number,
+  overflowSuffix: string,
+  wordBreak: string,
+  maxLines: number,
+  hasMaxLines: boolean,
+): WrappedLinesStruct => {
+  const lines = text.split('\n');
+  const wrappedLines: TextLineStruct[] = [];
+  const maxWidthInDesignUnits = maxWidth / fontScale;
+  const designLetterSpacing = letterSpacing * fontScale;
+
+  // Calculate space width for line wrapping
+  const spaceWidth = measureText(' ', fontFamily, designLetterSpacing);
+
+  let wrappedLine: TextLineStruct[] = [];
+  let remainingLines = maxLines;
+  let hasRemainingText = true;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]!;
+
+    [wrappedLine, remainingLines, hasRemainingText] = wrapLine(
+      line,
+      fontFamily,
+      maxWidthInDesignUnits,
+      designLetterSpacing,
+      spaceWidth,
+      overflowSuffix,
+      wordBreak,
+      remainingLines,
+      hasMaxLines,
+    );
+
+    wrappedLines.push(...wrappedLine);
+  }
+
+  return [wrappedLines, remainingLines, hasRemainingText];
+};
+
+/**
+ * Wrap a single line of text for SDF rendering
+ */
+export const wrapLine = (
+  line: string,
+  fontFamily: string,
+  maxWidth: number,
+  designLetterSpacing: number,
+  spaceWidth: number,
+  overflowSuffix: string,
+  wordBreak: string,
+  remainingLines: number,
+  hasMaxLines: boolean,
+): WrappedLinesStruct => {
+  // 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: TextLineStruct[] = [];
+  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, designLetterSpacing);
+    // 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]);
+        currentLine = '';
+        currentLineWidth = 0;
+        remainingLines--;
+      }
+
+      if (wordBreak !== 'break-all') {
+        currentLine = word;
+        currentLineWidth = wordWidth;
+      }
+
+      if (wordBreak === 'break-word') {
+        const [lines, rl, rt] = breakWord(
+          word,
+          fontFamily,
+          maxWidth,
+          designLetterSpacing,
+          remainingLines,
+          hasMaxLines,
+        );
+        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 codepoint = word.codePointAt(0)!;
+        const glyph = SdfFontHandler.getGlyph(fontFamily, codepoint);
+        const firstLetterWidth =
+          glyph !== null ? glyph.xadvance + designLetterSpacing : 0;
+        let linebreak = false;
+        if (
+          currentLineWidth + firstLetterWidth + effectiveSpaceWidth >
+          maxWidth
+        ) {
+          wrappedLines.push([currentLine, currentLineWidth]);
+          remainingLines -= 1;
+          currentLine = '';
+          currentLineWidth = 0;
+          linebreak = true;
+        }
+        const initial = maxWidth - currentLineWidth;
+        const [lines, rl, rt] = breakAll(
+          word,
+          fontFamily,
+          initial,
+          maxWidth,
+          designLetterSpacing,
+          remainingLines,
+          hasMaxLines,
+        );
+        remainingLines = rl;
+        hasRemainingText = rt;
+        if (linebreak === false) {
+          const [text, width] = lines[0]!;
+          currentLine += ' ' + text;
+          currentLineWidth = width;
+          wrappedLines.push([currentLine, currentLineWidth]);
+        }
+
+        for (let j = 1; j < lines.length; j++) {
+          [currentLine, currentLineWidth] = lines[j]!;
+          if (j < lines.length - 1) {
+            wrappedLines.push([currentLine, currentLineWidth]);
+          }
+        }
+      }
+    }
+  }
+
+  // Add the last line if it has content
+  if (currentLine.length > 0 && remainingLines === 0) {
+    currentLine = truncateLineWithSuffix(
+      currentLine,
+      fontFamily,
+      maxWidth,
+      designLetterSpacing,
+      overflowSuffix,
+    );
+  }
+
+  if (currentLine.length > 0) {
+    wrappedLines.push([currentLine, currentLineWidth]);
+  } else {
+    wrappedLines.push(['', 0]);
+  }
+  return [wrappedLines, remainingLines, hasRemainingText];
+};
+
+/**
+ * Measure the width of text in SDF design units
+ */
+export const measureText = (
+  text: string,
+  fontFamily: string,
+  designLetterSpacing: number,
+): number => {
+  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 (isZeroWidthSpace(char)) {
+      continue;
+    }
+
+    const glyph = SdfFontHandler.getGlyph(fontFamily, codepoint);
+    if (glyph === null) continue;
+
+    let advance = glyph.xadvance;
+
+    // Add kerning if there's a previous character
+    if (prevCodepoint !== 0) {
+      const kerning = SdfFontHandler.getKerning(
+        fontFamily,
+        prevCodepoint,
+        codepoint,
+      );
+      advance += kerning;
+    }
+
+    width += advance + designLetterSpacing;
+    prevCodepoint = codepoint;
+  }
+
+  return width;
+};
+
+/**
+ * Truncate a line with overflow suffix to fit within width
+ */
+export const truncateLineWithSuffix = (
+  line: string,
+  fontFamily: string,
+  maxWidth: number,
+  designLetterSpacing: number,
+  overflowSuffix: string,
+): string => {
+  const suffixWidth = measureText(
+    overflowSuffix,
+    fontFamily,
+    designLetterSpacing,
+  );
+
+  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,
+      designLetterSpacing,
+    );
+    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 = (
+  word: string,
+  fontFamily: string,
+  maxWidth: number,
+  designLetterSpacing: number,
+  remainingLines: number,
+  hasMaxLines: boolean,
+): WrappedLinesStruct => {
+  const lines: TextLineStruct[] = [];
+  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 glyph = SdfFontHandler.getGlyph(fontFamily, codepoint);
+    if (glyph === null) continue;
+
+    const charWidth = glyph.xadvance + designLetterSpacing;
+
+    if (currentWidth + charWidth > maxWidth && currentPart.length > 0) {
+      remainingLines--;
+      if (remainingLines === 0) {
+        break;
+      }
+      lines.push([currentPart, currentWidth]);
+      currentPart = char;
+      currentWidth = charWidth;
+    } else {
+      currentPart += char;
+      currentWidth += charWidth;
+    }
+  }
+
+  if (currentPart.length > 0) {
+    lines.push([currentPart, currentWidth]);
+  }
+
+  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 = (
+  word: string,
+  fontFamily: string,
+  initial: number,
+  maxWidth: number,
+  designLetterSpacing: number,
+  remainingLines: number,
+  hasMaxLines: boolean,
+): WrappedLinesStruct => {
+  const lines: TextLineStruct[] = [];
+  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 codepoint = char.codePointAt(0)!;
+    const glyph = SdfFontHandler.getGlyph(fontFamily, codepoint);
+    if (glyph === null) continue;
+
+    const charWidth = glyph.xadvance + designLetterSpacing;
+    if (currentWidth + charWidth > max && currentPart.length > 0) {
+      lines.push([currentPart, currentWidth]);
+      currentPart = char;
+      currentWidth = charWidth;
+      max = maxWidth;
+      remainingLines--;
+    } else {
+      currentPart += char;
+      currentWidth += charWidth;
+    }
+  }
+
+  if (currentPart.length > 0) {
+    lines.push([currentPart, currentWidth]);
+  }
+
+  return [lines, remainingLines, hasRemainingText];
+};

package/src/core/text-rendering/sdf/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export * from './Utils.js';

package/src/core/textures/ImageTexture.ts

@@ -23,9 +23,15 @@ import {
   isCompressedTextureContainer,
   loadCompressedTexture,
 } from '../lib/textureCompression.js';
-import { convertUrlToAbsolute, isBase64Image } from '../lib/utils.js';
+import {
+  convertUrlToAbsolute,
+  dataURIToBlob,
+  isBase64Image,
+} from '../lib/utils.js';
 import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
-import { fetchJson } from '../text-rendering/font-face-types/utils.js';
+import { fetchJson } from '../lib/utils.js';
+import type { Platform } from '../platforms/Platform.js';
+import { isProductionEnvironment } from '../../utils.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -40,7 +46,7 @@ export interface ImageTextureProps {
    *
    * @default ''
    */
-  src?: string | ImageData | (() => ImageData | null);
+  src?: string | Blob | ImageData | (() => ImageData | null);
   /**
    * Whether to premultiply the alpha channel into the color channels of the
    * image.
@@ -120,12 +126,15 @@ export interface ImageTextureProps {
  * {@link ImageTextureProps.premultiplyAlpha} prop to `false`.
  */
 export class ImageTexture extends Texture {
-  public props: Required<ImageTextureProps>;
+  private platform: Platform;
 
+  public props: Required<ImageTextureProps>;
   public override type: TextureType = TextureType.image;
 
   constructor(txManager: CoreTextureManager, props: ImageTextureProps) {
     super(txManager);
+
+    this.platform = txManager.platform;
     this.props = ImageTexture.resolveDefaults(props);
   }
 
@@ -133,27 +142,32 @@ export class ImageTexture extends Texture {
     return mimeType.indexOf('image/png') !== -1;
   }
 
-  async loadImageFallback(src: string, hasAlpha: boolean) {
+  async loadImageFallback(src: string | Blob, hasAlpha: boolean) {
     const img = new Image();
 
-    if (isBase64Image(src) === false) {
+    if (typeof src === 'string' && isBase64Image(src) === false) {
       img.crossOrigin = 'anonymous';
     }
 
-    return new Promise<{ data: HTMLImageElement; premultiplyAlpha: boolean }>(
-      (resolve) => {
-        img.onload = () => {
-          resolve({ data: img, premultiplyAlpha: hasAlpha });
-        };
+    return new Promise<{
+      data: HTMLImageElement | null;
+      premultiplyAlpha: boolean;
+    }>((resolve) => {
+      img.onload = () => {
+        resolve({ data: img, premultiplyAlpha: hasAlpha });
+      };
 
-        img.onerror = () => {
-          console.warn('Image loading failed, returning fallback object.');
-          resolve({ data: img, premultiplyAlpha: hasAlpha });
-        };
+      img.onerror = () => {
+        console.warn('Image loading failed, returning fallback object.');
+        resolve({ data: null, premultiplyAlpha: hasAlpha });
+      };
 
+      if (src instanceof Blob) {
+        img.src = URL.createObjectURL(src);
+      } else {
         img.src = src;
-      },
-    );
+      }
+    });
   }
 
   async createImageBitmap(
@@ -172,23 +186,30 @@ export class ImageTexture extends Texture {
 
     if (imageBitmapSupported.full === true && sw !== null && sh !== null) {
       // createImageBitmap with crop
-      const bitmap = await createImageBitmap(blob, sx || 0, sy || 0, sw, sh, {
-        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      });
+      const bitmap = await this.platform.createImageBitmap(
+        blob,
+        sx || 0,
+        sy || 0,
+        sw,
+        sh,
+        {
+          premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        },
+      );
       return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
     } else if (imageBitmapSupported.basic === true) {
       // basic createImageBitmap without options or crop
       // this is supported for Chrome v50 to v52/54 that doesn't support options
       return {
-        data: await createImageBitmap(blob),
+        data: await this.platform.createImageBitmap(blob),
         premultiplyAlpha: hasAlphaChannel,
       };
     }
 
     // default createImageBitmap without crop but with options
-    const bitmap = await createImageBitmap(blob, {
+    const bitmap = await this.platform.createImageBitmap(blob, {
       premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
       colorSpaceConversion: 'none',
       imageOrientation: 'none',
@@ -215,9 +236,16 @@ export class ImageTexture extends Texture {
         );
       }
 
-      const blob = await fetchJson(src, 'blob').then(
-        (response) => response as Blob,
-      );
+      let blob;
+
+      if (isBase64Image(src) === true) {
+        blob = dataURIToBlob(src);
+      } else {
+        blob = await fetchJson(src, 'blob').then(
+          (response) => response as Blob,
+        );
+      }
+
       return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
     }
 
@@ -230,6 +258,12 @@ export class ImageTexture extends Texture {
       resp = await this.determineImageTypeAndLoadImage();
     } catch (e) {
       this.setState('failed', e as Error);
+
+      // log error only in development
+      if (isProductionEnvironment === false) {
+        console.error('ImageTexture:', e);
+      }
+
       return {
         data: null,
       };
@@ -274,6 +308,14 @@ export class ImageTexture extends Texture {
     }
 
     if (typeof src !== 'string') {
+      if (src instanceof Blob) {
+        if (this.txManager.hasCreateImageBitmap === true) {
+          const { sx, sy, sw, sh } = this.props;
+          return this.createImageBitmap(src, premultiplyAlpha, sx, sy, sw, sh);
+        } else {
+          return this.loadImageFallback(src, premultiplyAlpha ?? true);
+        }
+      }
       if (src instanceof ImageData) {
         return {
           data: src,