@lightningjs/renderer 3.0.0-beta14 → 3.0.0-beta15

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

@@ -0,0 +1,125 @@
+/*
+ * 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 { WebGlCoreRenderer } from '../../../renderers/webgl/WebGlCoreRenderer.js';
+import { ImageTexture } from '../../../textures/ImageTexture.js';
+import { TrFontFace, } from '../TrFontFace.js';
+import { fetchJson } from '../utils.js';
+import { SdfFontShaper } from './internal/SdfFontShaper.js';
+export class SdfTrFontFace extends TrFontFace {
+    type;
+    texture;
+    /**
+     * Height of the tallest character in the font including the whitespace above it
+     * in SDF/vertex units.
+     */
+    maxCharHeight = 0;
+    shaper;
+    glyphMap = new Map();
+    data;
+    constructor(type, options) {
+        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
+        fetchJson(atlasDataUrl)
+            .then((response) => {
+            this.data = JSON.parse(response);
+            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 = maxCharHeight;
+            // We know `data` is defined here, because we just set it
+            this.shaper = 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 = {
+                        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) {
+        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,
+        };
+    }
+    checkLoaded() {
+        if (this.loaded)
+            return;
+        if (this.texture.state === 'loaded' && this.data) {
+            this.loaded = true;
+            this.emit('loaded');
+        }
+    }
+}
+//# sourceMappingURL=SdfTrFontFace.js.map

package/dist/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SdfTrFontFace.js","sourceRoot":"","sources":["../../../../../../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,103 @@
+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 declare 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>;
+}

package/dist/src/core/text-rendering/{sdf/index.js → font-face-types/SdfTrFontFace/internal/FontShaper.js}

@@ -2,7 +2,7 @@
  * If not stated otherwise in this file or this component's LICENSE file the
  * following copyright and licenses apply:
  *
- * Copyright 2025 Comcast Cable Communications Management, LLC.
+ * 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.
@@ -16,5 +16,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './Utils.js';
-//# sourceMappingURL=index.js.map
+export class FontShaper {
+}
+//# sourceMappingURL=FontShaper.js.map

package/dist/src/core/text-rendering/font-face-types/SdfTrFontFace/internal/FontShaper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontShaper.js","sourceRoot":"","sources":["../../../../../../../src/core/text-rendering/font-face-types/SdfTrFontFace/internal/FontShaper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AA4GH,MAAM,OAAgB,UAAU;CAa/B"}

package/dist/src/core/text-rendering/font-face-types/SdfTrFontFace/internal/SdfFontShaper.d.ts

@@ -0,0 +1,62 @@
+import type { PeekableIterator } from '../../../renderers/SdfTextRenderer/internal/PeekableGenerator.js';
+import type { FontMetrics } from '../../TrFontFace.js';
+import { FontShaper, type FontShaperProps, type MappedGlyphInfo, type UnmappedCharacterInfo } from './FontShaper.js';
+export declare class SdfFontShaper extends FontShaper {
+    private readonly data;
+    private readonly glyphMap;
+    private readonly kernings;
+    constructor(data: SdfFontData, glyphMap: Map<number, SdfFontData['chars'][0]>);
+    shapeText(props: FontShaperProps, codepoints: PeekableIterator<number>): Generator<MappedGlyphInfo | UnmappedCharacterInfo, void>;
+}
+export interface SdfFontData {
+    pages: string[];
+    chars: Array<{
+        id: number;
+        char: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        xoffset: number;
+        yoffset: number;
+        xadvance: number;
+        page: number;
+        chnl: number;
+    }>;
+    kernings: Array<{
+        first: number;
+        second: number;
+        amount: number;
+    }>;
+    info: {
+        face: string;
+        size: number;
+        bold: number;
+        italic: number;
+        charset: string[];
+        unicode: number;
+        stretchH: number;
+        smooth: number;
+        aa: number;
+        padding: [number, number, number, number];
+        spacing: [number, number];
+        outline: number;
+    };
+    common: {
+        lineHeight: number;
+        base: number;
+        scaleW: number;
+        scaleH: number;
+        pages: number;
+        packed: number;
+        alphaChnl: number;
+        redChnl: number;
+        greenChnl: number;
+        blueChnl: number;
+    };
+    distanceField: {
+        fieldType: 'sdf' | 'msdf';
+        distanceRange: number;
+    };
+    lightningMetrics?: FontMetrics;
+}

package/dist/src/core/text-rendering/font-face-types/SdfTrFontFace/internal/SdfFontShaper.js

