@lightningjs/renderer 3.0.3 → 3.0.5

package/src/core/TextureMemoryManager.ts

@@ -177,7 +177,7 @@ export class TextureMemoryManager {
       }
     }
 
-    if (this.memUsed > this.criticalThreshold) {
+    if (this.criticalThreshold > 0 && this.memUsed > this.criticalThreshold) {
       this.criticalCleanupRequested = true;
     }
   }
@@ -185,13 +185,14 @@ export class TextureMemoryManager {
   checkCleanup() {
     return (
       this.criticalCleanupRequested ||
-      (this.memUsed > this.targetThreshold &&
+      (this.criticalThreshold > 0 &&
+        this.memUsed > this.targetThreshold &&
         this.frameTime - this.lastCleanupTime >= this.cleanupInterval)
     );
   }
 
   checkCriticalCleanup() {
-    return this.memUsed > this.criticalThreshold;
+    return this.criticalThreshold > 0 && this.memUsed > this.criticalThreshold;
   }
 
   /**

package/src/core/animations/AnimationManager.ts

@@ -20,19 +20,19 @@
 import { CoreAnimation } from './CoreAnimation.js';
 
 export class AnimationManager {
-  activeAnimations: Set<CoreAnimation> = new Set();
+  activeAnimations: Map<number, CoreAnimation> = new Map();
 
   registerAnimation(animation: CoreAnimation) {
-    this.activeAnimations.add(animation);
+    this.activeAnimations.set(animation.id, animation);
   }
 
   unregisterAnimation(animation: CoreAnimation) {
-    this.activeAnimations.delete(animation);
+    this.activeAnimations.delete(animation.id);
   }
 
   update(dt: number) {
-    this.activeAnimations.forEach((animation) => {
+    for (const animation of this.activeAnimations.values()) {
       animation.update(dt);
-    });
+    }
   }
 }

package/src/core/animations/CoreAnimation.ts

@@ -34,17 +34,30 @@ export interface AnimationSettings {
 type PropValues = {
   start: number;
   target: number;
+  isColor: boolean;
 };
-type PropValuesMap = Record<string, Record<string, PropValues>>;
+
+type PropGroup = {
+  keys: string[];
+  values: PropValues[];
+};
+
+type PropValuesMap = {
+  props: PropGroup | null;
+  shaderProps: PropGroup | null;
+};
+
+let animationIdCounter = 0;
 
 export class CoreAnimation extends EventEmitter {
+  public readonly id: number = ++animationIdCounter;
   public settings: AnimationSettings;
   private progress = 0;
   private delayFor = 0;
   private delay = 0;
   private timingFunction: TimingFunction;
 
-  propValuesMap: PropValuesMap = {};
+  propValuesMap: PropValuesMap = { props: null, shaderProps: null };
 
   constructor(
     private node: CoreNode,
@@ -55,27 +68,31 @@ export class CoreAnimation extends EventEmitter {
 
     for (const key in props) {
       if (key !== 'shaderProps') {
-        if (this.propValuesMap['props'] === undefined) {
-          this.propValuesMap['props'] = {};
+        if (this.propValuesMap['props'] === null) {
+          this.propValuesMap['props'] = { keys: [], values: [] };
         }
-        this.propValuesMap['props'][key] = {
+        this.propValuesMap['props']!['keys'].push(key);
+        this.propValuesMap['props']!['values'].push({
           start:
             node[key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>] || 0,
           target: props[
             key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>
           ] as number,
-        };
+          isColor: key.indexOf('color') !== -1,
+        });
       } else if (key === 'shaderProps' && node.shader !== null) {
-        this.propValuesMap['shaderProps'] = {};
+        this.propValuesMap['shaderProps'] = { keys: [], values: [] };
         for (const key in props.shaderProps) {
           let start = node.shader.props![key];
           if (Array.isArray(start) === true) {
             start = start[0];
           }
-          this.propValuesMap['shaderProps'][key] = {
+          this.propValuesMap['shaderProps']!['keys'].push(key);
+          this.propValuesMap['shaderProps']!['values'].push({
             start,
             target: props.shaderProps[key] as number,
-          };
+            isColor: key.indexOf('color') !== -1,
+          });
         }
       }
     }
@@ -102,28 +119,24 @@ export class CoreAnimation extends EventEmitter {
     this.update(0);
   }
 
-  private restoreValues(
-    target: Record<string, number>,
-    valueMap: Record<string, PropValues>,
-  ) {
-    const entries = Object.entries(valueMap);
-    const eLength = entries.length;
-
-    for (let i = 0; i < eLength; i++) {
-      const [key, value] = entries[i]!;
-      target[key] = value.start;
+  private restoreValues(target: Record<string, number>, group: PropGroup) {
+    const keys = group.keys;
+    const values = group.values;
+    const length = keys.length;
+    for (let i = 0; i < length; i++) {
+      target[keys[i]!] = values[i]!.start;
     }
   }
 
   restore() {
     this.reset();
-    if (this.propValuesMap['props'] !== undefined) {
+    if (this.propValuesMap['props'] !== null) {
       this.restoreValues(
         this.node as unknown as Record<string, number>,
         this.propValuesMap['props'],
       );
     }
-    if (this.propValuesMap['shaderProps'] !== undefined) {
+    if (this.propValuesMap['shaderProps'] !== null) {
       this.restoreValues(
         this.node.shader!.props as Record<string, number>,
         this.propValuesMap['shaderProps'],
@@ -131,26 +144,24 @@ export class CoreAnimation extends EventEmitter {
     }
   }
 
-  private reverseValues(valueMap: Record<string, PropValues>) {
-    const entries = Object.entries(valueMap);
-    const eLength = entries.length;
-
-    for (let i = 0; i < eLength; i++) {
-      const [key, value] = entries[i]!;
-      valueMap[key] = {
-        start: value.target,
-        target: value.start,
-      };
+  private reverseValues(group: PropGroup) {
+    const values = group.values;
+    const length = values.length;
+    for (let i = 0; i < length; i++) {
+      const value = values[i]!;
+      const tmp = value.start;
+      value.start = value.target;
+      value.target = tmp;
     }
   }
 
   reverse() {
     this.progress = 0;
 
-    if (this.propValuesMap['props'] !== undefined) {
+    if (this.propValuesMap['props'] !== null) {
       this.reverseValues(this.propValuesMap['props']);
     }
-    if (this.propValuesMap['shaderProps'] !== undefined) {
+    if (this.propValuesMap['shaderProps'] !== null) {
       this.reverseValues(this.propValuesMap['shaderProps']);
     }
 
@@ -165,7 +176,7 @@ export class CoreAnimation extends EventEmitter {
   }
 
   updateValue(
-    propName: string,
+    isColor: boolean,
     propValue: number,
     startValue: number,
     easing: string | TimingFunction | undefined,
@@ -178,7 +189,7 @@ export class CoreAnimation extends EventEmitter {
     }
 
     const endValue = propValue;
-    if (propName.indexOf('color') !== -1) {
+    if (isColor === true) {
       if (startValue === endValue) {
         return startValue;
       }
@@ -199,15 +210,20 @@ export class CoreAnimation extends EventEmitter {
 
   private updateValues(
     target: Record<string, number>,
-    valueMap: Record<string, PropValues>,
+    group: PropGroup,
     easing: string | TimingFunction | undefined,
   ) {
-    const entries = Object.entries(valueMap);
-    const eLength = entries.length;
-
-    for (let i = 0; i < eLength; i++) {
-      const [key, value] = entries[i]!;
-      target[key] = this.updateValue(key, value.target, value.start, easing);
+    const keys = group.keys;
+    const values = group.values;
+    const length = keys.length;
+    for (let i = 0; i < length; i++) {
+      const value = values[i]!;
+      target[keys[i]!] = this.updateValue(
+        value.isColor,
+        value.target,
+        value.start,
+        easing,
+      );
     }
   }
 
@@ -264,14 +280,14 @@ export class CoreAnimation extends EventEmitter {
       }
     }
 
-    if (this.propValuesMap['props'] !== undefined) {
+    if (this.propValuesMap['props'] !== null) {
       this.updateValues(
         this.node as unknown as Record<string, number>,
         this.propValuesMap['props'],
         easing,
       );
     }
-    if (this.propValuesMap['shaderProps'] !== undefined) {
+    if (this.propValuesMap['shaderProps'] !== null) {
       this.updateValues(
         this.node.shader!.props as Record<string, number>,
         this.propValuesMap['shaderProps'],
@@ -280,7 +296,7 @@ export class CoreAnimation extends EventEmitter {
     }
 
     if (this.progress < 1) {
-      this.emit('tick', { progress: this.progress });
+      this.emit('tick');
     }
 
     if (this.progress === 1) {

package/src/core/animations/CoreAnimationController.ts

@@ -23,7 +23,6 @@ import type {
 } from '../../common/IAnimationController.js';
 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';
 
@@ -159,11 +158,21 @@ export class CoreAnimationController
     this.emit('animating', this);
   }
 
-  private onTick(
-    this: CoreAnimationController,
-    _animation: CoreAnimation,
-    data: AnimationTickPayload,
-  ): void {
-    this.emit('tick', data);
+  /**
+   * manually override the tick event to emit the progress of the animation as well
+   * we are first checking if there are any listeners for the tick event. this avoid unnecessary object creation.
+   * @param this
+   * @returns
+   */
+  private onTick(this: CoreAnimationController): void {
+    const listeners = this.eventListeners['tick'];
+    if (listeners === undefined) {
+      return;
+    }
+    listeners.forEach((listener) => {
+      listener(this, {
+        progress: this.animation['progress'],
+      });
+    });
   }
 }

package/src/core/renderers/canvas/CanvasRenderer.ts

@@ -83,7 +83,19 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     const hasTransform = ta !== 1;
-    const hasClipping = clippingRect.w !== 0 && clippingRect.h !== 0;
+    const clippingValid = clippingRect.valid === true;
+
+    // If the clipping rect is valid but zero-area, the node is fully clipped — skip rendering
+    if (
+      clippingValid === true &&
+      clippingRect.w === 0 &&
+      clippingRect.h === 0
+    ) {
+      return;
+    }
+
+    const hasClipping =
+      clippingValid === true && clippingRect.w !== 0 && clippingRect.h !== 0;
     const shader = node.props.shader;
     const hasShader = shader !== null;
 
@@ -146,6 +158,9 @@ export class CanvasRenderer extends CoreRenderer {
       const tintColor = parseColor(color);
       if (textureType !== TextureType.subTexture) {
         const image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
+        if (image === null) {
+          return;
+        }
         this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
         this.context.drawImage(image, tx, ty, width, height);
         this.context.globalAlpha = 1;
@@ -154,6 +169,9 @@ export class CanvasRenderer extends CoreRenderer {
       const image = (
         (texture as SubTexture).parentTexture.ctxTexture as CanvasTexture
       ).getImage(tintColor);
+      if (image === null) {
+        return;
+      }
       const props = (texture as SubTexture).props;
 
       this.context.globalAlpha = tintColor.a ?? node.worldAlpha;

package/src/core/renderers/canvas/CanvasTexture.ts

@@ -21,6 +21,7 @@ import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
 import { formatRgba, type IParsedColor } from '../../lib/colorParser.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
+import type { Texture } from '../../textures/Texture.js';
 
 export class CanvasTexture extends CoreContextTexture {
   protected image:
@@ -36,10 +37,23 @@ export class CanvasTexture extends CoreContextTexture {
     | undefined;
 
   async load(): Promise<void> {
+    // Capture textureData synchronously before any await - a pending
+    // freeTextureDataTask microtask could null textureSource.textureData
+    // during the first async suspension, causing onLoadRequest to fail.
+    const textureData = this.textureSource.textureData;
+    assertTruthy(textureData?.data, 'Texture data is null before load');
+
     this.textureSource.setState('loading');
 
     try {
-      const size = await this.onLoadRequest();
+      const size = await this.onLoadRequest(textureData.data);
+
+      // Guard against the texture being freed while the load was in flight
+      if (this.textureSource.state === 'freed') {
+        this.image = undefined;
+        return;
+      }
+
       this.textureSource.setState('loaded', size);
       this.textureSource.freeTextureData();
       this.updateMemSize();
@@ -82,9 +96,11 @@ export class CanvasTexture extends CoreContextTexture {
 
   getImage(
     color: IParsedColor,
-  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement {
+  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement | null {
     const image = this.image;
-    assertTruthy(image, 'Attempt to get unloaded image texture');
+    if (image === undefined) {
+      return null;
+    }
 
     if (color.isWhite) {
       if (this.tintCache) {
@@ -133,10 +149,9 @@ export class CanvasTexture extends CoreContextTexture {
     return canvas;
   }
 
-  private async onLoadRequest(): Promise<Dimensions> {
-    assertTruthy(this.textureSource?.textureData?.data, 'Texture data is null');
-    const { data } = this.textureSource.textureData;
-
+  private async onLoadRequest(
+    data: NonNullable<NonNullable<Texture['textureData']>['data']>,
+  ): Promise<Dimensions> {
     // TODO: canvas from text renderer should be able to provide the canvas directly
     // instead of having to re-draw it into a new canvas...
     if (data instanceof ImageData) {
@@ -144,7 +159,7 @@ export class CanvasTexture extends CoreContextTexture {
       canvas.width = data.width;
       canvas.height = data.height;
       const ctx = canvas.getContext('2d');
-      if (ctx) ctx.putImageData(data, 0, 0);
+      if (ctx !== null) ctx.putImageData(data, 0, 0);
       this.image = canvas;
       return { w: data.width, h: data.height };
     } else if (

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

@@ -18,7 +18,6 @@
  */
 
 import { CoreRenderer, type BufferInfo } from '../CoreRenderer.js';
-import type { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   createIndexBuffer,
@@ -47,15 +46,15 @@ import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
-import type { Platform } from '../../platforms/Platform.js';
 import type { Stage } from '../../Stage.js';
+import type { CoreTextNode } from '../../CoreTextNode.js';
 
 interface CoreWebGlSystem {
   parameters: CoreWebGlParameters;
   extensions: CoreWebGlExtensions;
 }
 
-export type WebGlRenderOp = CoreNode | SdfRenderOp;
+export type WebGlRenderOp = CoreNode | CoreTextNode;
 
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data

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

@@ -62,6 +62,7 @@ export class WebGlShaderNode<
     undefined;
   private valueKey: string = '';
   uniforms: UniformCollection = {
+    hasStoredUniforms: false,
     single: {},
     vec2: {},
     vec3: {},
@@ -83,6 +84,7 @@ export class WebGlShaderNode<
       this.update = () => {
         if (this.props === undefined) {
           this.updater!(this.node as CoreNode, this.props);
+          this.updateUniformUsage();
           return;
         }
 
@@ -106,12 +108,14 @@ export class WebGlShaderNode<
         }
         //create empty uniform collection when calculating new values
         this.uniforms = {
+          hasStoredUniforms: false,
           single: {},
           vec2: {},
           vec3: {},
           vec4: {},
         };
         this.updater!(this.node as CoreNode);
+        this.updateUniformUsage();
         stage.shManager.setShaderValues(
           this.valueKey,
           this.uniforms as unknown as Record<string, unknown>,
@@ -120,6 +124,26 @@ export class WebGlShaderNode<
     }
   }
 
+  updateUniformUsage(): void {
+    for (const _ in this.uniforms.single) {
+      this.uniforms.hasStoredUniforms = true;
+      return;
+    }
+    for (const _ in this.uniforms.vec2) {
+      this.uniforms.hasStoredUniforms = true;
+      return;
+    }
+    for (const _ in this.uniforms.vec3) {
+      this.uniforms.hasStoredUniforms = true;
+      return;
+    }
+    for (const _ in this.uniforms.vec4) {
+      this.uniforms.hasStoredUniforms = true;
+      return;
+    }
+    this.uniforms.hasStoredUniforms = false;
+  }
+
   /**
    * Sets the value of a RGBA variable
    * @param location