@lightningjs/renderer 2.16.0 → 3.0.0-beta10

package/src/core/lib/validateImageBitmap.ts

@@ -1,76 +1,87 @@
-export interface CreateImageBitmapSupport {
-  basic: boolean; // Supports createImageBitmap(image)
-  options: boolean; // Supports createImageBitmap(image, options)
-  full: boolean; // Supports createImageBitmap(image, sx, sy, sw, sh, options)
-}
-
-export async function validateCreateImageBitmap(): Promise<CreateImageBitmapSupport> {
-  // Test if createImageBitmap is supported using a simple 1x1 PNG image
-  // prettier-ignore
-  const pngBinaryData = new Uint8Array([
-      0x89, 0x50, 0x4e, 0x47,
-      0x0d, 0x0a, 0x1a, 0x0a, // PNG signature
-      0x00, 0x00, 0x00, 0x0d, // IHDR chunk length
-      0x49, 0x48, 0x44, 0x52, // "IHDR" chunk type
-      0x00, 0x00, 0x00, 0x01, // Width: 1
-      0x00, 0x00, 0x00, 0x01, // Height: 1
-      0x01,                   // Bit depth: 1
-      0x03,                   // Color type: Indexed
-      0x00,                   // Compression method: Deflate
-      0x00,                   // Filter method: None
-      0x00,                   // Interlace method: None
-      0x25, 0xdb, 0x56, 0xca, // CRC for IHDR
-      0x00, 0x00, 0x00, 0x03, // PLTE chunk length
-      0x50, 0x4c, 0x54, 0x45, // "PLTE" chunk type
-      0x00, 0x00, 0x00,       // Palette entry: Black
-      0xa7, 0x7a, 0x3d, 0xda, // CRC for PLTE
-      0x00, 0x00, 0x00, 0x01, // tRNS chunk length
-      0x74, 0x52, 0x4e, 0x53, // "tRNS" chunk type
-      0x00,                   // Transparency for black: Fully transparent
-      0x40, 0xe6, 0xd8, 0x66, // CRC for tRNS
-      0x00, 0x00, 0x00, 0x0a, // IDAT chunk length
-      0x49, 0x44, 0x41, 0x54, // "IDAT" chunk type
-      0x08, 0xd7,             // Deflate header
-      0x63, 0x60, 0x00, 0x00,
-      0x00, 0x02, 0x00, 0x01, // Zlib-compressed data
-      0xe2, 0x21, 0xbc, 0x33, // CRC for IDAT
-      0x00, 0x00, 0x00, 0x00, // IEND chunk length
-      0x49, 0x45, 0x4e, 0x44, // "IEND" chunk type
-      0xae, 0x42, 0x60, 0x82, // CRC for IEND
-    ]);
-
-  const support: CreateImageBitmapSupport = {
-    basic: false,
-    options: false,
-    full: false,
-  };
-
-  // Test basic createImageBitmap support
-  const blob = new Blob([pngBinaryData], { type: 'image/png' });
-  const bitmap = await createImageBitmap(blob);
-  bitmap.close?.();
-  support.basic = true;
-
-  // Test createImageBitmap with options support
-  try {
-    const options = { premultiplyAlpha: 'none' as const };
-    const bitmapWithOptions = await createImageBitmap(blob, options);
-    bitmapWithOptions.close?.();
-    support.options = true;
-  } catch (e) {
-    /* ignore */
-  }
-
-  // Test createImageBitmap with full options support
-  try {
-    const bitmapWithFullOptions = await createImageBitmap(blob, 0, 0, 1, 1, {
-      premultiplyAlpha: 'none',
-    });
-    bitmapWithFullOptions.close?.();
-    support.full = true;
-  } catch (e) {
-    /* ignore */
-  }
-
-  return support;
-}
+import type { Platform } from '../platforms/Platform.js';
+
+export interface CreateImageBitmapSupport {
+  basic: boolean; // Supports createImageBitmap(image)
+  options: boolean; // Supports createImageBitmap(image, options)
+  full: boolean; // Supports createImageBitmap(image, sx, sy, sw, sh, options)
+}
+
+export async function validateCreateImageBitmap(
+  platform: Platform,
+): Promise<CreateImageBitmapSupport> {
+  // Test if createImageBitmap is supported using a simple 1x1 PNG image
+  // prettier-ignore
+  const pngBinaryData = new Uint8Array([
+      0x89, 0x50, 0x4e, 0x47,
+      0x0d, 0x0a, 0x1a, 0x0a, // PNG signature
+      0x00, 0x00, 0x00, 0x0d, // IHDR chunk length
+      0x49, 0x48, 0x44, 0x52, // "IHDR" chunk type
+      0x00, 0x00, 0x00, 0x01, // Width: 1
+      0x00, 0x00, 0x00, 0x01, // Height: 1
+      0x01,                   // Bit depth: 1
+      0x03,                   // Color type: Indexed
+      0x00,                   // Compression method: Deflate
+      0x00,                   // Filter method: None
+      0x00,                   // Interlace method: None
+      0x25, 0xdb, 0x56, 0xca, // CRC for IHDR
+      0x00, 0x00, 0x00, 0x03, // PLTE chunk length
+      0x50, 0x4c, 0x54, 0x45, // "PLTE" chunk type
+      0x00, 0x00, 0x00,       // Palette entry: Black
+      0xa7, 0x7a, 0x3d, 0xda, // CRC for PLTE
+      0x00, 0x00, 0x00, 0x01, // tRNS chunk length
+      0x74, 0x52, 0x4e, 0x53, // "tRNS" chunk type
+      0x00,                   // Transparency for black: Fully transparent
+      0x40, 0xe6, 0xd8, 0x66, // CRC for tRNS
+      0x00, 0x00, 0x00, 0x0a, // IDAT chunk length
+      0x49, 0x44, 0x41, 0x54, // "IDAT" chunk type
+      0x08, 0xd7,             // Deflate header
+      0x63, 0x60, 0x00, 0x00,
+      0x00, 0x02, 0x00, 0x01, // Zlib-compressed data
+      0xe2, 0x21, 0xbc, 0x33, // CRC for IDAT
+      0x00, 0x00, 0x00, 0x00, // IEND chunk length
+      0x49, 0x45, 0x4e, 0x44, // "IEND" chunk type
+      0xae, 0x42, 0x60, 0x82, // CRC for IEND
+    ]);
+
+  const support: CreateImageBitmapSupport = {
+    basic: false,
+    options: false,
+    full: false,
+  };
+
+  // Test basic createImageBitmap support
+  const blob = new Blob([pngBinaryData], { type: 'image/png' });
+  const bitmap = await platform.createImageBitmap(blob);
+  bitmap.close?.();
+  support.basic = true;
+
+  // Test createImageBitmap with options support
+  try {
+    const options = { premultiplyAlpha: 'none' as const };
+    const bitmapWithOptions = await platform.createImageBitmap(blob, options);
+    bitmapWithOptions.close?.();
+    support.options = true;
+  } catch (e) {
+    /* ignore */
+  }
+
+  // Test createImageBitmap with full options support
+  try {
+    const bitmapWithFullOptions = await platform.createImageBitmap(
+      blob,
+      0,
+      0,
+      1,
+      1,
+      {
+        premultiplyAlpha: 'none',
+      },
+    );
+    bitmapWithFullOptions.close?.();
+    support.full = true;
+  } catch (e) {
+    /* ignore */
+  }
+
+  return support;
+}