@@ -0,0 +1,88 @@
+/*
+ * 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 { SpecialCodepoints } from '../../../renderers/SdfTextRenderer/internal/SpecialCodepoints.js';
+import { FontShaper, } from './FontShaper.js';
+export class SdfFontShaper extends FontShaper {
+    data;
+    glyphMap;
+    kernings;
+    constructor(data, glyphMap) {
+        super();
+        this.data = data;
+        this.glyphMap = glyphMap;
+        const kernings = (this.kernings = {});
+        data.kernings.forEach((kerning) => {
+            const second = kerning.second;
+            const firsts = (kernings[second] = kernings[second] || {});
+            firsts[kerning.first] = kerning.amount;
+        });
+        this.kernings = kernings;
+    }
+    *shapeText(props, codepoints) {
+        let codepointResult;
+        let lastGlyphId = undefined;
+        while ((codepointResult = codepoints.peek()) && !codepointResult.done) {
+            const codepoint = codepointResult.value;
+            const glyph = this.glyphMap.get(codepoint);
+            codepoints.next();
+            if (glyph !== undefined) {
+                // We found a glyph for this codepoint
+                // Yield the mapped glyph info
+                /**
+                 * Kerning includes any possible additional letter spacing
+                 */
+                const kerning = lastGlyphId !== undefined
+                    ? (this.kernings[glyph.id]?.[lastGlyphId] || 0) +
+                        props.letterSpacing
+                    : 0;
+                lastGlyphId = glyph.id;
+                yield {
+                    mapped: true,
+                    glyphId: glyph.id,
+                    codepoint,
+                    cluster: codepoints.lastIndex,
+                    xAdvance: glyph.xadvance + kerning,
+                    yAdvance: 0,
+                    xOffset: glyph.xoffset + kerning,
+                    yOffset: glyph.yoffset,
+                    xBearing: 0,
+                    yBearing: 0,
+                    width: glyph.width,
+                    height: glyph.height,
+                };
+            }
+            else {
+                // We didn't find a glyph for this codepoint
+                // Yield the unmapped codepoint info
+                // If this codepoint is a linebreak, we should reset the last glyph id
+                // so that the next glyph will not be kerned with the last glyph of the
+                // previous line.
+                if (codepoint === SpecialCodepoints.LINE_FEED) {
+                    lastGlyphId = undefined;
+                }
+                yield {
+                    mapped: false,
+                    codepoint,
+                    cluster: codepoints.lastIndex,
+                };
+            }
+        }
+    }
+}
+//# sourceMappingURL=SdfFontShaper.js.map

package/dist/src/core/text-rendering/font-face-types/SdfTrFontFace/internal/SdfFontShaper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SdfFontShaper.js","sourceRoot":"","sources":["../../../../../../../src/core/text-rendering/font-face-types/SdfTrFontFace/internal/SdfFontShaper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,kEAAkE,CAAC;AAErG,OAAO,EACL,UAAU,GAIX,MAAM,iBAAiB,CAAC;AAUzB,MAAM,OAAO,aAAc,SAAQ,UAAU;IAC1B,IAAI,CAAc;IAClB,QAAQ,CAAuC;IAC/C,QAAQ,CAAe;IAExC,YACE,IAAiB,EACjB,QAA8C;QAE9C,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEzB,MAAM,QAAQ,GAAiB,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC;QACpD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAChC,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;YAC9B,MAAM,MAAM,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,CAAC,SAAS,CACR,KAAsB,EACtB,UAAoC;QAEpC,IAAI,eAAuC,CAAC;QAC5C,IAAI,WAAW,GAAuB,SAAS,CAAC;QAChD,OAAO,CAAC,eAAe,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;YACtE,MAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC;YACxC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YAC3C,UAAU,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,sCAAsC;gBACtC,8BAA8B;gBAE9B;;mBAEG;gBACH,MAAM,OAAO,GACX,WAAW,KAAK,SAAS;oBACvB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;wBAC7C,KAAK,CAAC,aAAa;oBACrB,CAAC,CAAC,CAAC,CAAC;gBAER,WAAW,GAAG,KAAK,CAAC,EAAE,CAAC;gBACvB,MAAM;oBACJ,MAAM,EAAE,IAAI;oBACZ,OAAO,EAAE,KAAK,CAAC,EAAE;oBACjB,SAAS;oBACT,OAAO,EAAE,UAAU,CAAC,SAAS;oBAC7B,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,OAAO;oBAClC,QAAQ,EAAE,CAAC;oBACX,OAAO,EAAE,KAAK,CAAC,OAAO,GAAG,OAAO;oBAChC,OAAO,EAAE,KAAK,CAAC,OAAO;oBACtB,QAAQ,EAAE,CAAC;oBACX,QAAQ,EAAE,CAAC;oBACX,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,MAAM,EAAE,KAAK,CAAC,MAAM;iBACrB,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,4CAA4C;gBAC5C,oCAAoC;gBAEpC,sEAAsE;gBACtE,uEAAuE;gBACvE,iBAAiB;gBACjB,IAAI,SAAS,KAAK,iBAAiB,CAAC,SAAS,EAAE,CAAC;oBAC9C,WAAW,GAAG,SAAS,CAAC;gBAC1B,CAAC;gBACD,MAAM;oBACJ,MAAM,EAAE,KAAK;oBACb,SAAS;oBACT,OAAO,EAAE,UAAU,CAAC,SAAS;iBAC9B,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;CACF"}

