@lightningjs/renderer 0.4.1 → 0.5.0

package/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.ts

@@ -17,8 +17,6 @@
  * limitations under the License.
  */
 
-// import { Colors } from '../../../Colors.js';
-// import type { Renderer } from '../../../Renderer.js';
 import { intersectBound, type Bound, type Rect } from '../../../lib/utils.js';
 import {
   TextRenderer,
@@ -44,6 +42,7 @@ import type {
 } from '../../../renderers/webgl/shaders/SdfShader.js';
 import type { WebGlCoreCtxTexture } from '../../../renderers/webgl/WebGlCoreCtxTexture.js';
 import { EventEmitter } from '../../../../common/EventEmitter.js';
+import type { Matrix3d } from '../../../lib/Matrix3d.js';
 
 declare module '../TextRenderer.js' {
   interface TextRendererMap {
@@ -148,9 +147,6 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       color: (state, value) => {
         state.props.color = value;
       },
-      alpha: (state, value) => {
-        state.props.alpha = value;
-      },
       x: (state, value) => {
         state.props.x = value;
       },
@@ -269,6 +265,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       this.setStatus(state, 'loading');
     }
 
+    // Resolve font face if we haven't yet
     if (!trFontFace) {
       trFontFace = this.resolveFontFace(state.props);
       state.trFontFace = trFontFace;
@@ -280,7 +277,8 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       }
     }
 
-    // If the font hasn't been loaded yet, don't do anything
+    // If the font hasn't been loaded yet, stop here.
+    // Listen for the 'loaded' event and forward fontLoaded event
     if (!trFontFace.loaded) {
       trFontFace.on('loaded', function loadedHandler() {
         state.emitter.emit('fontLoaded', {});
@@ -431,7 +429,9 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
   override renderQuads(
     state: SdfTextRendererState,
+    transform: Matrix3d,
     clippingRect: Rect | null,
+    alpha: number,
   ): void {
     if (!state.vertexBuffer) {
       // Nothing to draw
@@ -446,19 +446,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
     const { appWidth, appHeight } = this.stage.options;
 
-    const {
-      fontSize,
-      color,
-      alpha,
-      x,
-      y,
-      contain,
-      width,
-      height,
-      scrollable,
-      zIndex,
-      debug,
-    } = state.props;
+    const { fontSize, color, contain, scrollable, zIndex, debug } = state.props;
 
     // scrollY only has an effect when contain === 'both' and scrollable === true
     const scrollY = contain === 'both' && scrollable ? state.props.scrollY : 0;
@@ -527,12 +515,13 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       webGlBuffers,
       this.sdfShader,
       {
+        transform: transform.data,
         // IMPORTANT: The SDF Shader expects the color NOT to be premultiplied
         // for the best blending results. Which is why we use `mergeColorAlpha`
         // instead of `mergeColorAlphaPremultiplied` here.
         color: mergeColorAlpha(color, alpha),
         size: fontSize / (trFontFace.data?.info.size || 0),
-        offset: [x, y - scrollY],
+        scrollY,
         distanceRange,
         debug: debug.sdfShaderDebug,
       } satisfies SdfShaderProps,

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts

@@ -26,7 +26,6 @@ import type {
 import type { TrProps, TextRendererState } from '../../TextRenderer.js';
 import type { SdfTextRendererState } from '../SdfTextRenderer.js';
 import { PeekableIterator } from './PeekableGenerator.js';
-import { FLOATS_PER_GLYPH } from './constants.js';
 import { getUnicodeCodepoints } from './getUnicodeCodepoints.js';
 import { measureText } from './measureText.js';
 

package/src/core/text-rendering/renderers/TextRenderer.ts

@@ -19,6 +19,7 @@
 
 import type { EventEmitter } from '../../../common/EventEmitter.js';
 import type { Stage } from '../../Stage.js';
+import type { Matrix3d } from '../../lib/Matrix3d.js';
 import type { Rect } from '../../lib/utils.js';
 import type {
   TrFontFace,
@@ -179,7 +180,6 @@ export interface TrProps extends TrFontProps {
    * @default 0xffffffff (opaque white)
    */
   color: number;
-  alpha: number;
   x: number;
   y: number;
   /**
@@ -198,6 +198,14 @@ export interface TrProps extends TrFontProps {
   contain: 'none' | 'width' | 'both';
   width: number;
   height: number;
+  /**
+   * X-Axis scaling factor for text
+   */
+  scaleX: number;
+  /**
+   * Y-Axis scaling factor for text
+   */
+  scaleY: number;
   /**
    * Whether or not the text is scrollable
    *
@@ -263,9 +271,6 @@ const trPropSetterDefaults: TrPropSetters = {
   color: (state, value) => {
     state.props.color = value;
   },
-  alpha: (state, value) => {
-    state.props.alpha = value;
-  },
   zIndex: (state, value) => {
     state.props.zIndex = value;
   },
@@ -284,6 +289,12 @@ const trPropSetterDefaults: TrPropSetters = {
   fontSize: (state, value) => {
     state.props.fontSize = value;
   },
+  scaleX: (state, value) => {
+    state.props.scaleX = value;
+  },
+  scaleY: (state, value) => {
+    state.props.scaleY = value;
+  },
   text: (state, value) => {
     state.props.text = value;
   },
@@ -310,6 +321,22 @@ const trPropSetterDefaults: TrPropSetters = {
   },
 };
 
+/**
+ * Event handler for when text is loaded
+ *
+ * @remarks
+ * Emitted by state.emitter
+ */
+export type TrLoadedEventHandler = (target: any) => void;
+
+/**
+ * Event handler for when text failed to load
+ *
+ * @remarks
+ * Emitted by state.emitter
+ */
+export type TrFailedEventHandler = (target: any, error: Error) => void;
+
 export abstract class TextRenderer<
   StateT extends TextRendererState = TextRendererState,
 > {
@@ -367,5 +394,10 @@ export abstract class TextRenderer<
 
   abstract updateState(state: StateT): void;
 
-  abstract renderQuads(state: StateT, clippingRect: Rect | null): void;
+  abstract renderQuads(
+    state: StateT,
+    transform: Matrix3d,
+    clippingRect: Rect | null,
+    alpha: number,
+  ): void;
 }

package/src/core/textures/SubTexture.ts

@@ -17,13 +17,14 @@
  * limitations under the License.
  */
 
-import type {
-  TextureFailedEventHandler,
-  TextureLoadedEventHandler,
-} from '../../common/CommonTypes.js';
 import type { TextureRef } from '../../main-api/RendererMain.js';
 import type { CoreTextureManager } from '../CoreTextureManager.js';
-import { Texture, type TextureData } from './Texture.js';
+import {
+  Texture,
+  type TextureData,
+  type TextureFailedEventHandler,
+  type TextureLoadedEventHandler,
+} from './Texture.js';
 
 /**
  * Properties of the {@link SubTexture}

package/src/core/textures/Texture.ts

@@ -19,14 +19,27 @@
 
 import type { CoreTextureManager } from '../CoreTextureManager.js';
 import type { SubTextureProps } from './SubTexture.js';
-import type {
-  Dimensions,
-  TextureFailedEventHandler,
-  TextureLoadedEventHandler,
-  TextureLoadingEventHandler,
-} from '../../common/CommonTypes.js';
+import type { Dimensions } from '../../common/CommonTypes.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
 
+/**
+ * Event handler for when a Texture is loading
+ */
+export type TextureLoadingEventHandler = (target: any) => void;
+
+/**
+ * Event handler for when a Texture is loaded
+ */
+export type TextureLoadedEventHandler = (
+  target: any,
+  dimensions: Readonly<Dimensions>,
+) => void;
+
+/**
+ * Event handler for when a Texture fails to load
+ */
+export type TextureFailedEventHandler = (target: any, error: Error) => void;
+
 /**
  * TextureData that is used to populate a CoreContextTexture
  */

package/src/main-api/INode.ts

@@ -246,12 +246,39 @@ export interface INodeWritableProps {
    *
    * @remarks
    * The scale value multiplies the provided {@link width} and {@link height}
-   * of the Node around the Node's Mount Point (defined by the {@link mount}
+   * of the Node around the Node's Pivot Point (defined by the {@link pivot}
    * props).
    *
+   * Behind the scenes, setting this property sets both the {@link scaleX} and
+   * {@link scaleY} props to the same value.
+   *
+   * NOTE: When the scaleX and scaleY props are explicitly set to different values,
+   * this property returns `null`. Setting `null` on this property will have no
+   * effect.
+   *
+   * @default 1.0
+   */
+  scale: number | null;
+  /**
+   * Scale to render the Node at (X-Axis)
+   *
+   * @remarks
+   * The scaleX value multiplies the provided {@link width} of the Node around
+   * the Node's Pivot Point (defined by the {@link pivot} props).
+   *
+   * @default 1.0
+   */
+  scaleX: number;
+  /**
+   * Scale to render the Node at (Y-Axis)
+   *
+   * @remarks
+   * The scaleY value multiplies the provided {@link height} of the Node around
+   * the Node's Pivot Point (defined by the {@link pivot} props).
+   *
    * @default 1.0
    */
-  scale: number;
+  scaleY: number;
   /**
    * Combined position of the Node's Mount Point
    *
@@ -365,12 +392,12 @@ export interface INodeWritableProps {
    * - `2 * Math.PI`: 360 rotation clockwise
    */
   rotation: number;
-  worldX?: number;
-  worldY?: number;
 }
 
 export type INodeAnimatableProps = {
-  [Key in keyof INodeWritableProps as INodeWritableProps[Key] extends number
+  [Key in keyof INodeWritableProps as NonNullable<
+    INodeWritableProps[Key]
+  > extends number
     ? Key
     : never]: number;
 };

package/src/main-api/RendererMain.ts

@@ -436,7 +436,9 @@ export class RendererMain {
       // Since setting the `src` will trigger a texture load, we need to set it after
       // we set the texture. Otherwise, problems happen.
       src: props.src ?? '',
-      scale: props.scale ?? 1,
+      scale: props.scale ?? null,
+      scaleX: props.scaleX ?? props.scale ?? 1,
+      scaleY: props.scaleY ?? props.scale ?? 1,
       mount: props.mount ?? 0,
       mountX: props.mountX ?? props.mount ?? 0,
       mountY: props.mountY ?? props.mount ?? 0,

package/src/render-drivers/main/MainOnlyNode.ts

@@ -36,8 +36,8 @@ import type {
 import type { AnimationSettings } from '../../core/animations/CoreAnimation.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
 import type {
-  TextureFailedEventHandler,
-  TextureLoadedEventHandler,
+  NodeLoadedEventHandler,
+  NodeFailedEventHandler,
 } from '../../common/CommonTypes.js';
 
 let nextId = 1;
@@ -86,7 +86,8 @@ export class MainOnlyNode extends EventEmitter implements INode {
         colorBr: props.colorBr,
         zIndex: props.zIndex,
         zIndexLocked: props.zIndexLocked,
-        scale: props.scale,
+        scaleX: props.scaleX,
+        scaleY: props.scaleY,
         mountX: props.mountX,
         mountY: props.mountY,
         mount: props.mount,
@@ -100,9 +101,9 @@ export class MainOnlyNode extends EventEmitter implements INode {
         texture: null,
         textureOptions: null,
       });
-    // Forward texture events
-    this.coreNode.on('txLoaded', this.onTextureLoaded);
-    this.coreNode.on('txFailed', this.onTextureFailed);
+    // Forward loaded/failed events
+    this.coreNode.on('loaded', this.onTextureLoaded);
+    this.coreNode.on('failed', this.onTextureFailed);
 
     // Assign properties to this object
     this.parent = props.parent as MainOnlyNode;
@@ -127,14 +128,6 @@ export class MainOnlyNode extends EventEmitter implements INode {
     this.coreNode.y = value;
   }
 
-  get worldX(): number {
-    return this.coreNode.worldX;
-  }
-
-  get worldY(): number {
-    return this.coreNode.worldY;
-  }
-
   get width(): number {
     return this.coreNode.width;
   }
@@ -239,12 +232,36 @@ export class MainOnlyNode extends EventEmitter implements INode {
     this.coreNode.colorBr = value;
   }
 
-  get scale(): number {
-    return this.coreNode.scale;
+  get scale(): number | null {
+    if (this.scaleX !== this.scaleY) {
+      return null;
+    }
+    return this.coreNode.scaleX;
+  }
+
+  set scale(value: number | null) {
+    // We ignore `null` when it's set.
+    if (value === null) {
+      return;
+    }
+    this.coreNode.scaleX = value;
+    this.coreNode.scaleY = value;
+  }
+
+  get scaleX(): number {
+    return this.coreNode.scaleX;
+  }
+
+  set scaleX(value: number) {
+    this.coreNode.scaleX = value;
+  }
+
+  get scaleY(): number {
+    return this.coreNode.scaleY;
   }
 
-  set scale(value: number) {
-    this.coreNode.scale = value;
+  set scaleY(value: number) {
+    this.coreNode.scaleY = value;
   }
 
   get mount(): number {
@@ -385,12 +402,12 @@ export class MainOnlyNode extends EventEmitter implements INode {
     }
   }
 
-  private onTextureLoaded: TextureLoadedEventHandler = (target, dimensions) => {
-    this.emit('txLoaded', dimensions);
+  private onTextureLoaded: NodeLoadedEventHandler = (target, payload) => {
+    this.emit('loaded', payload);
   };
 
-  private onTextureFailed: TextureFailedEventHandler = (target, error) => {
-    this.emit('txFailed', error);
+  private onTextureFailed: NodeFailedEventHandler = (target, payload) => {
+    this.emit('failed', payload);
   };
   //#endregion Texture
 

package/src/render-drivers/main/MainOnlyTextNode.ts

@@ -25,10 +25,6 @@ import type { Stage } from '../../core/Stage.js';
 import type { RendererMain } from '../../main-api/RendererMain.js';
 import { MainOnlyNode, getNewId } from './MainOnlyNode.js';
 import { CoreTextNode } from '../../core/CoreTextNode.js';
-import type {
-  TextFailedEventHandler,
-  TextLoadedEventHandler,
-} from '../../common/CommonTypes.js';
 
 export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
   protected declare coreNode: CoreTextNode;
@@ -61,7 +57,8 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
         colorBr: props.colorBr,
         zIndex: props.zIndex,
         zIndexLocked: props.zIndexLocked,
-        scale: props.scale,
+        scaleX: props.scaleX,
+        scaleY: props.scaleY,
         mountX: props.mountX,
         mountY: props.mountY,
         mount: props.mount,
@@ -94,18 +91,8 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
         shaderProps: null,
       }),
     );
-    this.coreNode.on('textLoaded', this.onTextLoaded);
-    this.coreNode.on('textFailed', this.onTextFailed);
   }
 
-  private onTextLoaded: TextLoadedEventHandler = (target, dimensions) => {
-    this.emit('textLoaded', dimensions);
-  };
-
-  private onTextFailed: TextFailedEventHandler = (target, error) => {
-    this.emit('textFailed', error);
-  };
-
   get text(): string {
     return this.coreNode.text;
   }

package/src/render-drivers/threadx/NodeStruct.ts

@@ -38,7 +38,8 @@ export interface NodeStructWritableProps {
   parentId: number;
   zIndex: number;
   zIndexLocked: number;
-  scale: number;
+  scaleX: number;
+  scaleY: number;
   mount: number;
   mountX: number;
   mountY: number;
@@ -190,11 +191,20 @@ export class NodeStruct
   }
 
   @structProp('number')
-  get scale(): number {
+  get scaleX(): number {
     return 1;
   }
 
-  set scale(value: number) {
+  set scaleX(value: number) {
+    // Decorator will handle this
+  }
+
+  @structProp('number')
+  get scaleY(): number {
+    return 1;
+  }
+
+  set scaleY(value: number) {
     // Decorator will handle this
   }
 

package/src/render-drivers/threadx/SharedNode.ts

@@ -53,7 +53,8 @@ export class SharedNode extends SharedObject {
       parentId: sharedNodeStruct.parentId,
       zIndex: sharedNodeStruct.zIndex,
       zIndexLocked: sharedNodeStruct.zIndexLocked,
-      scale: sharedNodeStruct.scale,
+      scaleX: sharedNodeStruct.scaleX,
+      scaleY: sharedNodeStruct.scaleY,
       mount: sharedNodeStruct.mount,
       mountX: sharedNodeStruct.mountX,
       mountY: sharedNodeStruct.mountY,
@@ -81,7 +82,8 @@ export class SharedNode extends SharedObject {
   declare colorTr: number;
   declare colorBl: number;
   declare colorBr: number;
-  declare scale: number;
+  declare scaleX: number;
+  declare scaleY: number;
   declare mountX: number;
   declare mountY: number;
   declare mount: number;

package/src/render-drivers/threadx/ThreadXMainNode.ts

@@ -95,6 +95,22 @@ export class ThreadXMainNode extends SharedNode implements INode {
     }
   }
 
+  get scale(): number | null {
+    if (this.scaleX !== this.scaleY) {
+      return null;
+    }
+    return this.scaleX;
+  }
+
+  set scale(scale: number | null) {
+    // We ignore `null` when it's set.
+    if (scale === null) {
+      return;
+    }
+    this.scaleX = scale;
+    this.scaleY = scale;
+  }
+
   animate(
     props: Partial<INodeAnimatableProps>,
     settings: Partial<AnimationSettings>,

package/src/render-drivers/threadx/ThreadXRenderDriver.ts

@@ -142,7 +142,8 @@ export class ThreadXRenderDriver implements IRenderDriver {
       alpha: props.alpha,
       zIndex: props.zIndex,
       zIndexLocked: props.zIndexLocked,
-      scale: props.scale,
+      scaleX: props.scaleX,
+      scaleY: props.scaleY,
       mount: props.mount,
       mountX: props.mountX,
       mountY: props.mountY,
@@ -187,7 +188,8 @@ export class ThreadXRenderDriver implements IRenderDriver {
       alpha: props.alpha,
       zIndex: props.zIndex,
       zIndexLocked: props.zIndexLocked,
-      scale: props.scale,
+      scaleX: props.scaleX,
+      scaleY: props.scaleY,
       mount: props.mount,
       mountX: props.mountX,
       mountY: props.mountY,

package/src/render-drivers/threadx/worker/ThreadXRendererNode.ts

@@ -30,7 +30,10 @@ import type { Texture } from '../../../core/textures/Texture.js';
 import { CoreNode } from '../../../core/CoreNode.js';
 import type { ShaderRef, TextureRef } from '../../../main-api/RendererMain.js';
 import type { AnimationSettings } from '../../../core/animations/CoreAnimation.js';
-import type { Dimensions } from '../../../common/CommonTypes.js';
+import type {
+  NodeLoadedPayload,
+  NodeFailedPayload,
+} from '../../../common/CommonTypes.js';
 
 export class ThreadXRendererNode extends SharedNode {
   protected coreNode: CoreNode;
@@ -128,12 +131,18 @@ export class ThreadXRendererNode extends SharedNode {
       this.coreNode.unloadTexture();
     });
     // Forward on CoreNode events
-    this.coreNode.on('txLoaded', (target: CoreNode, dimensions: Dimensions) => {
-      this.emit('txLoaded', dimensions as unknown as Record<string, unknown>);
-    });
-    this.coreNode.on('txFailed', (target: CoreNode, error: Error) => {
-      this.emit('txFailed', error as unknown as Record<string, unknown>);
-    });
+    this.coreNode.on(
+      'loaded',
+      (target: CoreNode, payload: NodeLoadedPayload) => {
+        this.emit('loaded', payload);
+      },
+    );
+    this.coreNode.on(
+      'failed',
+      (target: CoreNode, payload: NodeFailedPayload) => {
+        this.emit('failed', payload);
+      },
+    );
   }
 
   override onPropertyChange<Key extends keyof this['z$__type__Props']>(
@@ -205,7 +214,8 @@ export class ThreadXRendererNode extends SharedNode {
       colorBr: sharedNodeStruct.colorBr,
       zIndex: sharedNodeStruct.zIndex,
       zIndexLocked: sharedNodeStruct.zIndexLocked,
-      scale: sharedNodeStruct.scale,
+      scaleX: sharedNodeStruct.scaleX,
+      scaleY: sharedNodeStruct.scaleY,
       mount: sharedNodeStruct.mount,
       mountX: sharedNodeStruct.mountX,
       mountY: sharedNodeStruct.mountY,

package/src/render-drivers/threadx/worker/ThreadXRendererTextNode.ts

@@ -17,7 +17,6 @@
  * limitations under the License.
  */
 
-import type { Dimensions } from '../../../common/CommonTypes.js';
 import { CoreTextNode } from '../../../core/CoreTextNode.js';
 import type { Stage } from '../../../core/Stage.js';
 import type { TrProps } from '../../../core/text-rendering/renderers/TextRenderer.js';
@@ -65,7 +64,8 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
         pivot: sharedNodeStruct.pivot,
         pivotX: sharedNodeStruct.pivotX,
         pivotY: sharedNodeStruct.pivotY,
-        scale: sharedNodeStruct.scale,
+        scaleX: sharedNodeStruct.scaleX,
+        scaleY: sharedNodeStruct.scaleY,
         rotation: sharedNodeStruct.rotation,
 
         // These are passed in via message handlers
@@ -113,18 +113,6 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
       >,
     );
     // Forward on CoreNode events
-    this.coreNode.on(
-      'textLoaded',
-      (target: CoreTextNode, dimensions: Dimensions) => {
-        this.emit(
-          'textLoaded',
-          dimensions as unknown as Record<string, unknown>,
-        );
-      },
-    );
-    this.coreNode.on('textFailed', (target: CoreTextNode, error: Error) => {
-      this.emit('textFailed', error as unknown as Record<string, unknown>);
-    });
     this.on('debug', (target: ThreadXRendererNode, debug: TrProps['debug']) => {
       this.coreNode.debug = debug;
     });

package/src/render-drivers/threadx/worker/renderer.ts

@@ -97,7 +97,8 @@ const threadx = ThreadX.init({
         parentId: coreRootNode.parent?.id ?? 0,
         zIndex: coreRootNode.zIndex,
         zIndexLocked: coreRootNode.zIndexLocked,
-        scale: coreRootNode.scale,
+        scaleX: coreRootNode.scaleX,
+        scaleY: coreRootNode.scaleY,
         mount: coreRootNode.mount,
         mountX: coreRootNode.mountX,
         mountY: coreRootNode.mountY,