@lightningjs/renderer 0.7.4 → 0.7.5

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

@@ -17,10 +17,105 @@
  * limitations under the License.
  */
 
-import { SdfTrFontFace } from './font-face-types/SdfTrFontFace/SdfTrFontFace.js';
 import type { TrFontFace } from './font-face-types/TrFontFace.js';
-import { WebTrFontFace } from './font-face-types/WebTrFontFace.js';
 import type { TextRendererMap, TrFontProps } from './renderers/TextRenderer.js';
+import memize from 'memize';
+
+const weightConversions: { [key: string]: number } = {
+  normal: 400,
+  bold: 700,
+  bolder: 900,
+  lighter: 100,
+};
+
+const fontWeightToNumber = (weight: string | number): number => {
+  if (typeof weight === 'number') {
+    return weight;
+  }
+
+  return weightConversions[weight] || 400;
+};
+
+function rawResolveFontToUse(
+  familyMapsByPriority: FontFamilyMap[],
+  family: string,
+  weightIn: string | number,
+  style: string,
+  stretch: string,
+): TrFontFace | undefined {
+  const weight = fontWeightToNumber(weightIn);
+  let result = undefined;
+
+  for (const fontFamiles of familyMapsByPriority) {
+    if (result) {
+      break;
+    }
+
+    const fontFaces = fontFamiles[family];
+    if (!fontFaces) {
+      continue;
+    }
+
+    if (fontFaces.size === 1) {
+      // No Exact match found, find nearest weight match
+      console.warn(
+        `TrFontManager: Only one font face found for family: '${family}' - will be used for all weights and styles`,
+      );
+
+      result = fontFaces.values().next().value as TrFontFace;
+      continue;
+    }
+
+    const weightMap = new Map<number, TrFontFace>();
+    for (const fontFace of fontFaces) {
+      const fontFamilyWeight = fontWeightToNumber(fontFace.descriptors.weight);
+      if (
+        fontFamilyWeight === weight &&
+        fontFace.descriptors.style === style &&
+        fontFace.descriptors.stretch === stretch
+      ) {
+        result = fontFace;
+        break;
+      }
+
+      weightMap.set(fontFamilyWeight, fontFace);
+    }
+
+    // No Exact match found, find nearest weight match
+    const msg = `TrFontManager: No exact match: '${family} Weight: ${weight} Style: ${style} Stretch: ${stretch}'`;
+    console.error(msg);
+
+    if (!result && weight === 400 && weightMap.has(500)) {
+      result = weightMap.get(500);
+    }
+
+    if (!result && weight === 500 && weightMap.has(400)) {
+      result = weightMap.get(400);
+    }
+
+    if (!result && weight < 400) {
+      const lighter =
+        weightMap.get(300) || weightMap.get(200) || weightMap.get(100);
+      if (lighter) {
+        result = lighter;
+      }
+    }
+
+    if (!result && weight > 500) {
+      const bolder =
+        weightMap.get(600) ||
+        weightMap.get(700) ||
+        weightMap.get(800) ||
+        weightMap.get(900);
+      if (bolder) {
+        result = bolder;
+      }
+    }
+  }
+
+  return result;
+}
+const resolveFontToUse = memize(rawResolveFontToUse);
 
 /**
  * Structure mapping font family names to a set of font faces.
@@ -59,38 +154,13 @@ export class TrFontManager {
     familyMapsByPriority: FontFamilyMap[],
     props: TrFontProps,
   ): TrFontFace | undefined {
-    const closeFaces: WebTrFontFace[] = [];
-    const exactMatch = familyMapsByPriority.reduce<TrFontFace | undefined>(
-      (prev, fontFamiles) => {
-        if (prev) {
-          return prev;
-        }
-        const fontFaces = fontFamiles[props.fontFamily];
-        if (!fontFaces) {
-          return undefined;
-        }
-        const fontFacesCopy = new Set(fontFaces);
-
-        // Remove any font faces that don't match the style exactly
-        // TODO: In the future we may enhance this to find the best match
-        // based on font weight, style, etc.
-        // See https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#font-matching-algorithm
-        for (const fontFace of fontFacesCopy) {
-          if (
-            fontFace.descriptors.stretch !== props.fontStretch ||
-            fontFace.descriptors.style !== props.fontStyle ||
-            fontFace.descriptors.weight !== props.fontWeight
-          ) {
-            fontFacesCopy.delete(fontFace);
-          }
-        }
-
-        // Return the first font face that matches the style exactly
-        return fontFacesCopy.values().next().value;
-      },
-      undefined,
+    const { fontFamily, fontWeight, fontStyle, fontStretch } = props;
+    return resolveFontToUse(
+      familyMapsByPriority,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      fontStretch,
     );
-
-    return exactMatch || closeFaces[0];
   }
 }

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

@@ -127,6 +127,10 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
    */
   private ssdfFontFamilies: FontFamilyMap = {};
   private msdfFontFamilies: FontFamilyMap = {};
