@lightningjs/renderer 1.0.1 → 2.0.0

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/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 = {

package/src/core/textures/ImageTexture.ts

@@ -24,6 +24,7 @@ import {
   loadCompressedTexture,
 } from '../lib/textureCompression.js';
 import { convertUrlToAbsolute } from '../lib/utils.js';
+import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -55,6 +56,52 @@ export interface ImageTextureProps {
    * `ImageData` textures are not cached unless a `key` is provided
    */
   key?: string | null;
+  /**
+   * Width of the image to be used as a texture. If not provided, the image's
+   * natural width will be used.
+   */
+  width?: number | null;
+  /**
+   * Height of the image to be used as a texture. If not provided, the image's
+   * natural height will be used.
+   */
+  height?: number | null;
+  /**
+   * Type, indicate an image type for overriding type detection
+   *
+   * @default null
+   */
+  type?: 'regular' | 'compressed' | 'svg' | null;
+  /**
+   * The width of the rectangle from which the ImageBitmap will be extracted. This value
+   * can be negative. Only works when createImageBitmap is supported on the browser.
+   *
+   * @default null
+   */
+  sw?: number | null;
+  /**
+   * The height of the rectangle from which the ImageBitmap will be extracted. This value
+   * can be negative. Only works when createImageBitmap is supported on the browser.
+   *
+   * @default null
+   */
+  sh?: number | null;
+  /**
+   * The y coordinate of the reference point of the rectangle from which the ImageBitmap
+   * will be extracted. Only used when `sw` and `sh` are provided. And only works when
+   * createImageBitmap is available.
+   *
+   * @default null
+   */
+  sx?: number | null;
+  /**
+   * The x coordinate of the reference point of the rectangle from which the
+   * ImageBitmap will be extracted. Only used when source `sw` width and `sh` height
+   * are provided. Only works when createImageBitmap is supported on the browser.
+   *
+   * @default null
+   */
+  sy?: number | null;
 }
 
 /**
@@ -83,45 +130,35 @@ export class ImageTexture extends Texture {
     return mimeType.indexOf('image/png') !== -1;
   }
 
-  override async getTextureData(): Promise<TextureData> {
-    const { src, premultiplyAlpha } = this.props;
-    if (!src) {
-      return {
-        data: null,
-      };
-    }
-
-    if (typeof src !== 'string') {
-      if (src instanceof ImageData) {
-        return {
-          data: src,
-          premultiplyAlpha,
-        };
-      }
-      return {
-        data: src(),
-        premultiplyAlpha,
-      };
-    }
-
-    // Handle compressed textures
-    if (isCompressedTextureContainer(src)) {
-      return loadCompressedTexture(src);
-    }
+  async loadImage(src: string) {
+    const { premultiplyAlpha, sx, sy, sw, sh, width, height } = this.props;
 
-    // Convert relative URL to absolute URL
-    const absoluteSrc = convertUrlToAbsolute(src);
-
-    if (this.txManager.imageWorkerManager) {
+    if (this.txManager.imageWorkerManager !== null) {
       return await this.txManager.imageWorkerManager.getImage(
-        absoluteSrc,
+        src,
         premultiplyAlpha,
+        sx,
+        sy,
+        sw,
+        sh,
       );
-    } else if (this.txManager.hasCreateImageBitmap) {
-      const response = await fetch(absoluteSrc);
+    } else if (this.txManager.hasCreateImageBitmap === true) {
+      const response = await fetch(src);
       const blob = await response.blob();
       const hasAlphaChannel =
         premultiplyAlpha ?? this.hasAlphaChannel(blob.type);
+
+      if (sw !== null && sh !== null) {
+        return {
+          data: await createImageBitmap(blob, sx ?? 0, sy ?? 0, sw, sh, {
+            premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+            colorSpaceConversion: 'none',
+            imageOrientation: 'none',
+          }),
+          premultiplyAlpha: hasAlphaChannel,
+        };
+      }
+
       return {
         data: await createImageBitmap(blob, {
           premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
@@ -131,11 +168,11 @@ export class ImageTexture extends Texture {
         premultiplyAlpha: hasAlphaChannel,
       };
     } else {
-      const img = new Image();
+      const img = new Image(width || undefined, height || undefined);
       if (!(src.substr(0, 5) === 'data:')) {
         img.crossOrigin = 'Anonymous';
       }
-      img.src = absoluteSrc;
+      img.src = src;
       await new Promise<void>((resolve, reject) => {
         img.onload = () => resolve();
         img.onerror = () => reject(new Error(`Failed to load image`));
@@ -150,6 +187,73 @@ export class ImageTexture extends Texture {
     }
   }
 
+  override async getTextureData(): Promise<TextureData> {
+    const { src, premultiplyAlpha, type } = this.props;
+    if (src === null) {
+      return {
+        data: null,
+      };
+    }
+
+    if (typeof src !== 'string') {
+      if (src instanceof ImageData) {
+        return {
+          data: src,
+          premultiplyAlpha,
+        };
+      }
+      return {
+        data: src(),
+        premultiplyAlpha,
+      };
+    }
+
+    const absoluteSrc = convertUrlToAbsolute(src);
+    if (type === 'regular') {
+      return this.loadImage(absoluteSrc);
+    }
+
+    if (type === 'svg') {
+      return loadSvg(
+        absoluteSrc,
+        this.props.width,
+        this.props.height,
+        this.props.sx,
+        this.props.sy,
+        this.props.sw,
+        this.props.sh,
+      );
+    }
+
+    if (isSvgImage(src) === true) {
+      return loadSvg(
+        absoluteSrc,
+        this.props.width,
+        this.props.height,
+        this.props.sx,
+        this.props.sy,
+        this.props.sw,
+        this.props.sh,
+      );
+    }
+
+    if (type === 'compressed') {
+      return loadCompressedTexture(absoluteSrc);
+    }
+
+    if (isCompressedTextureContainer(src) === true) {
+      return loadCompressedTexture(absoluteSrc);
+    }
+
+    // default
+    return this.loadImage(absoluteSrc);
+  }
+
+  /**
+   * Generates a cache key for the ImageTexture based on the provided props.
+   * @param props - The props used to generate the cache key.
+   * @returns The cache key as a string, or `false` if the key cannot be generated.
+   */
   static override makeCacheKey(props: ImageTextureProps): string | false {
     const resolvedProps = ImageTexture.resolveDefaults(props);
     // Only cache key-able textures; prioritise key
@@ -157,7 +261,20 @@ export class ImageTexture extends Texture {
     if (typeof key !== 'string') {
       return false;
     }
-    return `ImageTexture,${key},${resolvedProps.premultiplyAlpha ?? 'true'}`;
+
+    // if we have source dimensions, cache the texture separately
+    let dimensionProps = '';
+    if (resolvedProps.sh !== null && resolvedProps.sw !== null) {
+      dimensionProps += ',';
+      dimensionProps += resolvedProps.sx ?? '';
+      dimensionProps += resolvedProps.sy ?? '';
+      dimensionProps += resolvedProps.sw || '';
+      dimensionProps += resolvedProps.sh || '';
+    }
+
+    return `ImageTexture,${key},${
+      resolvedProps.premultiplyAlpha ?? 'true'
+    }${dimensionProps}`;
   }
 
   static override resolveDefaults(
@@ -167,6 +284,13 @@ export class ImageTexture extends Texture {
       src: props.src ?? '',
       premultiplyAlpha: props.premultiplyAlpha ?? true, // null,
       key: props.key ?? null,
+      type: props.type ?? null,
+      width: props.width ?? null,
+      height: props.height ?? null,
+      sx: props.sx ?? null,
+      sy: props.sy ?? null,
+      sw: props.sw ?? null,
+      sh: props.sh ?? null,
     };
   }
 

package/src/core/textures/Texture.ts

@@ -150,6 +150,8 @@ export abstract class Texture extends EventEmitter {
 
   readonly lastRenderableChangeTime = 0;
 
+  public preventCleanup = false;
+
   constructor(protected txManager: CoreTextureManager) {
     super();
   }

package/src/main-api/Inspector.ts

@@ -128,7 +128,7 @@ const convertColorToRgba = (color: number) => {
 };
 
 const domPropertyMap: { [key: string]: string } = {
-  id: 'id',
+  id: 'test-id',
 };
 
 const gradientColorPropertyMap = [
@@ -163,7 +163,7 @@ export class Inspector {
     );
 
     this.width = Math.ceil(
-      settings.appWidth ?? 1900 / (settings.deviceLogicalPixelRatio ?? 1),
+      settings.appWidth ?? 1920 / (settings.deviceLogicalPixelRatio ?? 1),
     );
 
     this.scaleX = settings.deviceLogicalPixelRatio ?? 1;