@lightningjs/renderer 2.12.1 → 2.13.1

package/src/core/CoreNode.test.ts

@@ -26,174 +26,177 @@ import { type BaseShaderController } from '../main-api/ShaderController';
 import { createBound } from './lib/utils.js';
 import { ImageTexture } from './textures/ImageTexture.js';
 
-const defaultProps: CoreNodeProps = {
-  alpha: 0,
-  autosize: false,
-  clipping: false,
-  color: 0,
-  colorBl: 0,
-  colorBottom: 0,
-  colorBr: 0,
-  colorLeft: 0,
-  colorRight: 0,
-  colorTl: 0,
-  colorTop: 0,
-  colorTr: 0,
-  height: 0,
-  mount: 0,
-  mountX: 0,
-  mountY: 0,
-  parent: null,
-  pivot: 0,
-  pivotX: 0,
-  pivotY: 0,
-  rotation: 0,
-  rtt: false,
-  scale: 0,
-  scaleX: 0,
-  scaleY: 0,
-  shader: mock<BaseShaderController>(),
-  src: '',
-  texture: null,
-  textureOptions: {} as TextureOptions,
-  width: 0,
-  x: 0,
-  y: 0,
-  zIndex: 0,
-  zIndexLocked: 0,
-  preventCleanup: false,
-  strictBounds: false,
-};
-
-const clippingRect = {
-  x: 0,
-  y: 0,
-  width: 200,
-  height: 200,
-  valid: false,
-};
-
-const stage = mock<Stage>({
-  strictBound: createBound(0, 0, 200, 200),
-  preloadBound: createBound(0, 0, 200, 200),
-  defaultTexture: {
-    state: 'loaded',
-  },
-});
-
 describe('set color()', () => {
-  it('should set all color subcomponents.', () => {
-    const node = new CoreNode(stage, defaultProps);
-    node.colorBl = 0x99aabbff;
-    node.colorBr = 0xaabbccff;
-    node.colorTl = 0xbbcceeff;
-    node.colorTr = 0xcceeffff;
-
-    node.color = 0xffffffff;
-
-    expect(node.color).toBe(0xffffffff);
-    expect(node.colorBl).toBe(0xffffffff);
-    expect(node.colorBr).toBe(0xffffffff);
-    expect(node.colorTl).toBe(0xffffffff);
-    expect(node.colorTr).toBe(0xffffffff);
-    expect(node.colorLeft).toBe(0xffffffff);
-    expect(node.colorRight).toBe(0xffffffff);
-    expect(node.colorTop).toBe(0xffffffff);
-    expect(node.colorBottom).toBe(0xffffffff);
-  });
-
-  it('should set update type.', () => {
-    const node = new CoreNode(stage, defaultProps);
-    node.updateType = 0;
-
-    node.color = 0xffffffff;
-
-    expect(node.updateType).toBe(UpdateType.PremultipliedColors);
-  });
-});
-
-describe('isRenderable checks', () => {
-  it('should return false if node is not renderable', () => {
-    const node = new CoreNode(stage, defaultProps);
-    expect(node.isRenderable).toBe(false);
-  });
-
-  it('visible node that is a color texture', () => {
-    const node = new CoreNode(stage, defaultProps);
-    node.alpha = 1;
-    node.x = 0;
-    node.y = 0;
-    node.width = 100;
-    node.height = 100;
-    node.color = 0xffffffff;
-
-    node.update(0, clippingRect);
-    expect(node.isRenderable).toBe(true);
+  const defaultProps: CoreNodeProps = {
+    alpha: 0,
+    autosize: false,
+    boundsMargin: null,
+    clipping: false,
+    color: 0,
+    colorBl: 0,
+    colorBottom: 0,
+    colorBr: 0,
+    colorLeft: 0,
+    colorRight: 0,
+    colorTl: 0,
+    colorTop: 0,
+    colorTr: 0,
+    height: 0,
+    mount: 0,
+    mountX: 0,
+    mountY: 0,
+    parent: null,
+    pivot: 0,
+    pivotX: 0,
+    pivotY: 0,
+    rotation: 0,
+    rtt: false,
+    scale: 0,
+    scaleX: 0,
+    scaleY: 0,
+    shader: mock<BaseShaderController>(),
+    src: '',
+    texture: null,
+    textureOptions: {} as TextureOptions,
+    width: 0,
+    x: 0,
+    y: 0,
+    zIndex: 0,
+    zIndexLocked: 0,
+    preventCleanup: false,
+    strictBounds: false,
+  };
+
+  const clippingRect = {
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 200,
+    valid: false,
+  };
+
+  const stage = mock<Stage>({
+    strictBound: createBound(0, 0, 200, 200),
+    preloadBound: createBound(0, 0, 200, 200),
+    defaultTexture: {
+      state: 'loaded',
+    },
   });
 
-  it('visible node that is a texture', () => {
-    const node = new CoreNode(stage, defaultProps);
-    node.alpha = 1;
-    node.x = 0;
-    node.y = 0;
-    node.width = 100;
-    node.height = 100;
-    node.texture = mock<ImageTexture>({
-      state: 'initial',
+  describe('set color()', () => {
+    it('should set all color subcomponents.', () => {
+      const node = new CoreNode(stage, defaultProps);
+      node.colorBl = 0x99aabbff;
+      node.colorBr = 0xaabbccff;
+      node.colorTl = 0xbbcceeff;
+      node.colorTr = 0xcceeffff;
+
+      node.color = 0xffffffff;
+
+      expect(node.color).toBe(0xffffffff);
+      expect(node.colorBl).toBe(0xffffffff);
+      expect(node.colorBr).toBe(0xffffffff);
+      expect(node.colorTl).toBe(0xffffffff);
+      expect(node.colorTr).toBe(0xffffffff);
+      expect(node.colorLeft).toBe(0xffffffff);
+      expect(node.colorRight).toBe(0xffffffff);
+      expect(node.colorTop).toBe(0xffffffff);
+      expect(node.colorBottom).toBe(0xffffffff);
     });
 
-    node.update(0, clippingRect);
-    expect(node.isRenderable).toBe(false);
+    it('should set update type.', () => {
+      const node = new CoreNode(stage, defaultProps);
+      node.updateType = 0;
 
-    node.texture.state = 'loaded';
-    node.setUpdateType(UpdateType.IsRenderable);
-    node.update(1, clippingRect);
+      node.color = 0xffffffff;
 
-    expect(node.isRenderable).toBe(true);
+      expect(node.updateType).toBe(UpdateType.PremultipliedColors);
+    });
   });
 
-  it('a node with a texture with alpha 0 should not be renderable', () => {
-    const node = new CoreNode(stage, defaultProps);
-    node.alpha = 0;
-    node.x = 0;
-    node.y = 0;
-    node.width = 100;
-    node.height = 100;
-    node.texture = mock<ImageTexture>({
-      state: 'loaded',
+  describe('isRenderable checks', () => {
+    it('should return false if node is not renderable', () => {
+      const node = new CoreNode(stage, defaultProps);
+      expect(node.isRenderable).toBe(false);
     });
 
-    node.update(0, clippingRect);
-    expect(node.isRenderable).toBe(false);
-  });
+    it('visible node that is a color texture', () => {
+      const node = new CoreNode(stage, defaultProps);
+      node.alpha = 1;
+      node.x = 0;
+      node.y = 0;
+      node.width = 100;
+      node.height = 100;
+      node.color = 0xffffffff;
+
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(true);
+    });
 
-  it('a node with a texture that is OutOfBounds should not be renderable', () => {
-    const node = new CoreNode(stage, defaultProps);
-    node.alpha = 1;
-    node.x = 300;
-    node.y = 300;
-    node.width = 100;
-    node.height = 100;
-    node.texture = mock<ImageTexture>({
-      state: 'loaded',
+    it('visible node that is a texture', () => {
+      const node = new CoreNode(stage, defaultProps);
+      node.alpha = 1;
+      node.x = 0;
+      node.y = 0;
+      node.width = 100;
+      node.height = 100;
+      node.texture = mock<ImageTexture>({
+        state: 'initial',
+      });
+
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(false);
+
+      node.texture.state = 'loaded';
+      node.setUpdateType(UpdateType.IsRenderable);
+      node.update(1, clippingRect);
+
+      expect(node.isRenderable).toBe(true);
     });
 
-    node.update(0, clippingRect);
-    expect(node.isRenderable).toBe(false);
-  });
+    it('a node with a texture with alpha 0 should not be renderable', () => {
+      const node = new CoreNode(stage, defaultProps);
+      node.alpha = 0;
+      node.x = 0;
+      node.y = 0;
+      node.width = 100;
+      node.height = 100;
+      node.texture = mock<ImageTexture>({
+        state: 'loaded',
+      });
+
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(false);
+    });
 
-  it('a node with a freed texture should not be renderable', () => {
-    const node = new CoreNode(stage, defaultProps);
-    node.alpha = 1;
-    node.x = 0;
-    node.y = 0;
-    node.width = 100;
-    node.height = 100;
-    node.texture = mock<ImageTexture>({
-      state: 'freed',
+    it('a node with a texture that is OutOfBounds should not be renderable', () => {
+      const node = new CoreNode(stage, defaultProps);
+      node.alpha = 1;
+      node.x = 300;
+      node.y = 300;
+      node.width = 100;
+      node.height = 100;
+      node.texture = mock<ImageTexture>({
+        state: 'loaded',
+      });
+
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(false);
     });
 
-    node.update(0, clippingRect);
-    expect(node.isRenderable).toBe(false);
+    it('a node with a freed texture should not be renderable', () => {
+      const node = new CoreNode(stage, defaultProps);
+      node.alpha = 1;
+      node.x = 0;
+      node.y = 0;
+      node.width = 100;
+      node.height = 100;
+      node.texture = mock<ImageTexture>({
+        state: 'freed',
+      });
+
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(false);
+    });
   });
 });

package/src/core/CoreNode.ts

@@ -268,6 +268,12 @@ export interface CoreNodeProps {
    * @default `false`
    */
   autosize: boolean;
+  /**
+   * Margin around the Node's bounds for preloading
+   *
+   * @default `null`
+   */
+  boundsMargin: number | [number, number, number, number] | null;
   /**
    * Clipping Mode
    *
@@ -725,7 +731,9 @@ export class CoreNode extends EventEmitter {
   public globalTransform?: Matrix3d;
   public scaleRotateTransform?: Matrix3d;
   public localTransform?: Matrix3d;
+  public sceneGlobalTransform?: Matrix3d;
   public renderCoords?: RenderCoords;
+  public sceneRenderCoords?: RenderCoords;
   public renderBound?: Bound;
   public strictBound?: Bound;
   public preloadBound?: Bound;
@@ -766,6 +774,17 @@ export class CoreNode extends EventEmitter {
     this.src = props.src;
     this.rtt = props.rtt;
 
+    if (props.boundsMargin) {
+      this.boundsMargin = Array.isArray(props.boundsMargin)
+        ? props.boundsMargin
+        : [
+            props.boundsMargin,
+            props.boundsMargin,
+            props.boundsMargin,
+            props.boundsMargin,
+          ];
+    }
+
     this.setUpdateType(
       UpdateType.ScaleRotate |
         UpdateType.Local |
@@ -1034,19 +1053,40 @@ export class CoreNode extends EventEmitter {
     if (this.updateType & UpdateType.Global) {
       assertTruthy(this.localTransform);
 
-      this.globalTransform = Matrix3d.copy(
-        parent?.globalTransform || this.localTransform,
-        this.globalTransform,
-      );
-
-      if (this.parentHasRenderTexture && this.props.parent?.rtt) {
+      if (this.parentHasRenderTexture === true && parent?.rtt === true) {
+        // we are at the start of the RTT chain, so we need to reset the globalTransform
+        // for correct RTT rendering
         this.globalTransform = Matrix3d.identity();
+
+        // Maintain a full scene global transform for bounds detection
+        this.sceneGlobalTransform = Matrix3d.copy(
+          parent?.globalTransform || Matrix3d.identity(),
+        ).multiply(this.localTransform);
+      } else if (
+        this.parentHasRenderTexture === true &&
+        parent?.rtt === false
+      ) {
+        // we're part of an RTT chain but our parent is not the main RTT node
+        // so we need to propogate the sceneGlobalTransform of the parent
+        // to maintain a full scene global transform for bounds detection
+        this.sceneGlobalTransform = Matrix3d.copy(
+          parent?.sceneGlobalTransform || this.localTransform,
+        ).multiply(this.localTransform);
+
+        this.globalTransform = Matrix3d.copy(
+          parent?.globalTransform || this.localTransform,
+          this.globalTransform,
+        );
+      } else {
+        this.globalTransform = Matrix3d.copy(
+          parent?.globalTransform || this.localTransform,
+          this.globalTransform,
+        );
       }
 
-      if (parent) {
+      if (parent !== null) {
         this.globalTransform.multiply(this.localTransform);
       }
-
       this.calculateRenderCoords();
       this.updateBoundingRect();
 
@@ -1063,6 +1103,8 @@ export class CoreNode extends EventEmitter {
       this.createRenderBounds();
       this.setUpdateType(UpdateType.RenderState);
       this.setUpdateType(UpdateType.Children);
+
+      this.childUpdateType |= UpdateType.RenderBounds;
     }
 
     if (this.updateType & UpdateType.RenderState) {
@@ -1150,6 +1192,7 @@ export class CoreNode extends EventEmitter {
       this.props.strictBounds === true &&
       this.renderState === CoreNodeRenderState.OutOfBounds
     ) {
+      this.updateType &= ~UpdateType.RenderBounds; // remove render bounds update
       return;
     }
 
@@ -1266,11 +1309,6 @@ export class CoreNode extends EventEmitter {
     assertTruthy(this.strictBound);
     assertTruthy(this.preloadBound);
 
-    // if we are part of a parent render texture, we're always in bounds
-    if (this.parentHasRenderTexture === true) {
-      return this.getRTTParentRenderState() || CoreNodeRenderState.OutOfBounds;
-    }
-
     if (boundInsideBound(this.renderBound, this.strictBound)) {
       return CoreNodeRenderState.InViewport;
     }
@@ -1296,7 +1334,9 @@ export class CoreNode extends EventEmitter {
   }
 
   updateBoundingRect() {
-    const { renderCoords, globalTransform: transform } = this;
+    const transform = this.sceneGlobalTransform || this.globalTransform;
+    const renderCoords = this.sceneRenderCoords || this.renderCoords;
+
     assertTruthy(transform);
     assertTruthy(renderCoords);
 
@@ -1331,7 +1371,7 @@ export class CoreNode extends EventEmitter {
 
       this.preloadBound = createPreloadBounds(
         this.strictBound,
-        this.stage.boundsMargin,
+        this.boundsMargin as [number, number, number, number],
       );
     } else {
       // no parent or parent does not have a bound, take the stage boundaries
@@ -1357,7 +1397,10 @@ export class CoreNode extends EventEmitter {
 
     // clipping is enabled and we are in bounds create our own bounds
     const { x, y, width, height } = this.props;
-    const { tx, ty } = this.globalTransform || {};
+
+    // Pick the global transform if available, otherwise use the local transform
+    // global transform is only available if the node in an RTT chain
+    const { tx, ty } = this.sceneGlobalTransform || this.globalTransform || {};
     const _x = tx ?? x;
     const _y = ty ?? y;
     this.strictBound = createBound(
@@ -1370,7 +1413,7 @@ export class CoreNode extends EventEmitter {
 
     this.preloadBound = createPreloadBounds(
       this.strictBound,
-      this.stage.boundsMargin,
+      this.boundsMargin as [number, number, number, number],
     );
   }
 
@@ -1487,13 +1530,11 @@ export class CoreNode extends EventEmitter {
   }
 
   calculateRenderCoords() {
-    const { width, height, globalTransform: transform } = this;
-    assertTruthy(transform);
-    const { tx, ty, ta, tb, tc, td } = transform;
+    const { width, height } = this;
+    const { tx, ty, ta, tb, tc, td } = this.globalTransform!;
     if (tb === 0 && tc === 0) {
       const minX = tx;
       const maxX = tx + width * ta;
-
       const minY = ty;
       const maxY = ty + height * td;
       this.renderCoords = RenderCoords.translate(
@@ -1528,6 +1569,55 @@ export class CoreNode extends EventEmitter {
         this.renderCoords,
       );
     }
+    if (this.sceneGlobalTransform === undefined) {
+      return;
+    }
+
+    const {
+      tx: stx,
+      ty: sty,
+      ta: sta,
+      tb: stb,
+      tc: stc,
+      td: std,
+    } = this.sceneGlobalTransform;
+    if (stb === 0 && stc === 0) {
+      const minX = stx;
+      const maxX = stx + width * sta;
+      const minY = sty;
+      const maxY = sty + height * std;
+      this.sceneRenderCoords = RenderCoords.translate(
+        //top-left
+        minX,
+        minY,
+        //top-right
+        maxX,
+        minY,
+        //bottom-right
+        maxX,
+        maxY,
+        //bottom-left
+        minX,
+        maxY,
+        this.sceneRenderCoords,
+      );
+    } else {
+      this.sceneRenderCoords = RenderCoords.translate(
+        //top-left
+        stx,
+        sty,
+        //top-right
+        stx + width * sta,
+        sty + width * stc,
+        //bottom-right
+        stx + width * sta + height * stb,
+        sty + width * stc + height * std,
+        //bottom-left
+        stx + height * stb,
+        sty + height * std,
+        this.sceneRenderCoords,
+      );
+    }
   }
 
   /**
@@ -1542,7 +1632,6 @@ export class CoreNode extends EventEmitter {
     assertTruthy(this.globalTransform);
     const { clippingRect, props, globalTransform: gt } = this;
     const { clipping } = props;
-
     const isRotated = gt.tb !== 0 || gt.tc !== 0;
 
     if (clipping === true && isRotated === false) {
@@ -1887,6 +1976,31 @@ export class CoreNode extends EventEmitter {
     this.props.autosize = value;
   }
 
+  get boundsMargin(): number | [number, number, number, number] | null {
+    return (
+      this.props.boundsMargin ??
+      this.parent?.boundsMargin ??
+      this.stage.boundsMargin
+    );
+  }
+
+  set boundsMargin(value: number | [number, number, number, number] | null) {
+    if (value === this.props.boundsMargin) {
+      return;
+    }
+
+    if (value === null) {
+      this.props.boundsMargin = value;
+    } else {
+      const bm: [number, number, number, number] = Array.isArray(value)
+        ? value
+        : [value, value, value, value];
+
+      this.props.boundsMargin = bm;
+    }
+    this.setUpdateType(UpdateType.RenderBounds);
+  }
+
   get clipping(): boolean {
     return this.props.clipping;
   }