package/dist/src/core/text-rendering/font-face-types/TrFontFace.d.ts

@@ -0,0 +1,118 @@
+import { EventEmitter } from '../../../common/EventEmitter.js';
+/**
+ * Augmentable map of font type IDs to font types
+ *
+ * @example
+ * ```ts
+ * declare module './TrFontFace' {
+ *   interface TrFontFaceMap {
+ *     canvas: CanvasTrFontFace;
+ *   }
+ * }
+ * ```
+ */
+export interface TrFontFaceMap {
+}
+/**
+ * Descriptors defining a font face.
+ *
+ * Used when selecting a font face from a font family.
+ *
+ * @remarks
+ * Based on the `@font-face` CSS rule. Not all descriptors are supported by all
+ * text renderers.
+ *
+ * @see https://www.w3.org/TR/css-fonts-3/#font-face-rule
+ */
+export interface TrFontFaceDescriptors {
+    style: 'normal' | 'italic' | 'oblique';
+    weight: 'normal' | 'bold' | number;
+    stretch: 'normal' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded';
+    unicodeRange?: string;
+    display?: FontDisplay;
+    featureSettings?: string;
+}
+export interface FontMetrics {
+    /**
+     * The distance, in font units, from the baseline to the highest point of the font.
+     */
+    ascender: number;
+    /**
+     * The distance, in font units, from the baseline to the lowest point of the font.
+     */
+    descender: number;
+    /**
+     * The additional space used in the calculation of the default line height in font units.
+     */
+    lineGap: number;
+    /**
+     * The number of font units per 1 EM.
+     */
+    unitsPerEm: number;
+}
+export interface NormalizedFontMetrics {
+    /**
+     * The distance, as a fraction of 1 EM, from the baseline to the highest point of the font.
+     *
+     * @remarks
+     * This value should be positive.
+     */
+    ascender: number;
+    /**
+     * The distance, as a fraction of 1 EM, from the baseline to the lowest point of the font.
+     *
+     * @remarks
+     * This value should be positive.
+     */
+    descender: number;
+    /**
+     * The additional space used in the calculation of the default line height as a fraction of 1 EM
+     *
+     * @remarks
+     * This value should be positive.
+     */
+    lineGap: number;
+}
+export interface TrFontFaceOptions {
+    fontFamily: string;
+    descriptors: Partial<TrFontFaceDescriptors>;
+    /**
+     * Font metrics used for layout and default line height calculations.
+     *
+     * @remarks
+     * Provides the font metrics in order to ensure consistent text layout across
+     * different font types (Canvas/Web, SDF, etc.).
+     *
+     * **Important**: We HIGHLY recommend providing these metrics for both SDF
+     * and Web/Canvas fonts. You can use the Lightning 3 [msdf-generator](https://github.com/lightning-js/msdf-generator/)
+     * tool to generate these metrics from a font file. The metrics generated by
+     * this tool can be used with both SDF and Web/Canvas fonts.
+     *
+     * If not provided, a warning will be logged and the text layout may not be
+     * consistent across different font types.
+     *
+     * If not provided, the metrics will be gathered depending on the font type.
+     * - For SDF fonts, the metrics will be gathered from the font atlas data.
+     *   If the font is generated using Lightning 3's msdf-generator tool, the
+     *   metrics will be the most accurate.
+     * - For Web/Canvas fonts, the metrics will be gathered from the
+     *   CanvasRenderingContext2D.measureText() method. The accuracy/consistency
+     *   of these metrics depends on the browser implementation. And will not
+     *   guarantee the line-by-line alignment of text with SDF fonts.
+     */
+    metrics?: FontMetrics;
+}
+export declare class TrFontFace extends EventEmitter {
+    readonly fontFamily: string;
+    readonly descriptors: TrFontFaceDescriptors;
+    readonly loaded: boolean;
+    readonly metrics: NormalizedFontMetrics | null;
+    constructor(options: TrFontFaceOptions);
+    /**
+     * Convert a TrFontFaceDescriptors to a FontFaceDescriptors which differ slightly
+     *
+     * @param descriptors
+     * @returns
+     */
+    static convertToCssFontFaceDescriptors(descriptors: TrFontFaceDescriptors): FontFaceDescriptors;
+}

