@lightningjs/renderer 0.6.0 → 0.7.0

package/src/core/CoreTextNode.ts

@@ -76,6 +76,11 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
           fontStyle: props.fontStyle,
           fontWeight: props.fontWeight,
           text: props.text,
+          lineHeight: props.lineHeight,
+          maxLines: props.maxLines,
+          textBaseline: props.textBaseline,
+          verticalAlign: props.verticalAlign,
+          overflowSuffix: props.overflowSuffix,
         },
         undefined,
       );
@@ -102,6 +107,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 +156,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'] {
@@ -251,6 +260,56 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     this.textRenderer.set.letterSpacing(this.trState, value);
   }
 
+  get lineHeight(): CoreTextNodeProps['lineHeight'] {
+    return this.trState.props.lineHeight;
+  }
+
+  set lineHeight(value: CoreTextNodeProps['lineHeight']) {
+    if (this.textRenderer.set.lineHeight) {
+      this.textRenderer.set.lineHeight(this.trState, value);
+    }
+  }
+
+  get maxLines(): CoreTextNodeProps['maxLines'] {
+    return this.trState.props.maxLines;
+  }
+
+  set maxLines(value: CoreTextNodeProps['maxLines']) {
+    if (this.textRenderer.set.maxLines) {
+      this.textRenderer.set.maxLines(this.trState, value);
+    }
+  }
+
+  get textBaseline(): CoreTextNodeProps['textBaseline'] {
+    return this.trState.props.textBaseline;
+  }
+
+  set textBaseline(value: CoreTextNodeProps['textBaseline']) {
+    if (this.textRenderer.set.textBaseline) {
+      this.textRenderer.set.textBaseline(this.trState, value);
+    }
+  }
+
+  get verticalAlign(): CoreTextNodeProps['verticalAlign'] {
+    return this.trState.props.verticalAlign;
+  }
+
+  set verticalAlign(value: CoreTextNodeProps['verticalAlign']) {
+    if (this.textRenderer.set.verticalAlign) {
+      this.textRenderer.set.verticalAlign(this.trState, value);
+    }
+  }
+
+  get overflowSuffix(): CoreTextNodeProps['overflowSuffix'] {
+    return this.trState.props.overflowSuffix;
+  }
+
+  set overflowSuffix(value: CoreTextNodeProps['overflowSuffix']) {
+    if (this.textRenderer.set.overflowSuffix) {
+      this.textRenderer.set.overflowSuffix(this.trState, value);
+    }
+  }
+
   get debug(): CoreTextNodeProps['debug'] {
     return this.trState.props.debug;
   }
