@lightningjs/renderer 2.9.0-beta3 → 2.9.0

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

@@ -1,169 +1,176 @@
-/*
- * 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 NormalizedFontMetrics,
-  type TrFontFaceOptions,
-} 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 interface SdfTrFontFaceOptions extends TrFontFaceOptions {
-  atlasUrl: string;
-  atlasDataUrl: string;
-  stage: Stage;
-}
-
-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
-   * in SDF/vertex units.
-   */
-  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(type: FontTypeT, options: SdfTrFontFaceOptions) {
-    super(options);
-    const { atlasUrl, atlasDataUrl, stage } = options;
-    this.type = type;
-    const renderer = stage.renderer;
-    assertTruthy(
-      renderer instanceof WebGlCoreRenderer,
-      'SDF Font Faces can only be used with the WebGL Renderer',
-    );
-
-    // Load image
-    this.texture = stage.txManager.createTexture('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,
-    });
-
-    // Load the texture
-    stage.txManager.loadTexture(this.texture, true);
-
-    this.texture.on('loaded', () => {
-      this.checkLoaded();
-      // Make sure we mark the stage for a re-render (in case the font's texture was freed and reloaded)
-      stage.requestRender();
-    });
-
-    // 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();
-        assertTruthy(this.data);
-        // Add all the glyphs to the glyph map
-
-        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;
-          }
-        });
-
-        (this.maxCharHeight as number) = maxCharHeight;
-        // We know `data` is defined here, because we just set it
-
-        (this.shaper as FontShaper) = new SdfFontShaper(
-          this.data,
-          this.glyphMap,
-        );
-
-        // If the metrics aren't provided explicitly in the font face options,
-        // Gather them from the metrics added by the msdf-generator tool ()
-        // If they are missing then we throw an error.
-        if (!this.metrics) {
-          if (this.data?.lightningMetrics) {
-            const { ascender, descender, lineGap, unitsPerEm } =
-              this.data.lightningMetrics;
-            (this.metrics as NormalizedFontMetrics | null) = {
-              ascender: ascender / unitsPerEm,
-              descender: descender / unitsPerEm,
-              lineGap: lineGap / unitsPerEm,
-            };
-          } else {
-            throw new Error(
-              `Font metrics not found in ${this.type} font ${this.fontFamily}. ` +
-                'Make sure you are using the latest version of the Lightning ' +
-                '3 `msdf-generator` tool to generate your SDF fonts.',
-            );
-          }
-        }
-
-        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 NormalizedFontMetrics,
+  type TrFontFaceOptions,
+} 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 interface SdfTrFontFaceOptions extends TrFontFaceOptions {
+  atlasUrl: string;
+  atlasDataUrl: string;
+  stage: Stage;
+}
+
+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
+   * in SDF/vertex units.
+   */
+  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(type: FontTypeT, options: SdfTrFontFaceOptions) {
+    super(options);
+    const { atlasUrl, atlasDataUrl, stage } = options;
+    this.type = type;
+    const renderer = stage.renderer;
+    assertTruthy(
+      renderer instanceof WebGlCoreRenderer,
+      'SDF Font Faces can only be used with the WebGL Renderer',
+    );
+
+    // Load image
+    this.texture = stage.txManager.createTexture('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,
+    });
+
+    // Load the texture
+    stage.txManager.loadTexture(this.texture, true);
+
+    // FIXME This is a stop-gap solution to avoid Font Face textures to be cleaned up
+    // Ideally we do want to clean up the textures if they're not being used to save as much memory as possible
+    // However, we need to make sure that the font face is reloaded if the texture is cleaned up and needed again
+    // and make sure the SdfFontRenderer is properly guarded against textures being reloaded
+    // for now this will do the trick and the increase on memory is not that big
+    this.texture.preventCleanup = true;
+
+    this.texture.on('loaded', () => {
+      this.checkLoaded();
+      // Make sure we mark the stage for a re-render (in case the font's texture was freed and reloaded)
+      stage.requestRender();
+    });
+
+    // 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();
+        assertTruthy(this.data);
+        // Add all the glyphs to the glyph map
+
+        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;
+          }
+        });
+
+        (this.maxCharHeight as number) = maxCharHeight;
+        // We know `data` is defined here, because we just set it
+
+        (this.shaper as FontShaper) = new SdfFontShaper(
+          this.data,
+          this.glyphMap,
+        );
+
+        // If the metrics aren't provided explicitly in the font face options,
+        // Gather them from the metrics added by the msdf-generator tool ()
+        // If they are missing then we throw an error.
+        if (!this.metrics) {
+          if (this.data?.lightningMetrics) {
+            const { ascender, descender, lineGap, unitsPerEm } =
+              this.data.lightningMetrics;
+            (this.metrics as NormalizedFontMetrics | null) = {
+              ascender: ascender / unitsPerEm,
+              descender: descender / unitsPerEm,
+              lineGap: lineGap / unitsPerEm,
+            };
+          } else {
+            throw new Error(
+              `Font metrics not found in ${this.type} font ${this.fontFamily}. ` +
+                'Make sure you are using the latest version of the Lightning ' +
+                '3 `msdf-generator` tool to generate your SDF fonts.',
+            );
+          }
+        }
+
+        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');
+    }
+  }
+}

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

