Standardize the loaded event of text and texture (#72)

Standardized event for text and texture loaded.
I guess the events for text and texture failed event can be added too.

Author: wouterlucas

examples/index.ts

@@ -22,7 +22,7 @@ import {
   RendererMain,
   ThreadXRenderDriver,
   type IRenderDriver,
-  type Dimensions,
+  type LoadedPayload,
   type RendererMainSettings,
 } from '@lightningjs/renderer';
 import { assertTruthy } from '@lightningjs/renderer/utils';
@@ -92,13 +92,10 @@ import type { ExampleSettings } from './common/ExampleSettings.js';
       parent: renderer.root,
       fontSize: 50,
     });
-    overlayText.once(
-      'textLoaded',
-      (target: any, { width, height }: Dimensions) => {
-        overlayText.x = renderer.settings.appWidth - width - 20;
-        overlayText.y = renderer.settings.appHeight - height - 20;
-      },
-    );
+    overlayText.once('loaded', (target: any, { dimensions }: LoadedPayload) => {
+      overlayText.x = renderer.settings.appWidth - dimensions.width - 20;
+      overlayText.y = renderer.settings.appHeight - dimensions.height - 20;
+    });
   }
 
   const exampleSettings: ExampleSettings = {

examples/tests/text.ts

@@ -21,6 +21,7 @@ import {
   type ITextNodeWritableProps,
   type TextRendererMap,
   type TrFontFaceMap,
+  type LoadedPayload,
 } from '@lightningjs/renderer';
 import { getLoremIpsum } from '../common/LoremIpsum.js';
 import type { ExampleSettings } from '../common/ExampleSettings.js';
@@ -120,12 +121,9 @@ export default async function ({ testName, renderer }: ExampleSettings) {
     parent: renderer.root,
   });
 
