@lightningjs/renderer 0.8.1 → 0.8.3

package/src/core/renderers/canvas/internal/ColorUtils.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 interface IParsedColor {
+  isWhite: boolean;
+  a: number;
+  r: number;
+  g: number;
+  b: number;
+}
+
+const WHITE: IParsedColor = {
+  isWhite: true,
+  a: 1,
+  r: 0xff,
+  g: 0xff,
+  b: 0xff
+}
+
+/**
+ * Extract color components
+ */
+export function parseColor(abgr: number): IParsedColor {
+  if (abgr === 0xffffffff) {
+    return WHITE;
+  }
+  const a = ((abgr >>> 24) & 0xff) / 255;
+  const b = ((abgr >>> 16) & 0xff) & 0xff;
+  const g = ((abgr >>> 8) & 0xff) & 0xff;
+  const r = (abgr & 0xff) & 0xff;
+  return { isWhite: false, a, r, g, b }
+}
+
+/**
+ * Format a parsed color into a rgba CSS color
+ */
+export function formatRgba({ a, r, g, b }: IParsedColor): string {
+  return `rgba(${r},${g},${b},${a})`;
+}

package/src/core/renderers/canvas/shaders/UnsupportedShader.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 { CoreShader } from "../../CoreShader.js";
+
+export const ROUNDED_RECTANGLE_SHADER_TYPE = "RoundedRectangle"
+
+export class UnsupportedShader extends CoreShader {
+
+  public shType: string;
+
+  constructor(shType: string) {
+    super();
+    this.shType = shType;
+    if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
+      console.warn('Unsupported shader:', shType);
+    }
+  }
+
+  bindRenderOp(): void {
+    // noop
+  }
+  protected bindProps(): void {
+    // noop
+  }
+
+  attach(): void {
+    // noop
+  }
+  detach(): void {
+    // noop
+  }
+}

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

@@ -21,9 +21,8 @@ import {
   assertTruthy,
   createWebGLContext,
   hasOwn,
-  mergeColorAlphaPremultiplied,
 } from '../../../utils.js';
-import { CoreRenderer, type QuadOptions } from '../CoreRenderer.js';
+import { CoreRenderer, type CoreRendererOptions, type QuadOptions } from '../CoreRenderer.js';
 import { WebGlCoreRenderOp } from './WebGlCoreRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