+  private fontFamilyArray: FontFamilyMap[] = [
+    this.ssdfFontFamilies,
+    this.msdfFontFamilies,
+  ];
   private sdfShader: SdfShader;
   private rendererBounds: Bound;
 
@@ -734,10 +738,9 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   //#endregion Overrides
 
   public resolveFontFace(props: TrFontProps): SdfTrFontFace | undefined {
-    return TrFontManager.resolveFontFace(
-      [this.msdfFontFamilies, this.ssdfFontFamilies],
-      props,
-    ) as SdfTrFontFace | undefined;
+    return TrFontManager.resolveFontFace(this.fontFamilyArray, props) as
+      | SdfTrFontFace
+      | undefined;
   }
 
   /**

package/src/main-api/INode.ts

@@ -392,8 +392,36 @@ export interface INodeWritableProps {
    * - `2 * Math.PI`: 360 rotation clockwise
    */
   rotation: number;
+  /**
+   * Node data element for custom data storage (optional)
+   *
+   * @remarks
+   * This property is used to store custom data on the Node as a key/value data store.
+   * Data values are limited to string, numbers, booleans. Strings will be truncated
+   * to a 2048 character limit for performance reasons.
+   *
+   * This is not a data storage mechanism for large amounts of data please use a
+   * dedicated data storage mechanism for that.
+   *
+   * The custom data will be reflected in the inspector as part of `data-*` attributes
+   *
+   * @default `undefined`
+   */
+  data?: CustomDataMap;
 }
 
+/**
+ * A custom data map which can be stored on the INode
+ *
+ * @remarks
+ * This is a map of key-value pairs that can be stored on an INode. It is used
+ * to store custom data that can be used by the application.
+ * The data stored can only be of type string, number or boolean.
+ */
+export type CustomDataMap = {
+  [key: string]: string | number | boolean;
+};
+
 export type INodeAnimatableProps = {
   [Key in keyof INodeWritableProps as NonNullable<
     INodeWritableProps[Key]
@@ -403,6 +431,7 @@ export type INodeAnimatableProps = {
 };
 
 export interface INodeEvents {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [s: string]: (target: INode, data: any) => void;
 }
 

package/src/main-api/Inspector.ts

@@ -111,13 +111,6 @@ const stylePropertyMap: {
 
     return { prop: 'transform', value: `scaleY(${v})` };
   },
-  src: (v) => {
-    if (!v) {
-      return null;
-    }
-
-    return { prop: 'background-image', value: `url(${v})` };
-  },
   color: (v) => {
     if (v === 0) {
       return null;
@@ -221,7 +214,7 @@ export class Inspector {
     this.root.style.transformOrigin = '0 0 0';
     this.root.style.transform = `scale(${this.scaleX}, ${this.scaleY})`;
     this.root.style.overflow = 'hidden';
-    this.root.style.zIndex = '-65534';
+    this.root.style.zIndex = '65534';
   }
 
   createDiv(
@@ -254,6 +247,9 @@ export class Inspector {
     // 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);
   }
 
@@ -335,6 +331,18 @@ export class Inspector {
     // special case for text
     if (property === 'text') {
       div.innerHTML = String(value);
+
+      // hide text because we can't render SDF fonts
+      // it would look weird and obstruct the WebGL rendering
+      div.style.visibility = 'hidden';
+      return;
+    }
+
+    // special case for images
+    // we're not setting any CSS properties to avoid images getting loaded twice
+    // as the renderer will handle the loading of the image. Setting it to `data-src`
+    if (property === 'src' && value) {
+      div.setAttribute(`data-src`, String(value));
       return;
     }
 
@@ -376,14 +384,13 @@ export class Inspector {
     }
 
     // custom data properties
-    // Needs https://github.com/lightning-js/renderer/pull/178 to be merged
-    // 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]));
-    //   }
-    //   return;
-    // }
+    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]));
+      }
+      return;
+    }
   }
 
   // simple animation handler

package/src/main-api/RendererMain.ts

@@ -39,6 +39,7 @@ import { FinalizationRegistryTextureUsageTracker } from './texture-usage-tracker
 import type { TextureUsageTracker } from './texture-usage-trackers/TextureUsageTracker.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import { Inspector } from './Inspector.js';
