@lightningjs/renderer 3.0.0-beta21 → 3.0.0-beta23

package/src/core/textures/Texture.ts

@@ -23,6 +23,7 @@ import type { Dimensions } from '../../common/CommonTypes.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
 import type { CoreContextTexture } from '../renderers/CoreContextTexture.js';
 import type { Bound } from '../lib/utils.js';
+import type { TextureError } from '../TextureError.js';
 
 /**
  * Event handler for when a Texture is freed
@@ -59,7 +60,7 @@ export interface CompressedData {
   /**
    * Supported container types ('pvr' or 'ktx').
    */
-  type: 'pvr' | 'ktx' | 'astc';
+  type: 'PVR' | 'KTX' | 'ASTC';
 
   /**
    * The width of the compressed texture in pixels. Defaults to 0.
@@ -86,7 +87,10 @@ export interface CompressedData {
 /**
  * Event handler for when a Texture fails to load
  */
-export type TextureFailedEventHandler = (target: any, error: Error) => void;
+export type TextureFailedEventHandler = (
+  target: any,
+  error: TextureError,
+) => void;
 
 /**
  * TextureData that is used to populate a CoreContextTexture
@@ -151,7 +155,7 @@ export abstract class Texture extends EventEmitter {
    * `null`.
    */
   private _dimensions: Dimensions | null = null;
-  private _error: Error | null = null;
+  private _error: TextureError | null = null;
 
   // aggregate state
   public state: TextureState = 'initial';
@@ -205,7 +209,7 @@ export abstract class Texture extends EventEmitter {
     return this._dimensions;
   }
 
