@solidtv/renderer 1.0.5 → 1.0.7

package/src/core/CoreNode.test.ts

@@ -9,7 +9,7 @@ import { ImageTexture } from './textures/ImageTexture.js';
 import { Matrix3d } from './lib/Matrix3d.js';
 
 describe('set color()', () => {
-  const defaultProps: CoreNodeProps = {
+  const defaultProps = (overrides?: Partial<CoreNodeProps>): CoreNodeProps => ({
     alpha: 0,
     autosize: false,
     boundsMargin: null,
@@ -45,7 +45,8 @@ describe('set color()', () => {
     y: 0,
     zIndex: 0,
     preventDestroy: false,
-  };
+    ...overrides,
+  });
 
   const clippingRect = {
     x: 0,
@@ -66,7 +67,7 @@ describe('set color()', () => {
 
   describe('set color()', () => {
     it('should set all color subcomponents.', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       node.colorBl = 0x99aabbff;
       node.colorBr = 0xaabbccff;
       node.colorTl = 0xbbcceeff;
@@ -87,7 +88,7 @@ describe('set color()', () => {
     });
 
     it('should set update type.', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       node.updateType = 0;
       node.color = 0xffffffff;
 
@@ -99,17 +100,17 @@ describe('set color()', () => {
 
   describe('isRenderable checks', () => {
     it('should return false if node is not renderable', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       expect(node.isRenderable).toBe(false);
     });
 
     it('visible node that is a color texture', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       // Manually set parent properties that update() might read
       parent.globalTransform = Matrix3d.identity();
       parent.worldAlpha = 1;
 
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       node.alpha = 1;
       node.x = 0;
       node.y = 0;
@@ -122,11 +123,11 @@ describe('set color()', () => {
     });
 
     it('visible node that is a texture', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.identity();
       parent.worldAlpha = 1;
 
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       node.alpha = 1;
       node.x = 0;
       node.y = 0;
@@ -148,11 +149,11 @@ describe('set color()', () => {
     });
 
     it('a node with a texture with alpha 0 should not be renderable', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.identity();
       parent.worldAlpha = 1;
 
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       expect(node.isRenderable).toBe(false);
       node.alpha = 0;
       node.x = 0;
@@ -169,11 +170,11 @@ describe('set color()', () => {
     });
 
     it('a node with a texture that is OutOfBounds should not be renderable', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.identity();
       parent.worldAlpha = 1;
 
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       node.alpha = 1;
       node.x = 300;
       node.y = 300;
@@ -188,11 +189,11 @@ describe('set color()', () => {
     });
 
     it('a node with a freed texture should not be renderable', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.identity();
       parent.worldAlpha = 1;
 
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       node.alpha = 1;
       node.x = 0;
       node.y = 0;
@@ -207,11 +208,11 @@ describe('set color()', () => {
     });
 
     it('should emit renderable event when isRenderable status changes', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.identity();
       parent.worldAlpha = 1;
 
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       const eventCallback = vi.fn();
 
       // Listen for the renderableChanged event
@@ -262,12 +263,12 @@ describe('set color()', () => {
 
   describe('autosize system', () => {
     it('should initialize with autosize disabled', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       expect(node.autosize).toBe(false);
     });
 
     it('should enable texture autosize when texture is present', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       const mockTexture = mock<ImageTexture>();
       mockTexture.state = 'loading';
 
@@ -279,8 +280,8 @@ describe('set color()', () => {
     });
 
     it('should enable children autosize when no texture but has children', () => {
-      const parent = new CoreNode(stage, defaultProps);
-      const child = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
+      const child = new CoreNode(stage, defaultProps());
 
       parent.autosize = true;
       child.parent = parent;
@@ -290,8 +291,8 @@ describe('set color()', () => {
     });
 
     it('should prioritize texture autosize over children autosize', () => {
-      const parent = new CoreNode(stage, defaultProps);
-      const child = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
+      const child = new CoreNode(stage, defaultProps());
       const mockTexture = mock<ImageTexture>();
       mockTexture.state = 'loading';
 
@@ -305,8 +306,8 @@ describe('set color()', () => {
     });
 
     it('should switch from children to texture autosize when texture is added', () => {
-      const parent = new CoreNode(stage, defaultProps);
-      const child = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
+      const child = new CoreNode(stage, defaultProps());
 
       child.parent = parent;
       parent.autosize = true;
@@ -321,8 +322,8 @@ describe('set color()', () => {
     });
 
     it('should switch from texture to children autosize when texture is removed', () => {
-      const parent = new CoreNode(stage, defaultProps);
-      const child = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
+      const child = new CoreNode(stage, defaultProps());
       const mockTexture = mock<ImageTexture>();
       mockTexture.state = 'loading';
 
@@ -337,8 +338,8 @@ describe('set color()', () => {
     });
 
     it('should cleanup autosize manager when disabled', () => {
-      const parent = new CoreNode(stage, defaultProps);
-      const child = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
+      const child = new CoreNode(stage, defaultProps());
 
       child.parent = parent;
       parent.autosize = true;
@@ -349,8 +350,8 @@ describe('set color()', () => {
     });
 
     it('should establish autosize chain when child is added to autosize parent', () => {
-      const parent = new CoreNode(stage, defaultProps);
-      const child = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
+      const child = new CoreNode(stage, defaultProps());
 
       // Enable autosize BEFORE adding child
       parent.autosize = true;
@@ -361,8 +362,8 @@ describe('set color()', () => {
     });
 
     it('should remove from autosize chain when child is removed', () => {
-      const parent = new CoreNode(stage, defaultProps);
-      const child = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
+      const child = new CoreNode(stage, defaultProps());
 
       // Enable autosize BEFORE adding child
       parent.autosize = true;
@@ -376,12 +377,12 @@ describe('set color()', () => {
 
   describe('isSimple optimization', () => {
     it('should be simple by default', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       expect(node.isSimple).toBe(true);
     });
 
     it('should not be simple if rotated', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       node.rotation = 0.1;
       expect(node.isSimple).toBe(false);
       node.rotation = 0;
@@ -389,7 +390,7 @@ describe('set color()', () => {
     });
 
     it('should not be simple if scaled', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       node.scale = 1.1;
       expect(node.isSimple).toBe(false);
       node.scale = 1;
@@ -407,7 +408,7 @@ describe('set color()', () => {
     });
 
     it('should not be simple if mounted', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       node.mount = 0.5;
       expect(node.isSimple).toBe(false);
       node.mount = 0;
@@ -425,7 +426,7 @@ describe('set color()', () => {
     });
 
     it('should not be simple if texture is contained', () => {
-      const node = new CoreNode(stage, defaultProps);
+      const node = new CoreNode(stage, defaultProps());
       const mockTexture = mock<ImageTexture>({
         state: 'loaded',
         dimensions: { w: 100, h: 100 },
@@ -442,9 +443,9 @@ describe('set color()', () => {
     });
 
     it('should update local transform correctly when simple', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.identity();
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       node.x = 100;
       node.y = 50;
       node.props.w = 50;
@@ -459,9 +460,9 @@ describe('set color()', () => {
     });
 
     it('should update local transform correctly when not simple (rotation)', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.identity();
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       node.x = 100;
       node.y = 50;
       node.props.w = 100; // use props.w directly to avoid trigger setters if exist (though setters exist)
@@ -482,10 +483,10 @@ describe('set color()', () => {
 
   describe('isSimple Global Transform', () => {
     it('should calculate global transform correctly when simple', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.translate(10, 20);
 
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       node.x = 100;
       node.y = 50;
       // node is simple by default
@@ -501,10 +502,10 @@ describe('set color()', () => {
     });
 
     it('should calculate global transform correctly when not simple', () => {
-      const parent = new CoreNode(stage, defaultProps);
+      const parent = new CoreNode(stage, defaultProps());
       parent.globalTransform = Matrix3d.translate(10, 20);
 
-      const node = new CoreNode(stage, { ...defaultProps, parent });
+      const node = new CoreNode(stage, defaultProps({ parent }));
       node.x = 100;
       node.y = 50;
       node.w = 100;

package/src/core/CoreNode.ts

@@ -13,7 +13,8 @@ import type { BufferCollection } from './renderers/webgl/internal/BufferCollecti
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { Stage } from './Stage.js';
 import {
-  type Texture,
+  Texture,
+  TextureType,
   type TextureCoords,
   type TextureFailedEventHandler,
   type TextureFreedEventHandler,
@@ -838,53 +839,19 @@ export class CoreNode extends EventEmitter {
     let initialUpdateType =
       UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState;
 
-    // Fast-path assign only known keys
-    const p = (this.props = {
-      x: props.x,
-      y: props.y,
-      w: props.w,
-      h: props.h,
-      alpha: props.alpha,
-      autosize: props.autosize,
-      clipping: props.clipping,
-      color: props.color,
-      colorTop: props.colorTop,
-      colorBottom: props.colorBottom,
-      colorLeft: props.colorLeft,
-      colorRight: props.colorRight,
-      colorTl: props.colorTl,
-      colorTr: props.colorTr,
-      colorBl: props.colorBl,
-      colorBr: props.colorBr,
-      scaleX: props.scaleX,
-      scaleY: props.scaleY,
-      rotation: props.rotation,
-      pivotX: props.pivotX,
-      pivotY: props.pivotY,
-      mountX: props.mountX,
-      mountY: props.mountY,
-      mount: props.mount,
-      pivot: props.pivot,
-      zIndex: props.zIndex,
-      textureOptions: props.textureOptions,
-      data: props.data,
-      imageType: props.imageType,
-      srcX: props.srcX,
-      srcY: props.srcY,
-      srcWidth: props.srcWidth,
-      srcHeight: props.srcHeight,
-      parent: props.parent,
-      texture: null,
-      shader: null,
-      src: null,
-      rtt: false,
-      boundsMargin: null,
-      scale: null,
-      interactive: props.interactive,
-      preventDestroy: props.preventDestroy,
-      componentName: props.componentName,
-      componentLocation: props.componentLocation,
-    });
+    // Use the incoming props object directly — resolveNodeDefaults already
+    // creates a fresh object with a consistent shape.  Save fields that are
+    // re-applied through setters, then null them on props so the setters
+    // detect the change.
+    const { texture, shader, src, rtt, boundsMargin, interactive, parent } =
+      props;
+    const p = (this.props = props);
+    p.texture = null;
+    p.shader = null;
+    p.src = null;
+    p.rtt = false;
+    p.boundsMargin = null;
+    p.scale = null;
 
     //check if any color props are set for premultiplied color updates
     if (
@@ -907,17 +874,17 @@ export class CoreNode extends EventEmitter {
       this.zIndex = p.zIndex;
     }
 
-    if (props.parent !== null) {
-      props.parent.addChild(this);
+    if (parent !== null) {
+      parent.addChild(this);
     }
 
-    // Assign props to instances
-    this.texture = props.texture;
-    this.shader = props.shader;
-    this.src = props.src;
-    this.rtt = props.rtt;
-    this.boundsMargin = props.boundsMargin;
-    this.interactive = props.interactive;
+    // Assign saved values through setters
+    this.texture = texture;
+    this.shader = shader;
+    this.src = src;
+    this.rtt = rtt;
+    this.boundsMargin = boundsMargin;
+    this.interactive = interactive;
 
     // Initialize autosize if enabled
     if (p.autosize === true) {
@@ -2774,6 +2741,11 @@ export class CoreNode extends EventEmitter {
       this.loadTexture();
     }
 
+    if (this.texture?.type === TextureType.subTexture && this.textureLoaded) {
+      // When setting the texture value of a subtexture but the atlas is already loaded,
+      // requestRenderListUpdate is not triggered, but we still need to update the quad
+      this.isQuadDirty = true;
+    }
     this.setUpdateType(UpdateType.IsRenderable);
     this.updateIsSimple();
   }
@@ -2837,6 +2809,15 @@ export class CoreNode extends EventEmitter {
         values.start = (this as any)[name] ?? 0;
         values.target = value;
         controller.progress = 0;
+
+        if (settings.adaptiveDuration === true) {
+          const now = performance.now();
+          const elapsed = now - controller.lastRunTime;
+          controller.lastRunTime = now;
+          const duration = settings.duration ?? controller.duration;
+          controller.duration = elapsed < duration ? elapsed : duration;
+        }
+
         return controller.start();
       }
     }
@@ -2852,6 +2833,14 @@ export class CoreNode extends EventEmitter {
     return controller.start();
   }
 
+  animateToTarget(prop: string): number | undefined {
+    const animation = this._animations[prop];
+    if (!animation) {
+      return undefined;
+    }
+    return animation.controller.props?.[prop]?.target;
+  }
+
   flush() {
     // no-op
   }

package/src/core/CoreTextNode.ts

@@ -6,7 +6,7 @@ import type {
   TextRenderInfo,
   SdfVertexCache,
 } from './text-rendering/TextRenderer.js';
-import { USE_RTT } from '../utils.js';
+import { USE_RTT, premultiplyColorABGR } from '../utils.js';
 import {
   CoreNode,
   CoreNodeRenderState,
@@ -239,27 +239,23 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     // Handle Canvas renderer (uses ImageData)
     if (textRendererType === 'canvas') {
       if (result.imageData === undefined) {
-        this.emit('failed', {
-          type: 'text',
-          error: new Error(
-            'Canvas text rendering failed, no image data returned',
-          ),
-        } satisfies NodeTextFailedPayload);
-        return;
-      }
-
-      this.texture = this.stage.txManager.createTexture('ImageTexture', {
-        premultiplyAlpha: true,
-        src: result.imageData as ImageData,
-      });
-      // It isn't renderable until the texture is loaded we have to set it to false here to avoid it
-      // being detected as a renderable default color node in the next frame
-      // it will be corrected once the texture is loaded
-      this.setRenderable(false);
-
-      if (this.renderState > CoreNodeRenderState.OutOfBounds) {
-        // We do want the texture to load immediately
-        this.texture.setRenderableOwner(this._id, true);
+        // Empty text returns no imageData — mark not renderable and continue
+        // to update dimensions (w=0, h=0) rather than emitting a failure.
+        this.setRenderable(false);
+      } else {
+        this.texture = this.stage.txManager.createTexture('ImageTexture', {
+          premultiplyAlpha: true,
+          src: result.imageData as ImageData,
+        });
+        // It isn't renderable until the texture is loaded we have to set it to false here to avoid it
+        // being detected as a renderable default color node in the next frame
+        // it will be corrected once the texture is loaded
+        this.setRenderable(false);
+
+        if (this.renderState > CoreNodeRenderState.OutOfBounds) {
+          // We do want the texture to load immediately
+          this.texture.setRenderableOwner(this._id, true);
+        }
       }
     }
 
@@ -300,8 +296,15 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         return;
     }
 
-    // Canvas renderer: use standard texture rendering via CoreNode
+    // Canvas renderer: color is baked into the texture to preserve
+    // native emoji colors. Use white tint with worldAlpha only.
     if (this._type === 'canvas') {
+      const white = premultiplyColorABGR(0xffffffff, this.worldAlpha);
+      this.premultipliedColorTl =
+        this.premultipliedColorTr =
+        this.premultipliedColorBl =
+        this.premultipliedColorBr =
+          white;
       super.renderQuads(renderer);
       return;
     }
@@ -558,6 +561,18 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     }
   }
 
+  override get color(): number {
+    return this.props.color;
+  }
+
+  override set color(value: number) {
+    super.color = value;
+    if (this._type === 'canvas') {
+      this._layoutGenerated = false;
+      this.setUpdateType(UpdateType.Local);
+    }
+  }
+
   get forceLoad() {
     return this.textProps.forceLoad;
   }

package/src/core/CoreTextureManager.ts

@@ -340,8 +340,6 @@ export class CoreTextureManager extends EventEmitter {
    * @param immediate - Whether to prioritize the texture for immediate loading
    */
   async loadTexture(texture: Texture, priority?: boolean): Promise<void> {
-    this.stage.txMemManager.removeFromOrphanedTextures(texture);
-
     if (texture.type === TextureType.subTexture) {
       // ignore subtextures - they get loaded through their parent
       return;

package/src/core/TextureMemoryManager.ts

@@ -98,7 +98,6 @@ export interface MemoryInfo {
 export class TextureMemoryManager {
   private memUsed = 0;
   private loadedTextures: Set<Texture> = new Set();
-  private orphanedTextures: Set<Texture> = new Set();
   private criticalThreshold: number = 124e6;
   private targetThreshold: number = 0.5;
   private cleanupInterval: number = 5000;
@@ -127,32 +126,6 @@ export class TextureMemoryManager {
     this.updateSettings(settings);
   }
 
-  /**
-   * Add a texture to the orphaned textures list
-   *
-   * @param texture - The texture to add to the orphaned textures list
-   */
-  addToOrphanedTextures(texture: Texture) {
-    // if the texture is already in the orphaned textures list add it at the end
-    if (this.orphanedTextures.has(texture)) {
-      this.orphanedTextures.delete(texture);
-    }
-
-    // If the texture can be cleaned up, add it to the orphaned textures list
-    if (texture.preventCleanup === false) {
-      this.orphanedTextures.add(texture);
-    }
-  }
-
-  /**
-   * Remove a texture from the orphaned textures list
-   *
-   * @param texture - The texture to remove from the orphaned textures list
-   */
-  removeFromOrphanedTextures(texture: Texture) {
-    this.orphanedTextures.delete(texture);
-  }
-
   /**
    * Set the memory usage of a texture
    *

package/src/core/animations/AnimationManager.ts

@@ -16,6 +16,7 @@ export interface AnimationConfig extends IAnimationController {
   manager: AnimationManager;
   node: CoreNode;
   duration: number;
+  lastRunTime: number;
   delayFor: number;
   delay: number;
   progress: number;

package/src/core/animations/CoreAnimation.ts

@@ -8,6 +8,7 @@ import type {
 
 export interface AnimationSettings {
   duration: number;
+  adaptiveDuration: boolean;
   delay: number;
   easing: string | TimingFunction;
   loop: boolean;
@@ -23,7 +24,6 @@ export function createAnimation(
 ): AnimationConfig {
   const easing = settings.easing || 'linear';
   const delay = settings.delay ?? 0;
-
   let propValues: Record<string, PropValues> | null = null;
   let shaderPropValues: Record<string, PropValues> | null = null;
 
@@ -73,6 +73,7 @@ export function createAnimation(
     shaderProps: shaderPropValues,
     stoppedResolve: null,
     stoppedPromise: null,
+    lastRunTime: settings.adaptiveDuration ? performance.now() : 0,
 
     start() {
       if (this.state !== 'running' && this.state !== 'scheduled') {