@needle-tools/engine 3.2.15-alpha → 3.3.0-alpha

package/src/engine-components/ui/Text.ts

@@ -1,13 +1,12 @@
 import { Graphic } from './Graphic';
 import * as ThreeMeshUI from 'three-mesh-ui'
-import { $shadowDomOwner, includesDir } from "./BaseUIComponent";
-import { RectTransform } from './RectTransform';
+import { DocumentedOptions as ThreeMeshUIEveryOptions } from "three-mesh-ui/build/types/core/elements/MeshUIBaseElement";
 import { Color } from 'three';
-import { FrameEvent } from '../../engine/engine_setup';
 import { updateRenderSettings } from './Utils';
 import { Canvas } from './Canvas';
 import { serializable } from '../../engine/engine_serialization_decorator';
 import { getParam, resolveUrl } from '../../engine/engine_utils';
+import { ICanvas } from './Interfaces';
 
 const debug = getParam("debugtext");
 
@@ -32,7 +31,7 @@ enum HorizontalWrapMode {
     Overflow = 1,
 }
 
-enum FontStyle {
+export enum FontStyle {
     Normal = 0,
     Bold = 1,
     Italic = 2,
@@ -53,7 +52,7 @@ export class Text extends Graphic {
     lineSpacing: number = 1;
     @serializable()
     supportRichText: boolean = false;
-    @serializable()
+    @serializable(URL)
     font?: string;
     @serializable()
     fontStyle: FontStyle = FontStyle.Normal;
@@ -62,94 +61,108 @@ export class Text extends Graphic {
     get text(): string {
         return this._text;
     }
+
     set text(val: string) {
+
+
         this._text = val;
-        if (!this._textMeshUi && this._text.length > 0 && this.context.time.frame > 0) {
-            this.createText(val, this.getTextOpts(), this.supportRichText);
-        }
-        if (this._textMeshUi) {
-            if (this._textMeshUi.length > 1) {
-                this.requestRebuild();
-                return;
-            }
-            //@ts-ignore
-            this._textMeshUi[0].set({ content: val });
-            this.markDirty();
-        }
+        this.feedText(this.text, this.supportRichText);
     }
+
     private set_text(val: string) {
         this.text = val;
     }
 
     @serializable()
-    get fontSize(): number { return this._fontSize; }
+    get fontSize(): number {
+        return this._fontSize;
+    }
+
     set fontSize(val: number) {
+
+        // Setting that kind of property in a parent, would cascade to each 'non-overrided' children.
         this._fontSize = val;
-        if (this._textMeshUi) {
-            if (this._textMeshUi.length > 1) {
-                this.requestRebuild();
-                return;
-            }
-            //@ts-ignore
-            this._textMeshUi[0].set({ fontSize: val });
-            this.markDirty();
-        }
+        this.uiObject?.set({ fontSize: val });
+
     }
 
+
     protected onColorChanged(): void {
-        if (this._textMeshUi) {
-            if (this._textMeshUi.length > 1) {
-                this.requestRebuild();
-                return;
-            }
-            const col = this.color;
-            //@ts-ignore
-            this._textMeshUi[0].set({ fontColor: col, fontOpacity: col.alpha });
-            this.markDirty();
+        this.uiObject?.set({ color: this.color, fontOpacity: this.color.alpha });
+    }
+
+    onParentRectTransformChanged(): void {
+        super.onParentRectTransformChanged();
+        if (this.uiObject) {
+            this.updateOverflow();
         }
     }
 
-    private _isWaitingForRebuild: boolean = false;
-    private requestRebuild() {
-        if (this._isWaitingForRebuild) return;
-        this._isWaitingForRebuild = true,
-            this.startCoroutine(this.rebuildDelayedRoutine(), FrameEvent.EarlyUpdate);
+    onBeforeRender(): void {
+        if (this.uiObject && (this.Root as any as ICanvas).screenspace) {
+            this.updateOverflow();
+        }
     }
-    private *rebuildDelayedRoutine() {
-        this._isWaitingForRebuild = false;
-        if (this._textMeshUi) {
-            for (const text of this._textMeshUi) {
-                text.removeFromParent();
-            }
-            this._textMeshUi.length = 0;
+
+    private updateOverflow() {
+        // HACK: force the text overflow to update
+        const overflow = (this.uiObject as any)?._overflow;
+        if (overflow) {
+            overflow._needsUpdate = true;
+            this.markDirty();
         }
-        this.createText(this.text, this.getTextOpts(), this.supportRichText);
-        this.markDirty();
     }
 
     protected onCreate(_opts: any): void {
         if (debug) console.log(this);
-        const hideOverflow = this.verticalOverflow == VerticalWrapMode.Truncate && this.horizontalOverflow == HorizontalWrapMode.Wrap;
-        if (hideOverflow)
+
+        if (this.horizontalOverflow == HorizontalWrapMode.Overflow) {
+            // Only line characters in the textContent (\n,\r\t) would be able to multiline the text
+            _opts.whiteSpace = 'pre';
+        }
+
+        if (this.verticalOverflow == VerticalWrapMode.Truncate) {
             this.context.renderer.localClippingEnabled = true;
+            _opts.overflow = 'hidden';
+        }
+
+
+        // @marwie : this combination is currently KO. See sample "Overflow Overview"
+        if (this.horizontalOverflow == HorizontalWrapMode.Overflow && this.verticalOverflow == VerticalWrapMode.Truncate) {
+            // This could fix this combination, but would require anchors updates to replace element
+            // _opts.width = 'auto';
+        }
+
+
+        _opts.lineHeight = this.lineSpacing;
+
+        // @marwie : Should be fixed. Currently _opts are always fed with :
+        //          backgroundOpacity : color.opacity
+        //          backgroundColor : color
+        delete _opts.backgroundOpacity;
+        delete _opts.backgroundColor;
+
+        // helper to show bounds of text element
+        if (debug) {
+            _opts.backgroundColor = 0xff9900;
+            _opts.backgroundOpacity = 0.5;
+        }
 
         const rt = this.rectTransform;
-        // this._container = this._textMeshUi;
-        // every mesh ui component must be inside a block
-        // images emit nothing but blocks
-        // this code should probably be moved somewhere else and also handle raw image / anything that emits block (sprite?)
-        // so we only add extra blocks if the parent doesnt have one yet
-        // maybe we can just ask the component the text will be added to to not rely on our unity components?
-        // this can hopefully be removed once this is fixed/improved: https://github.com/felixmariotto/three-mesh-ui/issues/168
-        this._textContainer = this.uiObject = this.createBlock(rt, hideOverflow, null, true);
 
+        // Texts now support both options, block and inline, and inline has all default to inherit
+        _opts = { ..._opts, ...this.getTextOpts() };
 
-        this.createText(this.text, this.getTextOpts(), this.supportRichText);
-        if (this.uiObject) {
-            //@ts-ignore
-            // this._container.width += this.fontSize * .333; // avoid word wrapping
+        this.getAlignment(_opts);
+
+        if (debug) {
+            _opts.backgroundColor = Math.random() * 0xffffff;
+            _opts.backgroundOpacity = 0.1;
         }
-        this.uiObject = this.createBlock(rt, hideOverflow, this.uiObject, false);
+
+        this.uiObject = rt.createNewText(_opts);
+        this.feedText(this.text, this.supportRichText);
+
     }
 
     onAfterAddedToScene() {
@@ -159,8 +172,9 @@ export class Text extends Graphic {
 
     private _text: string = "";
     private _fontSize: number = 12;
-    private _textMeshUi: Array<ThreeMeshUI.Text> | null = null;
-    private _textContainer: ThreeMeshUI.Block | null = null;
+
+    private _textMeshUi: Array<ThreeMeshUI.Inline> | null = null;
+
 
     private getTextOpts(): object {
         let fontSize = this.fontSize;
@@ -168,15 +182,15 @@ export class Text extends Graphic {
         //     fontSize /= this.canvas?.scaleFactor;
         // }
 
-        // @TODO : THH check for changes. fontColor => color?
+
         const textOpts = {
-            content: this.text,
-            fontColor: this.color,
+            color: this.color,
             fontOpacity: this.color.alpha,
             fontSize: fontSize,
             fontKerning: "normal",
+
         };
-        this.setFont(textOpts, this.fontStyle);
+        this.setFont(textOpts as ThreeMeshUIEveryOptions, this.fontStyle);
         return textOpts;
     }
 
@@ -186,190 +200,128 @@ export class Text extends Graphic {
         this._didHandleTextRenderOnTop = false;
         if (this.uiObject) {
             // @ts-ignore
-            this.uiObject.onAfterUpdate = () => {
-                this.updateWidth();
+
+            // @TODO :  Evaluate the need of keeping it anonymous.
+            //          From v7.x afterUpdate can be removed but requires a reference
+            this.uiObject.addAfterUpdate(() => {
                 // We need to update the shadow owner when the text updates
                 // because once the font has loaded we get new children (a new mesh)
-                // which is the text, it needs to be linked back to this component 
+                // which is the text, it needs to be linked back to this component
                 // to be properly handled by the EventSystem
                 // since the EventSystem looks for shadow component owners to handle events
                 this.setShadowComponentOwner(this.uiObject);
                 this.markDirty();
-            };
+            });
         }
 
-        setTimeout(()=> this.markDirty(), 10);
+        setTimeout(() => this.markDirty(), 10);
     }
 
-    private createBlock(rt: RectTransform, hideOverflow: boolean, content: THREE.Object3D | Array<THREE.Object3D> | null, isTextIntermediate: boolean = false): ThreeMeshUI.Block | null {
-        //@ts-ignore
-        const opts: ThreeMeshUI.BlockOptions = {};
-
-        // @TODO : THH would require update for 7.x
-        opts.hiddenOverflow = hideOverflow;
-
-        // @TODO : THH would require update for 7.x
-        opts.interLine = (this.lineSpacing - 1) * this.fontSize * 1.333;
-
-        this.getAlignment(opts, isTextIntermediate);
-        const block = rt.createNewBlock(opts);
-        // The text block should never write depth to avoid z-fighting
-        const mat = block["backgroundMaterial"];
-        if(mat) mat.depthWrite = false;
-        if (content) {
-            if (Array.isArray(content)) {
-                block.add(...content);
-            } else {
-                block.add(content);
-            }
-        }
-        return block;
-    }
+    private getAlignment(opts: ThreeMeshUIEveryOptions): ThreeMeshUIEveryOptions {
 
-
-    private getAlignment(opts: ThreeMeshUI.BlockOptions | any, isTextIntermediate: boolean = false): ThreeMeshUI.BlockOptions {
-        if (!isTextIntermediate) {
-            opts.contentDirection = "row";
-
-            switch (this.alignment) {
-                case TextAnchor.UpperLeft:
-                case TextAnchor.MiddleLeft:
-                case TextAnchor.LowerLeft:
-                    opts.textAlign = "left";
-                    break;
-                case TextAnchor.UpperCenter:
-                case TextAnchor.MiddleCenter:
-                case TextAnchor.LowerCenter:
-                    opts.textAlign = "center";
-
-                    break;
-                case TextAnchor.UpperRight:
-                case TextAnchor.MiddleRight:
-                case TextAnchor.LowerRight:
-                    opts.textAlign = "right";
-                    break;
-            }
-        }
+        opts.flexDirection = "column";
 
         switch (this.alignment) {
-            // @info ThreeMeshUI remaining alignment : space-between|space-around|"stretch(experimental)"
-            default:
             case TextAnchor.UpperLeft:
-            case TextAnchor.UpperCenter:
-            case TextAnchor.UpperRight:
-                opts.justifyContent = "start";
-                break;
             case TextAnchor.MiddleLeft:
-            case TextAnchor.MiddleCenter:
-            case TextAnchor.MiddleRight:
-                opts.justifyContent = "center";
-                break;
             case TextAnchor.LowerLeft:
+                opts.textAlign = "left";
+                break;
+            case TextAnchor.UpperCenter:
+            case TextAnchor.MiddleCenter:
             case TextAnchor.LowerCenter:
+                opts.textAlign = "center";
+
+                break;
+            case TextAnchor.UpperRight:
+            case TextAnchor.MiddleRight:
             case TextAnchor.LowerRight:
-                opts.justifyContent = "end";
+                opts.textAlign = "right";
                 break;
         }
 
-        // @TODO :  THH evaluate this is still useful. In case of texts, horizontal alignments are made with textAlign
+
         switch (this.alignment) {
+            default:
             case TextAnchor.UpperLeft:
-            case TextAnchor.MiddleLeft:
-            case TextAnchor.LowerLeft:
+            case TextAnchor.UpperCenter:
+            case TextAnchor.UpperRight:
                 opts.alignItems = "start";
                 break;
-            case TextAnchor.UpperCenter:
+            case TextAnchor.MiddleLeft:
             case TextAnchor.MiddleCenter:
-            case TextAnchor.LowerCenter:
+            case TextAnchor.MiddleRight:
                 opts.alignItems = "center";
-
                 break;
-            case TextAnchor.UpperRight:
-            case TextAnchor.MiddleRight:
+            case TextAnchor.LowerLeft:
+            case TextAnchor.LowerCenter:
             case TextAnchor.LowerRight:
                 opts.alignItems = "end";
                 break;
         }
-        return opts;
-    }
 
-    private updateWidth() {
-        if (this.horizontalOverflow === HorizontalWrapMode.Overflow) {
-            setTimeout(() => {
-                if (!this._textMeshUi) return;
-                const container = this._textMeshUi[0].parent;
-                if (!container) return;
-                //@ts-ignore
-                if (container.lines) {
-                    //@ts-ignore
-                    let newWidth = container.lines.reduce((accu, line) => { return accu + line.width }, 0);
-                    //@ts-ignore
-                    newWidth += container.getFontSize() * 5;
-                    //@ts-ignore
-                    newWidth += (container.padding * 2 || 0);
-                    newWidth += this.fontSize * 1.5;
-                    // TODO: handle alignment!
-                    // const pos = container.position;
-                    // pos.x = this.gameObject.position.x * -.01 + newWidth * .5 - this.rect.sizeDelta.x * .005;
-                    // this._textMeshUi.set({ position: pos });
-                    //@ts-ignore
-                    container.set({ width: newWidth });
-                    this.ensureShadowComponentOwner();
-                }
-            }, 1);
-        }
+        return opts;
     }
 
-    private ensureShadowComponentOwner() {
-        if (this.shadowComponent) {
-            this.shadowComponent.traverse(c => {
-                if (c[$shadowDomOwner] === undefined)
-                    c[$shadowDomOwner] = this;
-            });
-        }
-    }
+    private feedText(text: string, richText: boolean) {
+        // if (!text || text.length <= 0) return;
+        // if (!text ) return;
 
-    private createText(text: string, opts: any, richText: boolean) {
-        if (!text || text.length <= 0) return;
+        if (!this.uiObject) return null;
         if (!this._textMeshUi)
             this._textMeshUi = [];
-        if (!richText) {
-            // console.log(text)
-            const opt = { ...opts };
-            opt.content = text;
-            const element = new ThreeMeshUI.Text(opt);
-            this._textMeshUi.push(element);
-            if (this._textContainer) {
-                this._textContainer.add(element);
-            }
-        }
-        else {
+
+        // this.uiObject.textContent = text;
+        // return ;
+
+        if (!richText || text.length === 0) {
+            //@TODO: @swingingtom how would the text content be set?
+            //@ts-ignore
+            this.uiObject.textContent = text;
+        } else {
+
+
             let currentTag: TagInfo | null = this.getNextTag(text);
             if (!currentTag) {
-                return this.createText(text, opts, false);
-            }
-            else if (currentTag.startIndex > 0) {
-                this.createText(text.substring(0, currentTag.startIndex), opts, false);
+                //@TODO: @swingingtom how would the text content be set?
+                //@ts-ignore
+                return this.uiObject.textContent = text;
+            } else if (currentTag.startIndex > 0) {
+                this.uiObject.add(new ThreeMeshUI.Inline({ textContent: text.substring(0, currentTag.startIndex), color: 'inherit' }))
             }
             const stackArray: Array<TagStackEntry> = [];
             while (currentTag) {
                 const next = this.getNextTag(text, currentTag.endIndex);
+
+                const opts = {
+                    fontFamily: this.uiObject?.get('fontFamily'),
+                    color: 'inherit',
+                    textContent: ""
+                }
+
                 if (next) {
-                    const content = this.getText(text, currentTag, next);
+
+                    opts.textContent = this.getText(text, currentTag, next);
+
                     this.handleTag(currentTag, opts, stackArray);
-                    this.createText(content, opts, false);
-                }
-                else {
-                    const content = text.substring(currentTag.endIndex);
+                    this.uiObject?.add(new ThreeMeshUI.Inline(opts))
+
+                } else {
+
+                    opts.textContent = text.substring(currentTag.endIndex);
+
                     this.handleTag(currentTag, opts, stackArray);
-                    this.createText(content, opts, false);
+                    this.uiObject?.add(new ThreeMeshUI.Inline(opts))
                 }
                 currentTag = next;
             }
         }
+
+        return null;
     }
 
     private _didHandleTextRenderOnTop: boolean = false;
+
     private handleTextRenderOnTop() {
         if (this._didHandleTextRenderOnTop) return;
         this._didHandleTextRenderOnTop = true;
@@ -377,11 +329,17 @@ export class Text extends Graphic {
     }
 
     // waits for all the text objects to be ready to set the render on top setting
-    private *renderOnTopCoroutine() {
+    // @THH :  this isn't true anymore. We can set mesh and material properties before their counterparts are created.
+    //         Values would automatically be passed when created. Not sure for depthWrite but it can be added;
+    private * renderOnTopCoroutine() {
         if (!this.canvas) return;
         const updatedRendering: boolean[] = [];
         const canvas = this.canvas;
-        const settings = { renderOnTop: canvas.renderOnTop, depthWrite: canvas.depthWrite, doubleSided: canvas.doubleSided };
+        const settings = {
+            renderOnTop: canvas.renderOnTop,
+            depthWrite: canvas.depthWrite,
+            doubleSided: canvas.doubleSided
+        };
         while (true) {
             let isWaitingForElementToUpdate = false;
             if (this._textMeshUi) {
@@ -407,36 +365,31 @@ export class Text extends Graphic {
         // console.log(tag);
         if (!tag.isEndTag) {
             if (tag.type.includes("color")) {
-                const stackEntry = new TagStackEntry(tag, { fontColor: opts.fontColor });
+                const stackEntry = new TagStackEntry(tag, { color: opts.color });
                 stackArray.push(stackEntry);
                 if (tag.type.length > 6) // color=
                 {
-                    const col = tag.type.substring(6);
-                    opts.fontColor = new Color(col);
-                }
-                else {
+                    const col = parseInt("0x" + tag.type.substring(7));
+                    opts.color = col;
+                } else {
                     // if it does not contain a color it is white
-                    opts.fontColor = new Color(1, 1, 1);
+                    opts.color = new Color(1, 1, 1);
                 }
-            }
-            else if (tag.type == "b") {
+            } else if (tag.type == "b") {
+                this.setFont(opts, FontStyle.Bold);
                 const stackEntry = new TagStackEntry(tag, {
-                    fontFamily: opts.fontFamily,
-                    fontTexture: opts.fontTexture,
+                    fontWeight: 700,
                 });
                 stackArray.push(stackEntry);
-                this.setFont(opts, FontStyle.Bold);
-            }
-            else if (tag.type == "i") {
+            } else if (tag.type == "i") {
+                this.setFont(opts, FontStyle.Italic);
                 const stackEntry = new TagStackEntry(tag, {
-                    fontFamily: opts.fontFamily,
-                    fontTexture: opts.fontTexture,
+                    fontStyle: 'italic'
                 });
                 stackArray.push(stackEntry);
-                this.setFont(opts, FontStyle.Italic);
+
             }
-        }
-        else {
+        } else {
             if (stackArray.length > 0) {
                 const last = stackArray.pop();
                 if (last) {
@@ -464,60 +417,126 @@ export class Text extends Graphic {
         return null;
     }
 
-    private setFont(opts: any, fontStyle: FontStyle) {
-        const name = this.getFontStyleName(fontStyle);
-        let family = name;
-        if (!family?.endsWith("-msdf.json")) family += "-msdf.json";
-        opts.fontFamily = family;
-
-        let texture = name;
-        if (!texture?.endsWith(".png")) texture += ".png";
-        opts.fontTexture = texture;
-    }
-
-    private getFontStyleName(style: FontStyle): string | null {
-        if (!this.font) return null;
-        let fontName = this.font;
-
-        // if a font path has a known suffix we remove it
-        const fontNameLower = fontName.toLowerCase();
-        if (fontNameLower.endsWith("-regular")) {
-            if (style === FontStyle.Normal) return resolveUrl(this.sourceId, fontName);
-                fontName = fontName.substring(0, fontName.length - "-regular".length);
-        }
-        else if (fontNameLower.endsWith("-bold")) {
-            if (style === FontStyle.Bold)return resolveUrl(this.sourceId, fontName);
-                fontName = fontName.substring(0, fontName.length - "-bold".length);
-        }
-        else if (fontNameLower.endsWith("-italic")) {
-            if (style === FontStyle.Italic)return resolveUrl(this.sourceId, fontName);
-                fontName = fontName.substring(0, fontName.length - "-italic".length);
-        }
-        else if (fontNameLower.endsWith("-bolditalic")) {
-            if (style === FontStyle.BoldAndItalic)return resolveUrl(this.sourceId, fontName);
-                fontName = fontName.substring(0, fontName.length - "-bolditalic".length);
-        }
-        else
-            // If a font does not have a specific style suffic we dont support getting the correct font style
-            return resolveUrl(this.sourceId, fontName);
+    /**
+     * Update provided opts to have a proper fontDefinition : family+weight+style
+     * Ensure Family and Variant are registered in FontLibrary
+     *
+     * @param opts
+     * @param fontStyle
+     * @private
+     */
+    private setFont(opts: ThreeMeshUIEveryOptions, fontStyle: FontStyle) {
+
+        // @TODO : THH could be useful to uniformize font family name :
+        //         This would ease possible html/vr matching
+        //              -   Arial instead of assets/arial
+        //              -   Arial should stay Arial instead of arial
+        if (!this.font) return;
+        let familyName = this.font;
+
+        // ensure a font family is register under this name
+        let fontFamily = ThreeMeshUI.FontLibrary.getFontFamily(familyName as string);
+        if (!fontFamily)
+            fontFamily = ThreeMeshUI.FontLibrary.addFontFamily(familyName as string);
+
+        // @TODO: @swingingtom how should the font be set?
+        //@ts-ignore
+        opts.fontFamily = fontFamily;
+        const lowerFamilyName = familyName.toLowerCase();
 
-        switch (style) {
+        switch (fontStyle) {
+            default:
             case FontStyle.Normal:
-                fontName += "-regular";
-                break;
+                opts.fontWeight = 400;
+                opts.fontStyle = "normal";
+                break
+
             case FontStyle.Bold:
-                fontName += "-bold";
+                opts.fontWeight = 700;
+                opts.fontStyle = "normal";
+                if (!lowerFamilyName.includes("-bold"))
+                    familyName += "-bold";
                 break;
+
             case FontStyle.Italic:
-                fontName += "-italic";
+                opts.fontWeight = 400;
+                opts.fontStyle = "italic"
+                if (!lowerFamilyName.includes("-italic"))
+                    familyName += "-italic";
                 break;
+
             case FontStyle.BoldAndItalic:
-                fontName += "-bolditalic";
-                break;
+                opts.fontStyle = 'italic';
+                opts.fontWeight = 400;
+                if (!lowerFamilyName.includes("-bold"))
+                    familyName += "-bold";
+                if (!lowerFamilyName.includes("-italic"))
+                    familyName += "-italic";
+        }
+
+
+        // Ensure a fontVariant is registered
+        //@TODO: @swingingtom add type for fontWeight
+        let fontVariant = fontFamily.getVariant(opts.fontWeight as any as string, opts.fontStyle);
+        if (!fontVariant) {
+            let jsonPath = familyName;
+            if (!jsonPath?.endsWith("-msdf.json")) jsonPath += "-msdf.json";
+            let texturePath = familyName;
+            if (!texturePath?.endsWith(".png")) texturePath += ".png";
+
+            //@TODO: @swingingtom add type for fontWeight
+            //@TODO: @swingingtom addVariant return type is wrong (should be FontVariant)
+            fontVariant = fontFamily.addVariant(opts.fontWeight as any as string, opts.fontStyle, jsonPath, texturePath as string) as any as ThreeMeshUI.FontVariant;
+            fontVariant?.addEventListener('ready', () => {
+                this.markDirty();
+            });
         }
 
-        return resolveUrl(this.sourceId, fontName);
     }
+
+    // private getFontStyleName(style: FontStyle): string | null {
+    //     if (!this.font) return null;
+    //     let fontName = this.font;
+
+    //     // if a font path has a known suffix we remove it
+    //     const fontNameLower = fontName.toLowerCase();
+    //     if (fontNameLower.endsWith("-regular")) {
+    //         if (style === FontStyle.Normal) return resolveUrl(this.sourceId, fontName);
+    //         fontName = fontName.substring(0, fontName.length - "-regular".length);
+    //     }
+    //     else if (fontNameLower.endsWith("-bold")) {
+    //         if (style === FontStyle.Bold) return resolveUrl(this.sourceId, fontName);
+    //         fontName = fontName.substring(0, fontName.length - "-bold".length);
+    //     }
+    //     else if (fontNameLower.endsWith("-italic")) {
+    //         if (style === FontStyle.Italic) return resolveUrl(this.sourceId, fontName);
+    //         fontName = fontName.substring(0, fontName.length - "-italic".length);
+    //     }
+    //     else if (fontNameLower.endsWith("-bolditalic")) {
+    //         if (style === FontStyle.BoldAndItalic) return resolveUrl(this.sourceId, fontName);
+    //         fontName = fontName.substring(0, fontName.length - "-bolditalic".length);
+    //     }
+    //     else
+    //         // If a font does not have a specific style suffic we dont support getting the correct font style
+    //         return resolveUrl(this.sourceId, fontName);
+
+    //     switch (style) {
+    //         case FontStyle.Normal:
+    //             fontName += "-regular";
+    //             break;
+    //         case FontStyle.Bold:
+    //             fontName += "-bold";
+    //             break;
+    //         case FontStyle.Italic:
+    //             fontName += "-italic";
+    //             break;
+    //         case FontStyle.BoldAndItalic:
+    //             fontName += "-bolditalic";
+    //             break;
+    //     }
+
+    //     return resolveUrl(this.sourceId, fontName);
+    // }
 }
 
 class TagStackEntry {