@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta11

package/src/core/textures/Texture.ts

@@ -22,6 +22,7 @@ import type { SubTextureProps } from './SubTexture.js';
 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';
 
 /**
  * Event handler for when a Texture is freed
@@ -100,6 +101,10 @@ export interface TextureData {
    */
   premultiplyAlpha?: boolean | null;
 }
+/**
+ * TextureCoords generally numbers between 0 - 1
+ */
+export type TextureCoords = Bound;
 
 export type TextureState =
   | 'initial' // Before anything is loaded
@@ -136,9 +141,14 @@ export abstract class Texture extends EventEmitter {
    * Until the texture data is loaded for the first time the value will be
    * `null`.
    */
-  readonly dimensions: Readonly<Dimensions> | null = null;
+  private _dimensions: Dimensions | null = null;
+  private _error: Error | null = null;
 
-  readonly error: Error | null = null;
+  /**
+   * Texture states that are considered transitional and should be skipped during cleanup
+   */
+  public static readonly TRANSITIONAL_TEXTURE_STATES: readonly TextureState[] =
+    ['fetching', 'fetched', 'loading'];
 
   // aggregate state
   public state: TextureState = 'initial';
@@ -159,6 +169,14 @@ export abstract class Texture extends EventEmitter {
     super();
   }
 
+  get dimensions(): Dimensions | null {
+    return this._dimensions;
+  }
+
+  get error(): Error | null {
+    return this._error;
+  }
+
   /**
    * Add/remove an owner to/from the Texture based on its renderability.
    *
@@ -238,6 +256,23 @@ export abstract class Texture extends EventEmitter {
     this.ctxTexture?.free();
   }
 
+  /**
+   * Destroy the texture.
+   *
+   * @remarks
+   * This method is called when the texture is no longer needed and should be
+   * cleaned up.
+   */
+  destroy(): void {
+    // Only free GPU resources if we're in a state where they exist
+    if (this.state === 'loaded') {
+      this.free();
+    }
+
+    // Always free texture data regardless of state
+    this.freeTextureData();
+  }
+
   /**
    * Free the source texture data for this Texture.
    *
@@ -259,11 +294,20 @@ export abstract class Texture extends EventEmitter {
 
     let payload: Error | Dimensions | null = null;
     if (state === 'loaded') {
-      (this.dimensions as Dimensions) = errorOrDimensions as Dimensions;
-      payload = this.dimensions;
+      if (
+        errorOrDimensions !== undefined &&
+        'width' in errorOrDimensions === true &&
+        'height' in errorOrDimensions === true &&
+        errorOrDimensions.width !== undefined &&
+        errorOrDimensions.height !== undefined
+      ) {
+        this._dimensions = errorOrDimensions;
+      }
+
+      payload = this._dimensions;
     } else if (state === 'failed') {
-      (this.error as Error) = errorOrDimensions as Error;
-      payload = this.error;
+      this._error = errorOrDimensions as Error;
+      payload = this._error;
     }
 
     // emit the new state

package/src/main-api/INode.ts

@@ -57,15 +57,16 @@ export interface INode<ShaderNode extends CoreShaderNode = CoreShaderNode>
 /**
  * Properties used to animate() a Node
  */
-export interface INodeAnimateProps<ShNode extends CoreShaderNode>
-  extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
+export interface INodeAnimateProps<
+  ShNode extends CoreShaderNode = CoreShaderNode,
+> extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
   shaderProps: Partial<ShNode['props']>;
 }
 
 /**
  * Properties used to create a new Node
  */
