@needle-tools/engine 3.6.8 → 3.6.10

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

@@ -275,23 +275,42 @@ export class Text extends Graphic implements IHasAlphaFactor {
         if (!this._textMeshUi)
             this._textMeshUi = [];
 
-        // this.uiObject.textContent = text;
-        // return ;
+        // this doesnt work and produces errors when length is 0:
+        // this.uiObject.textContent = " "; 
+
+        // reset the current text (e.g. when switching from "Hello" to "Hello <b>World</b>")
+        // @TODO swingingtom: this is a hack to reset the text content, not sure how to do that right
+        this.uiObject.children.length = 0;
 
         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);
+            let currentTag = this.getNextTag(text);
             if (!currentTag) {
                 //@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' }))
+
+                // First segment should also clear children inlines
+                for ( let i = this.uiObject.children.length - 1 ; i >= 0; i-- ) {
+                    const child = this.uiObject.children[ i ];
+
+                    // @ts-ignore
+                    if( child.isUI ) {
+
+                        this.uiObject.remove( child );
+                        child.clear();
+
+                    }
+
+                }
+
+
+                const el = new ThreeMeshUI.Inline({ textContent: text.substring(0, currentTag.startIndex), color: 'inherit' });
+                this.uiObject.add(el);
             }
             const stackArray: Array<TagStackEntry> = [];
             while (currentTag) {
@@ -308,19 +327,23 @@ export class Text extends Graphic implements IHasAlphaFactor {
                     opts.textContent = this.getText(text, currentTag, next);
 
                     this.handleTag(currentTag, opts, stackArray);
-                    this.uiObject?.add(new ThreeMeshUI.Inline(opts))
+                    const el = new ThreeMeshUI.Inline(opts);
+                    this.uiObject?.add(el)
 
                 } else {
 
                     opts.textContent = text.substring(currentTag.endIndex);
 
                     this.handleTag(currentTag, opts, stackArray);
-                    this.uiObject?.add(new ThreeMeshUI.Inline(opts))
+                    const el = new ThreeMeshUI.Inline(opts);
+                    this.uiObject?.add(el);
                 }
                 currentTag = next;
             }
         }
 
+        if(debug) console.log("feedText", this.uiObject);
+
         return null;
     }
 
@@ -393,17 +416,6 @@ export class Text extends Graphic implements IHasAlphaFactor {
                 stackArray.push(stackEntry);
 
             }
-        } else {
-            if (stackArray.length > 0) {
-                const last = stackArray.pop();
-                if (last) {
-                    for (const key in last.previousValues) {
-                        const prevValue = last.previousValues[key];
-                        // console.log(key, val);
-                        opts[key] = prevValue;
-                    }
-                }
-            }
         }
     }
 
@@ -436,7 +448,7 @@ export class Text extends Graphic implements IHasAlphaFactor {
         //              -   Arial instead of assets/arial
         //              -   Arial should stay Arial instead of arial
         if (!this.font) return;
-        let familyName = this.font;
+        let familyName = this.getFamilyNameWithCorrectSuffix(this.font, fontStyle);
 
         // ensure a font family is register under this name
         let fontFamily = ThreeMeshUI.FontLibrary.getFontFamily(familyName as string);
@@ -446,7 +458,6 @@ export class Text extends Graphic implements IHasAlphaFactor {
         // @TODO: @swingingtom how should the font be set?
         //@ts-ignore
         opts.fontFamily = fontFamily;
-        const lowerFamilyName = familyName.toLowerCase();
 
         switch (fontStyle) {
             default:
@@ -458,24 +469,16 @@ export class Text extends Graphic implements IHasAlphaFactor {
             case FontStyle.Bold:
                 opts.fontWeight = 700;
                 opts.fontStyle = "normal";
-                if (!lowerFamilyName.includes("-bold"))
-                    familyName += "-bold";
                 break;
 
             case FontStyle.Italic:
                 opts.fontWeight = 400;
                 opts.fontStyle = "italic"
-                if (!lowerFamilyName.includes("-italic"))
-                    familyName += "-italic";
                 break;
 
             case FontStyle.BoldAndItalic:
                 opts.fontStyle = 'italic';
                 opts.fontWeight = 400;
-                if (!lowerFamilyName.includes("-bold"))
-                    familyName += "-bold";
-                if (!lowerFamilyName.includes("-italic"))
-                    familyName += "-italic";
         }
 
 
@@ -498,49 +501,35 @@ export class Text extends Graphic implements IHasAlphaFactor {
 
     }
 
-    // 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);
-    // }
+    private getFamilyNameWithCorrectSuffix(familyName: string, style: FontStyle): string {
+
+        // we can only change the style for the family if the name has a suffix (e.g. Arial-Bold)
+        const styleSeparator = familyName.lastIndexOf('-');
+        if (styleSeparator < 0) return familyName;
+
+        // Try find a suffix that matches the style
+        // We assume that if the font name is "Arial-Regular" then the bold version is "Arial-Bold"
+        // and if the font name is "arial-regular" then the bold version is "arial-bold"
+        let isUpperCase = familyName[0] === familyName[0].toUpperCase();
+        const fontNameWithoutSuffix = familyName.substring(0, styleSeparator);
+
+        switch (style) {
+            case FontStyle.Normal:
+                if (isUpperCase) return fontNameWithoutSuffix + "-Regular";
+                else return fontNameWithoutSuffix + "-regular";
+            case FontStyle.Bold:
+                if (isUpperCase) return fontNameWithoutSuffix + "-Bold";
+                else return fontNameWithoutSuffix + "-bold";
+            case FontStyle.Italic:
+                if (isUpperCase) return fontNameWithoutSuffix + "-Italic";
+                else return fontNameWithoutSuffix + "-italic";
+            case FontStyle.BoldAndItalic:
+                if (isUpperCase) return fontNameWithoutSuffix + "-BoldItalic";
+                else return fontNameWithoutSuffix + "-bolditalic";
+            default:
+                return familyName;
+        }
+    }
 }
 
 class TagStackEntry {
@@ -561,3 +550,8 @@ declare type TagInfo = {
 
 // const anyTag = new RegExp('<.+?>', 'g');
 // const regex = new RegExp('<(?<type>.+?)>(?<text>.+?)<\/.+?>', 'g');
+
+
+const upperCaseStyleSuffixOptions = [
+    "Regular", "Bold", "Italic", "BoldItalic", "Medium", "MediumItalic", "SemiBold", "SemiBoldItalic", "Thin", "ThinItalic", "ExtraLight", "ExtraLightItalic", "Light", "LightItalic", "Black", "BlackItalic"
+];