@lightningjs/renderer 3.0.3 → 3.0.5

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

@@ -227,7 +227,9 @@ export const wrapText = (
         : [[['', 0, false, 0, 0]], remainingLines, i < lines.length - 1];
 
     remainingLines--;
-    wrappedLines.push(...wrappedLine);
+    for (let j = 0; j < wrappedLine.length; j++) {
+      wrappedLines.push(wrappedLine[j]!);
+    }
 
     if (hasMaxLines === true && remainingLines <= 0) {
       const lastLine = wrappedLines[wrappedLines.length - 1]!;
@@ -278,44 +280,75 @@ export const wrapLine = (
   let hasRemainingText = true;
 
   const wrapFn = getWrapStrategy(wordBreak);
-  while (words.length > 0 && remainingLines > 0) {
-    let word = words.shift()!;
-    let wordWidth = measureText(word, fontFamily, letterSpacing);
+  let wordIdx = 0;
+  let spaceIdx = 0;
+  let pendingWord = '';
+
+  while (
+    (pendingWord.length > 0 || wordIdx < words.length) &&
+    remainingLines > 0
+  ) {
+    let word: string;
+    let wordWidth: number;
     let remainingWord = '';
 
+    if (pendingWord.length > 0) {
+      word = pendingWord;
+      pendingWord = '';
+    } else {
+      word = words[wordIdx++]!;
+    }
+    wordWidth = measureText(word, fontFamily, letterSpacing);
+
     //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--;
+        const isLastLine = remainingLines === 0;
+        let lineTruncated = isLastLine;
         //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,
-              );
+        [word, remainingWord, wordWidth] = isLastLine
+          ? truncateWord(
+              measureText,
+              word,
+              wordWidth,
+              maxWidth,
+              fontFamily,
+              letterSpacing,
+              overflowSuffix,
+              overflowWidth,
+            )
+          : splitWord(
+              measureText,
+              word,
+              wordWidth,
+              maxWidth,
+              fontFamily,
+              letterSpacing,
+            );
 
         if (remainingWord.length > 0) {
-          words.unshift(remainingWord);
+          if (word.length === 0) {
+            if (overflowSuffix.length > 0) {
+              word = overflowSuffix;
+              wordWidth = overflowWidth;
+            } else {
+              word = remainingWord.charAt(0);
+              if (word.length === 0) {
+                break;
+              }
+              wordWidth = measureText(word, fontFamily, letterSpacing);
+            }
+            remainingWord = '';
+            remainingLines = 0;
+            lineTruncated = true;
+          }
+          pendingWord = remainingWord;
         }
         // first word doesn't fit on an empty line
-        wrappedLines.push([word, wordWidth, false, 0, 0]);
+        wrappedLines.push([word, wordWidth, lineTruncated, 0, 0]);
       } else if (wordWidth + spaceWidth >= maxWidth) {
         remainingLines--;
         // word with space doesn't fit, but word itself fits - put on new line
@@ -326,7 +359,7 @@ export const wrapLine = (
       }
       continue;
     }
-    const space = spaces.shift() || '';
+    const space = spaces[spaceIdx++] || '';
     // For width calculation, treat ZWSP as having 0 width but regular space functionality
     const effectiveSpaceWidth = space === '\u200B' ? 0 : spaceWidth;
     const totalWidth = currentLineWidth + effectiveSpaceWidth + wordWidth;
@@ -367,7 +400,7 @@ export const wrapLine = (
     );
 
     if (remainingWord.length > 0) {
-      words.unshift(remainingWord);
+      pendingWord = remainingWord;
     }
   }
 

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

@@ -17,8 +17,8 @@
  * limitations under the License.
  */
 
-import type { CoreTextNodeProps } from '../CoreTextNode.js';
-import type { CoreRenderer } from '../renderers/CoreRenderer.js';
+import type { CoreTextNode, CoreTextNodeProps } from '../CoreTextNode.js';
+import type { WebGlCtxTexture } from '../renderers/webgl/WebGlCtxTexture.js';
 import type { Stage } from '../Stage.js';
 
 // Text baseline and vertical align types
@@ -385,24 +385,31 @@ export interface TextRenderProps {
   glBufferRef: { current: WebGLBuffer | null };
 }
 
-export interface TextRenderInfo {
+export interface RenderInfo {
   width: number;
   height: number;
-  hasRemainingText?: boolean;
-  remainingLines?: number;
-  imageData?: ImageData | null; // Image data for Canvas Text Renderer
-  layout?: TextLayout; // Layout data for SDF renderer caching
+  hasRemainingText: boolean;
+  remainingLines: number;
 }
 
+export type SdfRenderInfo = RenderInfo & {
+  type: 'sdf';
+  layout: TextLayout;
+  atlasTexture: WebGlCtxTexture;
+};
+
+export type CanvasRenderInfo = RenderInfo & {
+  type: 'canvas';
+  imageData: ImageData;
+};
+
+export type TextRenderInfo = SdfRenderInfo | CanvasRenderInfo;
+
 export interface TextRenderer {
   type: 'canvas' | 'sdf';
   font: FontHandler;
   renderText: (props: CoreTextNodeProps) => TextRenderInfo;
-  renderQuads: (
-    renderer: CoreRenderer,
-    layout: TextLayout,
-    renderProps: TextRenderProps,
-  ) => void;
+  renderQuads: (textNode: CoreTextNode) => void;
   init: (stage: Stage) => void;
   clearCache: () => void;
 }

package/src/core/text-rendering/tests/TextLayoutEngine.test.ts

@@ -247,6 +247,26 @@ describe('SDF Text Utils', () => {
       expect(result[0].length).toBeGreaterThan(1);
       expect(result[0][0]?.[0]).toBe('hello world test');
     });
+
+    it('should return non-empty output when maxWidth is smaller than glyph and suffix width', () => {
+      const result = wrapLine(
+        testMeasureText,
+        'hello',
+        'Arial',
+        5,
+        0,
+        10,
+        '...',
+        30,
+        'break-word',
+        1,
+      );
+
+      expect(result[0]).toHaveLength(1);
+      expect(result[0][0]?.[0]).toBe('...');
+      expect(result[0][0]?.[2]).toBe(true);
+      expect(result[1]).toBe(0);
+    });
   });
 
   describe('wrapText', () => {

package/src/core/textures/ImageTexture.ts

@@ -143,6 +143,24 @@ export class ImageTexture extends Texture {
   }
 
   override async getTextureSource(): Promise<TextureData> {
+    // Compressed textures are not supported by the Canvas2D renderer.
+    // Fail fast here before incurring a network fetch or binary decode.
+    if (this.txManager.renderer?.mode === 'canvas') {
+      const { src, type } = this.props;
+      if (
+        type === 'compressed' ||
+        (typeof src === 'string' && isCompressedTextureContainer(src) === true)
+      ) {
+        const err = new Error(
+          `ImageTexture: Compressed textures are not supported in Canvas2D render mode (src: ${String(
+            src,
+          )})`,
+        );
+        this.setState('failed', err);
+        return { data: null };
+      }
+    }
+
     let resp: TextureData;
     try {
       resp = await this.determineImageTypeAndLoadImage();

package/src/core/textures/Texture.ts

@@ -252,6 +252,11 @@ export abstract class Texture extends EventEmitter {
       return false;
     }
 
+    // Don't cleanup a texture that is in the process of loading
+    if (this.state === 'loading') {
+      return false;
+    }
+
     // Don't cleanup if not renderable
     if (this.renderable === true) {
       return false;
@@ -353,6 +358,7 @@ export abstract class Texture extends EventEmitter {
    */
   free(): void {
     this.ctxTexture?.free();
+    this.ctxTexture = undefined;
   }
 
   /**

package/src/main-api/Inspector.ts

@@ -740,12 +740,13 @@ export class Inspector {
   }
 
   createDiv(
-    id: number,
+    node: CoreNode,
     properties: CoreNodeProps | CoreTextNodeProps,
   ): HTMLElement {
     const div = document.createElement('div');
     div.style.position = 'absolute';
-    div.id = id.toString();
+    div.id = node.id.toString();
+    div.setAttribute('type', node.constructor.name);
 
     // set initial properties
     for (const key in properties) {
@@ -780,7 +781,7 @@ export class Inspector {
   }
 
   createNode(node: CoreNode): CoreNode {
-    const div = this.createDiv(node.id, node.props);
+    const div = this.createDiv(node, node.props);
     (div as HTMLElement & { node: CoreNode }).node = node;
     (node as CoreNode & { div: HTMLElement }).div = div;
 
@@ -796,7 +797,7 @@ export class Inspector {
     // eslint-disable-next-line
     // @ts-ignore - textProps is a private property and keeping it that way
     // but we need it from the inspector to set the initial properties on the div element
-    const div = this.createDiv(node.id, node.textProps);
+    const div = this.createDiv(node, node.textProps);
     (div as HTMLElement & { node: CoreNode }).node = node;
     (node as CoreTextNode & { div: HTMLElement }).div = div;
 
@@ -897,16 +898,16 @@ export class Inspector {
     };
     // Define traps for each property in knownProperties
     knownProperties.forEach((property) => {
-      let originalProp = Object.getOwnPropertyDescriptor(node, property);
-
-      if (originalProp === undefined) {
-        // Search the prototype chain for the property descriptor
-        const proto = Object.getPrototypeOf(node) as CoreNode | CoreTextNode;
-        originalProp = Object.getOwnPropertyDescriptor(proto, property);
-      }
-
-      if (originalProp === undefined) {
-        return;
+      let proto: CoreNode | ObjectConstructor | null = node;
+      let originalProp: PropertyDescriptor | undefined | null = Object.getOwnPropertyDescriptor(proto, property);
+
+      // Search the prototype chain for the property descriptor
+      while(originalProp === undefined) {
+          proto = Object.getPrototypeOf(proto) as ObjectConstructor;
+          if (proto === null) {
+            return;
+          }
+          originalProp = Object.getOwnPropertyDescriptor(proto, property);
       }
 
       if (property === 'text') {
@@ -1101,7 +1102,7 @@ export class Inspector {
     value: any,
     props: CoreNodeProps | CoreTextNodeProps,
   ) {
-    if (this.root === null || value === undefined || value === null) {
+    if (this.root === null || value === undefined) {
       return;
     }
 
@@ -1109,17 +1110,16 @@ export class Inspector {
      * Special case for parent property
      */
     if (property === 'parent') {
-      const parentId: number = value.id;
-
-      // only way to detect if the parent is the root node
-      // if you are reading this and have a better way, please let me know
-      if (parentId === 1) {
-        this.root.appendChild(div);
-        return;
+      if (value) {
+        // detect if the parent is the root node
+        if (value.id === value.stage.root.id) {
+          this.root.appendChild(div);
+        } else {
+          value.div.appendChild(div);
+        }
+      } else {
+        div.parentNode?.removeChild(div);
       }
-
-      const parent = document.getElementById(parentId.toString());
-      parent?.appendChild(div);
       return;
     }
 

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

@@ -1,10 +0,0 @@
-import type { Stage } from "../Stage";
-import type { FontLoadOptions, TextRenderer, TextRenderers } from "./TextRenderer";
-export default class TextGenerator {
-    readonly stage: Stage;
-    private layoutCache;
-    fontEngines: Record<string, TextRenderer>;
-    constructor(stage: Stage, fontEngines: TextRenderer[]);
-    loadFont(rendererType: TextRenderers, options: FontLoadOptions): any;
-    destroy(): void;
-}

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

@@ -1,36 +0,0 @@
-export default class TextGenerator {
-    stage;
-    layoutCache = new Map();
-    fontEngines = {};
-    constructor(stage, fontEngines) {
-        this.stage = stage;
-        if (stage.renderer.mode === 'canvas') {
-            //filter out SDF renderer if the main renderer is canvas, since SDF rendering is not supported in that case
-            fontEngines = fontEngines.filter(engine => {
-                if (engine.type === 'canvas') {
-                    return true;
-                }
-                console.warn(`SDF text rendering is not supported in canvas mode. The SDF text renderer will be ignored.`);
-                return false;
-            });
-        }
-        for (let i = 0; i < fontEngines.length; i++) {
-            const engine = fontEngines[i];
-            this.fontEngines[engine.type] = engine;
-            engine.init(stage);
-        }
-    }
-    loadFont(rendererType, options) {
-        const rendererTypeKey = String(rendererType);
-        const fontEngine = this.fontEngines[rendererTypeKey];
-        if (fontEngine === undefined) {
-            throw new Error(`Font handler for renderer type '${rendererTypeKey}' not found. Available types: ${Object.keys(this.fontEngines).join(', ')}`);
-        }
-        return fontEngine.font.loadFont(this.stage, options);
-    }
-    destroy() {
-        // Clean up resources if necessary
-        this.layoutCache.clear();
-    }
-}
-//# sourceMappingURL=TextGenerator.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TextGenerator.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/TextGenerator.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,OAAO,aAAa;IAKX;IAJb,WAAW,GAA4B,IAAI,GAAG,EAAE,CAAC;IAEzD,WAAW,GAAiC,EAAE,CAAC;IAE/C,YAAqB,KAAY,EAAE,WAA2B;QAAzC,UAAK,GAAL,KAAK,CAAO;QAC/B,IAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACpC,2GAA2G;YAC3G,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;gBACxC,IAAG,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;oBAC5B,OAAO,IAAI,CAAC;gBACd,CAAC;gBACD,OAAO,CAAC,IAAI,CAAC,4FAA4F,CAAC,CAAC;gBAC3G,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;QACL,CAAC;QAED,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;YACvC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;IAGD,QAAQ,CAAC,YAA2B,EAAE,OAAwB;QAC5D,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;QAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAErD,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CACb,mCAAmC,eAAe,iCAAiC,MAAM,CAAC,IAAI,CAC5F,IAAI,CAAC,WAAW,CACjB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CACf,CAAC;QACJ,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACvD,CAAC;IAED,OAAO;QAEL,kCAAkC;QAClC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC;CACF"}

package/src/core/renderers/webgl/SdfRenderOp.ts

@@ -1,106 +0,0 @@
-/*
- * 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 { CoreRenderOp } from '../CoreRenderOp.js';
-import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
-import type { BufferCollection } from './internal/BufferCollection.js';
-import type { WebGlShaderNode } from './WebGlShaderNode.js';
-import type { RectWithValid } from '../../lib/utils.js';
-import type { Dimensions } from '../../../common/CommonTypes.js';
-import type { Stage } from '../../Stage.js';
-
-/**
- * Can render multiple quads with multiple textures (up to vertex shader texture limit)
- *
- */
-export class SdfRenderOp extends CoreRenderOp {
-  public numQuads = 0;
-  public readonly isCoreNode = false as const;
-  public renderOpTextures: WebGlCtxTexture[] = [];
-  public time: number = 0;
-  readonly stage: Stage;
-
-  constructor(
-    readonly renderer: WebGlRenderer,
-    readonly shader: WebGlShaderNode,
-    readonly sdfShaderProps: Record<string, unknown>,
-    readonly quadBufferCollection: BufferCollection,
-    readonly worldAlpha: number,
-    readonly clippingRect: RectWithValid,
-    readonly w: number,
-    readonly h: number,
-    readonly rtt: boolean,
-    readonly parentHasRenderTexture: boolean,
-    readonly framebufferDimensions: Dimensions | null,
-  ) {
-    super();
-    this.stage = renderer.stage;
-  }
-
-  addTexture(texture: WebGlCtxTexture): number {
-    const { renderOpTextures } = this;
-    const length = renderOpTextures.length;
-
-    // We only support 1 texture (atlas) for SDF for now, but following the pattern
-    for (let i = 0; i < length; i++) {
-      if (renderOpTextures[i] === texture) {
-        return i;
-      }
-    }
-
-    renderOpTextures.push(texture);
-    return length;
-  }
-
-  draw() {
-    const { glw, stage } = this.renderer;
-    const canvas = stage.platform!.canvas!;
-
-    stage.shManager.useShader(this.shader.program);
-    this.shader.program.bindRenderOp(this);
-
-    // Clipping
-    if (this.clippingRect.valid === true) {
-      const pixelRatio = this.parentHasRenderTexture ? 1 : stage.pixelRatio;
-      const clipX = Math.round(this.clippingRect.x * pixelRatio);
-      const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
-      const clipHeight = Math.round(this.clippingRect.h * pixelRatio);
-      let clipY = Math.round(
-        canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
-      );
-      // if parent has render texture, we need to adjust the scissor rect
-      // to be relative to the parent's framebuffer
-      if (this.parentHasRenderTexture) {
-        clipY = this.framebufferDimensions
-          ? this.framebufferDimensions.h - this.h
-          : 0;
-      }
-
-      glw.setScissorTest(true);
-      glw.scissor(clipX, clipY, clipWidth, clipHeight);
-    } else {
-      glw.setScissorTest(false);
-    }
-
-    // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
-    // Note: buffers should be bound by bindRenderOp -> bindBufferCollection
-    glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
-  }
-}