@lightningjs/renderer 0.7.4 → 0.7.6

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

@@ -1,96 +1,170 @@
-/*
- * 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 { 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';
-
-/**
- * Structure mapping font family names to a set of font faces.
- */
-export interface FontFamilyMap {
-  [familyName: string]: Set<TrFontFace>;
-}
-
-export class TrFontManager {
-  constructor(private textRenderers: Partial<TextRendererMap>) {
-    // Intentionally left blank
-  }
-
-  public addFontFace(font: TrFontFace): void {
-    // All the font face to all of the text renderers that support it
-    for (const trId in this.textRenderers) {
-      const tr = this.textRenderers[trId as keyof TextRendererMap];
-      if (tr && tr.isFontFaceSupported(font)) {
-        tr.addFontFace(font);
-      }
-    }
-  }
-
-  /**
-   * Utility method to resolve a single font face from a list of prioritized family maps based on
-   * a set of font properties.
-   *
-   * @remarks
-   * These are to be used by a text renderer to resolve a font face if needed.
-   *
-   * @param familyMapsByPriority
-   * @param props
-   * @returns
-   */
-  public static resolveFontFace(
-    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,
-    );
-
-    return exactMatch || closeFaces[0];
-  }
-}
+/*
+ * 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 { TrFontFace } from './font-face-types/TrFontFace.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 {
+  let weight = fontWeightToNumber(weightIn);
+
+  for (const fontFamiles of familyMapsByPriority) {
+    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`,
+      );
+
+      return fontFaces.values().next().value as TrFontFace;
+    }
+
+    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
+      ) {
+        return fontFace;
+      }
+
+      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);
+
+    // Follow the CSS font-weight algorithm to find the nearest weight match
+    // https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#font-matching-algorithm
+
+    if (weight === 400 && weightMap.has(500)) {
+      return weightMap.get(500);
+    }
+
+    if (weight === 500 && weightMap.has(400)) {
+      return weightMap.get(400);
+    }
+
+    if (weight < 400) {
+      while (weight > 0) {
+        if (weightMap.has(weight)) {
+          return weightMap.get(weight);
+        }
+        weight -= 100;
+      }
+      // reset back for the next loop
+      weight = 600;
+    }
+
+    while (weight < 1000) {
+      if (weightMap.has(weight)) {
+        return weightMap.get(weight);
+      }
+      weight += 100;
+    }
+
+    // finally check lower again
+    weight = 500;
+    while (weight > 0) {
+      if (weightMap.has(weight)) {
+        return weightMap.get(weight);
+      }
+      weight -= 100;
+    }
+  }
+
+  return;
+}
+const resolveFontToUse = memize(rawResolveFontToUse);
+
+/**
+ * Structure mapping font family names to a set of font faces.
+ */
+export interface FontFamilyMap {
+  [familyName: string]: Set<TrFontFace>;
+}
+
+export class TrFontManager {
+  constructor(private textRenderers: Partial<TextRendererMap>) {
+    // Intentionally left blank
+  }
+
+  public addFontFace(font: TrFontFace): void {
+    // All the font face to all of the text renderers that support it
+    for (const trId in this.textRenderers) {
+      const tr = this.textRenderers[trId as keyof TextRendererMap];
+      if (tr && tr.isFontFaceSupported(font)) {
+        tr.addFontFace(font);
+      }
+    }
+  }
+
+  /**
+   * Utility method to resolve a single font face from a list of prioritized family maps based on
+   * a set of font properties.
+   *
+   * @remarks
+   * These are to be used by a text renderer to resolve a font face if needed.
+   *
+   * @param familyMapsByPriority
+   * @param props
+   * @returns
+   */
+  public static resolveFontFace(
+    familyMapsByPriority: FontFamilyMap[],
+    props: TrFontProps,
+  ): TrFontFace | undefined {
+    const { fontFamily, fontWeight, fontStyle, fontStretch } = props;
+    return resolveFontToUse(
+      familyMapsByPriority,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      fontStretch,
+    );
+  }
+}

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