package/src/core/platforms/Platform.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 Stage } from '../Stage.js';
+
+export abstract class Platform {
+  /**
+   * Creates a new canvas element.
+   * @returns The created HTMLCanvasElement.
+   */
+  abstract createCanvas(): HTMLCanvasElement;
+
+  /**
+   * Get a DOM element by ID
+   * @returns The DOM element (or null)
+   */
+  abstract getElementById(id: string): HTMLElement | null;
+
+  /**
+   * Starts the main rendering loop, calling the provided update function every frame.
+   * @param Stage - The stage for rendering
+   */
+  abstract startLoop(stage: Stage): void;
+
+  /**
+   * Abstracted createImageBitmap method.
+   * @param blob - The image source to create the ImageBitmap from.
+   * @param sxOrOptions - The source rectangle x coordinate or ImageBitmapOptions.
+   * @param sy - The source rectangle y coordinate.
+   * @param sw - The source rectangle width.
+   * @param sh - The source rectangle height.
+   * @param options - The ImageBitmapOptions.
+   * @returns A promise that resolves with the created ImageBitmap.
+   */
+  abstract createImageBitmap(blob: ImageBitmapSource): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+
+  /**
+   * Retrieves the current timestamp.
+   * @returns The current timestamp.
+   */
+  abstract getTimeStamp(): number;
+}

package/src/core/platforms/web/WebPlatform.ts

