@lightningjs/renderer 0.6.1 → 0.7.1

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
@@ -185,7 +210,7 @@ export class Stage extends EventEmitter {
 
     // Update tree if needed
     if (this.root.updateType !== 0) {
-      this.root.update(this.deltaTime);
+      this.root.update(this.deltaTime, this.root.clippingRect);
     }
 
     // test if we need to update the scene
@@ -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/animations/CoreAnimation.ts

@@ -37,6 +37,7 @@ export class CoreAnimation extends EventEmitter {
   public propStartValues: Partial<INodeAnimatableProps> = {};
   public restoreValues: Partial<INodeAnimatableProps> = {};
   private progress = 0;
+  private delayFor = 0;
   private timingFunction: (t: number) => number | undefined;
   private propsList: Array<keyof INodeAnimatableProps>; //fixme - aint got not time for this
 
@@ -57,10 +58,12 @@ export class CoreAnimation extends EventEmitter {
     if (settings.easing && typeof settings.easing === 'string') {
       this.timingFunction = getTimingFunction(settings.easing);
     }
+    this.delayFor = settings.delay || 0;
   }
 
   reset() {
     this.progress = 0;
+    this.delayFor = this.settings.delay || 0;
     this.update(0);
   }
 
@@ -104,6 +107,11 @@ export class CoreAnimation extends EventEmitter {
       return;
     }
 
+    if (this.delayFor > 0) {
+      this.delayFor -= dt;
+      return;
+    }
+
     this.progress += dt / duration;
 
     if (this.progress > 1) {

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