@@ -1,141 +1,141 @@
-/*
- * 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 { Renderer } from '../../../Renderer';
-import { assertTruthy } from '../../../../utils.js';
-import type { Stage } from '../../../Stage.js';
-import { WebGlCoreRenderer } from '../../../renderers/webgl/WebGlCoreRenderer.js';
-import { ImageTexture } from '../../../textures/ImageTexture.js';
-import { TrFontFace, type TrFontFaceDescriptors } from '../TrFontFace.js';
-import type { FontShaper } from './internal/FontShaper.js';
-import { SdfFontShaper, type SdfFontData } from './internal/SdfFontShaper.js';
-
-type SdfFontType = 'ssdf' | 'msdf';
-
-declare module '../TrFontFace.js' {
-  interface TrFontFaceMap {
-    ssdf: SdfTrFontFace<'ssdf'>;
-    msdf: SdfTrFontFace<'msdf'>;
-  }
-}
-
-interface GlyphAtlasEntry {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export class SdfTrFontFace<
-  FontTypeT extends SdfFontType = SdfFontType,
-> extends TrFontFace {
-  public readonly type: FontTypeT;
-  public readonly texture: ImageTexture;
-  /**
-   * Height of the tallest character in the font including the whitespace above it
-   */
-  public readonly maxCharHeight: number = 0;
-  public readonly data: SdfFontData | undefined;
-  public readonly shaper: FontShaper | undefined;
-  public readonly glyphMap: Map<number, SdfFontData['chars'][0]> = new Map();
-
-  constructor(
-    fontFamily: string,
-    descriptors: Partial<TrFontFaceDescriptors>,
-    type: FontTypeT,
-    stage: Stage,
-    atlasUrl: string,
-    atlasDataUrl: string,
-  ) {
-    super(fontFamily, descriptors);
-    this.type = type;
-    const renderer = stage.renderer;
-    assertTruthy(
-      renderer instanceof WebGlCoreRenderer,
-      'SDF Font Faces can only be used with the WebGL Renderer',
-    );
-
-    this.texture = stage.txManager.loadTexture(
-      'ImageTexture',
-      {
-        src: atlasUrl,
-        // IMPORTANT: The SDF shader requires the alpha channel to NOT be
-        // premultiplied on the atlas texture. If it is premultiplied, the
-        // rendering of SDF glyphs (especially single-channel SDF fonts) will
-        // be very jagged.
-        premultiplyAlpha: false,
-      },
-      {
-        preload: true,
-      },
-    );
-
-    this.texture.on('loaded', () => {
-      this.checkLoaded();
-    });
-
-    // Set this.data to the fetched data from dataUrl
-    fetch(atlasDataUrl)
-      .then(async (response) => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        (this.data as SdfFontData) = await response.json();
-        // Add all the glyphs to the glyph map
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        let maxCharHeight = 0;
-        this.data!.chars.forEach((glyph) => {
-          this.glyphMap.set(glyph.id, glyph);
-          const charHeight = glyph.yoffset + glyph.height;
-          if (charHeight > maxCharHeight) {
-            maxCharHeight = charHeight;
-          }
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-        (this.maxCharHeight as number) = maxCharHeight;
-        // We know `data` is defined here, because we just set it
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (this.shaper as FontShaper) = new SdfFontShaper(
-          this.data!,
-          this.glyphMap,
-        );
-        this.checkLoaded();
-      })
-      .catch(console.error);
-  }
-
-  getAtlasEntry(glyphId: number): GlyphAtlasEntry {
-    const glyph = this.glyphMap.get(glyphId);
-    if (glyph === undefined) {
-      throw new Error(`Glyph ${glyphId} not found in font ${this.fontFamily}`);
-    }
-    return {
-      x: glyph.x,
-      y: glyph.y,
-      width: glyph.width,
-      height: glyph.height,
-    };
-  }
-
-  private checkLoaded(): void {
-    if (this.loaded) return;
-    if (this.texture.state === 'loaded' && this.data) {
-      (this.loaded as boolean) = true;
-      this.emit('loaded');
-    }
-  }
-}
+/*
+ * 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 { Renderer } from '../../../Renderer';
+import { assertTruthy } from '../../../../utils.js';
+import type { Stage } from '../../../Stage.js';
+import { WebGlCoreRenderer } from '../../../renderers/webgl/WebGlCoreRenderer.js';
+import { ImageTexture } from '../../../textures/ImageTexture.js';
+import { TrFontFace, type TrFontFaceDescriptors } from '../TrFontFace.js';
+import type { FontShaper } from './internal/FontShaper.js';
+import { SdfFontShaper, type SdfFontData } from './internal/SdfFontShaper.js';
+
+type SdfFontType = 'ssdf' | 'msdf';
+
+declare module '../TrFontFace.js' {
+  interface TrFontFaceMap {
+    ssdf: SdfTrFontFace<'ssdf'>;
+    msdf: SdfTrFontFace<'msdf'>;
+  }
+}
+
+interface GlyphAtlasEntry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export class SdfTrFontFace<
+  FontTypeT extends SdfFontType = SdfFontType,
+> extends TrFontFace {
+  public readonly type: FontTypeT;
+  public readonly texture: ImageTexture;
+  /**
+   * Height of the tallest character in the font including the whitespace above it
+   */
+  public readonly maxCharHeight: number = 0;
+  public readonly data: SdfFontData | undefined;
+  public readonly shaper: FontShaper | undefined;
+  public readonly glyphMap: Map<number, SdfFontData['chars'][0]> = new Map();
+
+  constructor(
+    fontFamily: string,
+    descriptors: Partial<TrFontFaceDescriptors>,
+    type: FontTypeT,
+    stage: Stage,
+    atlasUrl: string,
+    atlasDataUrl: string,
+  ) {
+    super(fontFamily, descriptors);
+    this.type = type;
+    const renderer = stage.renderer;
+    assertTruthy(
+      renderer instanceof WebGlCoreRenderer,
+      'SDF Font Faces can only be used with the WebGL Renderer',
+    );
+
+    this.texture = stage.txManager.loadTexture(
+      'ImageTexture',
+      {
+        src: atlasUrl,
+        // IMPORTANT: The SDF shader requires the alpha channel to NOT be
+        // premultiplied on the atlas texture. If it is premultiplied, the
+        // rendering of SDF glyphs (especially single-channel SDF fonts) will
+        // be very jagged.
+        premultiplyAlpha: false,
+      },
+      {
+        preload: true,
+      },
+    );
+
+    this.texture.on('loaded', () => {
+      this.checkLoaded();
+    });
+
+    // Set this.data to the fetched data from dataUrl
+    fetch(atlasDataUrl)
+      .then(async (response) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        (this.data as SdfFontData) = await response.json();
+        // Add all the glyphs to the glyph map
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        let maxCharHeight = 0;
+        this.data!.chars.forEach((glyph) => {
+          this.glyphMap.set(glyph.id, glyph);
+          const charHeight = glyph.yoffset + glyph.height;
+          if (charHeight > maxCharHeight) {
+            maxCharHeight = charHeight;
+          }
+        });
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        (this.maxCharHeight as number) = maxCharHeight;
+        // We know `data` is defined here, because we just set it
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        (this.shaper as FontShaper) = new SdfFontShaper(
+          this.data!,
+          this.glyphMap,
+        );
+        this.checkLoaded();
+      })
+      .catch(console.error);
+  }
+
+  getAtlasEntry(glyphId: number): GlyphAtlasEntry {
+    const glyph = this.glyphMap.get(glyphId);
+    if (glyph === undefined) {
+      throw new Error(`Glyph ${glyphId} not found in font ${this.fontFamily}`);
+    }
+    return {
+      x: glyph.x,
+      y: glyph.y,
+      width: glyph.width,
+      height: glyph.height,
+    };
+  }
+
+  private checkLoaded(): void {
+    if (this.loaded) return;
+    if (this.texture.state === 'loaded' && this.data) {
+      (this.loaded as boolean) = true;
+      this.emit('loaded');
+    }
+  }
+}