@lightningjs/renderer 0.8.2 → 0.8.3

package/src/core/renderers/canvas/CanvasCoreRenderer.ts

@@ -0,0 +1,178 @@
+/*
+ * 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 { CoreShaderManager } from "../../CoreShaderManager.js";
+import { getRgbaComponents, type RGBA } from "../../lib/utils.js";
+import { SubTexture } from "../../textures/SubTexture.js";
+import type { Texture } from "../../textures/Texture.js";
+import type { CoreContextTexture } from "../CoreContextTexture.js";
+import { CoreRenderer, type CoreRendererOptions, type QuadOptions } from "../CoreRenderer.js";
+import { CanvasCoreTexture } from "./CanvasCoreTexture.js";
+import { getRadius } from "./internal/C2DShaderUtils.js";
+import { formatRgba, parseColor, type IParsedColor } from "./internal/ColorUtils.js";
+
+export class CanvasCoreRenderer extends CoreRenderer {
+
+  private context: CanvasRenderingContext2D;
+  private canvas: HTMLCanvasElement;
+  private pixelRatio: number;
+  private clearColor: RGBA | undefined;
+
+  constructor(options: CoreRendererOptions) {
+    super(options);
+
+    this.mode = 'canvas';
+    this.shManager.renderer = this;
+
+    const { canvas, pixelRatio, clearColor } = options;
+    this.canvas = canvas as HTMLCanvasElement;
+    this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
+    this.pixelRatio = pixelRatio;
+    this.clearColor = clearColor ? getRgbaComponents(clearColor) : undefined;
+  }
+
+  reset(): void {
+    // eslint-disable-next-line no-self-assign
+    this.canvas.width = this.canvas.width; // quick reset canvas
+
+    const ctx = this.context;
+
+    if (this.clearColor) {
+      const [r, g, b, a] = this.clearColor;
+      ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+      ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+  }
+
+  render(): void {
+    // noop
+  }
+
+  addQuad(quad: QuadOptions): void {
+    const ctx = this.context;
+    const {
+      tx, ty, width, height, alpha, colorTl, colorTr, colorBr, ta, tb, tc, td, clippingRect
+    } = quad;
+    let texture = quad.texture;
+    let ctxTexture: CanvasCoreTexture | undefined = undefined;
+    let frame: { x: number, y: number, width: number, height: number } | undefined;
+
+    if (texture) {
+      if (texture instanceof SubTexture) {
+        frame = texture.props;
+        texture = texture.parentTexture;
+      }
+
+      ctxTexture = this.txManager.getCtxTexture(texture) as CanvasCoreTexture;
+      if (texture.state === 'freed') {
+        ctxTexture.load();
+        return;
+      }
+      if (texture.state !== 'loaded' || !ctxTexture.hasImage()) {
+        return;
+      }
+    }
+
+    const color = parseColor(colorTl);
+    const hasTransform = ta !== 1;
+    const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+    const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
+    const radius = quad.shader ? getRadius(quad) : 0;
+
+    if (hasTransform || hasClipping || radius) {
+      ctx.save();
+    }
+
+    if (hasClipping) {
+      const path = new Path2D();
+      const { x, y, width, height } = clippingRect;
+      path.rect(x, y, width, height);
+      ctx.clip(path);
+    }
+
+    if (hasTransform) {
+      // Quad transform:
+      // | ta tb tx |
+      // | tc td ty |
+      // | 0  0  1  |
+      // C2D transform:
+      // | a  c  e  |
+      // | b  d  f  |
+      // | 0  0  1  |
+      const scale = this.pixelRatio;
+      ctx.setTransform(ta, tc, tb, td, tx * scale, ty * scale);
+      ctx.scale(scale, scale);
+      ctx.translate(-tx, -ty);
+    }
+
+    if (radius) {
+      const path = new Path2D();
+      path.roundRect(tx, ty, width, height, radius);
+      ctx.clip(path);
+    }
+
+    if (ctxTexture) {
+      const image = ctxTexture.getImage(color);
+      ctx.globalAlpha = alpha;
+      if (frame) {
+        ctx.drawImage(image, frame.x, frame.y, frame.width, frame.height, tx, ty, width, height);
+      } else {
+        ctx.drawImage(image, tx, ty, width, height);
+      }
+      ctx.globalAlpha = 1;
+    } else if (hasGradient) {
+      let endX: number = tx;
+      let endY: number = ty;
+      let endColor: IParsedColor;
+      if (colorTl === colorTr) {
+        // vertical
+        endX = tx;
+        endY = ty + height;
+        endColor = parseColor(colorBr);
+      } else {
+        // horizontal
+        endX = tx + width;
+        endY = ty;
+        endColor = parseColor(colorTr);
+      }
+      const gradient = ctx.createLinearGradient(tx, ty, endX, endY);
+      gradient.addColorStop(0, formatRgba(color));
+      gradient.addColorStop(1, formatRgba(endColor));
+      ctx.fillStyle = gradient;
+      ctx.fillRect(tx, ty, width, height);
+    } else {
+      ctx.fillStyle = formatRgba(color);
+      ctx.fillRect(tx, ty, width, height);
+    }
+
+    if (hasTransform || hasClipping || radius) {
+      ctx.restore();
+    }
+  }
+
+  createCtxTexture(textureSource: Texture): CoreContextTexture {
+    return new CanvasCoreTexture(this.txMemManager, textureSource);
+  }
+
+  getShaderManager(): CoreShaderManager {
+    return this.shManager;
+  }
+}

package/src/core/renderers/canvas/CanvasCoreTexture.ts

@@ -0,0 +1,138 @@
+/*
+ * 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 { Dimensions } from "../../../common/CommonTypes.js";
+import { assertTruthy } from "../../../utils.js";
+import { CoreContextTexture } from "../CoreContextTexture.js";
+import { formatRgba, type IParsedColor } from "./internal/ColorUtils.js";
+
+export class CanvasCoreTexture extends CoreContextTexture {
+
+  protected image: ImageBitmap | HTMLCanvasElement | undefined;
+  protected tintCache: {
+    key: string;
+    image: HTMLCanvasElement
+  } | undefined;
+
+  load(): void {
+    if (this.textureSource.state !== 'freed') {
+      return;
+    }
+    this.textureSource.setState('loading');
+    this.onLoadRequest().then((size) => {
+      this.textureSource.setState('loaded', size);
+      this.updateMemSize();
+    }).catch((err) => {
+      this.textureSource.setState('failed', err as Error);
+    });
+  }
+
+  free(): void {
+    this.image = undefined;
+    this.tintCache = undefined;
+    this.textureSource.setState('freed');
+    this.memManager.setTextureMemUse(this, 0);
+  }
+
+  updateMemSize(): void {
+    // Counting memory usage for:
+    // - main image
+    // - tinted image
+    const mult = this.tintCache ? 8 : 4;
+    if (this.textureSource.dimensions) {
+      const { width, height } = this.textureSource.dimensions;
+      this.memManager.setTextureMemUse(this, width * height * mult);
+    }
+  }
+
+  hasImage(): boolean {
+    return this.image !== undefined;
+  }
+
+  getImage(color: IParsedColor): ImageBitmap | HTMLCanvasElement {
+    const image = this.image;
+    assertTruthy(image, 'Attempt to get unloaded image texture');
+
+    if (color.isWhite) {
+      if (this.tintCache) {
+        this.tintCache = undefined;
+        this.updateMemSize();
+      }
+      return image;
+    }
+    const key = formatRgba(color);
+    if (this.tintCache?.key === key) {
+      return this.tintCache.image;
+    }
+
+    const tintedImage = this.tintTexture(image, key);
+    this.tintCache = {
+      key,
+      image: tintedImage
+    }
+    this.updateMemSize();
+    return tintedImage;
+  }
+
+  protected tintTexture(source: ImageBitmap | HTMLCanvasElement, color: string) {
+    const { width, height } = source;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      // fill with target color
+      ctx.fillStyle = color;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.fillRect(0, 0, width, height);
+
+      // multiply with image, resulting in non-transparent tinted image
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+
+      // apply original image alpha
+      ctx.globalCompositeOperation = 'destination-in';
+      ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+    }
+    return canvas;
+  }
+
+  get renderable(): boolean {
+    return this.textureSource.renderable;
+  }
+
+  private async onLoadRequest(): Promise<Dimensions> {
+    const { data } = await this.textureSource.getTextureData();
+    // TODO: canvas from text renderer should be able to provide the canvas directly
+    // instead of having to re-draw it into a new canvas...
+    if (data instanceof ImageData) {
+      const canvas = document.createElement('canvas');
+      canvas.width = data.width;
+      canvas.height = data.height;
+      const ctx = canvas.getContext('2d');
+      if (ctx) ctx.putImageData(data, 0, 0);
+      this.image = canvas;
+      return { width: data.width, height: data.height };
+    } else if (data instanceof ImageBitmap) {
+      this.image = data;
+      return { width: data.width, height: data.height };
+    }
+    return { width: 0, height: 0 };
+  }
+}

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

@@ -0,0 +1,34 @@
+/*
+ * 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 { QuadOptions } from "../../CoreRenderer.js";
+import { ROUNDED_RECTANGLE_SHADER_TYPE, UnsupportedShader } from "../shaders/UnsupportedShader.js";
+
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping
+ */
+export function getRadius(quad: QuadOptions): number {
+  if (quad.shader instanceof UnsupportedShader) {
+    const shType = quad.shader.shType;
+    if (shType === ROUNDED_RECTANGLE_SHADER_TYPE) {
+      return quad.shaderProps?.radius as number ?? 0;
+    }
+  }
+  return 0;
+}

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/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/Inspector.ts

@@ -393,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;
 

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/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,
         },

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++) {