@solidtv/renderer 1.5.0 → 1.5.2

package/src/core/CoreNode.test.ts

@@ -7,6 +7,8 @@ import { type TextureOptions } from './CoreTextureManager.js';
 import { createBound } from './lib/utils.js';
 import { ImageTexture } from './textures/ImageTexture.js';
 import { Matrix3d } from './lib/Matrix3d.js';
+import { EventEmitter } from '../common/EventEmitter.js';
+import { premultiplyColorABGR } from '../utils.js';
 
 describe('set color()', () => {
   const defaultProps = (overrides?: Partial<CoreNodeProps>): CoreNodeProps => ({
@@ -23,6 +25,7 @@ describe('set color()', () => {
     colorTl: 0,
     colorTop: 0,
     colorTr: 0,
+    placeholderColor: 0,
     h: 0,
     mount: 0,
     mountX: 0,
@@ -1180,4 +1183,426 @@ describe('set color()', () => {
       expect(node.clippingRect.h).toBe(30);
     });
   });
+
+  describe('RecalcUniforms scoping', () => {
+    const makeAttachedNode = () => {
+      // Fresh stage per node: earlier tests can mutate the shared stage
+      // mock's bound objects through by-reference strictBound assignment
+      // in createRenderBounds.
+      const localStage = mock<Stage>({
+        strictBound: createBound(0, 0, 200, 200),
+        preloadBound: createBound(0, 0, 200, 200),
+        defaultTexture: {
+          state: 'loaded',
+        },
+        renderer: mock<CoreRenderer>() as CoreRenderer,
+      });
+      const parent = new CoreNode(localStage, defaultProps());
+      parent.globalTransform = Matrix3d.identity();
+      parent.worldAlpha = 1;
+
+      const node = new CoreNode(
+        localStage,
+        defaultProps({ parent, w: 100, h: 100 }),
+      );
+      node.alpha = 1;
+      return node;
+    };
+
+    it('should not set RecalcUniforms on pure translation', () => {
+      const node = makeAttachedNode();
+      node.update(0, clippingRect);
+
+      node.x = 50;
+      node.y = 25;
+
+      expect(node.updateType & UpdateType.Local).toBe(UpdateType.Local);
+      expect(node.updateType & UpdateType.RecalcUniforms).toBe(0);
+    });
+
+    it('should set RecalcUniforms when w changes', () => {
+      const node = makeAttachedNode();
+      node.update(0, clippingRect);
+
+      node.w = 150;
+
+      expect(node.updateType & UpdateType.RecalcUniforms).toBe(
+        UpdateType.RecalcUniforms,
+      );
+    });
+
+    it('should set RecalcUniforms when h changes', () => {
+      const node = makeAttachedNode();
+      node.update(0, clippingRect);
+
+      node.h = 75;
+
+      expect(node.updateType & UpdateType.RecalcUniforms).toBe(
+        UpdateType.RecalcUniforms,
+      );
+    });
+
+    it('should run the shader updater on resize but not on translation', () => {
+      const node = makeAttachedNode();
+      const shader = {
+        shaderKey: 'test',
+        update: vi.fn(),
+        attachNode: vi.fn(),
+        time: undefined,
+      };
+      // Assignment raises RecalcUniforms | IsRenderable via the setter
+      node.shader = shader as never;
+      node.update(0, clippingRect);
+      expect(shader.update).toHaveBeenCalledTimes(1);
+
+      // Pure translation: no uniform recompute
+      node.x = 50;
+      node.update(0, clippingRect);
+      expect(shader.update).toHaveBeenCalledTimes(1);
+
+      // Resize: uniforms depend on dimensions, must recompute
+      node.w = 150;
+      node.update(0, clippingRect);
+      expect(shader.update).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('placeholderColor', () => {
+    // A texture fake on a real EventEmitter so CoreNode's loadTextureTask
+    // subscribes for real and we can drive the loaded/freed/failed handler
+    // chain by emitting, like the engine does.
+    function emittingTexture(state: string): ImageTexture & {
+      emit: (event: string, data?: unknown) => void;
+    } {
+      return Object.assign(new EventEmitter(), {
+        state,
+        preventCleanup: false,
+        retryCount: 0,
+        maxRetryCount: 1,
+        dimensions: { w: 100, h: 100 },
+        setRenderableOwner: vi.fn(),
+      }) as unknown as ImageTexture & {
+        emit: (event: string, data?: unknown) => void;
+      };
+    }
+
+    function visibleNode(): CoreNode {
+      const parent = new CoreNode(stage, defaultProps());
+      parent.globalTransform = Matrix3d.identity();
+      parent.worldAlpha = 1;
+
+      const node = new CoreNode(stage, defaultProps({ parent }));
+      node.alpha = 1;
+      node.x = 0;
+      node.y = 0;
+      node.w = 100;
+      node.h = 100;
+      return node;
+    }
+
+    // Flush the queueMicrotask(loadTextureTask) so listeners attach.
+    const flushMicrotasks = () => Promise.resolve();
+
+    it('renders the placeholder while the texture is loading', () => {
+      const node = visibleNode();
+      node.placeholderColor = 0x336699ff;
+      node.texture = emittingTexture('initial');
+
+      node.update(0, clippingRect);
+
+      expect(node.placeholderActive).toBe(true);
+      expect(node.isRenderable).toBe(true);
+      expect(node.renderTexture).toBe(stage.defaultTexture);
+
+      const expected = premultiplyColorABGR(0x336699ff, 1);
+      expect(node.premultipliedColorTl).toBe(expected);
+      expect(node.premultipliedColorTr).toBe(expected);
+      expect(node.premultipliedColorBl).toBe(expected);
+      expect(node.premultipliedColorBr).toBe(expected);
+    });
+
+    it('is inactive without a placeholderColor (loading renders nothing)', () => {
+      const node = visibleNode();
+      node.texture = emittingTexture('initial');
+
+      node.update(0, clippingRect);
+
+      expect(node.placeholderActive).toBe(false);
+      expect(node.isRenderable).toBe(false);
+    });
+
+    it('is inactive without a texture (color-only nodes are unaffected)', () => {
+      const node = visibleNode();
+      node.placeholderColor = 0x336699ff;
+
+      node.update(0, clippingRect);
+
+      expect(node.placeholderActive).toBe(false);
+    });
+
+    it('switches to the texture and regular colors once loaded', async () => {
+      const node = visibleNode();
+      node.color = 0xffffffff;
+      node.placeholderColor = 0x336699ff;
+      const texture = emittingTexture('initial');
+      node.texture = texture;
+      node.update(0, clippingRect);
+      expect(node.renderTexture).toBe(stage.defaultTexture);
+
+      await flushMicrotasks();
+      (texture as { state: string }).state = 'loaded';
+      texture.emit('loaded', { w: 100, h: 100 });
+      node.isQuadDirty = false;
+      node.update(1, clippingRect);
+
+      expect(node.placeholderActive).toBe(false);
+      expect(node.isRenderable).toBe(true);
+      expect(node.renderTexture).toBe(texture);
+      expect(node.premultipliedColorTl).toBe(
+        premultiplyColorABGR(0xffffffff, 1),
+      );
+      // The color switch must reach the GPU quad buffer
+      expect(node.isQuadDirty).toBe(true);
+    });
+
+    it('shows the placeholder again while a freed texture reloads', async () => {
+      const node = visibleNode();
+      node.placeholderColor = 0x336699ff;
+      const texture = emittingTexture('initial');
+      node.texture = texture;
+      node.update(0, clippingRect);
+
+      await flushMicrotasks();
+      (texture as { state: string }).state = 'loaded';
+      texture.emit('loaded', { w: 100, h: 100 });
+      node.update(1, clippingRect);
+      expect(node.placeholderActive).toBe(false);
+
+      (texture as { state: string }).state = 'freed';
+      texture.emit('freed');
+      node.update(2, clippingRect);
+
+      expect(node.placeholderActive).toBe(true);
+      expect(node.isRenderable).toBe(true);
+      expect(node.renderTexture).toBe(stage.defaultTexture);
+      expect(node.premultipliedColorTl).toBe(
+        premultiplyColorABGR(0x336699ff, 1),
+      );
+    });
+
+    it('keeps the placeholder when the texture permanently fails', async () => {
+      const node = visibleNode();
+      node.placeholderColor = 0x336699ff;
+      const texture = emittingTexture('initial');
+      node.texture = texture;
+      node.update(0, clippingRect);
+
+      await flushMicrotasks();
+      (texture as { state: string }).state = 'failed';
+      (texture as { retryCount: number }).retryCount = 2; // > maxRetryCount (1)
+      texture.emit('failed', new Error('404'));
+      node.update(1, clippingRect);
+
+      expect(node.placeholderActive).toBe(true);
+      expect(node.isRenderable).toBe(true);
+      expect(node.renderTexture).toBe(stage.defaultTexture);
+    });
+
+    it('a permanently failed texture without a placeholder stays non-renderable', async () => {
+      const node = visibleNode();
+      const texture = emittingTexture('initial');
+      node.texture = texture;
+      node.update(0, clippingRect);
+
+      await flushMicrotasks();
+      (texture as { state: string }).state = 'failed';
+      (texture as { retryCount: number }).retryCount = 2;
+      texture.emit('failed', new Error('404'));
+      node.update(1, clippingRect);
+
+      expect(node.isRenderable).toBe(false);
+    });
+
+    it('deactivates when placeholderColor is cleared while loading', () => {
+      const node = visibleNode();
+      node.placeholderColor = 0x336699ff;
+      node.texture = emittingTexture('initial');
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(true);
+
+      node.placeholderColor = 0;
+      node.update(1, clippingRect);
+
+      expect(node.placeholderActive).toBe(false);
+      expect(node.isRenderable).toBe(false);
+    });
+
+    it('updates the shown color when placeholderColor changes while active', () => {
+      const node = visibleNode();
+      node.placeholderColor = 0x336699ff;
+      node.texture = emittingTexture('initial');
+      node.update(0, clippingRect);
+
+      node.placeholderColor = 0x993311ff;
+      node.update(1, clippingRect);
+
+      expect(node.premultipliedColorTl).toBe(
+        premultiplyColorABGR(0x993311ff, 1),
+      );
+    });
+
+    it('does not activate when the assigned texture is already loaded', () => {
+      const node = visibleNode();
+      node.placeholderColor = 0x336699ff;
+      const texture = emittingTexture('loaded');
+      node.texture = texture;
+
+      node.update(0, clippingRect);
+
+      expect(node.placeholderActive).toBe(false);
+      expect(node.renderTexture).toBe(texture);
+    });
+  });
+
+  describe('renderOnlyInViewport', () => {
+    // Viewport is 0..200; the preload (bounds-margin) ring extends to 400.
+    // A node at x=250 is InBounds (margin ring); at x=50 it is InViewport;
+    // at x=500 it is OutOfBounds.
+    function boundsStage(renderOnlyInViewport: boolean): Stage {
+      return mock<Stage>({
+        strictBound: createBound(0, 0, 200, 200),
+        preloadBound: createBound(0, 0, 400, 200),
+        defaultTexture: {
+          state: 'loaded',
+        },
+        renderer: mock<CoreRenderer>() as CoreRenderer,
+        renderOnlyInViewport,
+      });
+    }
+
+    function loadedTextureNode(stage: Stage, x: number): CoreNode {
+      const parent = new CoreNode(stage, defaultProps());
+      parent.globalTransform = Matrix3d.identity();
+      parent.worldAlpha = 1;
+
+      const node = new CoreNode(stage, defaultProps({ parent }));
+      node.alpha = 1;
+      node.x = x;
+      node.y = 0;
+      node.w = 100;
+      node.h = 100;
+      node.texture = mock<ImageTexture>({
+        state: 'loaded',
+        setRenderableOwner: vi.fn(),
+      });
+      node.textureLoaded = true;
+      return node;
+    }
+
+    it('off: a margin-ring node is renderable (legacy behavior)', () => {
+      const node = loadedTextureNode(boundsStage(false), 250);
+
+      node.update(0, clippingRect);
+
+      expect(node.isRenderable).toBe(true);
+    });
+
+    it('on: a margin-ring node is not renderable but still owns its texture', () => {
+      const node = loadedTextureNode(boundsStage(true), 250);
+
+      node.update(0, clippingRect);
+
+      expect(node.isRenderable).toBe(false);
+      // Ownership is the load trigger and cleanup protection — it must stay.
+      expect(node.texture!.setRenderableOwner).toHaveBeenCalledWith(
+        expect.anything(),
+        true,
+      );
+    });
+
+    it('on: a viewport node is renderable', () => {
+      const node = loadedTextureNode(boundsStage(true), 50);
+
+      node.update(0, clippingRect);
+
+      expect(node.isRenderable).toBe(true);
+    });
+
+    it('on: a node becomes renderable when it crosses into the viewport', () => {
+      const node = loadedTextureNode(boundsStage(true), 250);
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(false);
+
+      // Scroll it in.
+      node.x = 50;
+      node.update(1, clippingRect);
+      expect(node.isRenderable).toBe(true);
+
+      // And back out into the ring.
+      node.x = 250;
+      node.update(2, clippingRect);
+      expect(node.isRenderable).toBe(false);
+    });
+
+    it('on: an out-of-bounds node releases texture ownership', () => {
+      const node = loadedTextureNode(boundsStage(true), 500);
+
+      node.update(0, clippingRect);
+
+      expect(node.isRenderable).toBe(false);
+      expect(node.texture!.setRenderableOwner).not.toHaveBeenCalledWith(
+        expect.anything(),
+        true,
+      );
+    });
+
+    it('on: a margin-ring placeholder is gated the same way', () => {
+      const stage = boundsStage(true);
+      const parent = new CoreNode(stage, defaultProps());
+      parent.globalTransform = Matrix3d.identity();
+      parent.worldAlpha = 1;
+
+      const node = new CoreNode(stage, defaultProps({ parent }));
+      node.alpha = 1;
+      node.x = 250;
+      node.y = 0;
+      node.w = 100;
+      node.h = 100;
+      node.placeholderColor = 0x336699ff;
+      node.texture = mock<ImageTexture>({
+        state: 'initial',
+        setRenderableOwner: vi.fn(),
+      });
+
+      node.update(0, clippingRect);
+      expect(node.placeholderActive).toBe(true);
+      expect(node.isRenderable).toBe(false);
+
+      node.x = 50;
+      node.update(1, clippingRect);
+      expect(node.isRenderable).toBe(true);
+    });
+
+    it('on: color-only nodes in the margin ring are gated too', () => {
+      const stage = boundsStage(true);
+      const parent = new CoreNode(stage, defaultProps());
+      parent.globalTransform = Matrix3d.identity();
+      parent.worldAlpha = 1;
+
+      const node = new CoreNode(stage, defaultProps({ parent }));
+      node.alpha = 1;
+      node.x = 250;
+      node.y = 0;
+      node.w = 100;
+      node.h = 100;
+      node.color = 0xff0000ff;
+
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(false);
+
+      node.x = 50;
+      node.update(1, clippingRect);
+      expect(node.isRenderable).toBe(true);
+    });
+  });
 });