-  get error(): Error | null {
+  get error(): TextureError | null {
     return this._error;
   }
 
@@ -393,13 +397,13 @@ export abstract class Texture extends EventEmitter {
 
   public setState(
     state: TextureState,
-    errorOrDimensions?: Error | Dimensions,
+    errorOrDimensions?: TextureError | Dimensions,
   ): void {
     if (this.state === state) {
       return;
     }
 
-    let payload: Error | Dimensions | null = null;
+    let payload: TextureError | Dimensions | null = null;
     if (state === 'loaded') {
       if (
         errorOrDimensions !== undefined &&
@@ -413,7 +417,7 @@ export abstract class Texture extends EventEmitter {
 
       payload = this._dimensions;
     } else if (state === 'failed') {
-      this._error = errorOrDimensions as Error;
+      this._error = errorOrDimensions as TextureError;
       payload = this._error;
 
       // increment the retry count for the texture

package/src/main-api/Inspector.ts

@@ -11,6 +11,8 @@ import type {
 } from '../common/IAnimationController.js';
 import { isProductionEnvironment } from '../utils.js';
 import { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
+import type { Texture } from '../core/textures/Texture.js';
+import { TextureType } from '../core/textures/Texture.js';
 
 /**
  * Inspector Options
@@ -204,6 +206,22 @@ const gradientColorPropertyMap = [
   'colorBr',
 ];
 
+const textureTypeNames: Record<number, string> = {
+  [TextureType.generic]: 'generic',
+  [TextureType.color]: 'color',
+  [TextureType.image]: 'image',
+  [TextureType.noise]: 'noise',
+  [TextureType.renderToTexture]: 'renderToTexture',
+  [TextureType.subTexture]: 'subTexture',
+};
+
+interface TextureMetrics {
+  previousState: string;
+  loadedCount: number;
+  failedCount: number;
+  freedCount: number;
+}
+
 const knownProperties = new Set<string>([
   ...Object.keys(stylePropertyMap),
   ...Object.keys(domPropertyMap),
@@ -223,6 +241,7 @@ export class Inspector {
   private width = 1920;
   private scaleX = 1;
   private scaleY = 1;
+  private textureMetrics = new Map<Texture, TextureMetrics>();
 
   // Performance monitoring for frequent setter calls
   private static setterCallCount = new Map<
@@ -788,6 +807,94 @@ export class Inspector {
     node: CoreNode | CoreTextNode,
     div: HTMLElement,
   ): CoreNode | CoreTextNode {
+    // Store texture event listeners for cleanup
+    const textureListeners = new Map<
+      Texture,
+      {
+        onLoaded: () => void;
+        onFailed: () => void;
+        onFreed: () => void;
+      }
+    >();
+
+    const coreNodeListeners = new Map<
+      CoreNode,
+      {
+        onLoaded: () => void;
+      }
+    >();
+
+    const setupCoreNodeListeners = (coreNode: CoreNode) => {
+      const onLoaded = () => {
+        this.updateTextNodeDimensions(div, coreNode as CoreTextNode);
+      };
+      coreNode.on('loaded', onLoaded);
+      coreNodeListeners.set(coreNode, { onLoaded });
+    };
+
+    // Helper function to setup texture event listeners
+    const setupTextureListeners = (texture: Texture | null) => {
+      // Clean up existing listeners first
+      textureListeners.forEach((listeners, oldTexture) => {
+        oldTexture.off('loaded', listeners.onLoaded);
+        oldTexture.off('failed', listeners.onFailed);
+        oldTexture.off('freed', listeners.onFreed);
+      });
+      textureListeners.clear();
+
+      // Setup new listeners if texture exists
+      if (texture) {
+        // Initialize metrics if not exists
+        if (!this.textureMetrics.has(texture)) {
+          this.textureMetrics.set(texture, {
+            previousState: texture.state,
+            loadedCount: 0,
+            failedCount: 0,
+            freedCount: 0,
+          });
+        }
+
+        const onLoaded = () => {
+          const metrics = this.textureMetrics.get(texture);
+          if (metrics) {
+            metrics.previousState =
+              metrics.previousState !== texture.state
+                ? metrics.previousState
+                : 'loading';
+            metrics.loadedCount++;
+          }
+          this.updateTextureAttributes(div, texture);
+        };
+        const onFailed = () => {
+          const metrics = this.textureMetrics.get(texture);
+          if (metrics) {
+            metrics.previousState =
+              metrics.previousState !== texture.state
+                ? metrics.previousState
+                : 'loading';
+            metrics.failedCount++;
+          }
+          this.updateTextureAttributes(div, texture);
+        };
+        const onFreed = () => {
+          const metrics = this.textureMetrics.get(texture);
+          if (metrics) {
+            metrics.previousState =
+              metrics.previousState !== texture.state
+                ? metrics.previousState
+                : texture.state;
+            metrics.freedCount++;
+          }
+          this.updateTextureAttributes(div, texture);
+        };
+
+        texture.on('loaded', onLoaded);
+        texture.on('failed', onFailed);
+        texture.on('freed', onFreed);
+
+        textureListeners.set(texture, { onLoaded, onFailed, onFreed });
+      }
+    };
     // Define traps for each property in knownProperties
     knownProperties.forEach((property) => {
       let originalProp = Object.getOwnPropertyDescriptor(node, property);
@@ -802,6 +909,10 @@ export class Inspector {
         return;
       }
 
+      if (property === 'text') {
+        setupCoreNodeListeners(node);
+      }
+
       Object.defineProperty(node, property, {
         get() {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -818,6 +929,15 @@ export class Inspector {
             value,
             node.props,
           );
+
+          // Setup texture event listeners if this is a texture property
+          if (property === 'texture') {
+            const textureValue =
+              value && typeof value === 'object' && 'state' in value
+                ? (value as Texture)
+                : null;
+            setupTextureListeners(textureValue);
+          }
         },
         configurable: true,
         enumerable: true,
@@ -827,6 +947,21 @@ export class Inspector {
     const originalDestroy = node.destroy;
     Object.defineProperty(node, 'destroy', {
       value: () => {
+        // Clean up texture event listeners and metrics
+        textureListeners.forEach((listeners, texture) => {
+          texture.off('loaded', listeners.onLoaded);
+          texture.off('failed', listeners.onFailed);
+          texture.off('freed', listeners.onFreed);
+          // Clean up metrics for this texture
+          this.textureMetrics.delete(texture);
+        });
+        textureListeners.clear();
+
+        coreNodeListeners.forEach((listeners, coreNode) => {
+          coreNode.off('loaded', listeners.onLoaded);
+        });
+        coreNodeListeners.clear();
+
         this.destroyNode(node.id);
         originalDestroy.call(node);
       },
@@ -856,6 +991,86 @@ export class Inspector {
     return node;
   }
 
+  updateTextNodeDimensions(div: HTMLElement, node: CoreTextNode) {
+    const textMetrics = node.renderInfo;
+    if (textMetrics) {
+      div.style.width = `${textMetrics.width}px`;
+      div.style.height = `${textMetrics.height}px`;
+    } else {
+      div.style.removeProperty('width');
+      div.style.removeProperty('height');
+    }
+  }
+
+  updateTextureAttributes(div: HTMLElement, texture: Texture) {
+    // Update texture state
+    div.setAttribute('data-texture-state', texture.state);
+
+    // Update texture type
+    div.setAttribute(
+      'data-texture-type',
+      textureTypeNames[texture.type] || 'unknown',
+    );
+
+    // Update texture dimensions if available
+    if (texture.dimensions) {
+      div.setAttribute('data-texture-width', String(texture.dimensions.w));
+      div.setAttribute('data-texture-height', String(texture.dimensions.h));
+    } else {
+      div.removeAttribute('data-texture-width');
+      div.removeAttribute('data-texture-height');
+    }
+
+    // Update renderable owners count
+    div.setAttribute(
+      'data-texture-owners',
+      String(texture.renderableOwners.length),
+    );
+
+    // Update retry count
+    div.setAttribute('data-texture-retry-count', String(texture.retryCount));
+
+    // Update max retry count if available
+    if (texture.maxRetryCount !== null) {
+      div.setAttribute(
+        'data-texture-max-retry-count',
+        String(texture.maxRetryCount),
+      );
+    } else {
+      div.removeAttribute('data-texture-max-retry-count');
+    }
+
+    // Update metrics if available
+    const metrics = this.textureMetrics.get(texture);
+    if (metrics) {
+      div.setAttribute('data-texture-previous-state', metrics.previousState);
+      div.setAttribute(
+        'data-texture-loaded-count',
+        String(metrics.loadedCount),
+      );
+      div.setAttribute(
+        'data-texture-failed-count',
+        String(metrics.failedCount),
+      );
+      div.setAttribute('data-texture-freed-count', String(metrics.freedCount));
+    } else {
+      div.removeAttribute('data-texture-previous-state');
+      div.removeAttribute('data-texture-loaded-count');
+      div.removeAttribute('data-texture-failed-count');
+      div.removeAttribute('data-texture-freed-count');
+    }
+
+    // Update error information if present
+    if (texture.error) {
+      div.setAttribute(
+        'data-texture-error',
+        texture.error.code || texture.error.message,
+      );
+    } else {
+      div.removeAttribute('data-texture-error');
+    }
+  }
+
   public destroy() {
     // Stop animation stats timer
     this.stopAnimationStatsTimer();

package/src/main-api/Renderer.ts

@@ -19,7 +19,7 @@
 
 import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js';
 import { EventEmitter } from '../common/EventEmitter.js';
-import { isProductionEnvironment } from '../utils.js';
+import { assertTruthy, isProductionEnvironment } from '../utils.js';
 import { Stage, type StageOptions } from '../core/Stage.js';
 import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
 import { type CoreTextNodeProps } from '../core/CoreTextNode.js';
@@ -550,7 +550,7 @@ export class RendererMain extends EventEmitter {
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit || 42,
       canvas: settings.canvas,
       createImageBitmapSupport: settings.createImageBitmapSupport || 'full',
-      platform: settings.platform || null,
+      platform: settings.platform || WebPlatform,
       maxRetryCount: settings.maxRetryCount ?? 5,
     };
 
@@ -562,29 +562,28 @@ export class RendererMain extends EventEmitter {
       inspector,
     } = settings as RendererMainSettings;
 
-    let platform;
-    if (
-      settings.platform !== undefined &&
-      settings.platform !== null &&
-      settings.platform.prototype instanceof Platform === true
-    ) {
-      // @ts-ignore - if Platform is a valid class, it will be used
-      platform = new settings.platform();
-    } else {
-      platform = new WebPlatform();
-    }
+    assertTruthy(
+      settings.platform,
+      'A platform implementation must be provided in settings.platform',
+    );
 
-    const canvas = settings.canvas || platform.createCanvas();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+    const platform = new (settings.platform as any)({
+      numImageWorkers: settings.numImageWorkers,
+      forceWebGL2: settings.forceWebGL2,
+      canvas: settings.canvas,
+    });
 
     const deviceLogicalWidth = appWidth * deviceLogicalPixelRatio;
     const deviceLogicalHeight = appHeight * deviceLogicalPixelRatio;
 
-    this.canvas = canvas;
-    canvas.width = deviceLogicalWidth * devicePhysicalPixelRatio;
-    canvas.height = deviceLogicalHeight * devicePhysicalPixelRatio;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unsafe-member-access
+    this.canvas = platform.canvas! as HTMLCanvasElement;
+    this.canvas.width = deviceLogicalWidth * devicePhysicalPixelRatio;
+    this.canvas.height = deviceLogicalHeight * devicePhysicalPixelRatio;
 
-    canvas.style.width = `${deviceLogicalWidth}px`;
-    canvas.style.height = `${deviceLogicalHeight}px`;
+    this.canvas.style.width = `${deviceLogicalWidth}px`;
+    this.canvas.style.height = `${deviceLogicalHeight}px`;
 
     // Initialize the stage
     this.stage = new Stage({
@@ -629,8 +628,8 @@ export class RendererMain extends EventEmitter {
         throw new Error('Could not find target element');
       }
 
-      targetEl.appendChild(canvas);
-    } else if (settings.canvas !== canvas) {
+      targetEl.appendChild(this.canvas);
+    } else if (settings.canvas !== this.canvas) {
       throw new Error(
         'New canvas element could not be appended to undefined target',
       );
@@ -638,7 +637,10 @@ export class RendererMain extends EventEmitter {
 
     // Initialize inspector (if enabled)
     if (inspector && isProductionEnvironment === false) {
-      this.inspector = new inspector(canvas, settings as RendererMainSettings);
+      this.inspector = new inspector(
+        this.canvas,
+        settings as RendererMainSettings,
+      );
     }
   }
 

package/src/utils.ts

@@ -17,53 +17,6 @@
  * limitations under the License.
  */
 
-import type { ContextSpy } from './core/lib/ContextSpy.js';
-
-export function createWebGLContext(
-  canvas: HTMLCanvasElement | OffscreenCanvas,
-  forceWebGL2 = false,
-  contextSpy: ContextSpy | null,
-): WebGLRenderingContext {
-  const config: WebGLContextAttributes = {
-    alpha: true,
-    antialias: false,
-    depth: false,
-    stencil: true,
-    desynchronized: false,
-    // Disabled because it prevents Visual Regression Tests from working
-    // failIfMajorPerformanceCaveat: true,
-    powerPreference: 'high-performance',
-    premultipliedAlpha: true,
-    preserveDrawingBuffer: false,
-  };
-  const gl =
-    // TODO: Remove this assertion once this issue is fixed in TypeScript
-    // https://github.com/microsoft/TypeScript/issues/53614
-    (canvas.getContext(forceWebGL2 ? 'webgl2' : 'webgl', config) ||
-      canvas.getContext(
-        'experimental-webgl' as 'webgl',
-        config,
-      )) as unknown as WebGLRenderingContext | null;
-  if (!gl) {
-    throw new Error('Unable to create WebGL context');
-  }
-  if (contextSpy) {
-    // Proxy the GL context to log all GL calls
-    return new Proxy(gl, {
-      get(target, prop) {
-        const value = target[prop as never] as unknown;
-        if (typeof value === 'function') {
-          contextSpy.increment(String(prop));
-          return value.bind(target);
-        }
-        return value;
-      },
-    });
-  }
-
-  return gl;
-}
-
 /**
  * Checks if we're in a development environment or not.
  *

package/src/core/lib/validateImageBitmap.ts

@@ -1,87 +0,0 @@
-import type { Platform } from '../platforms/Platform.js';
-
-export interface CreateImageBitmapSupport {
-  basic: boolean; // Supports createImageBitmap(image)
-  options: boolean; // Supports createImageBitmap(image, options)
-  full: boolean; // Supports createImageBitmap(image, sx, sy, sw, sh, options)
-}
-
-export async function validateCreateImageBitmap(
-  platform: Platform,
-): Promise<CreateImageBitmapSupport> {
-  // Test if createImageBitmap is supported using a simple 1x1 PNG image
-  // prettier-ignore
-  const pngBinaryData = new Uint8Array([
-      0x89, 0x50, 0x4e, 0x47,
-      0x0d, 0x0a, 0x1a, 0x0a, // PNG signature
-      0x00, 0x00, 0x00, 0x0d, // IHDR chunk length
-      0x49, 0x48, 0x44, 0x52, // "IHDR" chunk type
-      0x00, 0x00, 0x00, 0x01, // Width: 1
-      0x00, 0x00, 0x00, 0x01, // Height: 1
-      0x01,                   // Bit depth: 1
-      0x03,                   // Color type: Indexed
-      0x00,                   // Compression method: Deflate
-      0x00,                   // Filter method: None
-      0x00,                   // Interlace method: None
-      0x25, 0xdb, 0x56, 0xca, // CRC for IHDR
-      0x00, 0x00, 0x00, 0x03, // PLTE chunk length
-      0x50, 0x4c, 0x54, 0x45, // "PLTE" chunk type
-      0x00, 0x00, 0x00,       // Palette entry: Black
-      0xa7, 0x7a, 0x3d, 0xda, // CRC for PLTE
-      0x00, 0x00, 0x00, 0x01, // tRNS chunk length
-      0x74, 0x52, 0x4e, 0x53, // "tRNS" chunk type
-      0x00,                   // Transparency for black: Fully transparent
-      0x40, 0xe6, 0xd8, 0x66, // CRC for tRNS
-      0x00, 0x00, 0x00, 0x0a, // IDAT chunk length
-      0x49, 0x44, 0x41, 0x54, // "IDAT" chunk type
-      0x08, 0xd7,             // Deflate header
-      0x63, 0x60, 0x00, 0x00,
-      0x00, 0x02, 0x00, 0x01, // Zlib-compressed data
-      0xe2, 0x21, 0xbc, 0x33, // CRC for IDAT
-      0x00, 0x00, 0x00, 0x00, // IEND chunk length
-      0x49, 0x45, 0x4e, 0x44, // "IEND" chunk type
-      0xae, 0x42, 0x60, 0x82, // CRC for IEND
-    ]);
-
-  const support: CreateImageBitmapSupport = {
-    basic: false,
-    options: false,
-    full: false,
-  };
-
-  // Test basic createImageBitmap support
-  const blob = new Blob([pngBinaryData], { type: 'image/png' });
-  const bitmap = await platform.createImageBitmap(blob);
-  bitmap.close?.();
-  support.basic = true;
-
-  // Test createImageBitmap with options support
-  try {
-    const options = { premultiplyAlpha: 'none' as const };
-    const bitmapWithOptions = await platform.createImageBitmap(blob, options);
-    bitmapWithOptions.close?.();
-    support.options = true;
-  } catch (e) {
-    /* ignore */
-  }
-
-  // Test createImageBitmap with full options support
-  try {
-    const bitmapWithFullOptions = await platform.createImageBitmap(
-      blob,
-      0,
-      0,
-      1,
-      1,
-      {
-        premultiplyAlpha: 'none',
-      },
-    );
-    bitmapWithFullOptions.close?.();
-    support.full = true;
-  } catch (e) {
-    /* ignore */
-  }
-
-  return support;
-}