@@ -36,43 +35,23 @@ import {
 import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 import { Texture } from '../../textures/Texture.js';
 import { ColorTexture } from '../../textures/ColorTexture.js';
-import type { Stage } from '../../Stage.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCoreCtxSubTexture } from './WebGlCoreCtxSubTexture.js';
-import type {
-  CoreTextureManager,
-  TextureOptions,
-} from '../../CoreTextureManager.js';
 import { CoreShaderManager } from '../../CoreShaderManager.js';
-import type { CoreShader } from '../CoreShader.js';
 import { BufferCollection } from './internal/BufferCollection.js';
 import {
   compareRect,
   getNormalizedRgbaComponents,
-  type Rect,
   type RectWithValid,
 } from '../../lib/utils.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { WebGlCoreShader } from './WebGlCoreShader.js';
-import { RoundedRectangle } from './shaders/RoundedRectangle.js';
-import { ContextSpy } from '../../lib/ContextSpy.js';
 import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
-import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 
 const WORDS_PER_QUAD = 24;
-const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
-
-export interface WebGlCoreRendererOptions {
-  stage: Stage;
-  canvas: HTMLCanvasElement | OffscreenCanvas;
-  pixelRatio: number;
-  txManager: CoreTextureManager;
-  txMemManager: TextureMemoryManager;
-  shManager: CoreShaderManager;
-  clearColor: number;
-  bufferMemory: number;
-  contextSpy: ContextSpy | null;
-}
+// const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
+
+export type WebGlCoreRendererOptions = CoreRendererOptions;
 
 interface CoreWebGlSystem {
   parameters: CoreWebGlParameters;
@@ -84,14 +63,6 @@ export class WebGlCoreRenderer extends CoreRenderer {
   glw: WebGlContextWrapper;
   system: CoreWebGlSystem;
 
-  //// Core Managers
-  txManager: CoreTextureManager;
-  txMemManager: TextureMemoryManager;
-  shManager: CoreShaderManager;
-
-  //// Options
-  options: Required<WebGlCoreRendererOptions>;
-
   //// Persistent data
   quadBuffer: ArrayBuffer = new ArrayBuffer(1024 * 1024 * 4);
   fQuadBuffer: Float32Array = new Float32Array(this.quadBuffer);
@@ -113,12 +84,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
   defaultTexture: Texture;
 
   constructor(options: WebGlCoreRendererOptions) {
-    super(options.stage);
+    super(options);
+    this.mode = 'webgl';
+
     const { canvas, clearColor, bufferMemory } = options;
-    this.options = options;
-    this.txManager = options.txManager;
-    this.txMemManager = options.txMemManager;
-    this.shManager = options.shManager;
+
     this.defaultTexture = new ColorTexture(this.txManager);
     // When the default texture is loaded, request a render in case the
     // RAF is paused. Fixes: https://github.com/lightning-js/renderer/issues/123

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -170,6 +170,37 @@ export class DynamicShader extends WebGlCoreShader {
     });
   }
 
+  override canBatchShaderProps(
+    propsA: Required<DynamicShaderProps>,
+    propsB: Required<DynamicShaderProps>,
+  ): boolean {
+    if (
+      propsA.$dimensions.width !== propsB.$dimensions.width ||
+      propsA.$dimensions.height !== propsB.$dimensions.height ||
+      propsA.effects.length !== propsB.effects.length
+    ) {
+      return false;
+    }
+    const propsEffectsLen = propsA.effects.length;
+    let i = 0;
+    for (; i < propsEffectsLen; i++) {
+      const effectA = propsA.effects[i]!;
+      const effectB = propsB.effects[i]!;
+      if (effectA.type !== effectB.type) {
+        return false;
+      }
+      for (const key in effectA.props) {
+        if (
+          (effectB.props && !effectB.props[key]) ||
+          effectA.props[key] !== effectB.props![key]
+        ) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
   static createShader(
     props: DynamicShaderProps,
     effectContructors: Partial<EffectMap>,

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

@@ -56,6 +56,7 @@ import type {
 import type { WebGlCoreCtxTexture } from '../../../renderers/webgl/WebGlCoreCtxTexture.js';
 import { EventEmitter } from '../../../../common/EventEmitter.js';
 import type { Matrix3d } from '../../../lib/Matrix3d.js';
+import { WebGlCoreRenderer } from '../../../renderers/webgl/WebGlCoreRenderer.js';
 
 declare module '../TextRenderer.js' {
   interface TextRendererMap {
@@ -580,7 +581,8 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       return;
     }
 
-    const { renderer } = this.stage;
+    const renderer: WebGlCoreRenderer = this.stage.renderer as WebGlCoreRenderer;
+    assertTruthy(renderer instanceof WebGlCoreRenderer);
 
     const { fontSize, color, contain, scrollable, zIndex, debug } = state.props;
 

package/src/core/textures/ImageTexture.ts

@@ -117,6 +117,9 @@ export class ImageTexture extends Texture {
       };
     } else {
       const img = new Image();
+      if (!(src.substr(0, 5) === 'data:')) {
+        img.crossOrigin = 'Anonymous';
+      }
       img.src = src;
       await new Promise<void>((resolve, reject) => {
         img.onload = () => resolve();

package/src/main-api/INode.ts

@@ -72,6 +72,19 @@ export interface INodeWritableProps {
    * @default `1`
    */
   alpha: number;
+  /**
+   * Autosize mode
+   *
+   * @remarks
+   * When enabled, when a texture is loaded into the Node, the Node will
+   * automatically resize to the dimensions of the texture.
+   *
+   * Text Nodes are always autosized based on their text content regardless
+   * of this mode setting.
+   *
+   * @default `false`
+   */
+  autosize: boolean;
   /**
    * Clipping Mode
    *

package/src/main-api/Inspector.ts

@@ -260,6 +260,11 @@ export class Inspector {
   ): ITextNode {
     const node = driver.createTextNode(properties);
     const div = this.createDiv(node, properties);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+    (div as any).node = node;
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+    (node as any).div = div;
     return this.createProxy(node, div) as ITextNode;
   }
 
@@ -388,7 +393,12 @@ export class Inspector {
     if (property === 'data') {
       for (const key in value) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        div.setAttribute(`data-${key}`, String(value[key]));
+        const keyValue: unknown = value[key];
+        if (keyValue === undefined) {
+          div.removeAttribute(`data-${key}`);
+        } else {
+          div.setAttribute(`data-${key}`, String(keyValue));
+        }
       }
       return;
     }

package/src/main-api/RendererMain.ts

@@ -41,6 +41,7 @@ import { EventEmitter } from '../common/EventEmitter.js';
 import { Inspector } from './Inspector.js';
 import { santizeCustomDataMap } from '../render-drivers/utils.js';
 import { isProductionEnvironment } from '../utils.js';
+import type { StageOptions } from '../core/Stage.js';
 
 /**
  * An immutable reference to a specific Texture type
@@ -270,6 +271,11 @@ export interface RendererMainSettings {
    * @defaultValue `false` (disabled)
    */
   enableInspector?: boolean;
+
+  /**
+   * Renderer mode
+   */
+  renderMode?: 'webgl' | 'canvas';
 }
 
 /**
@@ -344,6 +350,7 @@ export class RendererMain extends EventEmitter {
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
       enableInspector: settings.enableInspector ?? false,
+      renderMode: settings.renderMode ?? 'webgl'
     };
     this.settings = resolvedSettings;
 
@@ -534,6 +541,7 @@ export class RendererMain extends EventEmitter {
       width: props.width ?? 0,
       height: props.height ?? 0,
       alpha: props.alpha ?? 1,
+      autosize: props.autosize ?? false,
       clipping: props.clipping ?? false,
       color,
       colorTop: props.colorTop ?? color,

package/src/render-drivers/main/MainCoreDriver.ts

@@ -64,6 +64,7 @@ export class MainCoreDriver implements ICoreDriver {
       fpsUpdateInterval: rendererSettings.fpsUpdateInterval,
       enableContextSpy: rendererSettings.enableContextSpy,
       numImageWorkers: rendererSettings.numImageWorkers,
+      renderMode: rendererSettings.renderMode,
       debug: {
         monitorTextureCache: false,
       },

package/src/render-drivers/main/MainOnlyNode.ts

@@ -78,6 +78,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
         width: props.width,
         height: props.height,
         alpha: props.alpha,
+        autosize: props.autosize,
         clipping: props.clipping,
         color: props.color,
         colorTop: props.colorTop,
@@ -163,6 +164,14 @@ export class MainOnlyNode extends EventEmitter implements INode {
     this.coreNode.alpha = value;
   }
 
+  get autosize(): boolean {
+    return this.coreNode.autosize;
+  }
+
+  set autosize(value: boolean) {
+    this.coreNode.autosize = value;
+  }
+
   get clipping(): boolean {
     return this.coreNode.clipping;
   }

package/src/render-drivers/main/MainOnlyTextNode.ts

@@ -45,6 +45,7 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
         width: props.width,
         height: props.height,
         alpha: props.alpha,
+        autosize: props.autosize,
         clipping: props.clipping,
         color: props.color,
         colorTop: props.colorTop,

package/src/render-drivers/threadx/NodeStruct.ts

@@ -25,6 +25,7 @@ export interface NodeStructWritableProps {
   width: number;
   height: number;
   alpha: number;
+  autosize: boolean;
   clipping: boolean;
   color: number;
   colorTop: number;
@@ -100,6 +101,15 @@ export class NodeStruct
     // Decorator will handle this
   }
 
+  @structProp('boolean')
+  get autosize(): boolean {
+    return false;
+  }
+
+  set autosize(value: boolean) {
+    // Decorator will handle this
+  }
+
   @structProp('boolean')
   get clipping(): boolean {
     return false;

package/src/render-drivers/threadx/SharedNode.ts

@@ -40,6 +40,7 @@ export class SharedNode extends SharedObject {
       width: sharedNodeStruct.width,
       height: sharedNodeStruct.height,
       alpha: sharedNodeStruct.alpha,
+      autosize: sharedNodeStruct.autosize,
       clipping: sharedNodeStruct.clipping,
       color: sharedNodeStruct.color,
       colorTop: sharedNodeStruct.colorTop,
@@ -72,6 +73,7 @@ export class SharedNode extends SharedObject {
   declare width: number;
   declare height: number;
   declare alpha: number;
+  declare autosize: boolean;
   declare clipping: boolean;
   declare color: number;
   declare colorTop: number;

package/src/render-drivers/threadx/ThreadXCoreDriver.ts

@@ -151,6 +151,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       width: props.width,
       height: props.height,
       parentId: props.parent ? props.parent.id : 0,
+      autosize: props.autosize,
       clipping: props.clipping,
       color: props.color,
       colorTop: props.colorTop,
@@ -208,6 +209,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       colorBl: props.colorBl,
       colorBr: props.colorBr,
       alpha: props.alpha,
+      autosize: props.autosize,
       zIndex: props.zIndex,
       zIndexLocked: props.zIndexLocked,
       scaleX: props.scaleX,

package/src/render-drivers/threadx/worker/ThreadXRendererNode.ts

@@ -209,6 +209,7 @@ export class ThreadXRendererNode extends SharedNode {
       width: sharedNodeStruct.width,
       height: sharedNodeStruct.height,
       alpha: sharedNodeStruct.alpha,
+      autosize: sharedNodeStruct.autosize,
       clipping: sharedNodeStruct.clipping,
       color: sharedNodeStruct.color,
       colorTop: sharedNodeStruct.colorTop,

package/src/render-drivers/threadx/worker/ThreadXRendererTextNode.ts

@@ -46,6 +46,7 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
         width: sharedNodeStruct.width,
         height: sharedNodeStruct.height,
         alpha: sharedNodeStruct.alpha,
+        autosize: sharedNodeStruct.autosize,
         clipping: sharedNodeStruct.clipping,
         color: sharedNodeStruct.color,
         colorTop: sharedNodeStruct.colorTop,

package/src/render-drivers/threadx/worker/renderer.ts

@@ -75,6 +75,7 @@ const threadx = ThreadX.init({
         fpsUpdateInterval: message.fpsUpdateInterval,
         enableContextSpy: message.enableContextSpy,
         numImageWorkers: message.numImageWorkers,
+        renderMode: 'webgl',
         debug: {
           monitorTextureCache: false,
         },
@@ -90,6 +91,7 @@ const threadx = ThreadX.init({
         width: coreRootNode.width,
         height: coreRootNode.height,
         alpha: coreRootNode.alpha,
+        autosize: coreRootNode.autosize,
         clipping: coreRootNode.clipping,
         color: coreRootNode.color,
         colorTop: coreRootNode.colorTop,

package/src/render-drivers/utils.ts

@@ -58,7 +58,7 @@ export async function loadCoreExtension(
 }
 
 export function santizeCustomDataMap(d: CustomDataMap): CustomDataMap {
-  const validTypes = { boolean: true, string: true, number: true };
+  const validTypes = { boolean: true, string: true, number: true, undefined: true };
 
   const keys = Object.keys(d);
   for (let i = 0; i < keys.length; i++) {

package/src/utils.ts

@@ -143,19 +143,30 @@ export function mergeColorAlpha(rgba: number, alpha: number): number {
   return ((r << 24) | (g << 16) | (b << 8) | a) >>> 0;
 }
 
+let premultiplyRGB = true;
+
+/**
+ * RGB components should not be premultiplied when using Canvas renderer
+ * @param mode  Renderer mode
+ */
+export function setPremultiplyMode(mode: 'webgl' | 'canvas'): void {
+  premultiplyRGB = mode === 'webgl';
+}
+
 /**
  * Given an RGBA encoded number, returns back the RGBA number with it's alpha
- * component multiplied by the passed `alpha` parameter. Before returning, the
- * final alpha value is multiplied into the color channels.
+ * component multiplied by the passed `alpha` parameter.
+ *
+ * For the webGl renderer, each color channel is premultiplied by the final alpha value.
  *
  * @remarks
  * If `flipEndianess` is set to true, the function will returned an ABGR encoded number
  * which is useful when the color value needs to be passed into a shader attribute.
  *
- * NOTE: This method returns a PREMULTIPLIED alpha color which is generally only useful
- * in the context of the internal rendering process. Use {@link mergeColorAlpha} if you
- * need to blend an alpha value into a color in the context of the Renderer's
- * main API.
+ * NOTE: Depending on the mode set by {@link setPremultiplyMode}, this method returns
+ * a PREMULTIPLIED alpha color which is generally only useful in the context of the
+ * internal rendering process. Use {@link mergeColorAlpha} if you need to blend an alpha
+ * value into a color in the context of the Renderer's main API.
  *
  * @internalRemarks
  * Do not expose this method in the main API because Renderer users should instead use
@@ -173,9 +184,10 @@ export function mergeColorAlphaPremultiplied(
   flipEndianess = false,
 ): number {
   const newAlpha = ((rgba & 0xff) / 255) * alpha;
-  const r = Math.trunc((rgba >>> 24) * newAlpha);
-  const g = Math.trunc(((rgba >>> 16) & 0xff) * newAlpha);
-  const b = Math.trunc(((rgba >>> 8) & 0xff) * newAlpha);
+  const rgbAlpha = premultiplyRGB ? newAlpha : 1;
+  const r = Math.trunc((rgba >>> 24) * rgbAlpha);
+  const g = Math.trunc(((rgba >>> 16) & 0xff) * rgbAlpha);
+  const b = Math.trunc(((rgba >>> 8) & 0xff) * rgbAlpha);
   const a = Math.trunc(newAlpha * 255);
 
   if (flipEndianess) {
@@ -206,6 +218,17 @@ export function deg2Rad(degrees: number): number {
   return (degrees * Math.PI) / 180;
 }
 
+/**
+ * Returns image aspect ratio
+ *
+ * @param width
+ * @param height
+ * @returns
+ */
+export function getImageAspectRatio(width: number, height: number): number {
+  return width / height;
+}
+
 /**
  * Checks import.meta if env is production
  *