@@ -269,6 +328,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(
@@ -309,6 +380,7 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
     textRendererState.emitter.on('loaded', this.onTextLoaded);
     textRendererState.emitter.on('failed', this.onTextFailed);
+
     resolvedTextRenderer.scheduleUpdateState(textRendererState);
 
     return {

package/src/core/CoreTextureManager.ts

@@ -18,6 +18,7 @@
  */
 
 import { assertTruthy } from '../utils.js';
+import { ImageWorkerManager } from './lib/ImageWorker.js';
 import type { CoreContextTexture } from './renderers/CoreContextTexture.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import { ColorTexture } from './textures/ColorTexture.js';
@@ -144,7 +145,7 @@ export class CoreTextureManager {
     Texture,
     { cacheKey: string | false; count: number }
   > = new WeakMap();
-
+  imageWorkerManager: ImageWorkerManager;
   /**
    * Renderer that this texture manager is associated with
    *
@@ -154,8 +155,9 @@ export class CoreTextureManager {
    */
   renderer!: CoreRenderer;
 
-  constructor() {
+  constructor(numImageWorkers: number) {
     // Register default known texture types
+    this.imageWorkerManager = new ImageWorkerManager(numImageWorkers);
     this.registerTextureType('ImageTexture', ImageTexture);
     this.registerTextureType('ColorTexture', ColorTexture);
     this.registerTextureType('NoiseTexture', NoiseTexture);

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';
@@ -36,6 +32,8 @@ import type {
 import { SdfTextRenderer } from './text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
 import { CanvasTextRenderer } from './text-rendering/renderers/CanvasTextRenderer.js';
 import { EventEmitter } from '../common/EventEmitter.js';
+import { ContextSpy } from './lib/ContextSpy.js';
+import type { FpsUpdatePayload } from '../common/CommonTypes.js';
 
 export interface StageOptions {
   rootId: number;
@@ -46,11 +44,19 @@ export interface StageOptions {
   canvas: HTMLCanvasElement | OffscreenCanvas;
   clearColor: number;
   fpsUpdateInterval: number;
+  enableContextSpy: boolean;
+  numImageWorkers: number;
+
   debug?: {
     monitorTextureCache?: boolean;
   };
 }
 
+export type StageFpsUpdateHandler = (
+  stage: Stage,
+  fpsData: FpsUpdatePayload,
+) => void;
+
 const bufferMemory = 2e6;
 const autoStart = true;
 
@@ -62,7 +68,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,16 +76,31 @@ export class Stage extends EventEmitter {
   currentFrameTime = 0;
   private fpsNumFrames = 0;
   private fpsElapsedTime = 0;
+  private renderRequested = false;
+
+  /// Debug data
+  contextSpy: ContextSpy | null = null;
 
   /**
    * Stage constructor
    */
   constructor(readonly options: StageOptions) {
     super();
-    const { canvas, clearColor, rootId, debug, appWidth, appHeight } = options;
-    this.txManager = new CoreTextureManager();
+    const {
+      canvas,
+      clearColor,
+      rootId,
+      debug,
+      appWidth,
+      appHeight,
+      enableContextSpy,
+      numImageWorkers,
+    } = options;
+
+    this.txManager = new CoreTextureManager(numImageWorkers);
     this.shManager = new CoreShaderManager();
     this.animationManager = new AnimationManager();
+    this.contextSpy = enableContextSpy ? new ContextSpy() : null;
 
     if (debug?.monitorTextureCache) {
       setInterval(() => {
@@ -99,6 +120,7 @@ export class Stage extends EventEmitter {
       bufferMemory,
       txManager: this.txManager,
       shManager: this.shManager,
+      contextSpy: this.contextSpy,
     });
 
     // Must do this after renderer is created
@@ -146,7 +168,7 @@ export class Stage extends EventEmitter {
       shaderProps: null,
     });
 
-    this.scene = new Scene(rootNode);
+    this.root = rootNode;
 
     // execute platform start loop
     if (autoStart) {
@@ -158,8 +180,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 +199,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;
@@ -217,7 +237,11 @@ export class Stage extends EventEmitter {
         );
         this.fpsNumFrames = 0;
         this.fpsElapsedTime = 0;
-        this.emit('fpsUpdate', fps);
+        this.emit('fpsUpdate', {
+          fps,
+          contextSpyData: this.contextSpy?.getData() ?? null,
+        } satisfies FpsUpdatePayload);
+        this.contextSpy?.reset();
       }
     }
   }
@@ -225,7 +249,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 +268,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 +339,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/lib/ContextSpy.ts

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+/**
+ * Class that keeps track of the invocations of Context methods when
+ * the `enableContextSpy` renderer option is enabled.
+ */
+export class ContextSpy {
+  private data: Record<string, number> = {};
+
+  reset() {
+    this.data = {};
+  }
+
+  increment(name: string) {
+    if (!this.data[name]) {
+      this.data[name] = 0;
+    }
+    this.data[name]++;
+  }
+
+  getData() {
+    return { ...this.data };
+  }
+}

package/src/core/lib/ImageWorker.ts

@@ -0,0 +1,124 @@
+/*
+ * 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 TextureData } from '../textures/Texture.js';
+
+type MessageCallback = [(value: any) => void, (reason: any) => void];
+
+export class ImageWorkerManager {
+  isWorkerSupported = !!self.Worker;
+  imageWorkersEnabled = true;
+  messageManager: Record<string, MessageCallback> = {};
+  workers: Worker[] = [];
+  workerIndex = 0;
+
+  constructor(numImageWorkers: number) {
+    if (this.isWorkerSupported && numImageWorkers > 0) {
+      this.workers = this.createWorkers(numImageWorkers);
+      this.workers.forEach((worker) => {
+        worker.onmessage = this.handleMessage.bind(this);
+      });
+    } else {
+      this.imageWorkersEnabled = false;
+    }
+  }
+
+  private handleMessage(event: MessageEvent) {
+    const { src, data, error } = event.data as {
+      src: string;
+      data?: any;
+      error?: string;
+    };
+    const msg = this.messageManager[src];
+    if (msg) {
+      const [resolve, reject] = msg;
+      delete this.messageManager[src];
+      if (error) {
+        reject(new Error(error));
+      } else {
+        resolve({ data: data as ImageBitmap });
+      }
+    }
+  }
+
+  private createWorkers(numWorkers = 1): Worker[] {
+    const workerCode = `
+      async function getImage(src, premultiplyAlpha) {
+        const response = await fetch(src);
+        const blob = await response.blob();
+        return await createImageBitmap(blob, {
+          premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        });
+      }
+
+      self.onmessage = async (event) => {
+        const { src, premultiplyAlpha } = event.data;
+
+        try {
+          const data = await getImage(src, premultiplyAlpha);
+          self.postMessage({ src, data }, [data]);
+        } catch (error) {
+          self.postMessage({ src, error: error.message });
+        }
+      };
+    `;
+
+    const blob: Blob = new Blob([workerCode.replace('"use strict";', '')], {
+      type: 'application/javascript',
+    });
+    const blobURL: string = (window.URL ? URL : webkitURL).createObjectURL(
+      blob,
+    );
+    const workers: Worker[] = [];
+    for (let i = 0; i < numWorkers; i++) {
+      workers.push(new Worker(blobURL));
+    }
+    return workers;
+  }
+
+  private getNextWorker(): Worker {
+    const worker = this.workers[this.workerIndex];
+    this.workerIndex = (this.workerIndex + 1) % this.workers.length;
+    return worker!;
+  }
+
+  private convertUrlToAbsolute(url: string): string {
+    const absoluteUrl = new URL(url, self.location.href);
+    return absoluteUrl.href;
+  }
+
+  getImage(src: string, premultiplyAlpha: boolean): Promise<TextureData> {
+    return new Promise((resolve, reject) => {
+      try {
+        if (this.workers) {
+          const absoluteSrcUrl = this.convertUrlToAbsolute(src);
+          this.messageManager[absoluteSrcUrl] = [resolve, reject];
+          this.getNextWorker().postMessage({
+            src: absoluteSrcUrl,
+            premultiplyAlpha,
+          });
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+}