@lightningjs/renderer 2.17.0 → 2.18.1

package/src/main-api/Inspector.ts

@@ -8,6 +8,8 @@ import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
 import type { IAnimationController } from '../common/IAnimationController.js';
 import { isProductionEnvironment } from '../utils.js';
 import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
+import type { Texture } from '../core/textures/Texture.js';
+import { TextureType } from '../core/textures/Texture.js';
 
 /**
  * Inspector
@@ -154,6 +156,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),
@@ -161,6 +179,7 @@ const knownProperties = new Set<string>([
   'src',
   'parent',
   'data',
+  'texture',
 ]);
 
 export class Inspector {
@@ -170,6 +189,7 @@ export class Inspector {
   private width = 1920;
   private scaleX = 1;
   private scaleY = 1;
+  private textureMetrics = new Map<Texture, TextureMetrics>();
 
   constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings) {
     if (isProductionEnvironment()) return;
@@ -284,6 +304,79 @@ 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;
+      }
+    >();
+
+    // 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);
@@ -311,6 +404,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,
@@ -320,11 +422,26 @@ 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();
+
         this.destroyNode(node.id);
         originalDestroy.call(node);
       },
     });
 
+    // Setup initial texture listeners if node already has a texture
+    if (node.texture) {
+      setupTextureListeners(node.texture);
+    }
+
     const originalAnimate = node.animate;
     Object.defineProperty(node, 'animate', {
       value: (
@@ -353,6 +470,75 @@ export class Inspector {
     div?.remove();
   }
 
+  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.width));
+      div.setAttribute(
+        'data-texture-height',
+        String(texture.dimensions.height),
+      );
+    } 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.message);
+    } else {
+      div.removeAttribute('data-texture-error');
+    }
+  }
+
   updateNodeProperty(
     div: HTMLElement,
     property: keyof CoreNodeProps | keyof CoreTextNodeProps,
@@ -413,6 +599,23 @@ export class Inspector {
       return;
     }
 
+    // special case for texture information
+    if (property === 'texture') {
+      if (value && typeof value === 'object' && 'state' in value) {
+        const texture = value as Texture;
+        this.updateTextureAttributes(div, texture);
+      } else {
+        // Remove all texture attributes when texture is null
+        div.removeAttribute('data-texture-state');
+        div.removeAttribute('data-texture-type');
+        div.removeAttribute('data-texture-width');
+        div.removeAttribute('data-texture-height');
+        div.removeAttribute('data-texture-owners');
+        div.removeAttribute('data-texture-error');
+      }
+      return;
+    }
+
     // CSS mappable attribute
     if (stylePropertyMap[property]) {
       const mappedStyleResponse = stylePropertyMap[property]?.(value);

package/src/main-api/Renderer.ts

@@ -739,8 +739,6 @@ export class RendererMain extends EventEmitter {
   /**
    * Cleanup textures that are not being used
    *
-   * @param aggressive - If true, will cleanup all textures, regardless of render status
-   *
    * @remarks
    * This can be used to free up GFX memory used by textures that are no longer
    * being displayed.
@@ -754,8 +752,8 @@ export class RendererMain extends EventEmitter {
    * **NOTE3**: This will not cleanup textures that are marked as `preventCleanup`.
    * **NOTE4**: This has nothing to do with the garbage collection of JavaScript.
    */
-  cleanup(aggressive: boolean = false) {
-    this.stage.cleanup(aggressive);
+  cleanup() {
+    this.stage.cleanup();
   }
 
   /**