@lightningjs/renderer 1.0.1 → 2.1.0

package/src/core/CoreNode.ts

@@ -178,6 +178,11 @@ export enum UpdateType {
    */
   ParentRenderTexture = 4096,
 
+  /**
+   * Render Bounds update
+   */
+  RenderBounds = 8192,
+
   /**
    * None
    */
@@ -405,6 +410,11 @@ export interface CoreNodeProps {
    */
   texture: Texture | null;
 
+  /**
+   * Whether to prevent the node from being cleaned up
+   * @default false
+   */
+  preventCleanup: boolean;
   /**
    * Options to associate with the Node's Texture
    */
@@ -613,6 +623,47 @@ export interface CoreNodeProps {
    * @default `undefined`
    */
   data?: CustomDataMap;
+
+  /**
+   * Image Type to explicitly set the image type that is being loaded
+   *
+   * @remarks
+   * This property must be used with a `src` that points at an image. In some cases
+   * the extension doesn't provide a reliable representation of the image type. In such
+   * cases set the ImageType explicitly.
+   *
+   * `regular` is used for normal images such as png, jpg, etc
+   * `compressed` is used for ETC1/ETC2 compressed images with a PVR or KTX container
+   * `svg` is used for scalable vector graphics
+   *
+   * @default `undefined`
+   */
+  imageType?: 'regular' | 'compressed' | 'svg' | null;
+
+  /**
+   * She width of the rectangle from which the Image Texture will be extracted.
+   * This value can be negative. If not provided, the image's source natural
+   * width will be used.
+   */
+  srcWidth?: number;
+  /**
+   * The height of the rectangle from which the Image Texture will be extracted.
+   * This value can be negative. If not provided, the image's source natural
+   * height will be used.
+   */
+  srcHeight?: number;
+  /**
+   * The x coordinate of the reference point of the rectangle from which the Texture
+   * will be extracted.  `width` and `height` are provided. And only works when
+   * createImageBitmap is available. Only works when createImageBitmap is supported on the browser.
+   */
+  srcX?: number;
+  /**
+   * The y coordinate of the reference point of the rectangle from which the Texture
+   * will be extracted. Only used when source `srcWidth` width and `srcHeight` height
+   * are provided. Only works when createImageBitmap is supported on the browser.
+   */
+  srcY?: number;
 }
 
 /**
@@ -692,6 +743,10 @@ export class CoreNode extends EventEmitter {
     this.rtt = props.rtt;
 
     this.updateScaleRotateTransform();
+
+    this.setUpdateType(
+      UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState,
+    );
   }
 
   //#region Textures
@@ -704,6 +759,7 @@ export class CoreNode extends EventEmitter {
     // We do this in a microtask to allow listeners to be attached in the same
     // synchronous task after calling loadTexture()
     queueMicrotask(() => {
+      texture.preventCleanup = this.props.preventCleanup;
       // Preload texture if required
       if (this.textureOptions.preload) {
         texture.ctxTexture.load();
@@ -941,16 +997,42 @@ export class CoreNode extends EventEmitter {
 
       this.calculateRenderCoords();
       this.updateBoundingRect();
-      this.setUpdateType(
-        UpdateType.Clipping | UpdateType.RenderState | UpdateType.Children,
-      );
+
+      this.setUpdateType(UpdateType.RenderState | UpdateType.Children);
+
+      if (this.clipping === true) {
+        this.setUpdateType(UpdateType.Clipping);
+      }
+
       childUpdateType |= UpdateType.Global;
     }
 
+    if (this.updateType & UpdateType.RenderBounds) {
+      this.createRenderBounds();
+      this.setUpdateType(UpdateType.RenderState);
+      this.setUpdateType(UpdateType.Children);
+    }
+
+    if (this.updateType & UpdateType.RenderState) {
+      this.updateRenderState();
+      this.setUpdateType(UpdateType.IsRenderable);
+    }
+
+    if (this.updateType & UpdateType.IsRenderable) {
+      this.updateIsRenderable();
+    }
+
+    if (this.renderState === CoreNodeRenderState.OutOfBounds) {
+      this.updateType = 0;
+      return;
+    }
+
     if (this.updateType & UpdateType.Clipping) {
       this.calculateClippingRect(parentClippingRect);
       this.setUpdateType(UpdateType.Children);
+
       childUpdateType |= UpdateType.Clipping;
+      childUpdateType |= UpdateType.RenderBounds;
     }
 
     if (this.updateType & UpdateType.WorldAlpha) {
@@ -1003,17 +1085,8 @@ export class CoreNode extends EventEmitter {
       }
     }
 
-    if (this.updateType & UpdateType.RenderState) {
-      this.updateRenderState(parentClippingRect);
-      this.setUpdateType(UpdateType.IsRenderable);
-    }
-
-    if (this.updateType & UpdateType.IsRenderable) {
-      this.updateIsRenderable();
-    }
-
     // No need to update zIndex if there is no parent
-    if (parent && this.updateType & UpdateType.CalculatedZIndex) {
+    if (parent !== null && this.updateType & UpdateType.CalculatedZIndex) {
       this.calculateZIndex();
       // Tell parent to re-sort children
       parent.setUpdateType(UpdateType.ZIndexSortedChildren);
@@ -1021,8 +1094,8 @@ export class CoreNode extends EventEmitter {
 
     if (
       this.updateType & UpdateType.Children &&
-      this.children.length &&
-      !this.rtt
+      this.children.length > 0 &&
+      this.rtt === false
     ) {
       this.children.forEach((child) => {
         // Trigger the depenedent update types on the child
@@ -1104,39 +1177,78 @@ export class CoreNode extends EventEmitter {
     return false;
   }
 
-  checkRenderBounds(parentClippingRect: RectWithValid): CoreNodeRenderState {
+  checkRenderBounds(): CoreNodeRenderState {
     assertTruthy(this.renderBound);
-    const rectW = parentClippingRect.width || this.stage.root.width;
-    const rectH = parentClippingRect.height || this.stage.root.height;
-    this.strictBound = createBound(
-      parentClippingRect.x,
-      parentClippingRect.y,
-      parentClippingRect.x + rectW,
-      parentClippingRect.y + rectH,
-      this.strictBound,
-    );
+    assertTruthy(this.strictBound);
+    assertTruthy(this.preloadBound);
 
     if (boundInsideBound(this.renderBound, this.strictBound)) {
       return CoreNodeRenderState.InViewport;
     }
 
+    if (boundInsideBound(this.renderBound, this.preloadBound)) {
+      return CoreNodeRenderState.InBounds;
+    }
+
+    return CoreNodeRenderState.OutOfBounds;
+  }
+
+  createPreloadBounds(strictBound: Bound): Bound {
     const renderM = this.stage.boundsMargin;
-    this.preloadBound = createBound(
-      this.strictBound.x1 - renderM[3],
-      this.strictBound.y1 - renderM[0],
-      this.strictBound.x2 + renderM[1],
-      this.strictBound.y2 + renderM[2],
+    return createBound(
+      strictBound.x1 - renderM[3],
+      strictBound.y1 - renderM[0],
+      strictBound.x2 + renderM[1],
+      strictBound.y2 + renderM[2],
       this.preloadBound,
     );
+  }
 
-    if (boundInsideBound(this.renderBound, this.preloadBound)) {
-      return CoreNodeRenderState.InBounds;
+  createRenderBounds(): void {
+    assertTruthy(this.stage);
+
+    // no clipping, use parent's bounds
+    if (this.clipping === false) {
+      if (this.parent !== null) {
+        this.strictBound =
+          this.parent.strictBound ??
+          createBound(0, 0, this.stage.root.width, this.stage.root.height);
+
+        this.preloadBound =
+          this.parent.preloadBound ??
+          this.createPreloadBounds(this.strictBound);
+        return;
+      } else {
+        this.strictBound = createBound(
+          0,
+          0,
+          this.stage.root.width,
+          this.stage.root.height,
+        );
+
+        this.preloadBound = this.createPreloadBounds(this.strictBound);
+        return;
+      }
     }
-    return CoreNodeRenderState.OutOfBounds;
+
+    // clipping is enabled create our own bounds
+    const { x, y, width, height } = this.props;
+    const { tx, ty } = this.globalTransform || {};
+    const _x = tx ?? x;
+    const _y = ty ?? y;
+    this.strictBound = createBound(
+      _x,
+      _y,
+      _x + width,
+      _y + height,
+      this.strictBound,
+    );
+
+    this.preloadBound = this.createPreloadBounds(this.strictBound);
   }
 
-  updateRenderState(parentClippingRect: RectWithValid) {
-    const renderState = this.checkRenderBounds(parentClippingRect);
+  updateRenderState() {
+    const renderState = this.checkRenderBounds();
 
     if (renderState === this.renderState) {
       return;
@@ -1253,7 +1365,7 @@ export class CoreNode extends EventEmitter {
 
     const isRotated = gt.tb !== 0 || gt.tc !== 0;
 
-    if (clipping && !isRotated) {
+    if (clipping === true && isRotated === false) {
       clippingRect.x = gt.tx;
       clippingRect.y = gt.ty;
       clippingRect.width = this.width * gt.ta;
@@ -1263,10 +1375,10 @@ export class CoreNode extends EventEmitter {
       clippingRect.valid = false;
     }
 
-    if (parentClippingRect.valid && clippingRect.valid) {
+    if (parentClippingRect.valid === true && clippingRect.valid === true) {
       // Intersect parent clipping rect with node clipping rect
       intersectRect(parentClippingRect, clippingRect, clippingRect);
-    } else if (parentClippingRect.valid) {
+    } else if (parentClippingRect.valid === true) {
       // Copy parent clipping rect
       copyRect(parentClippingRect, clippingRect);
       clippingRect.valid = true;
@@ -1387,6 +1499,14 @@ export class CoreNode extends EventEmitter {
     return this._id;
   }
 
+  get data(): CustomDataMap | undefined {
+    return this.props.data;
+  }
+
+  set data(d: CustomDataMap | undefined) {
+    this.props.data = d;
+  }
+
   get x(): number {
     return this.props.x;
   }
@@ -1401,12 +1521,17 @@ export class CoreNode extends EventEmitter {
   get absX(): number {
     return (
       this.props.x +
+      -this.props.width * this.props.mountX +
       (this.props.parent?.absX || this.props.parent?.globalTransform?.tx || 0)
     );
   }
 
   get absY(): number {
-    return this.props.y + (this.props.parent?.absY ?? 0);
+    return (
+      this.props.y +
+      -this.props.height * this.props.mountY +
+      (this.props.parent?.absY ?? 0)
+    );
   }
 
   get y(): number {
@@ -1599,7 +1724,9 @@ export class CoreNode extends EventEmitter {
 
   set clipping(value: boolean) {
     this.props.clipping = value;
-    this.setUpdateType(UpdateType.Clipping);
+    this.setUpdateType(
+      UpdateType.Clipping | UpdateType.RenderBounds | UpdateType.Children,
+    );
   }
 
   get color(): number {
@@ -1765,6 +1892,17 @@ export class CoreNode extends EventEmitter {
       }
     }
     this.updateScaleRotateTransform();
+
+    // fetch render bounds from parent
+    this.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
+  }
+
+  get preventCleanup(): boolean {
+    return this.props.preventCleanup;
+  }
+
+  set preventCleanup(value: boolean) {
+    this.props.preventCleanup = value;
   }
 
   get rtt(): boolean {
@@ -1845,9 +1983,60 @@ export class CoreNode extends EventEmitter {
 
     this.texture = this.stage.txManager.loadTexture('ImageTexture', {
       src: imageUrl,
+      width: this.props.width,
+      height: this.props.height,
+      type: this.props.imageType,
+      sx: this.props.srcX,
+      sy: this.props.srcY,
+      sw: this.props.srcWidth,
+      sh: this.props.srcHeight,
     });
   }
 
+  set imageType(type: 'regular' | 'compressed' | 'svg' | null) {
+    if (this.props.imageType === type) {
+      return;
+    }
+
+    this.props.imageType = type;
+  }
+
+  get imageType() {
+    return this.props.imageType || null;
+  }
+
+  get srcHeight(): number | undefined {
+    return this.props.srcHeight;
+  }
+
+  set srcHeight(value: number) {
+    this.props.srcHeight = value;
+  }
+
+  get srcWidth(): number | undefined {
+    return this.props.srcWidth;
+  }
+
+  set srcWidth(value: number) {
+    this.props.srcWidth = value;
+  }
+
+  get srcX(): number | undefined {
+    return this.props.srcX;
+  }
+
+  set srcX(value: number) {
+    this.props.srcX = value;
+  }
+
+  get srcY(): number | undefined {
+    return this.props.srcY;
+  }
+
+  set srcY(value: number) {
+    this.props.srcY = value;
+  }
+
   /**
    * Returns the framebuffer dimensions of the node.
    * If the node has a render texture, the dimensions are the same as the node's dimensions.

package/src/core/CoreTextNode.ts

@@ -75,37 +75,41 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   private _textRendererOverride: CoreTextNodeProps['textRendererOverride'] =
     null;
 
-  constructor(stage: Stage, props: CoreTextNodeProps) {
+  constructor(
+    stage: Stage,
+    props: CoreTextNodeProps,
+    textRenderer: TextRenderer,
+  ) {
     super(stage, props);
     this._textRendererOverride = props.textRendererOverride;
-    const { resolvedTextRenderer, textRendererState } =
-      this.resolveTextRendererAndState({
-        x: this.absX,
-        y: this.absY,
-        width: props.width,
-        height: props.height,
-        textAlign: props.textAlign,
-        color: props.color,
-        zIndex: props.zIndex,
-        contain: props.contain,
-        scrollable: props.scrollable,
-        scrollY: props.scrollY,
-        offsetY: props.offsetY,
-        letterSpacing: props.letterSpacing,
-        debug: props.debug,
-        fontFamily: props.fontFamily,
-        fontSize: props.fontSize,
-        fontStretch: props.fontStretch,
-        fontStyle: props.fontStyle,
-        fontWeight: props.fontWeight,
-        text: props.text,
-        lineHeight: props.lineHeight,
-        maxLines: props.maxLines,
-        textBaseline: props.textBaseline,
-        verticalAlign: props.verticalAlign,
-        overflowSuffix: props.overflowSuffix,
-      });
-    this.textRenderer = resolvedTextRenderer;
+    this.textRenderer = textRenderer;
+    const textRendererState = this.createState({
+      x: this.absX,
+      y: this.absY,
+      width: props.width,
+      height: props.height,
+      textAlign: props.textAlign,
+      color: props.color,
+      zIndex: props.zIndex,
+      contain: props.contain,
+      scrollable: props.scrollable,
+      scrollY: props.scrollY,
+      offsetY: props.offsetY,
+      letterSpacing: props.letterSpacing,
+      debug: props.debug,
+      fontFamily: props.fontFamily,
+      fontSize: props.fontSize,
+      fontStretch: props.fontStretch,
+      fontStyle: props.fontStyle,
+      fontWeight: props.fontWeight,
+      text: props.text,
+      lineHeight: props.lineHeight,
+      maxLines: props.maxLines,
+      textBaseline: props.textBaseline,
+      verticalAlign: props.verticalAlign,
+      overflowSuffix: props.overflowSuffix,
+    });
+
     this.trState = textRendererState;
   }
 
@@ -199,13 +203,23 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
 
   set textRendererOverride(value: CoreTextNodeProps['textRendererOverride']) {
     this._textRendererOverride = value;
-
     this.textRenderer.destroyState(this.trState);
 
-    const { resolvedTextRenderer, textRendererState } =
-      this.resolveTextRendererAndState(this.trState.props);
-    this.textRenderer = resolvedTextRenderer;
-    this.trState = textRendererState;
+    const textRenderer = this.stage.resolveTextRenderer(
+      this.trState.props,
+      this._textRendererOverride,
+    );
+
+    if (!textRenderer) {
+      console.warn(
+        'Text Renderer not found for font',
+        this.trState.props.fontFamily,
+      );
+      return;
+    }
+
+    this.textRenderer = textRenderer;
+    this.trState = this.createState(this.trState.props);
   }
 
   get fontSize(): CoreTextNodeProps['fontSize'] {
@@ -301,9 +315,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   set lineHeight(value: CoreTextNodeProps['lineHeight']) {
-    if (this.textRenderer.set.lineHeight) {
-      this.textRenderer.set.lineHeight(this.trState, value);
-    }
+    this.textRenderer.set.lineHeight(this.trState, value);
   }
 
   get maxLines(): CoreTextNodeProps['maxLines'] {
@@ -311,9 +323,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   set maxLines(value: CoreTextNodeProps['maxLines']) {
-    if (this.textRenderer.set.maxLines) {
-      this.textRenderer.set.maxLines(this.trState, value);
-    }
+    this.textRenderer.set.maxLines(this.trState, value);
   }
 
   get textBaseline(): CoreTextNodeProps['textBaseline'] {
@@ -321,9 +331,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   set textBaseline(value: CoreTextNodeProps['textBaseline']) {
-    if (this.textRenderer.set.textBaseline) {
-      this.textRenderer.set.textBaseline(this.trState, value);
-    }
+    this.textRenderer.set.textBaseline(this.trState, value);
   }
 
   get verticalAlign(): CoreTextNodeProps['verticalAlign'] {
@@ -331,9 +339,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   set verticalAlign(value: CoreTextNodeProps['verticalAlign']) {
-    if (this.textRenderer.set.verticalAlign) {
-      this.textRenderer.set.verticalAlign(this.trState, value);
-    }
+    this.textRenderer.set.verticalAlign(this.trState, value);
   }
 
   get overflowSuffix(): CoreTextNodeProps['overflowSuffix'] {
@@ -341,9 +347,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   set overflowSuffix(value: CoreTextNodeProps['overflowSuffix']) {
-    if (this.textRenderer.set.overflowSuffix) {
-      this.textRenderer.set.overflowSuffix(this.trState, value);
-    }
+    this.textRenderer.set.overflowSuffix(this.trState, value);
   }
 
   get debug(): CoreTextNodeProps['debug'] {
@@ -365,7 +369,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   override checkRenderProps(): boolean {
-    if (this.trState.props.text !== '') {
+    if (this.trState && this.trState.props.text !== '') {
       return true;
     }
     return super.checkRenderProps();
@@ -433,25 +437,14 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
    * @param props
    * @returns
    */
-  private resolveTextRendererAndState(props: TrProps): {
-    resolvedTextRenderer: TextRenderer;
-    textRendererState: TextRendererState;
-  } {
-    const resolvedTextRenderer = this.stage.resolveTextRenderer(
-      props,
-      this._textRendererOverride,
-    );
-
-    const textRendererState = resolvedTextRenderer.createState(props, this);
+  private createState(props: TrProps) {
+    const textRendererState = this.textRenderer.createState(props, this);
 
     textRendererState.emitter.on('loaded', this.onTextLoaded);
     textRendererState.emitter.on('failed', this.onTextFailed);
 
-    resolvedTextRenderer.scheduleUpdateState(textRendererState);
+    this.textRenderer.scheduleUpdateState(textRendererState);
 
-    return {
-      resolvedTextRenderer,
-      textRendererState,
-    };
+    return textRendererState;
   }
 }