@lightningjs/renderer 0.6.1 → 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,
       );
@@ -255,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;
   }
@@ -325,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

@@ -32,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;
@@ -42,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;
 
@@ -68,15 +78,29 @@ export class Stage extends EventEmitter {
   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(() => {
@@ -96,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
@@ -212,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();
       }
     }
   }

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);
+      }
+    });
+  }
+}