@lightningjs/renderer 2.3.2 → 2.4.0

package/src/core/CoreNode.ts

@@ -759,10 +759,11 @@ export class CoreNode extends EventEmitter {
     this.src = props.src;
     this.rtt = props.rtt;
 
-    this.updateScaleRotateTransform();
-
     this.setUpdateType(
-      UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState,
+      UpdateType.ScaleRotate |
+        UpdateType.Local |
+        UpdateType.RenderBounds |
+        UpdateType.RenderState,
     );
   }
 
@@ -797,7 +798,7 @@ export class CoreNode extends EventEmitter {
   }
 
   unloadTexture(): void {
-    if (this.texture) {
+    if (this.texture !== null) {
       this.texture.off('loaded', this.onTextureLoaded);
       this.texture.off('failed', this.onTextureFailed);
       this.texture.off('freed', this.onTextureFreed);
@@ -1459,24 +1460,23 @@ export class CoreNode extends EventEmitter {
     this.unloadTexture();
 
     this.clippingRect.valid = false;
-
     this.isRenderable = false;
 
-    delete this.renderCoords;
-    delete this.renderBound;
-    delete this.strictBound;
-    delete this.preloadBound;
-    delete this.globalTransform;
-    delete this.scaleRotateTransform;
-    delete this.localTransform;
+    this.renderCoords = undefined;
+    this.renderBound = undefined;
+    this.strictBound = undefined;
+    this.preloadBound = undefined;
+    this.globalTransform = undefined;
+    this.scaleRotateTransform = undefined;
+    this.localTransform = undefined;
 
     this.props.texture = null;
     this.props.shader = this.stage.defShaderCtr;
 
-    const children = [...this.children];
-    for (let i = 0, length = children.length; i < length; i++) {
-      children[i]!.destroy();
+    while (this.children.length > 0) {
+      this.children[0]?.destroy();
     }
+
     // This very action will also remove the node from the parent's children array
     this.parent = null;
 
@@ -1488,8 +1488,6 @@ export class CoreNode extends EventEmitter {
   }
 
   renderQuads(renderer: CoreRenderer): void {
-    const { texture, width, height, textureOptions, rtt, shader } = this.props;
-
     // Prevent quad rendering if parent has a render texture
     // and renderer is not currently rendering to a texture
     if (this.parentHasRenderTexture) {
@@ -1502,47 +1500,32 @@ export class CoreNode extends EventEmitter {
       }
     }
 
-    const {
-      premultipliedColorTl,
-      premultipliedColorTr,
-      premultipliedColorBl,
-      premultipliedColorBr,
-    } = this;
-
-    const {
-      zIndex,
-      worldAlpha,
-      globalTransform: gt,
-      clippingRect,
-      renderCoords,
-    } = this;
-
-    assertTruthy(gt);
-    assertTruthy(renderCoords);
+    assertTruthy(this.globalTransform);
+    assertTruthy(this.renderCoords);
 
     // add to list of renderables to be sorted before rendering
     renderer.addQuad({
-      width,
-      height,
-      colorTl: premultipliedColorTl,
-      colorTr: premultipliedColorTr,
-      colorBl: premultipliedColorBl,
-      colorBr: premultipliedColorBr,
-      texture,
-      textureOptions,
-      zIndex,
-      shader: shader.shader,
-      shaderProps: shader.getResolvedProps(),
-      alpha: worldAlpha,
-      clippingRect,
-      tx: gt.tx,
-      ty: gt.ty,
-      ta: gt.ta,
-      tb: gt.tb,
-      tc: gt.tc,
-      td: gt.td,
-      renderCoords,
-      rtt,
+      width: this.props.width,
+      height: this.props.height,
+      colorTl: this.premultipliedColorTl,
+      colorTr: this.premultipliedColorTr,
+      colorBl: this.premultipliedColorBl,
+      colorBr: this.premultipliedColorBr,
+      texture: this.texture,
+      textureOptions: this.textureOptions,
+      zIndex: this.zIndex,
+      shader: this.shader.shader,
+      shaderProps: this.shader.getResolvedProps(),
+      alpha: this.worldAlpha,
+      clippingRect: this.clippingRect,
+      tx: this.globalTransform.tx,
+      ty: this.globalTransform.ty,
+      ta: this.globalTransform.ta,
+      tb: this.globalTransform.tb,
+      tc: this.globalTransform.tc,
+      td: this.globalTransform.td,
+      renderCoords: this.renderCoords,
+      rtt: this.rtt,
       parentHasRenderTexture: this.parentHasRenderTexture,
       framebufferDimensions: this.framebufferDimensions,
     });

package/src/core/Stage.ts

@@ -70,6 +70,7 @@ export interface StageOptions {
   eventBus: EventEmitter;
   quadBufferSize: number;
   fontEngines: (typeof CanvasTextRenderer | typeof SdfTextRenderer)[];
+  inspector: boolean;
 }
 
 export type StageFpsUpdateHandler = (
@@ -580,7 +581,11 @@ export class Stage {
       props.colorBl ?? props.colorBottom ?? props.colorLeft ?? color;
     const colorBr =
       props.colorBr ?? props.colorBottom ?? props.colorRight ?? color;
-    const data = santizeCustomDataMap(props.data ?? {});
+
+    let data = {};
+    if (this.options.inspector === true) {
+      data = santizeCustomDataMap(props.data ?? {});
+    }
 
     return {
       x: props.x ?? 0,

package/src/core/animations/CoreAnimation.ts

@@ -42,6 +42,7 @@ export class CoreAnimation extends EventEmitter {
   public settings: AnimationSettings;
   private progress = 0;
   private delayFor = 0;
+  private delay = 0;
   private timingFunction: (t: number) => number | undefined;
 
   propValuesMap: PropValuesMap = {};
@@ -109,6 +110,7 @@ export class CoreAnimation extends EventEmitter {
     };
     this.timingFunction = getTimingFunction(easing);
     this.delayFor = delay;
+    this.delay = delay;
   }
 
   reset() {
@@ -287,6 +289,7 @@ export class CoreAnimation extends EventEmitter {
 
     if (this.progress > 1) {
       this.progress = loop ? 0 : 1;
+      this.delayFor = this.delay;
       if (stopMethod) {
         // If there's a stop method emit finished so the stop method can be applied.
         // TODO: We should probably reevaluate how stopMethod is implemented as currently
@@ -326,6 +329,10 @@ export class CoreAnimation extends EventEmitter {
       }
     }
 
+    if (this.progress < 1) {
+      this.emit('tick', { progress: this.progress });
+    }
+
     if (this.progress === 1) {
       this.emit('finished', {});
     }

package/src/core/animations/CoreAnimationController.ts

@@ -26,6 +26,7 @@ import type { AnimationManager } from './AnimationManager.js';
 import type { CoreAnimation } from './CoreAnimation.js';
 import { assertTruthy } from '../../utils.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
+import type { AnimationTickPayload } from '../../common/CommonTypes.js';
 
 export class CoreAnimationController
   extends EventEmitter
@@ -50,6 +51,7 @@ export class CoreAnimationController
     // Bind event handlers
     this.onAnimating = this.onAnimating.bind(this);
     this.onFinished = this.onFinished.bind(this);
+    this.onTick = this.onTick.bind(this);
   }
 
   start(): IAnimationController {
@@ -93,6 +95,7 @@ export class CoreAnimationController
     // Hook up event listeners
     this.animation.once('finished', this.onFinished);
     this.animation.on('animating', this.onAnimating);
+    this.animation.on('tick', this.onTick);
     // Then register the animation
     this.manager.registerAnimation(this.animation);
   }
@@ -103,6 +106,7 @@ export class CoreAnimationController
     // Then unhook event listeners
     this.animation.off('finished', this.onFinished);
     this.animation.off('animating', this.onAnimating);
+    this.animation.off('tick', this.onTick);
   }
 
   private makeStoppedPromise(): void {
@@ -142,4 +146,12 @@ export class CoreAnimationController
     this.state = 'running';
     this.emit('animating', this);
   }
+
+  private onTick(
+    this: CoreAnimationController,
+    _animation: CoreAnimation,
+    data: AnimationTickPayload,
+  ): void {
+    this.emit('tick', data);
+  }
 }

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

@@ -86,6 +86,12 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     this._state = 'loading';
     this.textureSource.setState('loading');
     this._nativeCtxTexture = this.createNativeCtxTexture();
+    if (this._nativeCtxTexture === null) {
+      this._state = 'failed';
+      this.textureSource.setState('failed', new Error('Could not create WebGL Texture'));
+      console.error('Could not create WebGL Texture');
+      return;
+    }
     this.onLoadRequest()
       .then(({ width, height }) => {
         // If the texture has been freed while loading, return early.
@@ -245,7 +251,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     const { glw } = this;
     const nativeTexture = glw.createTexture();
     if (!nativeTexture) {
-      throw new Error('Could not create WebGL Texture');
+      return null;
     }
 
     // On initial load request, create a 1x1 transparent texture to use until

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

@@ -61,16 +61,25 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
 
   addTexture(texture: WebGlCoreCtxTexture): number {
     const { textures, maxTextures } = this;
-    const existingIdx = textures.findIndex((t) => t === texture);
+    let existingIdx = -1;
+    const texturesLength = textures.length;
+    for (let i = 0; i < texturesLength; i++) {
+      const t = textures[i];
+      if (t === texture) {
+        existingIdx = i;
+        break;
+      }
+    }
+
     if (existingIdx !== -1) {
       return existingIdx;
     }
-    const newIdx = textures.length;
-    if (newIdx >= maxTextures) {
+
+    if (texturesLength >= maxTextures) {
       return 0xffffffff;
     }
     this.textures.push(texture);
-    return newIdx;
+    return texturesLength;
   }
 
   draw() {