-export interface INodeProps<ShNode extends CoreShaderNode>
+export interface INodeProps<ShNode extends CoreShaderNode = CoreShaderNode>
   extends Omit<CoreNodeProps, 'shader' | 'parent'> {
   shader: ShNode;
   parent: INode | null;

package/src/main-api/Inspector.ts

@@ -7,7 +7,7 @@ import { type RendererMainSettings } from './Renderer.js';
 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 { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
 
 /**
  * Inspector
@@ -79,8 +79,6 @@ const stylePropertyMap: {
   zIndex: () => 'z-index',
   fontFamily: () => 'font-family',
   fontStyle: () => 'font-style',
-  fontWeight: () => 'font-weight',
-  fontStretch: () => 'font-stretch',
   letterSpacing: () => 'letter-spacing',
   textAlign: () => 'text-align',
   overflowSuffix: () => 'overflow-suffix',
@@ -166,13 +164,15 @@ const knownProperties = new Set<string>([
 export class Inspector {
   private root: HTMLElement | null = null;
   private canvas: HTMLCanvasElement | null = null;
+  private mutationObserver: MutationObserver = new MutationObserver(() => {});
+  private resizeObserver: ResizeObserver = new ResizeObserver(() => {});
   private height = 1080;
   private width = 1920;
   private scaleX = 1;
   private scaleY = 1;
 
   constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings) {
-    if (isProductionEnvironment()) return;
+    if (isProductionEnvironment === true) return;
 
     if (!settings) {
       throw new Error('settings is required');
@@ -196,18 +196,18 @@ export class Inspector {
     document.body.appendChild(this.root);
 
     //listen for changes on canvas
-    const mutationObserver = new MutationObserver(
+    this.mutationObserver = new MutationObserver(
       this.setRootPosition.bind(this),
     );
-    mutationObserver.observe(canvas, {
+    this.mutationObserver.observe(canvas, {
       attributes: true,
       childList: false,
       subtree: false,
     });
 
     // Create a ResizeObserver to watch for changes in the element's size
-    const resizeObserver = new ResizeObserver(this.setRootPosition.bind(this));
-    resizeObserver.observe(canvas);
+    this.resizeObserver = new ResizeObserver(this.setRootPosition.bind(this));
+    this.resizeObserver.observe(canvas);
 
     //listen for changes on window
     window.addEventListener('resize', this.setRootPosition.bind(this));
@@ -259,6 +259,24 @@ export class Inspector {
     return div;
   }
 
+  createNodes(node: CoreNode): boolean {
+    if (this.root === null) {
+      return false;
+    }
+
+    const div = this.root.querySelector(`[id="${node.id}"]`);
+    if (div === null && node instanceof CoreTextNode) {
+      this.createTextNode(node);
+    } else if (div === null && node instanceof CoreNode) {
+      this.createNode(node);
+    }
+
+    for (const child of node.children) {
+      this.createNodes(child);
+    }
+    return true;
+  }
+
   createNode(node: CoreNode): CoreNode {
     const div = this.createDiv(node.id, node.props);
     (div as HTMLElement & { node: CoreNode }).node = node;
@@ -323,6 +341,7 @@ export class Inspector {
         this.destroyNode(node.id);
         originalDestroy.call(node);
       },
+      configurable: true,
     });
 
     const originalAnimate = node.animate;
@@ -343,11 +362,24 @@ export class Inspector {
 
         return animationController;
       },
+      configurable: true,
     });
 
     return node;
   }
 
+  public destroy() {
+    // Remove DOM observers
+    this.mutationObserver.disconnect();
+    this.resizeObserver.disconnect();
+
+    // Remove resize listener
+    window.removeEventListener('resize', this.setRootPosition.bind(this));
+    if (this.root && this.root.parentNode) {
+      this.root.remove();
+    }
+  }
+
   destroyNode(id: number) {
     const div = document.getElementById(id.toString());
     div?.remove();
@@ -475,6 +507,19 @@ export class Inspector {
     }
   }
 
+  updateViewport(
+    width: number,
+    height: number,
+    deviceLogicalPixelRatio: number,
+  ) {
+    this.scaleX = deviceLogicalPixelRatio ?? 1;
+    this.scaleY = deviceLogicalPixelRatio ?? 1;
+
+    this.width = width;
+    this.height = height;
+    this.setRootPosition();
+  }
+
   // simple animation handler
   animateNode(
     div: HTMLElement,