@lightningjs/renderer 0.6.0 → 0.6.1

package/src/core/CoreTextNode.ts

@@ -102,6 +102,9 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     }
     this.updateLocalTransform();
 
+    // Incase the RAF loop has been stopped already before text was loaded,
+    // we request a render so it can be drawn.
+    this.stage.requestRender();
     this.emit('loaded', {
       type: 'text',
       dimensions: {
@@ -148,6 +151,7 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set text(value: string) {
     this.textRenderer.set.text(this.trState, value);
+    this.checkIsRenderable();
   }
 
   get textRendererOverride(): CoreTextNodeProps['textRendererOverride'] {
@@ -269,6 +273,18 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     this.textRenderer.set.y(this.trState, this.globalTransform.ty);
   }
 
+  override checkIsRenderable(): boolean {
+    if (super.checkIsRenderable()) {
+      return true;
+    }
+
+    if (this.trState.props.text !== '') {
+      return (this.isRenderable = true);
+    }
+
+    return (this.isRenderable = false);
+  }
+
   override renderQuads(renderer: CoreRenderer) {
     assertTruthy(this.globalTransform);
     this.textRenderer.renderQuads(

package/src/core/Stage.ts

@@ -16,11 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { Scene } from './scene/Scene.js';
-
 import { startLoop, getTimeStamp } from './platform.js';
-
 import { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
 import { assertTruthy } from '../utils.js';
 import { AnimationManager } from './animations/AnimationManager.js';
@@ -62,7 +58,7 @@ export class Stage extends EventEmitter {
   public readonly textRenderers: Partial<TextRendererMap>;
   public readonly shManager: CoreShaderManager;
   public readonly renderer: WebGlCoreRenderer;
-  private scene: Scene;
+  public readonly root: CoreNode;
 
   /// State
   deltaTime = 0;
@@ -70,6 +66,7 @@ export class Stage extends EventEmitter {
   currentFrameTime = 0;
   private fpsNumFrames = 0;
   private fpsElapsedTime = 0;
+  private renderRequested = false;
 
   /**
    * Stage constructor
@@ -146,7 +143,7 @@ export class Stage extends EventEmitter {
       shaderProps: null,
     });
 
-    this.scene = new Scene(rootNode);
+    this.root = rootNode;
 
     // execute platform start loop
     if (autoStart) {
@@ -158,8 +155,8 @@ export class Stage extends EventEmitter {
    * Update animations
    */
   updateAnimations() {
-    const { scene, animationManager } = this;
-    if (!scene?.root) {
+    const { animationManager } = this;
+    if (!this.root) {
       return;
     }
     this.lastFrameTime = this.currentFrameTime;
@@ -177,34 +174,32 @@ export class Stage extends EventEmitter {
    * Check if the scene has updates
    */
   hasSceneUpdates() {
-    const { scene } = this;
-
-    if (!scene?.root) {
-      return false;
-    }
-
-    return scene?.root?.hasUpdates;
+    return !!this.root.updateType || this.renderRequested;
   }
 
   /**
    * Start a new frame draw
    */
   drawFrame() {
-    const { renderer, scene } = this;
-    if (!scene?.root) {
-      return;
-    }
+    const { renderer, renderRequested } = this;
 
-    // reset and clear viewport
-    scene?.root?.update(this.deltaTime);
+    // Update tree if needed
+    if (this.root.updateType !== 0) {
+      this.root.update(this.deltaTime);
+    }
 
     // test if we need to update the scene
     renderer?.reset();
 
-    this.addQuads(scene.root);
+    this.addQuads(this.root);
 
     renderer?.render();
 
+    // Reset renderRequested flag if it was set
+    if (renderRequested) {
+      this.renderRequested = false;
+    }
+
     // If there's an FPS update interval, emit the FPS update event
     // when the specified interval has elapsed.
     const { fpsUpdateInterval } = this.options;
@@ -225,7 +220,10 @@ export class Stage extends EventEmitter {
   addQuads(node: CoreNode) {
     assertTruthy(this.renderer && node.globalTransform);
 
-    node.renderQuads(this.renderer);
+    if (node.isRenderable) {
+      node.renderQuads(this.renderer);
+    }
+
     for (let i = 0; i < node.children.length; i++) {
       const child = node.children[i];
 
@@ -241,6 +239,13 @@ export class Stage extends EventEmitter {
     }
   }
 
+  /**
+   * Request a render pass without forcing an update
+   */
+  requestRender() {
+    this.renderRequested = true;
+  }
+
   /**
    * Given a font name, and possible renderer override, return the best compatible text renderer.
    *
@@ -305,12 +310,4 @@ export class Stage extends EventEmitter {
     // the covariant state argument in the setter method map
     return resolvedTextRenderer as unknown as TextRenderer;
   }
-
-  //#region Properties
-
-  get root() {
-    return this.scene?.root || null;
-  }
-
-  //#endregion Properties
 }

package/src/core/animations/CoreAnimation.ts

@@ -98,7 +98,7 @@ export class CoreAnimation extends EventEmitter {
   }
 
   update(dt: number) {
-    const { duration, loop, easing } = this.settings;
+    const { duration, loop, easing, stopMethod } = this.settings;
     if (!duration) {
       this.emit('finished', {});
       return;
@@ -108,7 +108,13 @@ export class CoreAnimation extends EventEmitter {
 
     if (this.progress > 1) {
       this.progress = loop ? 0 : 1;
-      return this.emit('finished', {});
+      if (stopMethod) {
+        // If there's a stop method emit finished so the stop method can be applied.
+        // TODO: We should probably reevaluate how stopMethod is implemented as currently
+        // stop method 'reset' does not work when looping.
+        this.emit('finished', {});
+        return;
+      }
     }
 
     for (let i = 0; i < this.propsList.length; i++) {
@@ -156,5 +162,8 @@ export class CoreAnimation extends EventEmitter {
       this.node[propName] =
         startValue + (endValue - startValue) * this.progress;
     }
+    if (this.progress === 1) {
+      this.emit('finished', {});
+    }
   }
 }

package/src/core/platform.ts

@@ -26,6 +26,11 @@ export const startLoop = (stage: Stage) => {
   const runLoop = () => {
     stage.updateAnimations();
 
+    if (!stage.hasSceneUpdates()) {
+      setTimeout(runLoop, 16.666666666666668);
+      return;
+    }
+
     stage.drawFrame();
     requestAnimationFrame(runLoop);
   };

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -179,6 +179,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     this.curBufferIdx = 0;
     this.curRenderOp = null;
     this.renderOps.length = 0;
+    this.gl.disable(this.gl.SCISSOR_TEST);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
   }
 
@@ -325,11 +326,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = ty; // vertexY
       fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
-      uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
-        colorTl,
-        alpha,
-        true,
-      ); // color
+      uiQuadBuffer[bufferIdx++] = colorTl; // color
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
 
       // Upper-Right
@@ -337,11 +334,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = ty + width * tc;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY1;
-      uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
-        colorTr,
-        alpha,
-        true,
-      );
+      uiQuadBuffer[bufferIdx++] = colorTr;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Left
@@ -349,11 +342,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = ty + height * td;
       fQuadBuffer[bufferIdx++] = texCoordX1;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
-        colorBl,
-        alpha,
-        true,
-      );
+      uiQuadBuffer[bufferIdx++] = colorBl;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Right
@@ -361,11 +350,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = ty + width * tc + height * td;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
-        colorBr,
-        alpha,
-        true,
-      );
+      uiQuadBuffer[bufferIdx++] = colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
     } else {
       // Calculate the right corner of the quad
@@ -378,11 +363,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = ty; // vertexY
       fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
-      uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
-        colorTl,
-        alpha,
-        true,
-      ); // color
+      uiQuadBuffer[bufferIdx++] = colorTl; // color
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
 
       // Upper-Right
@@ -390,11 +371,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = ty;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY1;
-      uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
-        colorTr,
-        alpha,
-        true,
-      );
+      uiQuadBuffer[bufferIdx++] = colorTr;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Left
@@ -402,11 +379,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = rightCornerY;
       fQuadBuffer[bufferIdx++] = texCoordX1;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
-        colorBl,
-        alpha,
-        true,
-      );
+      uiQuadBuffer[bufferIdx++] = colorBl;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Right
@@ -414,11 +387,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = rightCornerY;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
-        colorBr,
-        alpha,
-        true,
-      );
+      uiQuadBuffer[bufferIdx++] = colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
     }
 

package/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts

@@ -82,10 +82,9 @@ export class SdfTrFontFace<
       },
     );
 
-    // TODO: Add texture loaded support
-    // this.texture.on('loaded', () => {
-    //   this.checkLoaded();
-    // });
+    this.texture.on('loaded', () => {
+      this.checkLoaded();
+    });
 
     // Set this.data to the fetched data from dataUrl
     fetch(atlasDataUrl)
@@ -120,7 +119,7 @@ export class SdfTrFontFace<
 
   private checkLoaded(): void {
     if (this.loaded) return;
-    if (/*this.texture.loaded && */ this.data) {
+    if (this.texture.state === 'loaded' && this.data) {
       (this.loaded as boolean) = true;
       this.emit('loaded');
     }

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

@@ -18,7 +18,7 @@
  */
 
 import { EventEmitter } from '../../../common/EventEmitter.js';
-import { assertTruthy } from '../../../utils.js';
+import { assertTruthy, mergeColorAlphaPremultiplied } from '../../../utils.js';
 import type { Stage } from '../../Stage.js';
 import type { Matrix3d } from '../../lib/Matrix3d.js';
 import {
@@ -114,7 +114,11 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     } else {
       this.canvas = document.createElement('canvas');
     }
-    let context = this.canvas.getContext('2d');
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    let context = this.canvas.getContext('2d') as
+      | OffscreenCanvasRenderingContext2D
+      | CanvasRenderingContext2D
+      | null;
     if (!context) {
       // A browser may appear to support OffscreenCanvas but not actually support the Canvas '2d' context
       // Here we try getting the context again after falling back to an HTMLCanvasElement.
@@ -543,15 +547,15 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     // Color alpha of text is not properly rendered to the Canvas texture, so we
     // need to apply it here.
     const combinedAlpha = alpha * getNormalizedAlphaComponent(color);
-
+    const quadColor = mergeColorAlphaPremultiplied(0xffffffff, combinedAlpha);
     if (canvasPages[0].valid) {
       this.stage.renderer.addQuad({
         alpha: combinedAlpha,
         clippingRect,
-        colorBl: 0xffffffff,
-        colorBr: 0xffffffff,
-        colorTl: 0xffffffff,
-        colorTr: 0xffffffff,
+        colorBl: quadColor,
+        colorBr: quadColor,
+        colorTl: quadColor,
+        colorTr: quadColor,
         width: canvasPages[0].texture?.dimensions?.width || 0,
         height: canvasPages[0].texture?.dimensions?.height || 0,
         texture: canvasPages[0].texture!,
@@ -571,10 +575,10 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       this.stage.renderer.addQuad({
         alpha: combinedAlpha,
         clippingRect,
-        colorBl: 0xffffffff,
-        colorBr: 0xffffffff,
-        colorTl: 0xffffffff,
-        colorTr: 0xffffffff,
+        colorBl: quadColor,
+        colorBr: quadColor,
+        colorTl: quadColor,
+        colorTr: quadColor,
         width: canvasPages[1].texture?.dimensions?.width || 0,
         height: canvasPages[1].texture?.dimensions?.height || 0,
         texture: canvasPages[1].texture!,
@@ -594,10 +598,10 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       this.stage.renderer.addQuad({
         alpha: combinedAlpha,
         clippingRect,
-        colorBl: 0xffffffff,
-        colorBr: 0xffffffff,
-        colorTl: 0xffffffff,
-        colorTr: 0xffffffff,
+        colorBl: quadColor,
+        colorBr: quadColor,
+        colorTl: quadColor,
+        colorTr: quadColor,
         width: canvasPages[2].texture?.dimensions?.width || 0,
         height: canvasPages[2].texture?.dimensions?.height || 0,
         texture: canvasPages[2].texture!,

package/src/core/scene/Scene.ts

@@ -1,120 +0,0 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { CoreNode } from '../CoreNode.js';
-
-export type NodeTypes = Node;
-
-export class Scene {
-  /**
-   * Root node of the scene
-   *
-   * @type {Node}
-   * @memberof Scene
-   */
-  public root: CoreNode;
-
-  constructor(root: CoreNode) {
-    this.root = root;
-  }
-
-  /**
-   * Get all nodes of a specific type
-   * @param type
-   * @returns
-   */
-  public getNodeByType(type: string): Node[] {
-    return [];
-  }
-
-  /**
-   * Find a node by id
-   * @param id
-   * @returns
-   */
-  public getNodeById(id: string): Node | null {
-    return null;
-  }
-
-  /**
-   * Create a new node
-   * @param parent
-   * @returns
-   */
-  // public createNode(settings: Partial<INodeWritableProps> = {}): NodeTypes {
-  //   return createNode(settings);
-  // }
-
-  /**
-   * create a new RectangleNode
-   * @param w
-   * @param h
-   * @param parent
-   * @returns
-   */
-  // public rectangle(w: number, h: number, parent: NodeTypes | null = null) {
-  //   // TODO: Fix this
-  //   // return this.create(new RectangleNode(w, h), parent);
-  // }
-
-  /**
-   * Create a new CircleNode
-   * @param r
-   * @param parent
-   * @returns
-   */
-  // public circle(r: number, parent: NodeTypes | null = null) {
-  //   // TODO: Fix this
-  //   // return this.create(new CircleNode(r), parent);
-  // }
-
-  /**
-   * Create a new TextNode
-   * @param text
-   * @param parent
-   * @returns
-   */
-  // public text(text = '', parent: NodeTypes | null = null) {
-  //   // TODO: Fix this
-  //   // return this.create(new TextNode(text), parent);
-  // }
-
-  /**
-   * Setup and attaching Node
-   * @param node
-   * @param parent
-   * @returns
-   */
-  // private create(node: NodeTypes, parent: NodeTypes | null = null): NodeTypes {
-  //   if (!parent) {
-  //     parent = this.root;
-  //   }
-
-  //   node.parent = parent;
-  //   return node;
-  // }
-
-  /**
-   * Update the scene
-   * @param delta
-   */
-  public update(delta: number) {
-    this.root.update(delta);
-  }
-}