@lightningjs/renderer 3.0.0-beta15 → 3.0.0-beta17

package/src/core/CoreNode.ts

@@ -37,6 +37,7 @@ import type {
   NodeTextureFailedPayload,
   NodeTextureFreedPayload,
   NodeTextureLoadedPayload,
+  NodeRenderablePayload,
 } from '../common/CommonTypes.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import {
@@ -1486,7 +1487,17 @@ export class CoreNode extends EventEmitter {
    * @param isRenderable - The new renderable state
    */
   setRenderable(isRenderable: boolean) {
+    const previousIsRenderable = this.isRenderable;
     this.isRenderable = isRenderable;
+
+    // Emit event if renderable status has changed
+    if (previousIsRenderable !== isRenderable) {
+      this.emit('renderable', {
+        type: 'renderable',
+        isRenderable,
+      } satisfies NodeRenderablePayload);
+    }
+
     if (
       isRenderable === true &&
       this.stage.calculateTextureCoord === true &&

package/src/core/CoreTextNode.ts

@@ -39,6 +39,7 @@ import type {
 import type { RectWithValid } from './lib/utils.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { TextureLoadedEventHandler } from './textures/Texture.js';
+import { Matrix3d } from './lib/Matrix3d.js';
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   /**
    * Force Text Node to use a specific Text Renderer
@@ -47,12 +48,20 @@ export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   forceLoad: boolean;
 }
 
+export enum TextConstraint {
+  'none' = 0,
+  'width' = 1,
+  'height' = 2,
+  'both' = 4,
+}
+
 export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   private textRenderer: TextRenderer;
   private fontHandler: FontHandler;
 
   private _layoutGenerated = false;
   private _waitingForFont = false;
+  private _containType: TextConstraint = TextConstraint.none;
 
   // SDF layout caching for performance
   private _cachedLayout: TextLayout | null = null;
@@ -81,6 +90,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     // Initialize text properties from props
     // Props are guaranteed to have all defaults resolved by Stage.createTextNode
     this.textProps = props;
+    this._containType = TextConstraint[props.contain];
 
     this.setUpdateType(UpdateType.All);
   }
@@ -100,8 +110,6 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         dimensions,
       } satisfies NodeTextureLoadedPayload);
     }
-    this.w = this._renderInfo.width;
-    this.h = this._renderInfo.height;
     this.setUpdateType(UpdateType.IsRenderable);
   };
 
@@ -116,6 +124,74 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     return false;
   }
 
+  override updateLocalTransform() {
+    const p = this.props;
+    let { x, y, w, h } = p;
+    const mountX = p.mountX;
+    const mountY = p.mountY;
+    let mountTranslateX = p.mountX * w;
+    let mountTranslateY = p.mountY * h;
+
+    let localTextTransform: Matrix3d | null = null;
+
+    const tProps = this.textProps;
+    const { textAlign, verticalAlign, maxWidth, maxHeight } = tProps;
+    const contain = this._containType;
+
+    const hasMaxWidth = maxWidth > 0;
+    const hasMaxHeight = maxHeight > 0;
+
+    if (contain > 0 && (hasMaxWidth || hasMaxHeight)) {
+      let containX = 0;
+      let containY = 0;
+      if (contain & TextConstraint.width && hasMaxWidth === true) {
+        if (textAlign === 'right') {
+          containX = maxWidth - w;
+        } else if (textAlign === 'center') {
+          containX = (maxWidth - w) * 0.5;
+        }
+        mountTranslateX = mountX * maxWidth;
+      }
+      if (contain & TextConstraint.height && maxHeight > 0) {
+        if (verticalAlign === 'bottom') {
+          containY = maxHeight - h;
+        } else if (verticalAlign === 'middle') {
+          containY = (maxHeight - h) * 0.5;
+        }
+        mountTranslateY = mountY * maxHeight;
+      }
+      localTextTransform = Matrix3d.translate(containX, containY);
+    }
+
+    if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
+      const scaleRotate = Matrix3d.rotate(p.rotation).scale(p.scaleX, p.scaleY);
+      const pivotW =
+        contain & TextConstraint.width && maxWidth > 0 ? maxWidth : w;
+      const pivotH =
+        contain & TextConstraint.height && maxHeight > 0 ? maxHeight : h;
+      const pivotTranslateX = p.pivotX * pivotW;
+      const pivotTranslateY = p.pivotY * pivotH;
+
+      this.localTransform = Matrix3d.translate(
+        x - mountTranslateX + pivotTranslateX,
+        y - mountTranslateY + pivotTranslateY,
+        this.localTransform,
+      )
+        .multiply(scaleRotate)
+        .translate(-pivotTranslateX, -pivotTranslateY);
+    } else {
+      this.localTransform = Matrix3d.translate(
+        x - mountTranslateX,
+        y - mountTranslateY,
+        this.localTransform,
+      );
+    }
+
+    if (localTextTransform !== null) {
+      this.localTransform = this.localTransform.multiply(localTextTransform);
+    }
+  }
+
   /**
    * Override CoreNode's update method to handle text-specific updates
    */
@@ -192,12 +268,13 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       }
     }
 
+    this._cachedLayout = result.layout || null;
+    this.props.w = width;
+    this.props.h = height;
+
     // Handle SDF renderer (uses layout caching)
     if (textRendererType === 'sdf') {
-      this._cachedLayout = result.layout || null;
       this.setRenderable(true);
-      this.props.w = width;
-      this.props.h = height;
       this.setUpdateType(UpdateType.Local);
     }
 
@@ -276,6 +353,24 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     super.destroy();
   }
 
+  override set w(value: number) {
+    // dont allow direct setting of width on text nodes, handled by text layout generation
+    console.warn('Cannot directly set w on CoreTextNode');
+  }
+
+  override get w(): number {
+    return this.props.w;
+  }
+
+  override set h(value: number) {
+    // dont allow direct setting of height on text nodes, handled by text layout generation
+    console.warn('Cannot directly set h on CoreTextNode');
+  }
+
+  override get h(): number {
+    return this.props.h;
+  }
+
   get maxWidth() {
     return this.textProps.maxWidth;
   }
@@ -301,6 +396,18 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     }
   }
 
