@lightningjs/renderer 0.9.0 → 0.9.2

package/src/core/animations/CoreAnimationController.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 /*
  * If not stated otherwise in this file or this component's LICENSE file the
  * following copyright and licenses apply:
@@ -24,50 +25,48 @@ import type {
 import type { AnimationManager } from './AnimationManager.js';
 import type { CoreAnimation } from './CoreAnimation.js';
 import { assertTruthy } from '../../utils.js';
+import { EventEmitter } from '../../common/EventEmitter.js';
 
-export class CoreAnimationController implements IAnimationController {
-  startedPromise: Promise<void> | null = null;
-  /**
-   * If this is null, then the animation hasn't started yet.
-   */
-  startedResolve: ((scope?: any) => void) | null = null;
-
-  stoppedPromise: Promise<void> | null = null;
+export class CoreAnimationController
+  extends EventEmitter
+  implements IAnimationController
+{
+  stoppedPromise: Promise<void>;
   /**
    * If this is null, then the animation is in a finished / stopped state.
    */
   stoppedResolve: (() => void) | null = null;
+  state: AnimationControllerState;
 
   constructor(
     private manager: AnimationManager,
     private animation: CoreAnimation,
   ) {
+    super();
     this.state = 'stopped';
-  }
+    // Initial stopped promise is resolved (since the animation is stopped)
+    this.stoppedPromise = Promise.resolve();
 
-  state: AnimationControllerState;
+    // Bind event handlers
+    this.onAnimating = this.onAnimating.bind(this);
+    this.onFinished = this.onFinished.bind(this);
+  }
 
   start(): IAnimationController {
-    this.makeStartedPromise();
-    this.animation.once('start', this.started.bind(this));
-
-    this.makeStoppedPromise();
-    this.animation.once('finished', this.finished.bind(this));
-
-    // prevent registering the same animation twice
-    if (!this.manager.activeAnimations.has(this.animation)) {
-      this.manager.registerAnimation(this.animation);
+    if (this.state !== 'running') {
+      this.makeStoppedPromise();
+      this.registerAnimation();
+      this.state = 'running';
     }
-
-    this.state = 'running';
     return this;
   }
 
   stop(): IAnimationController {
-    this.manager.unregisterAnimation(this.animation);
+    this.unregisterAnimation();
     if (this.stoppedResolve !== null) {
       this.stoppedResolve();
       this.stoppedResolve = null;
+      this.emit('stopped', this);
     }
     this.animation.reset();
     this.state = 'stopped';
@@ -75,7 +74,7 @@ export class CoreAnimationController implements IAnimationController {
   }
 
   pause(): IAnimationController {
-    this.manager.unregisterAnimation(this.animation);
+    this.unregisterAnimation();
     this.state = 'paused';
     return this;
   }
@@ -86,26 +85,24 @@ export class CoreAnimationController implements IAnimationController {
     return this;
   }
 
-  waitUntilStarted(): Promise<void> {
-    this.makeStartedPromise();
-    const promise = this.startedPromise;
-    assertTruthy(promise);
-    return promise;
+  waitUntilStopped(): Promise<void> {
+    return this.stoppedPromise;
   }
 
-  waitUntilStopped(): Promise<void> {
-    this.makeStoppedPromise();
-    const promise = this.stoppedPromise;
-    assertTruthy(promise);
-    return promise;
+  private registerAnimation(): void {
+    // Hook up event listeners
+    this.animation.once('finished', this.onFinished);
+    this.animation.on('animating', this.onAnimating);
+    // Then register the animation
+    this.manager.registerAnimation(this.animation);
   }
 
-  private makeStartedPromise(): void {
-    if (this.startedResolve === null) {
-      this.startedPromise = new Promise((resolve) => {
-        this.startedResolve = resolve;
-      });
-    }
+  private unregisterAnimation(): void {
+    // First unregister the animation
+    this.manager.unregisterAnimation(this.animation);
+    // Then unhook event listeners
+    this.animation.off('finished', this.onFinished);
+    this.animation.off('animating', this.onAnimating);
   }
 
   private makeStoppedPromise(): void {
@@ -116,33 +113,31 @@ export class CoreAnimationController implements IAnimationController {
     }
   }
 
-  private started(): void {
-    assertTruthy(this.startedResolve);
-    // resolve promise (and pass current this to continue to the chain)
-    this.startedResolve(this);
-    this.startedResolve = null;
-  }
-
-  private finished(): void {
+  private onFinished(this: CoreAnimationController): void {
     assertTruthy(this.stoppedResolve);
     // If the animation is looping, then we need to restart it.
     const { loop, stopMethod } = this.animation.settings;
 
     if (stopMethod === 'reverse') {
       this.animation.reverse();
-      this.start();
       return;
     }
 
-    // resolve promise
-    this.stoppedResolve();
-    this.stoppedResolve = null;
-
     if (loop) {
       return;
     }
 
     // unregister animation
-    this.manager.unregisterAnimation(this.animation);
+    this.unregisterAnimation();
+
+    // resolve promise
+    this.stoppedResolve();
+    this.stoppedResolve = null;
+    this.emit('stopped', this);
+    this.state = 'stopped';
+  }
+
+  private onAnimating(this: CoreAnimationController): void {
+    this.emit('animating', this);
   }
 }

package/src/core/lib/ImageWorker.ts

@@ -119,10 +119,10 @@ export class ImageWorkerManager {
     return workers;
   }
 
-  private getNextWorker(): Worker {
+  private getNextWorker(): Worker | undefined {
     const worker = this.workers[this.workerIndex];
     this.workerIndex = (this.workerIndex + 1) % this.workers.length;
-    return worker!;
+    return worker;
   }
 
   private convertUrlToAbsolute(url: string): string {
@@ -140,11 +140,14 @@ export class ImageWorkerManager {
           const absoluteSrcUrl = this.convertUrlToAbsolute(src);
           const id = this.nextId++;
           this.messageManager[id] = [resolve, reject];
-          this.getNextWorker().postMessage({
-            id,
-            src: absoluteSrcUrl,
-            premultiplyAlpha,
-          });
+          const nextWorker = this.getNextWorker();
+          if (nextWorker) {
+            nextWorker.postMessage({
+              id,
+              src: absoluteSrcUrl,
+              premultiplyAlpha,
+            });
+          }
         }
       } catch (error) {
         reject(error);

package/src/core/renderers/webgl/WebGlCoreCtxTexture.ts

@@ -92,6 +92,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     this._nativeCtxTexture = this.createNativeCtxTexture();
     this.onLoadRequest()
       .then(({ width, height }) => {
+        // If the texture has been freed while loading, return early.
         if (this._state === 'freed') {
           return;
         }
@@ -103,6 +104,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         this.textureSource.setState('loaded', { width, height });
       })
       .catch((err) => {
+        // If the texture has been freed while loading, return early.
+        if (this._state === 'freed') {
+          return;
+        }
         this._state = 'failed';
         this.textureSource.setState('failed', err);
         console.error(err);

package/src/core/textures/ImageTexture.ts

@@ -37,7 +37,7 @@ export interface ImageTextureProps {
    *
    * @default ''
    */
-  src?: string | ImageData;
+  src?: string | ImageData | (() => ImageData);
   /**
    * Whether to premultiply the alpha channel into the color channels of the
    * image.
@@ -50,6 +50,10 @@ export interface ImageTextureProps {
    * @default true
    */
   premultiplyAlpha?: boolean | null;
+  /**
+   * `ImageData` textures are not cached unless a `key` is provided
+   */
+  key?: string | null;
 }
 
 /**
@@ -85,9 +89,16 @@ export class ImageTexture extends Texture {
         data: null,
       };
     }
-    if (src instanceof ImageData) {
+
+    if (typeof src !== 'string') {
+      if (src instanceof ImageData) {
+        return {
+          data: src,
+          premultiplyAlpha,
+        };
+      }
       return {
-        data: src,
+        data: src(),
         premultiplyAlpha,
       };
     }
@@ -137,11 +148,12 @@ export class ImageTexture extends Texture {
 
   static override makeCacheKey(props: ImageTextureProps): string | false {
     const resolvedProps = ImageTexture.resolveDefaults(props);
-    // ImageTextures sourced by ImageData are non-cacheable
-    if (resolvedProps.src instanceof ImageData) {
+    // Only cache key-able textures; prioritise key
+    const key = resolvedProps.key || resolvedProps.src;
+    if (typeof key !== 'string') {
       return false;
     }
-    return `ImageTexture,${resolvedProps.src},${resolvedProps.premultiplyAlpha}`;
+    return `ImageTexture,${key},${resolvedProps.premultiplyAlpha ?? 'true'}`;
   }
 
   static override resolveDefaults(
@@ -150,6 +162,7 @@ export class ImageTexture extends Texture {
     return {
       src: props.src ?? '',
       premultiplyAlpha: props.premultiplyAlpha ?? true, // null,
+      key: props.key ?? null
     };
   }
 

package/src/core/utils.ts

@@ -177,7 +177,7 @@ const parseCubicBezier = (str: string) => {
 export const getTimingFunction = (
   str: string,
 ): ((time: number) => number | undefined) => {
-  if (str === '') {
+  if (str === 'linear') {
     return defaultTiming;
   }
 
@@ -185,12 +185,6 @@ export const getTimingFunction = (
     return timingMapping[str] || defaultTiming;
   }
 
-  if (str === 'linear') {
-    return (time: number) => {
-      return time;
-    };
-  }
-
   if (str === 'step-start') {
     return () => {
       return 1;

package/src/main-api/INode.ts

@@ -443,7 +443,7 @@ export interface INodeWritableProps {
  * The data stored can only be of type string, number or boolean.
  */
 export type CustomDataMap = {
-  [key: string]: string | number | boolean;
+  [key: string]: string | number | boolean | undefined;
 };
 
 export type INodeAnimatableProps = {

package/src/render-drivers/threadx/ThreadXMainAnimationController.ts

@@ -18,6 +18,7 @@
  */
 
 /* eslint-disable @typescript-eslint/unbound-method */
+import { EventEmitter } from '../../common/EventEmitter.js';
 import type {
   AnimationControllerState,
   IAnimationController,
@@ -25,37 +26,48 @@ import type {
 import { assertTruthy } from '../../utils.js';
 import type { ThreadXMainNode } from './ThreadXMainNode.js';
 
-export class ThreadXMainAnimationController implements IAnimationController {
-  stoppedPromise: Promise<void> | null = null;
+export class ThreadXMainAnimationController
+  extends EventEmitter
+  implements IAnimationController
+{
+  stoppedPromise: Promise<void>;
   /**
    * If this is null, then the animation is in a finished / stopped state.
    */
   stoppedResolve: (() => void) | null = null;
+  state: AnimationControllerState;
 
   constructor(private node: ThreadXMainNode, private id: number) {
-    this.onAnimationFinished = this.onAnimationFinished.bind(this);
+    super();
     this.state = 'stopped';
-  }
 
-  state: AnimationControllerState;
+    // Initial stopped promise is resolved (since the animation is stopped)
+    this.stoppedPromise = Promise.resolve();
+
+    // Bind event handlers
+    this.onAnimating = this.onAnimating.bind(this);
+    this.onFinished = this.onFinished.bind(this);
+  }
 
   start(): IAnimationController {
-    if (this.stoppedResolve === null) {
+    if (this.state !== 'running') {
       this.makeStoppedPromise();
-      this.node.on('animationFinished', this.onAnimationFinished);
+      this.sendStart();
+      this.state = 'running';
     }
-    this.state = 'running';
-    this.node.emit('startAnimation', { id: this.id });
     return this;
   }
 
   stop(): IAnimationController {
-    this.node.emit('stopAnimation', { id: this.id });
-    this.node.off('animationFinished', this.onAnimationFinished);
-    if (this.stoppedResolve !== null) {
-      this.stoppedResolve();
-      this.stoppedResolve = null;
+    if (this.state === 'stopped') {
+      return this;
     }
+    this.sendStop();
+    // if (this.stoppedResolve !== null) {
+    //   this.stoppedResolve();
+    //   this.stoppedResolve = null;
+    //   this.emit('stopped', this);
+    // }
     this.state = 'stopped';
     return this;
   }
@@ -71,29 +83,53 @@ export class ThreadXMainAnimationController implements IAnimationController {
   }
 
   waitUntilStopped(): Promise<void> {
-    this.makeStoppedPromise();
-    const promise = this.stoppedPromise;
-    assertTruthy(promise);
-    return promise;
+    return this.stoppedPromise;
+  }
+
+  private sendStart(): void {
+    // Hook up event listeners
+    this.node.on('animationFinished', this.onFinished);
+    this.node.on('animationAnimating', this.onAnimating);
+    // Then register the animation
+    this.node.emit('startAnimation', { id: this.id });
+  }
+
+  private sendStop(): void {
+    // First unregister the animation
+    this.node.emit('stopAnimation', { id: this.id });
+    // Then unhook event listeners
+    this.node.off('animationFinished', this.onFinished);
+    this.node.off('animationAnimating', this.onAnimating);
   }
 
-  private onAnimationFinished(
+  private makeStoppedPromise(): void {
+    if (this.stoppedResolve === null) {
+      this.stoppedPromise = new Promise((resolve) => {
+        this.stoppedResolve = resolve;
+      });
+    }
+  }
+
+  private onFinished(
     target: ThreadXMainNode,
-    { id, loop }: { id: number; loop: boolean },
+    { id }: { id: number; loop: boolean },
   ) {
     if (id === this.id) {
-      this.node.off('animationFinished', this.onAnimationFinished);
-      this.stoppedResolve?.();
+      assertTruthy(this.stoppedResolve);
+      this.node.off('animationFinished', this.onFinished);
+      this.node.off('animationAnimating', this.onAnimating);
+
+      // resolve promise
+      this.stoppedResolve();
       this.stoppedResolve = null;
+      this.emit('stopped', this);
       this.state = 'stopped';
     }
   }
 
-  private makeStoppedPromise(): void {
-    if (this.stoppedResolve === null) {
-      this.stoppedPromise = new Promise((resolve) => {
-        this.stoppedResolve = resolve;
-      });
+  private onAnimating(target: ThreadXMainNode, { id }: { id: number }) {
+    if (id === this.id) {
+      this.emit('animating', this);
     }
   }
 }

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

@@ -84,6 +84,12 @@ export class ThreadXRendererNode extends SharedNode {
           props as Partial<INodeAnimatableProps>,
           settings as Partial<AnimationSettings>,
         );
+        animation.on('animating', () => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          this.emit('animationAnimating', {
+            id: id as number,
+          });
+        });
         animation.on('finished', () => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           this.emit('animationFinished', {