@@ -1,139 +1,139 @@
-/*
- * 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 { PeekableIterator } from '../../../renderers/SdfTextRenderer/internal/PeekableGenerator.js';
-
-/**
- * HarfBuzz compatible glyph position info
- */
-export interface GlyphPosition {
-  /**
-   * how much the line advances after drawing this glyph when setting text in horizontal direction.
-   */
-  xAdvance: number;
-  /**
-   * how much the line advances after drawing this glyph when setting text in vertical direction.
-   */
-  yAdvance: number;
-  /**
-   * how much the glyph moves on the X-axis before drawing it, this should not affect how much the line advances.
-   */
-  xOffset: number;
-  /**
-   * how much the glyph moves on the Y-axis before drawing it, this should not affect how much the line advances.
-   */
-  yOffset: number;
-}
-
-/**
- * HarfBuzz compatible glyph info
- */
-export interface GlyphInfo {
-  /**
-   * Glyph ID
-   */
-  glyphId: number;
-
-  /**
-   * First codepoint in the cluster this glyph was mapped from.
-   */
-  codepoint: number;
-
-  /**
-   * the index of the character in the original text that corresponds to this hb_glyph_info_t
-   * This is useful for mapping back from glyphs to characters.
-   */
-  cluster: number;
-}
-
-/**
- * HarfBuzz compatible glyph extents
- */
-export interface GlyphExtents {
-  /**
-   * The X offset from the origin to the leftmost part of the glyph.
-   * This is negative for right-to-left scripts.
-   */
-  xBearing: number;
-
-  /**
-   * The Y offset from the origin to the topmost part of the glyph.
-   * This is negative for bottom-to-top scripts.
-   */
-  yBearing: number;
-
-  /**
-   * Distance from the top extremum of the glyph to the bottom extremum.
-   * This is always positive.
-   */
-  width: number;
-
-  /**
-   * Distance from the left extremum of the glyph to the right extremum.
-   * This is always positive.
-   */
-  height: number;
-}
-
-export interface UnmappedCharacterInfo {
-  mapped: false;
-
-  /**
-   * The Unicode code point of the character.
-   */
-  codepoint: number;
-
-  /**
-   * The index of the character in the original text that corresponds to this hb_glyph_info_t
-   * This is useful for mapping back from glyphs to characters.
-   */
-  cluster: number;
-}
-
-export type MappedGlyphInfo = { mapped: true } & GlyphInfo &
-  GlyphPosition &
-  GlyphExtents;
-
-/**
- * For performance reasons, all properties are required to reduce need for checking for undefined values.
- */
-export interface FontShaperProps {
-  /**
-   * Letter spacing
-   *
-   * @default 0
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
-   **/
-  letterSpacing: number;
-}
-
-export abstract class FontShaper {
-  /**
-   * Returns the glyph IDs of the next
-   *
-   * @remarks
-   * If this returns undefined, a glyph for the next codepoint(s) could not be found.
-   *
-   * @param codepoints
-   */
-  abstract shapeText(
-    props: FontShaperProps,
-    codepoints: PeekableIterator<number>,
-  ): Generator<MappedGlyphInfo | UnmappedCharacterInfo, void>;
-}
+/*
+ * 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 { PeekableIterator } from '../../../renderers/SdfTextRenderer/internal/PeekableGenerator.js';
+
+/**
+ * HarfBuzz compatible glyph position info
+ */
+export interface GlyphPosition {
+  /**
+   * how much the line advances after drawing this glyph when setting text in horizontal direction.
+   */
+  xAdvance: number;
+  /**
+   * how much the line advances after drawing this glyph when setting text in vertical direction.
+   */
+  yAdvance: number;
+  /**
+   * how much the glyph moves on the X-axis before drawing it, this should not affect how much the line advances.
+   */
+  xOffset: number;
+  /**
+   * how much the glyph moves on the Y-axis before drawing it, this should not affect how much the line advances.
+   */
+  yOffset: number;
+}
+
+/**
+ * HarfBuzz compatible glyph info
+ */
+export interface GlyphInfo {
+  /**
+   * Glyph ID
+   */
+  glyphId: number;
+
+  /**
+   * First codepoint in the cluster this glyph was mapped from.
+   */
+  codepoint: number;
+
+  /**
+   * the index of the character in the original text that corresponds to this hb_glyph_info_t
+   * This is useful for mapping back from glyphs to characters.
+   */
+  cluster: number;
+}
+
+/**
+ * HarfBuzz compatible glyph extents
+ */
+export interface GlyphExtents {
+  /**
+   * The X offset from the origin to the leftmost part of the glyph.
+   * This is negative for right-to-left scripts.
+   */
+  xBearing: number;
+
+  /**
+   * The Y offset from the origin to the topmost part of the glyph.
+   * This is negative for bottom-to-top scripts.
+   */
+  yBearing: number;
+
+  /**
+   * Distance from the top extremum of the glyph to the bottom extremum.
+   * This is always positive.
+   */
+  width: number;
+
+  /**
+   * Distance from the left extremum of the glyph to the right extremum.
+   * This is always positive.
+   */
+  height: number;
+}
+
+export interface UnmappedCharacterInfo {
+  mapped: false;
+
+  /**
+   * The Unicode code point of the character.
+   */
+  codepoint: number;
+
+  /**
+   * The index of the character in the original text that corresponds to this hb_glyph_info_t
+   * This is useful for mapping back from glyphs to characters.
+   */
+  cluster: number;
+}
+
+export type MappedGlyphInfo = { mapped: true } & GlyphInfo &
+  GlyphPosition &
+  GlyphExtents;
+
+/**
+ * For performance reasons, all properties are required to reduce need for checking for undefined values.
+ */
+export interface FontShaperProps {
+  /**
+   * Letter spacing
+   *
+   * @default 0
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
+   **/
+  letterSpacing: number;
+}
+
+export abstract class FontShaper {
+  /**
+   * Returns the glyph IDs of the next
+   *
+   * @remarks
+   * If this returns undefined, a glyph for the next codepoint(s) could not be found.
+   *
+   * @param codepoints
+   */
+  abstract shapeText(
+    props: FontShaperProps,
+    codepoints: PeekableIterator<number>,
+  ): Generator<MappedGlyphInfo | UnmappedCharacterInfo, void>;
+}