@lightningjs/renderer 1.0.1 → 2.1.0

package/src/core/Stage.ts

@@ -17,20 +17,18 @@
  * limitations under the License.
  */
 import { startLoop, getTimeStamp } from './platform.js';
-import { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
 import { assertTruthy, setPremultiplyMode } from '../utils.js';
 import { AnimationManager } from './animations/AnimationManager.js';
 import { CoreNode, type CoreNodeProps } from './CoreNode.js';
 import { CoreTextureManager } from './CoreTextureManager.js';
 import { TrFontManager } from './text-rendering/TrFontManager.js';
 import { CoreShaderManager, type ShaderMap } from './CoreShaderManager.js';
-import type {
+import {
   TextRenderer,
-  TextRendererMap,
-  TrProps,
+  type TextRendererMap,
+  type TrProps,
 } from './text-rendering/renderers/TextRenderer.js';
-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 {
@@ -41,14 +39,15 @@ import {
   TextureMemoryManager,
   type TextureMemoryManagerSettings,
 } from './TextureMemoryManager.js';
-import type {
-  CoreRenderer,
-  CoreRendererOptions,
-} from './renderers/CoreRenderer.js';
-import { CanvasCoreRenderer } from './renderers/canvas/CanvasCoreRenderer.js';
+import type { CoreRendererOptions } from './renderers/CoreRenderer.js';
+import { CoreRenderer } from './renderers/CoreRenderer.js';
+import type { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
+import type { CanvasCoreRenderer } from './renderers/canvas/CanvasCoreRenderer.js';
 import type { BaseShaderController } from '../main-api/ShaderController.js';
 import { CoreTextNode, type CoreTextNodeProps } from './CoreTextNode.js';
 import { santizeCustomDataMap } from '../main-api/utils.js';
+import type { SdfTextRenderer } from './text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
+import type { CanvasTextRenderer } from './text-rendering/renderers/CanvasTextRenderer.js';
 
 export interface StageOptions {
   appWidth: number;
@@ -62,9 +61,10 @@ export interface StageOptions {
   fpsUpdateInterval: number;
   enableContextSpy: boolean;
   numImageWorkers: number;
-  renderMode: 'webgl' | 'canvas';
+  renderEngine: typeof WebGlCoreRenderer | typeof CanvasCoreRenderer;
   eventBus: EventEmitter;
   quadBufferSize: number;
+  fontEngines: (typeof CanvasTextRenderer | typeof SdfTextRenderer)[];
 }
 
 export type StageFpsUpdateHandler = (
@@ -111,6 +111,8 @@ export class Stage {
   private fpsElapsedTime = 0;
   private renderRequested = false;
   private frameEventQueue: [name: string, payload: unknown][] = [];
+  private fontResolveMap: Record<string, CanvasTextRenderer | SdfTextRenderer> =
+    {};
 
   /// Debug data
   contextSpy: ContextSpy | null = null;
@@ -128,7 +130,8 @@ export class Stage {
       enableContextSpy,
       numImageWorkers,
       textureMemory,
-      renderMode,
+      renderEngine,
+      fontEngines,
     } = options;
 
     this.eventBus = options.eventBus;
@@ -159,26 +162,42 @@ export class Stage {
       contextSpy: this.contextSpy,
     };
 
-    if (renderMode === 'canvas') {
-      this.renderer = new CanvasCoreRenderer(rendererOptions);
-    } else {
-      this.renderer = new WebGlCoreRenderer(rendererOptions);
-    }
+    this.renderer = new renderEngine(rendererOptions);
+    const renderMode = this.renderer.mode || 'webgl';
+
     this.defShaderCtr = this.renderer.getDefShaderCtr();
     setPremultiplyMode(renderMode);
 
     // Must do this after renderer is created
     this.txManager.renderer = this.renderer;
 
-    this.textRenderers =
-      renderMode === 'webgl'
-        ? {
-            canvas: new CanvasTextRenderer(this),
-            sdf: new SdfTextRenderer(this),
-          }
-        : {
-            canvas: new CanvasTextRenderer(this),
-          };
+    // Create text renderers
+    this.textRenderers = {};
+    fontEngines.forEach((fontEngineConstructor) => {
+      const fontEngineInstance = new fontEngineConstructor(this);
+      const className = fontEngineInstance.type;
+
+      if (className === 'sdf' && renderMode === 'canvas') {
+        console.warn(
+          'SdfTextRenderer is not compatible with Canvas renderer. Skipping...',
+        );
+        return;
+      }
+
+      if (fontEngineInstance instanceof TextRenderer) {
+        if (className === 'canvas') {
+          this.textRenderers['canvas'] =
+            fontEngineInstance as CanvasTextRenderer;
+        } else if (className === 'sdf') {
+          this.textRenderers['sdf'] = fontEngineInstance as SdfTextRenderer;
+        }
+      }
+    });
+
+    if (Object.keys(this.textRenderers).length === 0) {
+      console.warn('No text renderers available. Your text will not render.');
+    }
+
     this.fontManager = new TrFontManager(this.textRenderers);
 
     // create root node
@@ -217,6 +236,7 @@ export class Stage {
       rtt: false,
       src: null,
       scale: 1,
+      preventCleanup: false,
     });
 
     this.root = rootNode;
@@ -361,20 +381,20 @@ export class Stage {
   }
 
   addQuads(node: CoreNode) {
-    assertTruthy(this.renderer && node.globalTransform);
+    assertTruthy(this.renderer);
 
-    if (node.isRenderable) {
+    if (node.isRenderable === true) {
       node.renderQuads(this.renderer);
     }
 
     for (let i = 0; i < node.children.length; i++) {
       const child = node.children[i];
 
-      if (!child) {
+      if (child === undefined) {
         continue;
       }
 
-      if (child?.worldAlpha === 0) {
+      if (child.worldAlpha === 0) {
         continue;
       }
 
@@ -393,7 +413,7 @@ export class Stage {
    * Given a font name, and possible renderer override, return the best compatible text renderer.
    *
    * @remarks
-   * Will always return at least a canvas renderer if no other suitable renderer can be resolved.
+   * Will try to return a canvas renderer if no other suitable renderer can be resolved.
    *
    * @param fontFamily
    * @param textRendererOverride
@@ -402,10 +422,20 @@ export class Stage {
   resolveTextRenderer(
     trProps: TrProps,
     textRendererOverride: keyof TextRendererMap | null = null,
-  ): TextRenderer {
-    let rendererId = textRendererOverride;
+  ): TextRenderer | null {
+    const fontCacheString = `${trProps.fontFamily}${trProps.fontStyle}${
+      trProps.fontWeight
+    }${trProps.fontStretch}${textRendererOverride ? textRendererOverride : ''}`;
+
+    // check our resolve cache first
+    if (this.fontResolveMap[fontCacheString] !== undefined) {
+      return this.fontResolveMap[fontCacheString] as unknown as TextRenderer;
+    }
 
+    // Resolve the text renderer
+    let rendererId = textRendererOverride;
     let overrideFallback = false;
+
     // Check if the override is valid (if one is provided)
     if (rendererId) {
       const possibleRenderer = this.textRenderers[rendererId];
@@ -426,16 +456,12 @@ export class Stage {
     if (!rendererId) {
       // Iterate through the text renderers and find the first one that can render the font
       for (const [trId, tr] of Object.entries(this.textRenderers)) {
-        if (trId === 'canvas') {
-          // Canvas is always a fallback
-          continue;
-        }
         if (tr.canRenderFont(trProps)) {
           rendererId = trId as keyof TextRendererMap;
           break;
         }
       }
-      if (!rendererId) {
+      if (!rendererId && this.textRenderers.canvas !== undefined) {
         // If no renderer can be found, use the canvas renderer
         rendererId = 'canvas';
       }
@@ -445,10 +471,19 @@ export class Stage {
       console.warn(`Falling back to text renderer ${String(rendererId)}`);
     }
 
+    if (!rendererId) {
+      // silently fail if no renderer can be found, the error is already created
+      // at the constructor level
+      return null;
+    }
+
     // By now we are guaranteed to have a valid rendererId (at least Canvas);
     const resolvedTextRenderer = this.textRenderers[rendererId];
     assertTruthy(resolvedTextRenderer, 'resolvedTextRenderer undefined');
 
+    // cache the resolved renderer for future use with these trProps
+    this.fontResolveMap[fontCacheString] = resolvedTextRenderer;
+
     // Need to explicitly cast to TextRenderer because TS doesn't like
     // the covariant state argument in the setter method map
     return resolvedTextRenderer as unknown as TextRenderer;
@@ -499,7 +534,18 @@ export class Stage {
       shaderProps: null,
     };
 
-    return new CoreTextNode(this, resolvedProps);
+    const resolvedTextRenderer = this.resolveTextRenderer(
+      resolvedProps,
+      props.textRendererOverride,
+    );
+
+    if (!resolvedTextRenderer) {
+      throw new Error(
+        `No compatible text renderer found for ${resolvedProps.fontFamily}`,
+      );
+    }
+
+    return new CoreTextNode(this, resolvedProps, resolvedTextRenderer);
   }
 
   /**
@@ -550,6 +596,10 @@ export class Stage {
       // Since setting the `src` will trigger a texture load, we need to set it after
       // we set the texture. Otherwise, problems happen.
       src: props.src ?? null,
+      srcHeight: props.srcHeight,
+      srcWidth: props.srcWidth,
+      srcX: props.srcX,
+      srcY: props.srcY,
       scale: props.scale ?? null,
       scaleX: props.scaleX ?? props.scale ?? 1,
       scaleY: props.scaleY ?? props.scale ?? 1,
@@ -562,6 +612,8 @@ export class Stage {
       rotation: props.rotation ?? 0,
       rtt: props.rtt ?? false,
       data: data,
+      preventCleanup: props.preventCleanup ?? false,
+      imageType: props.imageType,
     };
   }
 }

package/src/core/TextureMemoryManager.ts

@@ -227,8 +227,10 @@ export class TextureMemoryManager {
         // We don't want to free renderable textures because they will just likely be reloaded in the next frame
         break;
       }
-      texture.ctxTexture.free();
-      txManager.removeTextureFromCache(texture);
+      if (texture.preventCleanup === false) {
+        texture.ctxTexture.free();
+        txManager.removeTextureFromCache(texture);
+      }
       if (this.memUsed <= memTarget) {
         // Stop once we've freed enough textures to reach under the target threshold
         break;

package/src/core/animations/CoreAnimation.ts

@@ -60,7 +60,8 @@ export class CoreAnimation extends EventEmitter {
           this.propValuesMap['props'] = {};
         }
         this.propValuesMap['props'][key] = {
-          start: node[key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>],
+          start:
+            node[key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>] || 0,
           target: props[
             key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>
           ] as number,

package/src/core/lib/ImageWorker.ts

@@ -25,6 +25,17 @@ interface getImageReturn {
   premultiplyAlpha: boolean | null;
 }
 
+interface ImageWorkerMessage {
+  id: number;
+  src: string;
+  data: getImageReturn;
+  error: string;
+  sx: number | null;
+  sy: number | null;
+  sw: number | null;
+  sh: number | null;
+}
+
 /**
  * Note that, within the createImageWorker function, we must only use ES5 code to keep it ES5-valid after babelifying, as
  *  the converted code of this section is converted to a blob and used as the js of the web worker thread.
@@ -43,6 +54,10 @@ function createImageWorker() {
   function getImage(
     src: string,
     premultiplyAlpha: boolean | null,
+    x: number | null,
+    y: number | null,
+    width: number | null,
+    height: number | null,
   ): Promise<getImageReturn> {
     return new Promise(function (resolve, reject) {
       var xhr = new XMLHttpRequest();
@@ -60,6 +75,21 @@ function createImageWorker() {
             ? premultiplyAlpha
             : hasAlphaChannel(blob.type);
 
+        if (width !== null && height !== null) {
+          createImageBitmap(blob, x || 0, y || 0, width, height, {
+            premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
+            colorSpaceConversion: 'none',
+            imageOrientation: 'none',
+          })
+            .then(function (data) {
+              resolve({ data, premultiplyAlpha: premultiplyAlpha });
+            })
+            .catch(function (error) {
+              reject(error);
+            });
+          return;
+        }
+
         createImageBitmap(blob, {
           premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
           colorSpaceConversion: 'none',
@@ -87,8 +117,12 @@ function createImageWorker() {
     var src = event.data.src;
     var id = event.data.id;
     var premultiplyAlpha = event.data.premultiplyAlpha;
+    var x = event.data.sx;
+    var y = event.data.sy;
+    var width = event.data.sw;
+    var height = event.data.sh;
 
-    getImage(src, premultiplyAlpha)
+    getImage(src, premultiplyAlpha, x, y, width, height)
       .then(function (data) {
         self.postMessage({ id: id, src: src, data: data });
       })
@@ -114,12 +148,7 @@ export class ImageWorkerManager {
   }
 
   private handleMessage(event: MessageEvent) {
-    const { id, data, error } = event.data as {
-      id: number;
-      src: string;
-      data?: any;
-      error?: string;
-    };
+    const { id, data, error } = event.data as ImageWorkerMessage;
     const msg = this.messageManager[id];
     if (msg) {
       const [resolve, reject] = msg;
@@ -155,6 +184,10 @@ export class ImageWorkerManager {
   getImage(
     src: string,
     premultiplyAlpha: boolean | null,
+    sx: number | null,
+    sy: number | null,
+    sw: number | null,
+    sh: number | null,
   ): Promise<TextureData> {
     return new Promise((resolve, reject) => {
       try {
@@ -167,6 +200,10 @@ export class ImageWorkerManager {
               id,
               src: src,
               premultiplyAlpha,
+              sx,
+              sy,
+              sw,
+              sh,
             });
           }
         }

package/src/core/lib/textureSvg.ts

@@ -0,0 +1,78 @@
+/*
+ * 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 { assertTruthy } from '../../utils.js';
+import { type TextureData } from '../textures/Texture.js';
+
+/**
+ * Tests if the given location is a SVG
+ * @param url
+ * @remarks
+ * This function is used to determine if the given image url is a SVG
+ * image
+ * @returns
+ */
+export function isSvgImage(url: string): boolean {
+  return /\.(svg)$/.test(url);
+}
+
+/**
+ * Loads a SVG image
+ * @param url
+ * @returns
+ */
+export const loadSvg = (
+  url: string,
+  width: number | null,
+  height: number | null,
+  sx: number | null,
+  sy: number | null,
+  sw: number | null,
+  sh: number | null,
+): Promise<TextureData> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    assertTruthy(ctx);
+
+    ctx.imageSmoothingEnabled = true;
+    const img = new Image();
+    img.onload = () => {
+      const x = sx ?? 0;
+      const y = sy ?? 0;
+      const w = width || img.width;
+      const h = height || img.height;
+
+      canvas.width = w;
+      canvas.height = h;
+      ctx.drawImage(img, 0, 0, w, h);
+
+      resolve({
+        data: ctx.getImageData(x, y, sw ?? w, sh ?? h),
+        premultiplyAlpha: false,
+      });
+    };
+
+    img.onerror = (err) => {
+      reject(err);
+    };
+
+    img.src = url;
+  });
+};

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

@@ -131,7 +131,10 @@ export class CanvasCoreTexture extends CoreContextTexture {
       if (ctx) ctx.putImageData(data, 0, 0);
       this.image = canvas;
       return { width: data.width, height: data.height };
-    } else if (data instanceof ImageBitmap) {
+    } else if (
+      typeof ImageBitmap !== 'undefined' &&
+      data instanceof ImageBitmap
+    ) {
       this.image = data;
       return { width: data.width, height: data.height };
     }

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

@@ -134,7 +134,8 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     // If textureData is null, the texture is empty (0, 0) and we don't need to
     // upload any data to the GPU.
     if (
-      textureData.data instanceof ImageBitmap ||
+      (typeof ImageBitmap !== 'undefined' &&
+        textureData.data instanceof ImageBitmap) ||
       textureData.data instanceof ImageData ||
       // not using typeof HTMLImageElement due to web worker
       isHTMLImageElement(textureData.data)

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

@@ -254,13 +254,18 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
     /**
      * If the shader props contain any automatic properties, update it with the
-     * current dimensions that will be used to render the quad.
+     * current dimensions and or alpha that will be used to render the quad.
      */
-    if (shaderProps && hasOwn(shaderProps, '$dimensions')) {
-      const dimensions = shaderProps.$dimensions as Dimensions;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      dimensions.width = width;
-      dimensions.height = height;
+    if (shaderProps !== null) {
+      if (hasOwn(shaderProps, '$dimensions')) {
+        const dimensions = shaderProps.$dimensions as Dimensions;
+        dimensions.width = width;
+        dimensions.height = height;
+      }
+
+      if (hasOwn(shaderProps, '$alpha')) {
+        shaderProps.$alpha = alpha;
+      }
     }
 
     texture = texture ?? this.defaultTexture;

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

@@ -172,6 +172,7 @@ export class DynamicShader extends WebGlCoreShader {
     propsB: Required<DynamicShaderProps>,
   ): boolean {
     if (
+      propsA.$alpha !== propsB.$alpha ||
       propsA.$dimensions.width !== propsB.$dimensions.width ||
       propsA.$dimensions.height !== propsB.$dimensions.height ||
       propsA.effects.length !== propsB.effects.length

package/src/core/text-rendering/TrFontManager.ts

@@ -19,7 +19,8 @@
 
 import type { TrFontFace } from './font-face-types/TrFontFace.js';
 import type { TextRendererMap, TrFontProps } from './renderers/TextRenderer.js';
-import memize from 'memize';
+
+const fontCache = new Map<string, TrFontFace>();
 
 const weightConversions: { [key: string]: number } = {
   normal: 400,
@@ -36,7 +37,7 @@ const fontWeightToNumber = (weight: string | number): number => {
   return weightConversions[weight] || 400;
 };
 
-function rawResolveFontToUse(
+function resolveFontToUse(
   familyMapsByPriority: FontFamilyMap[],
   family: string,
   weightIn: string | number,
@@ -119,7 +120,6 @@ function rawResolveFontToUse(
 
   return;
 }
-const resolveFontToUse = memize(rawResolveFontToUse);
 
 /**
  * Structure mapping font family names to a set of font faces.
@@ -159,12 +159,23 @@ export class TrFontManager {
     props: TrFontProps,
   ): TrFontFace | undefined {
     const { fontFamily, fontWeight, fontStyle, fontStretch } = props;
-    return resolveFontToUse(
+    const fontCacheString = `${fontFamily}${fontStyle}${fontWeight}${fontStretch}`;
+
+    if (fontCache.has(fontCacheString) === true) {
+      return fontCache.get(fontCacheString);
+    }
+
+    const resolvedFont = resolveFontToUse(
       familyMapsByPriority,
       fontFamily,
       fontWeight,
       fontStyle,
       fontStretch,
     );
+    if (resolvedFont !== undefined) {
+      fontCache.set(fontCacheString, resolvedFont);
+    }
+
+    return resolvedFont;
   }
 }

package/src/core/text-rendering/font-face-types/WebTrFontFace.ts

@@ -67,14 +67,21 @@ export class WebTrFontFace extends TrFontFace {
       cssDescriptors,
     );
 
-    fontFace
-      .load()
-      .then(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-        (this.loaded as boolean) = true;
-        this.emit('loaded');
-      })
-      .catch(console.error);
+    if (fontUrlWithoutParentheses.length > 0) {
+      fontFace
+        .load()
+        .then(() => {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+          (this.loaded as boolean) = true;
+          this.emit('loaded');
+        })
+        .catch(console.error);
+    } else {
+      // Default font
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      (this.loaded as boolean) = true;
+      this.emit('loaded');
+    }
 
     this.fontFace = fontFace;
     this.fontUrl = fontUrl;

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

@@ -90,6 +90,8 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
   private fontFamilies: FontFamilyMap = {};
   private fontFamilyArray: FontFamilyMap[] = [this.fontFamilies];
 
+  public type: 'canvas' | 'sdf' = 'canvas';
+
   constructor(stage: Stage) {
     super(stage);
     if (typeof OffscreenCanvas !== 'undefined') {

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

@@ -142,6 +142,8 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   private sdfShader: SdfShader;
   private rendererBounds: Bound;
 
+  public type: 'canvas' | 'sdf' = 'sdf';
+
   constructor(stage: Stage) {
     super(stage);
     this.sdfShader = this.stage.shManager.loadShader('SdfShader').shader;

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

@@ -422,6 +422,7 @@ export abstract class TextRenderer<
   StateT extends TextRendererState = TextRendererState,
 > {
   readonly set: Readonly<TrPropSetters<StateT>>;
+  abstract type: 'canvas' | 'sdf';
 
   constructor(protected stage: Stage) {
     const propSetters = {