package/dist/src/core/text-rendering/font-face-types/TrFontFace.js

@@ -0,0 +1,63 @@
+/*
+ * 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 { EventEmitter } from '../../../common/EventEmitter.js';
+export class TrFontFace extends EventEmitter {
+    fontFamily;
+    descriptors;
+    loaded = false;
+    metrics = null;
+    constructor(options) {
+        super();
+        const { fontFamily, descriptors, metrics } = options;
+        if (metrics) {
+            // Normalize metrics to be in the range of 0 to 1
+            this.metrics = {
+                ascender: metrics.ascender / metrics.unitsPerEm,
+                descender: metrics.descender / metrics.unitsPerEm,
+                lineGap: metrics.lineGap / metrics.unitsPerEm,
+            };
+        }
+        this.fontFamily = fontFamily;
+        this.descriptors = {
+            style: 'normal',
+            weight: 'normal',
+            stretch: 'normal',
+            ...descriptors,
+        };
+    }
+    /**
+     * Convert a TrFontFaceDescriptors to a FontFaceDescriptors which differ slightly
+     *
+     * @param descriptors
+     * @returns
+     */
+    static convertToCssFontFaceDescriptors(descriptors) {
+        return {
+            style: descriptors.style,
+            weight: typeof descriptors.weight === 'number'
+                ? `${descriptors.weight}`
+                : descriptors.weight,
+            stretch: descriptors.stretch,
+            unicodeRange: descriptors.unicodeRange,
+            featureSettings: descriptors.featureSettings,
+            display: descriptors.display,
+        };
+    }
+}
+//# sourceMappingURL=TrFontFace.js.map

package/dist/src/core/text-rendering/font-face-types/TrFontFace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrFontFace.js","sourceRoot":"","sources":["../../../../../src/core/text-rendering/font-face-types/TrFontFace.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAuH/D,MAAM,OAAO,UAAW,SAAQ,YAAY;IAC1B,UAAU,CAAS;IACnB,WAAW,CAAwB;IACnC,MAAM,GAAY,KAAK,CAAC;IACxB,OAAO,GAAiC,IAAI,CAAC;IAE7D,YAAY,OAA0B;QACpC,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;QAErD,IAAI,OAAO,EAAE,CAAC;YACZ,iDAAiD;YACjD,IAAI,CAAC,OAAO,GAAG;gBACb,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC,UAAU;gBAC/C,SAAS,EAAE,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,UAAU;gBACjD,OAAO,EAAE,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,UAAU;aAC9C,CAAC;QACJ,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG;YACjB,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,QAAQ;YACjB,GAAG,WAAW;SACf,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACI,MAAM,CAAC,+BAA+B,CAC3C,WAAkC;QAElC,OAAO;YACL,KAAK,EAAE,WAAW,CAAC,KAAK;YACxB,MAAM,EACJ,OAAO,WAAW,CAAC,MAAM,KAAK,QAAQ;gBACpC,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE;gBACzB,CAAC,CAAC,WAAW,CAAC,MAAM;YACxB,OAAO,EAAE,WAAW,CAAC,OAAO;YAC5B,YAAY,EAAE,WAAW,CAAC,YAAY;YACtC,eAAe,EAAE,WAAW,CAAC,eAAe;YAC5C,OAAO,EAAE,WAAW,CAAC,OAAO;SAC7B,CAAC;IACJ,CAAC;CACF"}

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

@@ -0,0 +1,14 @@
+import { TrFontFace, type TrFontFaceOptions } from './TrFontFace.js';
+declare module './TrFontFace.js' {
+    interface TrFontFaceMap {
+        web: WebTrFontFace;
+    }
+}
+export interface WebTrFontFaceOptions extends TrFontFaceOptions {
+    fontUrl: string;
+}
+export declare class WebTrFontFace extends TrFontFace {
+    readonly fontFace: FontFace;
+    readonly fontUrl: string;
+    constructor(options: WebTrFontFaceOptions);
+}