@lightningjs/renderer 0.4.1 → 0.5.0

package/src/core/CoreNode.ts

@@ -24,17 +24,21 @@ import type {
   TextureMap,
   TextureOptions,
 } from './CoreTextureManager.js';
-import { Matrix2DContext } from './Matrix2DContext.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { CoreShader } from './renderers/CoreShader.js';
 import type { Stage } from './Stage.js';
-import type { Texture } from './textures/Texture.js';
 import type {
+  Texture,
   TextureFailedEventHandler,
   TextureLoadedEventHandler,
+} from './textures/Texture.js';
+import type {
+  NodeTextureFailedPayload,
+  NodeTextureLoadedPayload,
 } from '../common/CommonTypes.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import type { Rect } from './lib/utils.js';
+import { Matrix3d } from './lib/Matrix3d.js';
 
 export interface CoreNodeProps {
   id: number;
@@ -62,7 +66,8 @@ export interface CoreNodeProps {
   shader: CoreShader | null;
   shaderProps: Record<string, unknown> | null;
   zIndexLocked: number;
-  scale: number;
+  scaleX: number;
+  scaleY: number;
   mount: number;
   mountX: number;
   mountY: number;
@@ -70,14 +75,6 @@ export interface CoreNodeProps {
   pivotX: number;
   pivotY: number;
   rotation: number;
-  worldX?: number;
-  worldY?: number;
-
-  // Internal properties that are resolved in CoreNode constructor (see below)
-  ta?: number;
-  tb?: number;
-  tc?: number;
-  td?: number;
 }
 
 type ICoreNode = Omit<
@@ -98,12 +95,9 @@ export class CoreNode extends EventEmitter implements ICoreNode {
    */
   public recalculationType = 6;
   public hasUpdates = true;
-  public worldContext: Matrix2DContext = new Matrix2DContext();
-
-  // local translation / transform updates
-  // derived from x, y, w, h, scale, pivot, rotation
-  public localPx = 0;
-  public localPy = 0;
+  public globalTransform?: Matrix3d;
+  public scaleRotateTransform?: Matrix3d;
+  public localTransform?: Matrix3d;
 
   private isComplex = false;
 
@@ -112,16 +106,10 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     this.props = {
       ...props,
       parent: null,
-      ta: props.ta ?? 1,
-      tb: props.tb ?? 0,
-      tc: props.tc ?? 0,
-      td: props.td ?? 1,
-      worldX: props.worldX ?? 0,
-      worldY: props.worldY ?? 0,
     };
     // Allow for parent to be processed appropriately
     this.parent = props.parent;
-    this.updateLocalTransform();
+    this.updateScaleRotateTransform();
   }
 
   //#region Textures
@@ -165,11 +153,17 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   }
 
   private onTextureLoaded: TextureLoadedEventHandler = (target, dimensions) => {
-    this.emit('txLoaded', dimensions);
+    this.emit('loaded', {
+      type: 'texture',
+      dimensions,
+    } satisfies NodeTextureLoadedPayload);
   };
 
   private onTextureFailed: TextureFailedEventHandler = (target, error) => {
-    this.emit('txFailed', error);
+    this.emit('failed', {
+      type: 'texture',
+      error,
+    } satisfies NodeTextureFailedPayload);
   };
   //#endregion Textures
 
@@ -208,58 +202,33 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     this.setHasUpdates();
   }
 