+  get contain(): TrProps['contain'] {
+    return this.textProps.contain;
+  }
+
+  set contain(value: TrProps['contain']) {
+    if (this.textProps.contain !== value) {
+      this.textProps.contain = value;
+      this._containType = TextConstraint[value];
+      this.setUpdateType(UpdateType.Local);
+    }
+  }
+
   get text(): string {
     return this.textProps.text;
   }

package/src/core/Stage.ts

@@ -682,7 +682,8 @@ export class Stage {
       maxLines: props.maxLines || 0,
       verticalAlign: props.verticalAlign || 'top',
       overflowSuffix: props.overflowSuffix || '...',
-      wordBreak: props.wordBreak || 'normal',
+      wordBreak: props.wordBreak || 'break-word',
+      contain: props.contain || 'none',
       maxWidth: props.maxWidth || 0,
       maxHeight: props.maxHeight || 0,
       forceLoad: props.forceLoad || false,

package/src/core/animations/CoreAnimation.ts

@@ -28,7 +28,6 @@ export interface AnimationSettings {
   easing: string | TimingFunction;
   loop: boolean;
   repeat: number;
-  repeatDelay: number;
   stopMethod: 'reverse' | 'reset' | false;
 }
 
@@ -89,7 +88,6 @@ export class CoreAnimation extends EventEmitter {
       easing,
       loop: settings.loop ?? false,
       repeat: settings.repeat ?? 0,
-      repeatDelay: settings.repeatDelay ?? 0,
       stopMethod: settings.stopMethod ?? false,
     };
     this.timingFunction =

package/src/core/platforms/Platform.ts

@@ -74,4 +74,10 @@ export abstract class Platform {
    * @returns The current timestamp.
    */
   abstract getTimeStamp(): number;
+
+  /**
+   * Adds a FontFace to the platforms FontFaceSet
+   * @param font - The FontFace to add
+   */
+  abstract addFont(font: FontFace): void;
 }

package/src/core/platforms/web/WebPlatform.ts

@@ -1,6 +1,13 @@
 import { Platform } from '../Platform.js';
 import type { Stage } from '../../Stage.js';
 
+/**
+ * make fontface add not show errors
+ */
+interface FontFaceSetWithAdd extends FontFaceSet {
+  add(font: FontFace): void;
+}
+
 export class WebPlatform extends Platform {
   ////////////////////////
   // Platform-specific methods
@@ -118,4 +125,8 @@ export class WebPlatform extends Platform {
   getTimeStamp(): number {
     return performance ? performance.now() : Date.now();
   }
+
+  override addFont(font: FontFace): void {
+    (document.fonts as FontFaceSetWithAdd).add(font);
+  }
 }

package/src/core/text-rendering/CanvasFontHandler.ts

@@ -59,12 +59,6 @@ let context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
 let measureContext:
   | CanvasRenderingContext2D
   | OffscreenCanvasRenderingContext2D;
-/**
- * make fontface add not show errors
- */
-interface FontFaceSetWithAdd extends FontFaceSet {
-  add(font: FontFace): void;
-}
 
 /**
  * Check if a font can be rendered
@@ -112,7 +106,7 @@ export const loadFont = async (
   const loadPromise = new FontFace(fontFamily, `url(${fontUrl})`)
     .load()
     .then((loadedFont) => {
-      (document.fonts as FontFaceSetWithAdd).add(loadedFont);
+      stage.platform.addFont(loadedFont);
       processFontData(fontFamily, loadedFont, metrics);
       fontLoadPromises.delete(fontFamily);
       for (let key in nwff) {
@@ -185,6 +179,9 @@ export const isFontLoaded = (fontFamily: string): boolean => {
  * @param node
  */
 export const waitingForFont = (fontFamily: string, node: CoreTextNode) => {
+  if (nodesWaitingForFont[fontFamily] === undefined) {
+    return;
+  }
   nodesWaitingForFont[fontFamily]![node.id] = node;
 };
 

package/src/core/text-rendering/CanvasTextRenderer.ts

@@ -134,7 +134,6 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     metrics,
     text,
     textAlign,
-    verticalAlign,
     fontFamily,
     lineHeight,
     overflowSuffix,
@@ -144,10 +143,9 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     maxWidth,
     maxHeight,
   );
-
   const lineAmount = lines.length;
-  const canvasW = Math.ceil(maxWidth || effectiveWidth);
-  const canvasH = Math.ceil(maxHeight || effectiveHeight);
+  const canvasW = Math.ceil(effectiveWidth);
+  const canvasH = Math.ceil(effectiveHeight);
 
   canvas.width = canvasW;
   canvas.height = canvasH;
@@ -165,8 +163,8 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   for (let i = 0; i < lineAmount; i++) {
     const line = lines[i] as TextLineStruct;
     const textLine = line[0];
-    let currentX = Math.ceil(line[2]);
-    const currentY = Math.ceil(line[3]);
+    let currentX = Math.ceil(line[3]);
+    const currentY = Math.ceil(line[4]);
     if (letterSpacing === 0) {
       context.fillText(textLine, currentX, currentY);
     } else {
@@ -193,8 +191,8 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   }
   return {
     imageData,
-    width: canvasW,
-    height: canvasH,
+    width: effectiveWidth,
+    height: effectiveHeight,
     remainingLines,
     hasRemainingText,
   };

package/src/core/text-rendering/SdfFontHandler.ts

@@ -377,6 +377,9 @@ export const loadFont = async (
  * @param {CoreTextNode} node - Node that was waiting for the font
  */
 export const waitingForFont = (fontFamily: string, node: CoreTextNode) => {
+  if (nodesWaitingForFont[fontFamily] === undefined) {
+    return;
+  }
   nodesWaitingForFont[fontFamily]![node.id] = node;
 };
 

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

@@ -308,7 +308,6 @@ const generateTextLayout = (
     metrics,
     props.text,
     props.textAlign,
-    verticalAlign,
     fontFamily,
     lineHeight,
     props.overflowSuffix,
@@ -329,9 +328,9 @@ const generateTextLayout = (
     const textLine = line[0];
     const textLineLength = textLine.length;
     let prevCodepoint = 0;
-    currentX = line[2];
+    currentX = line[3];
     //convert Y coord to vertex value
-    currentY = line[3] / fontScale;
+    currentY = line[4] / fontScale;
 
     for (let j = 0; j < textLineLength; j++) {
       const char = textLine.charAt(j);
@@ -389,8 +388,8 @@ const generateTextLayout = (
   return {
     glyphs,
     distanceRange: fontScale * fontData.distanceField.distanceRange,
-    width: maxWidth || effectiveWidth * fontScale,
-    height: maxHeight || effectiveHeight,
+    width: effectiveWidth * fontScale,
+    height: effectiveHeight,
     fontScale: fontScale,
     lineHeight: lineHeightPx,
     fontFamily,