@lightningjs/renderer 3.0.2 → 3.0.3

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

@@ -254,14 +254,6 @@ export interface TrProps extends TrFontProps {
  * Glyph layout information for WebGL rendering
  */
 export interface GlyphLayout {
-  /**
-   * Unicode codepoint
-   */
-  codepoint: number;
-  /**
-   * Glyph ID in the font atlas
-   */
-  glyphId: number;
   /**
    * X position relative to text origin
    */
@@ -278,14 +270,6 @@ export interface GlyphLayout {
    * Height of glyph in font units
    */
   height: number;
-  /**
-   * X offset for glyph positioning
-   */
-  xOffset: number;
-  /**
-   * Y offset for glyph positioning
-   */
-  yOffset: number;
   /**
    * Atlas texture coordinates (normalized 0-1)
    */
@@ -300,9 +284,13 @@ export interface GlyphLayout {
  */
 export interface TextLayout {
   /**
-   * Individual glyph layouts
+   * vertices for rendering quads in WebGL
    */
-  glyphs: GlyphLayout[];
+  vertexBuffer: Float32Array;
+  /**
+   * glyph count in layout
+   */
+  glyphCount: number;
   /**
    * Total text width
    */
@@ -327,6 +315,14 @@ export interface TextLayout {
    * distanceRange used
    */
   distanceRange: number;
+  /**
+   * number of lines that exceeded maxHeight and were truncated
+   */
+  remainingLines: number;
+  /**
+   * Whether there is remaining text that exceeded maxHeight and was truncated
+   */
+  hasRemainingText: boolean;
 }
 
 export interface FontLoadOptions {
@@ -379,6 +375,14 @@ export interface TextRenderProps {
   parentHasRenderTexture: boolean;
   framebufferDimensions: unknown;
   stage: Stage;
+  /**
+   * Mutable wrapper ref used by the SDF renderer to cache the underlying
+   * WebGLBuffer across frames. The SDF renderer reads and writes the
+   * `.current` property so the node's ref box is updated in-place.
+   * CoreTextNode owns the ref and is responsible for calling
+   * deleteBuffer when the buffer is no longer needed.
+   */
+  glBufferRef: { current: WebGLBuffer | null };
 }
 
 export interface TextRenderInfo {
@@ -394,15 +398,13 @@ export interface TextRenderer {
   type: 'canvas' | 'sdf';
   font: FontHandler;
   renderText: (props: CoreTextNodeProps) => TextRenderInfo;
-  // Updated to accept layout data and return vertex buffer for performance
-  addQuads: (layout?: TextLayout) => Float32Array | null;
   renderQuads: (
     renderer: CoreRenderer,
     layout: TextLayout,
-    vertexBuffer: Float32Array,
     renderProps: TextRenderProps,
   ) => void;
   init: (stage: Stage) => void;
+  clearCache: () => void;
 }
 
 /**

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

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { NormalizedFontMetrics } from './TextRenderer.js';
+import type { CoreTextNodeProps } from '../CoreTextNode.js';
 
 const invisibleChars = /[\u200B\u200C\u200D\uFEFF\u00AD\u2060]/g;
 
@@ -97,3 +97,7 @@ export function tokenizeString(tokenRegex: RegExp, text: string): string[] {
   final.pop();
   return final.filter((word) => word != '');
 }
+
+export function getLayoutCacheKey(props: CoreTextNodeProps): string {
+  return `${props.text}-${props.fontFamily}-${props.fontSize}-${props.letterSpacing}-${props.lineHeight}-${props.maxHeight}-${props.maxWidth}-${props.textAlign}-${props.wordBreak}-${props.maxLines}-${props.overflowSuffix}`;
+}

package/src/main-api/Renderer.test.ts

@@ -0,0 +1,153 @@
+/*
+ * 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { RendererMain } from './Renderer.js';
+import type { Platform } from '../core/platforms/Platform.js';
+import type { Inspector } from './Inspector.js';
+import type { CanvasRenderer } from '../core/renderers/canvas/CanvasRenderer.js';
+import type { WebGlRenderer } from '../core/renderers/webgl/WebGlRenderer.js';
+
+// Mock isProductionEnvironment so the Inspector gets initialized
+vi.mock('../utils.js', async (importOriginal) => {
+  const actual = (await importOriginal()) as typeof import('../utils.js');
+  return {
+    ...actual,
+    isProductionEnvironment: false,
+  };
+});
+
+// Mock Stage to avoid real WebGL/Canvas renderer setup
+vi.mock('../core/Stage.js', () => {
+  const mockStage = {
+    root: {
+      id: 1,
+      children: [],
+      props: {},
+      on: vi.fn(),
+      off: vi.fn(),
+      emit: vi.fn(),
+    },
+    destroy: vi.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
+    emit: vi.fn(),
+    txManager: { destroy: vi.fn() },
+  };
+  return {
+    Stage: vi.fn(() => mockStage),
+  };
+});
+
+/**
+ * Minimal platform mock: returns a real <canvas> element so the Renderer
+ * can set its width/height and append it to the target.
+ */
+function makeMockPlatform() {
+  const canvas = document.createElement('canvas');
+  return vi.fn().mockReturnValue({ canvas, settings: {}, glw: null });
+}
+
+/** Convenience: construct RendererMain with the minimum required settings. */
+function makeRenderer(
+  target: HTMLElement,
+  extra: Partial<{
+    inspector: typeof Inspector | false;
+  }> = {},
+) {
+  const MockPlatform = makeMockPlatform();
+  return new RendererMain(
+    {
+      appWidth: 1920,
+      appHeight: 1080,
+      inspector: extra.inspector ?? false,
+      platform: MockPlatform as unknown as typeof Platform,
+      renderEngine: {} as unknown as
+        | typeof CanvasRenderer
+        | typeof WebGlRenderer,
+    },
+    target,
+  );
+}
+
+describe('RendererMain.close()', () => {
+  let target: HTMLDivElement;
+
+  beforeEach(() => {
+    target = document.createElement('div');
+    document.body.appendChild(target);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    target.remove();
+  });
+
+  it('should call inspector.destroy() when close() is called', () => {
+    const inspectorDestroy = vi.fn();
+    const MockInspector = vi.fn(() => ({ destroy: inspectorDestroy }));
+
+    const renderer = makeRenderer(target, {
+      inspector: MockInspector as unknown as typeof Inspector,
+    });
+
+    renderer.close();
+
+    expect(inspectorDestroy).toHaveBeenCalledOnce();
+  });
+
+  it('should call stage.destroy() when close() is called', async () => {
+    const { Stage } = await import('../core/Stage.js');
+    const renderer = makeRenderer(target);
+
+    const mockStageInstance = vi.mocked(Stage).mock.results[0]?.value as {
+      destroy: ReturnType<typeof vi.fn>;
+    };
+
+    renderer.close();
+
+    expect(mockStageInstance?.destroy).toHaveBeenCalledOnce();
+  });
+
+  it('should remove the canvas from the DOM when close() is called', () => {
+    const renderer = makeRenderer(target);
+    const canvas = renderer.canvas;
+
+    expect(target.contains(canvas)).toBe(true);
+
+    renderer.close();
+
+    expect(document.contains(canvas)).toBe(false);
+  });
+
+  it('should not throw when close() is called a second time', () => {
+    const MockInspector = vi.fn(() => ({ destroy: vi.fn() }));
+
+    const renderer = makeRenderer(target, {
+      inspector: MockInspector as unknown as typeof Inspector,
+    });
+
+    renderer.close();
+
+    // inspector is set to null after close(); the ?. guard must handle it
+    expect(() => renderer.close()).not.toThrow();
+  });
+});

package/src/main-api/Renderer.ts

@@ -533,7 +533,7 @@ export class RendererMain extends EventEmitter {
       boundsMargin: settings.boundsMargin || 0,
       deviceLogicalPixelRatio: settings.deviceLogicalPixelRatio || 1,
       devicePhysicalPixelRatio:
-        settings.devicePhysicalPixelRatio || window.devicePixelRatio || 1,
+        settings.devicePhysicalPixelRatio || this.windowDevicePixelRatio() || 1,
       clearColor: settings.clearColor ?? 0x00000000,
       fpsUpdateInterval: settings.fpsUpdateInterval || 0,
       enableClear: settings.enableClear ?? true,
@@ -582,8 +582,10 @@ export class RendererMain extends EventEmitter {
     this.canvas.width = deviceLogicalWidth * devicePhysicalPixelRatio;
     this.canvas.height = deviceLogicalHeight * devicePhysicalPixelRatio;
 
-    this.canvas.style.width = `${deviceLogicalWidth}px`;
-    this.canvas.style.height = `${deviceLogicalHeight}px`;
+    if (this.canvas.style) {
+      this.canvas.style.width = `${deviceLogicalWidth}px`;
+      this.canvas.style.height = `${deviceLogicalHeight}px`;
+    }
 
     // Initialize the stage
     this.stage = new Stage({
@@ -1027,4 +1029,32 @@ export class RendererMain extends EventEmitter {
     this.stage.options.targetFPS = fps > 0 ? fps : 0;
     this.stage.updateTargetFrameTime();
   }
+
+  private windowDevicePixelRatio() {
+    return typeof window !== 'undefined' ? window.devicePixelRatio : undefined;
+  }
+
+  /**
+   * Close and destroy the renderer, releasing all resources.
+   *
+   * @remarks
+   * This method performs a full teardown of the renderer:
+   * - Stops the platform render loop
+   * - Destroys all scene nodes (including text node font resources)
+   * - Releases all texture memory and GPU resources
+   * - Terminates image worker threads
+   * - Removes the canvas element from the target div
+   * - Destroys the inspector if active
+   */
+  close(): void {
+    // Destroy the inspector first
+    this.inspector?.destroy();
+    this.inspector = null;
+
+    // Destroy the stage (stops loop, destroys nodes, releases textures/GPU)
+    this.stage.destroy();
+
+    // Remove the canvas from the DOM
+    this.canvas.remove();
+  }
 }

package/dist/src/core/renderers/webgl/WebGlCoreShader.destroy.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/core/renderers/webgl/WebGlCoreShader.destroy.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=WebGlCoreShader.destroy.js.map

package/dist/src/core/renderers/webgl/WebGlCoreShader.destroy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"WebGlCoreShader.destroy.js","sourceRoot":"","sources":["../../../../../src/core/renderers/webgl/WebGlCoreShader.destroy.ts"],"names":[],"mappings":""}