-  updateLocalTransform() {
-    // if rotation is equal to previous render pass, we only need
-    // to use sin and cosine of rotation to calculate new position
-    if (this.props.rotation !== 0 && this.props.rotation % (Math.PI * 2)) {
-      const sineRotation = Math.sin(this.props.rotation);
-      const cosineRotation = Math.cos(this.props.rotation);
-
-      this.setLocalTransform(
-        cosineRotation * this.props.scale,
-        -sineRotation * this.props.scale,
-        sineRotation * this.props.scale,
-        cosineRotation * this.props.scale,
-      );
-    } else {
-      this.setLocalTransform(this.props.scale, 0, 0, this.props.scale);
-    }
-    // do transformations when matrix is implemented
-    this.updateLocalTranslate();
-  }
-
-  // update 2x2 matrix
-  setLocalTransform(a: number, b: number, c: number, d: number) {
+  updateScaleRotateTransform() {
     this.setRecalculationType(4);
-    this.props.ta = a;
-    this.props.tb = b;
-    this.props.tc = c;
-    this.props.td = d;
 
-    // test if there is scaling or shearing in transformation ( b !== 0 || c !== 0 )
-    // test if there is flipping or reflection in transformation ( a < 0 || d < 0 )
-    this.isComplex = b !== 0 || c !== 0 || a < 0 || d < 0;
+    this.scaleRotateTransform = Matrix3d.rotate(
+      this.props.rotation,
+      this.scaleRotateTransform,
+    ).scale(this.props.scaleX, this.props.scaleY);
+
+    // do transformations when matrix is implemented
+    this.updateLocalTransform();
   }
 
-  updateLocalTranslate() {
+  updateLocalTransform() {
+    assertTruthy(this.scaleRotateTransform);
     this.setRecalculationType(2);
-    const pivotXMultiplier = this.props.pivotX * this.props.width;
-    const pivotYMultiplier = this.props.pivotY * this.props.height;
-
-    let px =
-      this.props.x -
-      (pivotXMultiplier * this.props.ta + pivotYMultiplier * this.props.tb) +
-      pivotXMultiplier;
-    let py =
-      this.props.y -
-      (pivotXMultiplier * this.props.tc + pivotYMultiplier * this.props.td) +
-      pivotYMultiplier;
+    const pivotTranslateX = this.props.pivotX * this.props.width;
+    const pivotTranslateY = this.props.pivotY * this.props.height;
+    const mountTranslateX = this.props.mountX * this.props.width;
+    const mountTranslateY = this.props.mountY * this.props.height;
 
-    px -= this.props.mountX * this.props.width;
-    py -= this.props.mountY * this.props.height;
-
-    this.localPx = px;
-    this.localPy = py;
+    this.localTransform = Matrix3d.translate(
+      pivotTranslateX - mountTranslateX + this.props.x,
+      pivotTranslateY - mountTranslateY + this.props.y,
+      this.localTransform,
+    )
+      .multiply(this.scaleRotateTransform)
+      .translate(-pivotTranslateX, -pivotTranslateY);
   }
 
   /**
@@ -267,39 +236,20 @@ export class CoreNode extends EventEmitter implements ICoreNode {
    * @param delta
    */
   update(delta: number): void {
-    const parentWorldContext = this.props.parent?.worldContext;
-    const worldContext = this.worldContext;
-
-    worldContext.px =
-      (parentWorldContext?.px || 0) +
-      this.localPx * (parentWorldContext?.ta || 1);
-    worldContext.py =
-      (parentWorldContext?.py || 0) +
-      this.localPy * (parentWorldContext?.td || 1);
-
-    if (parentWorldContext?.tb !== 0) {
-      worldContext.px += this.localPy * (parentWorldContext?.tb || 0);
-    }
-
-    if (parentWorldContext?.tc !== 0) {
-      worldContext.py += this.localPx * (parentWorldContext?.tc || 0);
-    }
-
-    worldContext.ta = this.props.ta * (parentWorldContext?.ta || 1);
-    worldContext.tb = this.props.td * (parentWorldContext?.tb || 0);
-    worldContext.tc = this.props.ta * (parentWorldContext?.tc || 0);
-    worldContext.td = this.props.td * (parentWorldContext?.td || 1);
-
-    if (this.isComplex) {
-      worldContext.ta += this.props.tc * (parentWorldContext?.tb || 0);
-      worldContext.tb += this.props.tb * (parentWorldContext?.ta || 1);
-      worldContext.tc += this.props.tc * (parentWorldContext?.td || 1);
-      worldContext.td += this.props.tb * (parentWorldContext?.tc || 0);
+    assertTruthy(this.localTransform);
+    const parentGlobalTransform = this.parent?.globalTransform;
+    if (parentGlobalTransform) {
+      this.globalTransform = Matrix3d.copy(
+        parentGlobalTransform,
+        this.globalTransform,
+      ).multiply(this.localTransform);
+    } else {
+      this.globalTransform = Matrix3d.copy(
+        this.localTransform,
+        this.globalTransform,
+      );
     }
 
-    this.worldX = worldContext.px;
-    this.worldY = worldContext.py;
-
     if (this.children.length) {
       this.children.forEach((child) => {
         child.update(delta);
@@ -325,9 +275,10 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       textureOptions,
       shader,
       shaderProps,
-      scale,
     } = this.props;
-    const { zIndex, alpha, worldScale } = this;
+    const { zIndex, worldAlpha, globalTransform: gt } = this;
+
+    assertTruthy(gt);
 
     // add to list of renderables to be sorted before rendering
     renderer.addRenderable({
@@ -342,16 +293,14 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       zIndex,
       shader,
       shaderProps,
-      alpha,
-      scale,
+      alpha: worldAlpha,
       clippingRect,
-      wpx: this.worldContext.px,
-      wpy: this.worldContext.py,
-      worldScale,
-      ta: this.worldContext.ta,
-      tb: this.worldContext.tb,
-      tc: this.worldContext.tc,
-      td: this.worldContext.td,
+      tx: gt.tx,
+      ty: gt.ty,
+      ta: gt.ta,
+      tb: gt.tb,
+      tc: gt.tc,
+      td: gt.td,
     });
 
     // Calculate absolute X and Y based on all ancestors
@@ -370,30 +319,14 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   set x(value: number) {
     if (this.props.x !== value) {
       this.props.x = value;
-      this.updateLocalTranslate();
+      this.updateLocalTransform();
     }
   }
 
-  get worldX(): number {
-    return this.props.worldX || 0;
-  }
-
-  set worldX(value: number) {
-    this.props.worldX = value;
-  }
-
-  get worldY(): number {
-    return this.props.worldY || 0;
-  }
-
-  set worldY(value: number) {
-    this.props.worldY = value;
-  }
-
   get absX(): number {
     return (
       this.props.x +
-      (this.props.parent?.absX || this.props.parent?.worldContext.px || 0)
+      (this.props.parent?.absX || this.props.parent?.globalTransform?.tx || 0)
     );
   }
 
@@ -408,7 +341,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   set y(value: number) {
     if (this.props.y !== value) {
       this.props.y = value;
-      this.updateLocalTranslate();
+      this.updateLocalTransform();
     }
   }
 
@@ -435,21 +368,51 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   }
 
   get scale(): number {
-    return this.props.scale;
+    // The CoreNode `scale` property is only used by Animations.
+    // Unlike INode, `null` should never be possibility for Animations.
+    return this.scaleX;
   }
 
-  // @todo: implement scaleX and scaleY
   set scale(value: number) {
-    if (this.props.scale !== value) {
-      this.props.scale = value;
-      this.updateLocalTransform();
+    // The CoreNode `scale` property is only used by Animations.
+    // Unlike INode, `null` should never be possibility for Animations.
+    this.scaleX = value;
+    this.scaleY = value;
+  }
+
+  get scaleX(): number {
+    return this.props.scaleX;
+  }
+
+  set scaleX(value: number) {
+    if (this.props.scaleX !== value) {
+      this.props.scaleX = value;
+      this.updateScaleRotateTransform();
     }
   }
 
-  get worldScale(): number {
+  get scaleY(): number {
+    return this.props.scaleY;
+  }
+
+  set scaleY(value: number) {
+    if (this.props.scaleY !== value) {
+      this.props.scaleY = value;
+      this.updateScaleRotateTransform();
+    }
+  }
+
+  get worldScaleX(): number {
+    return (
+      this.props.scaleX * (this.props.parent?.worldScaleX ?? 1) ||
+      this.props.scaleX
+    );
+  }
+
+  get worldScaleY(): number {
     return (
-      this.props.scale * (this.props.parent?.worldScale ?? 1) ||
-      this.props.scale
+      this.props.scaleY * (this.props.parent?.worldScaleY ?? 1) ||
+      this.props.scaleY
     );
   }
 
@@ -462,7 +425,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     this.props.mountX = value;
     this.props.mountY = value;
     this.props.mount = value;
-    this.updateLocalTranslate();
+    this.updateLocalTransform();
     // }
   }
 
@@ -472,7 +435,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set mountX(value: number) {
     this.props.mountX = value;
-    this.updateLocalTranslate();
+    this.updateLocalTransform();
   }
 
   get mountY(): number {
@@ -481,7 +444,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set mountY(value: number) {
     this.props.mountY = value;
-    this.updateLocalTranslate();
+    this.updateLocalTransform();
   }
 
   get pivot(): number {
@@ -492,7 +455,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     if (this.props.pivotX !== value || this.props.pivotY !== value) {
       this.props.pivotX = value;
       this.props.pivotY = value;
-      this.updateLocalTranslate();
+      this.updateLocalTransform();
     }
   }
 
@@ -502,7 +465,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set pivotX(value: number) {
     this.props.pivotX = value;
-    this.updateLocalTranslate();
+    this.updateLocalTransform();
   }
 
   get pivotY(): number {
@@ -511,7 +474,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set pivotY(value: number) {
     this.props.pivotY = value;
-    this.updateLocalTranslate();
+    this.updateLocalTransform();
   }
 
   get rotation(): number {
@@ -521,26 +484,25 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   set rotation(value: number) {
     if (this.props.rotation !== value) {
       this.props.rotation = value;
-      this.updateLocalTransform();
+      this.updateScaleRotateTransform();
     }
   }
 
   get alpha(): number {
-    const props = this.props;
-    const parent = props.parent;
-
-    // root always visible
-    if (!parent) {
-      return 1;
-    }
-
-    return props.alpha * parent.alpha;
+    return this.props.alpha;
   }
 
   set alpha(value: number) {
     this.props.alpha = value;
   }
 
+  get worldAlpha(): number {
+    const props = this.props;
+    const parent = props.parent;
+
+    return props.alpha * (parent?.worldAlpha || 1);
+  }
+
   get clipping(): boolean {
     return this.props.clipping;
   }
@@ -694,7 +656,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     if (newParent) {
       newParent.children.push(this);
     }
-    this.updateLocalTransform();
+    this.updateScaleRotateTransform();
   }
   //#endregion Properties
 }

package/src/core/CoreTextNode.ts

@@ -22,15 +22,18 @@ import type {
   TextRendererMap,
   TrProps,
   TextRendererState,
+  TrFailedEventHandler,
+  TrLoadedEventHandler,
 } from './text-rendering/renderers/TextRenderer.js';
 import { CoreNode, type CoreNodeProps } from './CoreNode.js';
 import type { Stage } from './Stage.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type {
-  TextFailedEventHandler,
-  TextLoadedEventHandler,
+  NodeTextFailedPayload,
+  NodeTextLoadedPayload,
 } from '../common/CommonTypes.js';
 import type { Rect } from './lib/utils.js';
+import { assertTruthy } from '../utils.js';
 
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   text: string;
@@ -52,7 +55,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
   constructor(stage: Stage, props: CoreTextNodeProps) {
     super(stage, props);
     this.updateScheduled = false;
-    // console.log('fontfamily', props.fontFamily)
     this._textRendererOverride = props.textRendererOverride;
     const { resolvedTextRenderer, textRendererState } =
       this.resolveTextRendererAndState(
@@ -63,9 +65,10 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
           height: props.height,
           textAlign: props.textAlign,
           color: props.color,
-          alpha: props.alpha,
           zIndex: props.zIndex,
           contain: props.contain,
+          scaleX: props.scaleX,
+          scaleY: props.scaleY,
           scrollable: props.scrollable,
           scrollY: props.scrollY,
           offsetY: props.offsetY,
@@ -84,15 +87,39 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     this.trState = textRendererState;
   }
 
-  private onTextLoaded: TextLoadedEventHandler = () => {
-    this.emit('textLoaded', {
-      width: this.trState.textW,
-      height: this.trState.textH,
-    });
+  private onTextLoaded: TrLoadedEventHandler = () => {
+    const { contain } = this;
+    const setWidth = this.trState.props.width;
+    const setHeight = this.trState.props.height;
+    const calcWidth = this.trState.textW || 0;
+    const calcHeight = this.trState.textH || 0;
+
+    if (contain === 'both') {
+      this.props.width = setWidth;
+      this.props.height = setHeight;
+    } else if (contain === 'width') {
+      this.props.width = setWidth;
+      this.props.height = calcHeight;
+    } else if (contain === 'none') {
+      this.props.width = calcWidth;
+      this.props.height = calcHeight;
+    }
+    this.updateLocalTransform();
+
+    this.emit('loaded', {
+      type: 'text',
+      dimensions: {
+        width: this.trState.textW || 0,
+        height: this.trState.textH || 0,
+      },
+    } satisfies NodeTextLoadedPayload);
   };
 
-  private onTextFailed: TextFailedEventHandler = (target, error) => {
-    this.emit('textFailed', error);
+  private onTextFailed: TrFailedEventHandler = (target, error) => {
+    this.emit('failed', {
+      type: 'text',
+      error,
+    } satisfies NodeTextFailedPayload);
   };
 
   override get width(): number {
@@ -113,15 +140,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     this.updateText();
   }
 
-  override get alpha(): number {
-    return this.trState.props.alpha;
-  }
-
-  override set alpha(value: number) {
-    this.textRenderer.set.alpha(this.trState, value);
-    this.updateText();
-  }
-
   override get color(): number {
     return this.trState.props.color;
   }
@@ -263,10 +281,16 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   override update(delta: number) {
     super.update(delta);
-    this.textRenderer.set.x(this.trState, this.worldContext.px);
-    this.textRenderer.set.y(this.trState, this.worldContext.py);
+
+    assertTruthy(this.globalTransform);
+
+    // globalTransform is updated in super.update(delta)
+    this.textRenderer.set.x(this.trState, this.globalTransform.tx);
+    this.textRenderer.set.y(this.trState, this.globalTransform.ty);
+
     if (this.trState.status === 'loading') {
-      this.updateText();
+      // Update the text state now
+      this.textRenderer.updateState(this.trState);
     }
   }
 
@@ -282,7 +306,13 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
   }
 
   override renderQuads(renderer: CoreRenderer, clippingRect: Rect | null) {
-    this.textRenderer.renderQuads(this.trState, clippingRect);
+    assertTruthy(this.globalTransform);
+    this.textRenderer.renderQuads(
+      this.trState,
+      this.globalTransform,
+      clippingRect,
+      this.worldAlpha,
+    );
   }
 
   /**

package/src/core/Stage.ts

@@ -126,7 +126,8 @@ export class Stage {
       colorBr: 0x00000000,
       zIndex: 0,
       zIndexLocked: 0,
-      scale: 1,
+      scaleX: 1,
+      scaleY: 1,
       mountX: 0,
       mountY: 0,
       mount: 0,
@@ -181,15 +182,19 @@ export class Stage {
   }
 
   addQuads(node: CoreNode, parentClippingRect: Rect | null = null) {
-    assertTruthy(this.renderer);
-    let clippingRect: Rect | null = node.clipping
-      ? {
-          x: node.worldContext.px,
-          y: node.worldContext.py,
-          width: node.width,
-          height: node.height,
-        }
-      : null;
+    assertTruthy(this.renderer && node.globalTransform);
+    const gt = node.globalTransform;
+    const isRotated = gt.tb !== 0 || gt.tc !== 0;
+
+    let clippingRect: Rect | null =
+      node.clipping && !isRotated
+        ? {
+            x: gt.tx,
+            y: gt.ty,
+            width: node.width * gt.ta,
+            height: node.height * gt.td,
+          }
+        : null;
     if (parentClippingRect && clippingRect) {
       clippingRect = intersectRect(parentClippingRect, clippingRect);
     } else if (parentClippingRect) {
@@ -198,7 +203,7 @@ export class Stage {
 
     node.renderQuads(this.renderer, clippingRect);
     node.children.forEach((child) => {
-      if (child.alpha === 0) {
+      if (child.worldAlpha === 0) {
         return;
       }
       this.addQuads(child, clippingRect);