+import { santizeCustomDataMap } from '../render-drivers/utils.js';
 
 /**
  * An immutable reference to a specific Texture type
@@ -501,6 +502,7 @@ export class RendererMain extends EventEmitter {
       props.colorBl ?? props.colorBottom ?? props.colorLeft ?? color;
     const colorBr =
       props.colorBr ?? props.colorBottom ?? props.colorRight ?? color;
+    const data = santizeCustomDataMap(props.data ?? {});
 
     return {
       x: props.x ?? 0,
@@ -536,6 +538,7 @@ export class RendererMain extends EventEmitter {
       pivotX: props.pivotX ?? props.pivot ?? 0.5,
       pivotY: props.pivotY ?? props.pivot ?? 0.5,
       rotation: props.rotation ?? 0,
+      data: data,
     };
   }
 

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

@@ -18,6 +18,7 @@
  */
 
 import type {
+  CustomDataMap,
   INode,
   INodeAnimatableProps,
   INodeWritableProps,
@@ -39,6 +40,7 @@ import type {
   NodeLoadedEventHandler,
   NodeFailedEventHandler,
 } from '../../common/CommonTypes.js';
+import { santizeCustomDataMap } from '../utils.js';
 
 let nextId = 1;
 
@@ -56,6 +58,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
   protected _parent: MainOnlyNode | null = null;
   protected _texture: TextureRef | null = null;
   protected _shader: ShaderRef | null = null;
+  protected _data: CustomDataMap | undefined = {};
 
   constructor(
     props: INodeWritableProps,
@@ -110,6 +113,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
     this.shader = props.shader;
     this.texture = props.texture;
     this.src = props.src;
+    this._data = props.data;
   }
 
   get x(): number {
@@ -425,8 +429,17 @@ export class MainOnlyNode extends EventEmitter implements INode {
     }
   }
 
+  get data(): CustomDataMap | undefined {
+    return this._data;
+  }
+
+  set data(d: CustomDataMap) {
+    this._data = santizeCustomDataMap(d);
+  }
+
   destroy(): void {
     this.emit('beforeDestroy', {});
+    this.coreNode.destroy();
     this.parent = null;
     this.texture = null;
     this.emit('afterDestroy', {});

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

@@ -18,7 +18,11 @@
  */
 
 import type { IAnimationController } from '../../common/IAnimationController.js';
-import type { INode, INodeAnimatableProps } from '../../main-api/INode.js';
+import type {
+  CustomDataMap,
+  INode,
+  INodeAnimatableProps,
+} from '../../main-api/INode.js';
 import type {
   RendererMain,
   ShaderRef,
@@ -29,6 +33,7 @@ import type { NodeStruct } from './NodeStruct.js';
 import { SharedNode } from './SharedNode.js';
 import { ThreadXMainAnimationController } from './ThreadXMainAnimationController.js';
 import type { AnimationSettings } from '../../core/animations/CoreAnimation.js';
+import { santizeCustomDataMap } from '../utils.js';
 
 export class ThreadXMainNode extends SharedNode implements INode {
   private nextAnimationId = 1;
@@ -36,6 +41,7 @@ export class ThreadXMainNode extends SharedNode implements INode {
   protected _children: ThreadXMainNode[] = [];
   protected _texture: TextureRef | null = null;
   protected _shader: ShaderRef | null = null;
+  protected _data: CustomDataMap | undefined = {};
   private _src = '';
 
   /**
@@ -171,6 +177,14 @@ export class ThreadXMainNode extends SharedNode implements INode {
     return this.curProps;
   }
 
+  get data(): CustomDataMap | undefined {
+    return this._data;
+  }
+
+  set data(d: CustomDataMap) {
+    this._data = santizeCustomDataMap(d);
+  }
+
   override destroy() {
     super.destroy();
     this.texture = null;

package/src/render-drivers/utils.ts

@@ -1,5 +1,6 @@
 import { CoreExtension } from '../../exports/core-api.js';
 import type { Stage } from '../core/Stage.js';
+import type { CustomDataMap } from '../main-api/INode.js';
 
 /**
  * Type guard that checks if a Class extends CoreExtension.
@@ -55,3 +56,42 @@ export async function loadCoreExtension(
     );
   }
 }
+
+export function santizeCustomDataMap(d: CustomDataMap): CustomDataMap {
+  const validTypes = { boolean: true, string: true, number: true };
+
+  const keys = Object.keys(d);
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    if (!key) {
+      continue;
+    }
+
+    const value = d[key];
+    const valueType = typeof value;
+
+    // Typescript doesn't understand the above const valueType ¯\_(ツ)_/¯
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore-next-line
+    if (valueType === 'string' && value.length > 2048) {
+      console.warn(
+        `Custom Data value for ${key} is too long, it will be truncated to 2048 characters`,
+      );
+
+      // same here, see above comment, this can only be a string at this point
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore-next-line
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+      d[key] = value.substring(0, 2048);
+    }
+
+    if (!validTypes[valueType as keyof typeof validTypes]) {
+      console.warn(
+        `Custom Data value for ${key} is not a boolean, string, or number, it will be ignored`,
+      );
+      delete d[key];
+    }
+  }
+
+  return d;
+}