Fix up issues with Text / Texture loaded/failed event refactor

examples/common/utils.ts

@@ -17,16 +17,22 @@
  * limitations under the License.
  */
 
-import type { Dimensions, ITextNode, INode } from '@lightningjs/renderer';
+import type {
+  Dimensions,
+  ITextNode,
+  INode,
+  NodeTextLoadedPayload,
+} from '@lightningjs/renderer';
 
 export async function waitForTextDimensions(
   node: ITextNode,
 ): Promise<Dimensions> {
   return new Promise((resolve) => {
-    node.once('textLoaded', (_node: INode, dimensions: Dimensions) => {
+    node.once('loaded', (_node: INode, payload: NodeTextLoadedPayload) => {
+      const { width, height } = payload.dimensions;
       resolve({
-        width: dimensions.width,
-        height: dimensions.height,
+        width,
+        height,
       });
     });
   });

examples/tests/alpha-blending.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { INode, TextureLoadedEventHandler } from '@lightningjs/renderer';
+import type { INode, NodeLoadedEventHandler } from '@lightningjs/renderer';
 import { mergeColorAlpha } from '@lightningjs/renderer/utils';
 import type { ExampleSettings } from '../common/ExampleSettings.js';
 import red25 from '../assets/red-25.png';
@@ -445,9 +445,10 @@ export default async function ({
 
     curY += 30 + PADDING;
 
-    const sizeToTexture: TextureLoadedEventHandler = (target, dimensions) => {
-      target.width = dimensions.width;
-      target.height = dimensions.height;
+    const sizeToTexture: NodeLoadedEventHandler = (target, payload) => {
+      const { width, height } = payload.dimensions;
+      target.width = width;
+      target.height = height;
     };
 
     renderer
@@ -460,7 +461,7 @@ export default async function ({
         alpha: 1,
         parent: sideContainer,
       })
-      .once('txLoaded', sizeToTexture);
+      .once('loaded', sizeToTexture);
 
     curX += RECT_SIZE + PADDING;
 
@@ -472,7 +473,7 @@ export default async function ({
         alpha: 1.0,
         parent: sideContainer,
       })
-      .once('txLoaded', sizeToTexture);
+      .once('loaded', sizeToTexture);
 
     curX += RECT_SIZE + PADDING;
 

examples/tests/text-events.ts

@@ -22,7 +22,8 @@ import {
   type ITextNode,
   type RendererMain,
   type Dimensions,
-  type TextLoadedEventHandler,
+  type NodeLoadedEventHandler,
+  type NodeFailedEventHandler,
 } from '@lightningjs/renderer';
 import { EventEmitter } from '@lightningjs/renderer/utils';
 import type { ExampleSettings } from '../common/ExampleSettings.js';
@@ -96,7 +97,7 @@ export default async function ({ renderer, driverName }: ExampleSettings) {
       (renderer.settings.appHeight * 3) / 4 - marqueeCanvas.node.height / 2;
   });
 
-  const marqueeText = `The following is a test of the textLoaded event...
+  const marqueeText = `The following is a test of the text loaded event...
 From Philly's streets to Dutch canal's grace,
 A code symphony spanned time and space.
 Lightning 3 emerged, open and free,
@@ -214,11 +215,11 @@ class BoxedText extends EventEmitter implements BoxedTextProps {
       parent: this.node,
     });
 
-    this.textNode.on('textLoaded', this.onTextLoaded);
+    this.textNode.on('loaded', this.onTextLoaded);
   }
 
-  private onTextLoaded: TextLoadedEventHandler = (target, dimensions) => {
-    this.layout(dimensions);
+  private onTextLoaded: NodeLoadedEventHandler = (target, payload) => {
+    this.layout(payload.dimensions);
   };
 
   private layout(textDimensions: Dimensions) {
@@ -300,8 +301,8 @@ function waitForTextFailed(textNode: ITextNode) {
     setTimeout(() => {
       reject(new Error('TIMEOUT'));
     }, 1000);
-    textNode.once('textFailed', (target, error: Error) => {
-      resolve(error);
-    });
+    textNode.once('failed', ((target, payload) => {
+      resolve(payload.error);
+    }) satisfies NodeFailedEventHandler);
   });
 }

examples/tests/textures.ts

@@ -17,7 +17,12 @@
  * limitations under the License.
  */
 
-import { type INode, type Dimensions } from '@lightningjs/renderer';
+import {
+  type INode,
+  type Dimensions,
+  type NodeLoadedEventHandler,
+  type NodeFailedEventHandler,
+} from '@lightningjs/renderer';
 import rockoImg from '../assets/rocko.png';
 import elevatorImg from '../assets/elevator.png';
 import spritemap from '../assets/spritemap.png';
@@ -191,13 +196,13 @@ export default async function ({ renderer, driverName }: ExampleSettings) {
   await execFailureTest(subTxFailure2);
 
   function waitForTxLoaded(imgNode: INode) {
-    return new Promise<{ width: number; height: number }>((resolve, reject) => {
+    return new Promise<Dimensions>((resolve, reject) => {
       setTimeout(() => {
         reject(new Error('TIMEOUT'));
       }, 1000);
-      imgNode.once('txLoaded', (target, dimensions) => {
-        resolve(dimensions);
-      });
+      imgNode.once('loaded', ((target, payload) => {
+        resolve(payload.dimensions);
+      }) satisfies NodeLoadedEventHandler);
     });
   }
 
@@ -206,9 +211,9 @@ export default async function ({ renderer, driverName }: ExampleSettings) {
       setTimeout(() => {
         reject(new Error('TIMEOUT'));
       }, 1000);
-      imgNode.once('txFailed', () => {
+      imgNode.once('failed', (() => {
         resolve(true);
-      });
+      }) satisfies NodeFailedEventHandler);
     });
   }
 

src/common/CommonTypes.ts

@@ -33,80 +33,64 @@ export interface Dimensions {
   height: number;
 }
 
-/**
- * Event handler for when a texture is loading
- */
-export type TextureLoadingEventHandler = (target: any) => void;
-
-/**
- * Event handler for when a texture is loaded
- */
-export type TextureLoadedEventHandler = (
-  target: any,
-  dimensions: Readonly<Dimensions>,
-) => void;
-
-/**
- * Event handler for when a texture fails to load
- */
-export type TextureFailedEventHandler = (target: any, error: Error) => void;
-
-/**
- * Event handler for when text is loading
- */
-export type TextLoadingEventHandler = (target: any) => void;
-
-/**
- * Event handler for when text is loaded
- */
-export type TextLoadedEventHandler = (
-  target: any,
-  dimensions: Dimensions,
-) => void;
-
-/**
- * Event handler for when text fails to load
- */
-export type TextFailedEventHandler = (target: any, error: Error) => void;
-
 /**
  * Payload for when text is loaded
  */
-type TextLoadedPayload = {
+export type NodeTextLoadedPayload = {
   type: 'text';
   dimensions: Dimensions;
 };
 
 /**
  * Payload for when texture is loaded
  */
-type TextureLoadedPayload = {
+export type NodeTextureLoadedPayload = {
   type: 'texture';
   dimensions: Dimensions;
 };
 
 /**
  * Combined type for all loaded payloads
  */
-export type LoadedPayload = TextLoadedPayload | TextureLoadedPayload;
+export type NodeLoadedPayload =
+  | NodeTextLoadedPayload
+  | NodeTextureLoadedPayload;
 
 /**
  * Payload for when text failed to load
  */
-type TextFailedPayload = {
+export type NodeTextFailedPayload = {
   type: 'text';
   error: Error;
 };
 
 /**
  * Payload for when texture failed to load
  */
-type TextureFailedPayload = {
+export type NodeTextureFailedPayload = {
   type: 'texture';
   error: Error;
 };
 
 /**
  * Combined type for all failed payloads
  */
-export type FailedPayload = TextFailedPayload | TextureFailedPayload;
+export type NodeFailedPayload =
+  | NodeTextFailedPayload
+  | NodeTextureFailedPayload;
+
+/**
+ * Event handler for when the texture/text of a node has loaded
+ */
+export type NodeLoadedEventHandler = (
+  target: any,
+  payload: NodeLoadedPayload,
+) => void;
+
+/**
+ * Event handler for when the texture/text of a node has failed to load
+ */
+export type NodeFailedEventHandler = (
+  target: any,
+  payload: NodeFailedPayload,
+) => void;

src/core/CoreNode.ts

@@ -27,10 +27,14 @@ import type {
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { CoreShader } from './renderers/CoreShader.js';
 import type { Stage } from './Stage.js';
-import type { Texture } from './textures/Texture.js';
 import type {
+  Texture,
   TextureFailedEventHandler,
   TextureLoadedEventHandler,
+} from './textures/Texture.js';
+import type {
+  NodeTextureFailedPayload,
+  NodeTextureLoadedPayload,
 } from '../common/CommonTypes.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import type { Rect } from './lib/utils.js';
@@ -149,11 +153,17 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   }
 
   private onTextureLoaded: TextureLoadedEventHandler = (target, dimensions) => {
-    this.emit('txLoaded', dimensions);
+    this.emit('loaded', {
+      type: 'texture',
+      dimensions,
+    } satisfies NodeTextureLoadedPayload);
   };
 
   private onTextureFailed: TextureFailedEventHandler = (target, error) => {
-    this.emit('txFailed', error);
+    this.emit('failed', {
+      type: 'texture',
+      error,
+    } satisfies NodeTextureFailedPayload);
   };
   //#endregion Textures
 

src/core/CoreTextNode.ts

@@ -22,13 +22,15 @@ import type {
   TextRendererMap,
   TrProps,
   TextRendererState,
+  TrFailedEventHandler,
+  TrLoadedEventHandler,
 } from './text-rendering/renderers/TextRenderer.js';
 import { CoreNode, type CoreNodeProps } from './CoreNode.js';
 import type { Stage } from './Stage.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type {
-  TextFailedEventHandler,
-  TextLoadedEventHandler,
+  NodeTextFailedPayload,
+  NodeTextLoadedPayload,
 } from '../common/CommonTypes.js';
 import type { Rect } from './lib/utils.js';
 import { assertTruthy } from '../utils.js';
@@ -86,7 +88,7 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     this.trState = textRendererState;
   }
 
-  private onTextLoaded: TextLoadedEventHandler = () => {
+  private onTextLoaded: TrLoadedEventHandler = () => {
     const { contain } = this;
     const setWidth = this.trState.props.width;
     const setHeight = this.trState.props.height;
@@ -105,14 +107,20 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     }
     this.updateLocalTransform();
 
-    this.emit('textLoaded', {
-      width: this.trState.textW,
-      height: this.trState.textH,
-    });
+    this.emit('loaded', {
+      type: 'text',
+      dimensions: {
+        width: this.trState.textW || 0,
+        height: this.trState.textH || 0,
+      },
+    } satisfies NodeTextLoadedPayload);
   };
 
-  private onTextFailed: TextFailedEventHandler = (target, error) => {
-    this.emit('textFailed', error);
+  private onTextFailed: TrFailedEventHandler = (target, error) => {
+    this.emit('failed', {
+      type: 'text',
+      error,
+    } satisfies NodeTextFailedPayload);
   };
 
   override get width(): number {

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

@@ -325,6 +325,22 @@ const trPropSetterDefaults: TrPropSetters = {
   },
 };
 
+/**
+ * Event handler for when text is loaded
+ *
+ * @remarks
+ * Emitted by state.emitter
+ */
+export type TrLoadedEventHandler = (target: any) => void;
+
+/**
+ * Event handler for when text failed to load
+ *
+ * @remarks
+ * Emitted by state.emitter
+ */
+export type TrFailedEventHandler = (target: any, error: Error) => void;
+
 export abstract class TextRenderer<
   StateT extends TextRendererState = TextRendererState,
 > {

src/core/textures/SubTexture.ts

@@ -17,13 +17,14 @@
  * limitations under the License.
  */
 
-import type {
-  TextureFailedEventHandler,
-  TextureLoadedEventHandler,
-} from '../../common/CommonTypes.js';
 import type { TextureRef } from '../../main-api/RendererMain.js';
 import type { CoreTextureManager } from '../CoreTextureManager.js';
-import { Texture, type TextureData } from './Texture.js';
+import {
+  Texture,
+  type TextureData,
+  type TextureFailedEventHandler,
+  type TextureLoadedEventHandler,
+} from './Texture.js';
 
 /**
  * Properties of the {@link SubTexture}