@@ -0,0 +1,121 @@
+import { Platform } from '../Platform.js';
+import type { Stage } from '../../Stage.js';
+
+export class WebPlatform extends Platform {
+  ////////////////////////
+  // Platform-specific methods
+  ////////////////////////
+
+  override createCanvas(): HTMLCanvasElement {
+    const canvas = document.createElement('canvas');
+    return canvas;
+  }
+
+  override getElementById(id: string): HTMLElement | null {
+    return document.getElementById(id);
+  }
+
+  ////////////////////////
+  // Update loop
+  ////////////////////////
+
+  override startLoop(stage: Stage): void {
+    let isIdle = false;
+    let lastFrameTime = 0;
+
+    const runLoop = (currentTime: number = 0) => {
+      const targetFrameTime = stage.targetFrameTime;
+
+      // Check if we should throttle this frame
+      if (
+        targetFrameTime > 0 &&
+        currentTime - lastFrameTime < targetFrameTime
+      ) {
+        // Too early for next frame, schedule with setTimeout for precise timing
+        const delay = targetFrameTime - (currentTime - lastFrameTime);
+        setTimeout(() => requestAnimationFrame(runLoop), delay);
+        return;
+      }
+
+      stage.updateFrameTime();
+      stage.updateAnimations();
+
+      if (!stage.hasSceneUpdates()) {
+        // We still need to calculate the fps else it looks like the app is frozen
+        stage.calculateFps();
+
+        if (targetFrameTime > 0) {
+          // Use setTimeout for throttled idle frames
+          setTimeout(
+            () => requestAnimationFrame(runLoop),
+            Math.max(targetFrameTime, 16.666666666666668),
+          );
+        } else {
+          // Use standard idle timeout when not throttling
+          setTimeout(() => requestAnimationFrame(runLoop), 16.666666666666668);
+        }
+
+        if (!isIdle) {
+          stage.shManager.cleanup();
+          stage.eventBus.emit('idle');
+          isIdle = true;
+        }
+
+        if (stage.txMemManager.checkCleanup() === true) {
+          stage.txMemManager.cleanup(false);
+        }
+
+        stage.flushFrameEvents();
+        return;
+      }
+
+      isIdle = false;
+      stage.drawFrame();
+      stage.flushFrameEvents();
+
+      // Schedule next frame
+      if (targetFrameTime > 0) {
+        // Use setTimeout + rAF combination for precise FPS control
+        const nextFrameDelay = Math.max(
+          0,
+          targetFrameTime - (performance.now() - currentTime),
+        );
+        setTimeout(() => requestAnimationFrame(runLoop), nextFrameDelay);
+      } else {
+        // Use standard rAF when not throttling
+        requestAnimationFrame(runLoop);
+      }
+    };
+    requestAnimationFrame(runLoop);
+  }
+
+  ////////////////////////
+  // ImageBitmap
+  ////////////////////////
+
+  override createImageBitmap(
+    blob: ImageBitmapSource,
+    sxOrOptions?: number | ImageBitmapOptions,
+    sy?: number,
+    sw?: number,
+    sh?: number,
+    options?: ImageBitmapOptions,
+  ): Promise<ImageBitmap> {
+    if (typeof sxOrOptions === 'number') {
+      return createImageBitmap(
+        blob,
+        sxOrOptions,
+        sy ?? 0,
+        sw ?? 0,
+        sh ?? 0,
+        options,
+      );
+    } else {
+      return createImageBitmap(blob, sxOrOptions);
+    }
+  }
+
+  getTimeStamp(): number {
+    return performance ? performance.now() : Date.now();
+  }
+}

package/src/core/renderers/CoreContextTexture.ts

@@ -1,43 +1,43 @@
-/*
- * 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 { TextureMemoryManager } from '../TextureMemoryManager.js';
-import type { Texture } from '../textures/Texture.js';
-
-export abstract class CoreContextTexture {
-  readonly textureSource: Texture;
-  private memManager: TextureMemoryManager;
-  public state: 'freed' | 'loading' | 'loaded' | 'failed' = 'freed';
-
-  constructor(memManager: TextureMemoryManager, textureSource: Texture) {
-    this.memManager = memManager;
-    this.textureSource = textureSource;
-  }
-
-  protected setTextureMemUse(byteSize: number): void {
-    this.memManager.setTextureMemUse(this.textureSource, byteSize);
-  }
-
-  abstract load(): Promise<void>;
-  abstract free(): void;
-
-  get renderable(): boolean {
-    return this.textureSource.renderable;
-  }
-}
+/*
+ * 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 { TextureMemoryManager } from '../TextureMemoryManager.js';
+import type { Texture } from '../textures/Texture.js';
+
+export abstract class CoreContextTexture {
+  readonly textureSource: Texture;
+  private memManager: TextureMemoryManager;
+  public state: 'freed' | 'loading' | 'loaded' | 'failed' = 'freed';
+
+  constructor(memManager: TextureMemoryManager, textureSource: Texture) {
+    this.memManager = memManager;
+    this.textureSource = textureSource;
+  }
+
+  protected setTextureMemUse(byteSize: number): void {
+    this.memManager.setTextureMemUse(this.textureSource, byteSize);
+  }
+
+  abstract load(): Promise<void>;
+  abstract free(): void;
+
+  get renderable(): boolean {
+    return this.textureSource.renderable;
+  }
+}

package/src/core/renderers/CoreRenderOp.ts

@@ -1,22 +1,22 @@
-/*
- * 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.
- */
-
-export abstract class CoreRenderOp {
-  abstract draw(): void;
-}
+/*
+ * 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.
+ */
+
+export abstract class CoreRenderOp {
+  abstract draw(): void;
+}