@lightningjs/renderer 3.0.2 → 3.0.4

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/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/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":""}

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);
-  }
-}