-  statusNode.on(
-    'textLoaded',
-    (target: any, dimensions: { width: number; height: number }) => {
-      statusNode.x = renderer.settings.appWidth - dimensions.width;
-    },
-  );
+  statusNode.on('loaded', (target: any, { dimensions }: LoadedPayload) => {
+    statusNode.x = renderer.settings.appWidth - dimensions.width;
+  });
 
   function updateStatus() {
     const modeName = modes[curMode];

src/common/CommonTypes.ts

@@ -68,3 +68,45 @@ export type TextLoadedEventHandler = (
  * Event handler for when text fails to load
  */
 export type TextFailedEventHandler = (target: any, error: Error) => void;
+
+/**
+ * Payload for when text is loaded
+ */
+type TextLoadedPayload = {
+  type: 'text';
+  dimensions: Dimensions;
+};
+
+/**
+ * Payload for when texture is loaded
+ */
+type TextureLoadedPayload = {
+  type: 'texture';
+  dimensions: Dimensions;
+};
+
+/**
+ * Combined type for all loaded payloads
+ */
+export type LoadedPayload = TextLoadedPayload | TextureLoadedPayload;
+
+/**
+ * Payload for when text failed to load
+ */
+type TextFailedPayload = {
+  type: 'text';
+  error: Error;
+};
+
+/**
+ * Payload for when texture failed to load
+ */
+type TextureFailedPayload = {
+  type: 'texture';
+  error: Error;
+};
+
+/**
+ * Combined type for all failed payloads
+ */
+export type FailedPayload = TextFailedPayload | TextureFailedPayload;

src/render-drivers/main/MainOnlyNode.ts

@@ -38,6 +38,8 @@ import { EventEmitter } from '../../common/EventEmitter.js';
 import type {
   TextureFailedEventHandler,
   TextureLoadedEventHandler,
+  LoadedPayload,
+  FailedPayload,
 } from '../../common/CommonTypes.js';
 
 let nextId = 1;
@@ -411,11 +413,20 @@ export class MainOnlyNode extends EventEmitter implements INode {
   }
 
   private onTextureLoaded: TextureLoadedEventHandler = (target, dimensions) => {
-    this.emit('txLoaded', dimensions);
+    const texturePayload: LoadedPayload = {
+      type: 'texture',
+      dimensions,
+    };
+
+    this.emit('loaded', texturePayload);
   };
 
   private onTextureFailed: TextureFailedEventHandler = (target, error) => {
-    this.emit('txFailed', error);
+    const textureFailedPayload: FailedPayload = {
+      type: 'texture',
+      error,
+    };
+    this.emit('failed', textureFailedPayload);
   };
   //#endregion Texture
 

src/render-drivers/main/MainOnlyTextNode.ts

@@ -28,6 +28,9 @@ import { CoreTextNode } from '../../core/CoreTextNode.js';
 import type {
   TextFailedEventHandler,
   TextLoadedEventHandler,
+  LoadedPayload,
+  FailedPayload,
+  Dimensions,
 } from '../../common/CommonTypes.js';
 
 export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
@@ -99,12 +102,25 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
     this.coreNode.on('textFailed', this.onTextFailed);
   }
 
-  private onTextLoaded: TextLoadedEventHandler = (target, dimensions) => {
-    this.emit('textLoaded', dimensions);
+  private onTextLoaded: TextLoadedEventHandler = (
+    target,
+    dimensions: Dimensions,
+  ) => {
+    const textPayload: LoadedPayload = {
+      type: 'text',
+      dimensions,
+    };
+
+    this.emit('loaded', textPayload);
   };
 
   private onTextFailed: TextFailedEventHandler = (target, error) => {
-    this.emit('textFailed', error);
+    const textFailedPayload: FailedPayload = {
+      type: 'text',
+      error,
+    };
+
+    this.emit('failed', textFailedPayload);
   };
 
   get text(): string {

src/render-drivers/threadx/worker/ThreadXRendererNode.ts

@@ -30,7 +30,11 @@ import type { Texture } from '../../../core/textures/Texture.js';
 import { CoreNode } from '../../../core/CoreNode.js';
 import type { ShaderRef, TextureRef } from '../../../main-api/RendererMain.js';
 import type { AnimationSettings } from '../../../core/animations/CoreAnimation.js';
-import type { Dimensions } from '../../../common/CommonTypes.js';
+import type {
+  Dimensions,
+  LoadedPayload,
+  FailedPayload,
+} from '../../../common/CommonTypes.js';
 
 export class ThreadXRendererNode extends SharedNode {
   protected coreNode: CoreNode;
@@ -129,10 +133,20 @@ export class ThreadXRendererNode extends SharedNode {
     });
     // Forward on CoreNode events
     this.coreNode.on('txLoaded', (target: CoreNode, dimensions: Dimensions) => {
-      this.emit('txLoaded', dimensions as unknown as Record<string, unknown>);
+      const texturePayload: LoadedPayload = {
+        type: 'texture',
+        dimensions,
+      };
+
+      this.emit('loaded', texturePayload);
     });
     this.coreNode.on('txFailed', (target: CoreNode, error: Error) => {
-      this.emit('txFailed', error as unknown as Record<string, unknown>);
+      const textureFailedPayload: FailedPayload = {
+        type: 'texture',
+        error,
+      };
+
+      this.emit('failed', textureFailedPayload);
     });
   }
 

src/render-drivers/threadx/worker/ThreadXRendererTextNode.ts

@@ -17,7 +17,11 @@
  * limitations under the License.
  */
 
-import type { Dimensions } from '../../../common/CommonTypes.js';
+import type {
+  Dimensions,
+  LoadedPayload,
+  FailedPayload,
+} from '../../../common/CommonTypes.js';
 import { CoreTextNode } from '../../../core/CoreTextNode.js';
 import type { Stage } from '../../../core/Stage.js';
 import type { TrProps } from '../../../core/text-rendering/renderers/TextRenderer.js';
@@ -117,14 +121,19 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
     this.coreNode.on(
       'textLoaded',
       (target: CoreTextNode, dimensions: Dimensions) => {
-        this.emit(
-          'textLoaded',
-          dimensions as unknown as Record<string, unknown>,
-        );
+        const textPayload: LoadedPayload = {
+          type: 'text',
+          dimensions,
+        };
+        this.emit('loaded', textPayload);
       },
     );
     this.coreNode.on('textFailed', (target: CoreTextNode, error: Error) => {
-      this.emit('textFailed', error as unknown as Record<string, unknown>);
+      const textFailedPayload: FailedPayload = {
+        type: 'text',
+        error,
+      };
+      this.emit('failed', textFailedPayload);
     });
     this.on('debug', (target: ThreadXRendererNode, debug: TrProps['debug']) => {
       this.coreNode.debug = debug;