@needle-tools/engine 5.0.4 → 5.0.6-next.56fe65a

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

@@ -81,7 +81,24 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
     @serializable()
     supportRichText: boolean = false;
     @serializable(URL)
-    font?: string;
+    set font(val: string | null) {
+        if (val !== this._font) {
+            this._font = val;
+            // If the font is assigned during deserialization it means the font URL MUST be resolved with the style suffix. If it's assigned at runtime by a user invocation and is absolute then we assume the user is prividing a full path to the font asset json or png
+            this._assignedAtRuntime = this.__didAwake;
+        }
+    }
+    get font(): string | null {
+        return this._font;
+    }
+    private _font: string | null = null;
+    private _assignedAtRuntime: boolean = true;
+
+
+    /**
+     * Whether to support basic rich text tags in the `text` property. Supported tags include `<b>`, `<i>`, and `<color=hex>`. For example: `Hello <b>World</b>` or `Score: <color=#ff0000>100</color>`
+     * @default false
+     */
     @serializable()
     fontStyle: FontStyle = FontStyle.Normal;
 
@@ -224,8 +241,15 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
         //     fontSize /= this.canvas?.scaleFactor;
         // }
 
-
-        const textOpts = {
+        const textOpts: {
+            color: Color,
+            fontOpacity: number,
+            fontSize: number,
+            fontKerning: string,
+            whiteSpace?: string,
+            overflow?: string,
+            lineHeight?: number
+        } = {
             color: this.color,
             fontOpacity: this.color.alpha,
             fontSize: fontSize,
@@ -486,15 +510,16 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
      * @private
      */
     private setFont(opts: ThreeMeshUIEveryOptions, fontStyle: FontStyle) {
+        
+        if (!this.font) {
+            if(debug) console.warn("No font set for Text component, skipping font setup");
+            return;
+        }
 
-        // @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;
         const fontName = this.font;
         const familyName = this.getFamilyNameWithCorrectSuffix(fontName, fontStyle);
-        if (debug) console.log("Selected font family:" + familyName);
+
+        if (debug) console.log("Selected font family:" + familyName, this.font);
 
         // ensure a font family is register under this name
         let fontFamily = ThreeMeshUI.FontLibrary.getFontFamily(familyName as string);
@@ -527,9 +552,7 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
                 opts.fontWeight = 400;
         }
 
-
         // 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;
@@ -550,13 +573,7 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
 
     private getFamilyNameWithCorrectSuffix(familyName: string, style: FontStyle): string {
 
-
-        // the URL decorator resolves the URL to absolute URLs - we need to remove the domain part since we're only interested in the path
-        if (familyName.startsWith("https:") || familyName.startsWith("http:")) {
-            const url = new URL(familyName);
-            familyName = url.pathname;
-        }
-
+        const isAbsolute = familyName.startsWith("https:") || familyName.startsWith("http:");
 
         // we can only change the style for the family if the name has a suffix (e.g. Arial-Bold)
         const styleSeparator = familyName.lastIndexOf('-');
@@ -580,8 +597,16 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
         }
         const isUpperCase = fontBaseName[0] === fontBaseName[0].toUpperCase();
         const fontNameWithoutSuffix = familyName.substring(0, styleSeparator > pathSeparatorIndex ? styleSeparator : familyName.length);
+
         if (debug) console.log("Select font: ", familyName, FontStyle[style], fontBaseName, isUpperCase, fontNameWithoutSuffix);
 
+        /**
+         * If a user provides a font with an absolute URL AND the font name does not end with "-msdf.json" or ".png" (e.g. "https://example.com/fonts/Arial-Bold"), we will assume that the user is providing the full path to the font files and we will not try to modify the font name based on the style. This allows users to have more control over the font files they are using, especially if they are hosting their own fonts or using a custom font provider that does not follow the same naming conventions as our default fonts.
+         */
+        if (isAbsolute && this._assignedAtRuntime && !(familyName.endsWith("-msdf.json") || familyName.endsWith(".png"))) {
+            return fontNameWithoutSuffix;
+        }
+
         switch (style) {
             case FontStyle.Normal:
                 if (isUpperCase) return fontNameWithoutSuffix + "-Regular";

package/src/engine-components/web/CursorFollow.ts

@@ -289,20 +289,28 @@ export class CursorFollow extends Behaviour {
 
 
         if (this.snapToSurface) {
-            ray.origin = _position;
-            ray.direction = rayDirection.multiplyScalar(-1);
-            const hits = this.context.physics.raycastFromRay(ray);
-            if (hits?.length) {
-                const hit = hits[0];
-                if (this.damping > 0) {
-                    this.gameObject.worldPosition = _position.lerp(hit.point, this.context.time.deltaTime / this.damping);
-                }
-                else {
-                    this.gameObject.worldPosition = hit.point;
+            ray.origin = cameraPosition;
+            ray.direction = rayDirection;
+            const hits = this.context.physics.raycastFromRay(ray, {
+                testObject: obj => {
+                    return obj !== this.gameObject && !this.gameObject.contains(obj) ? true : false
                 }
-
-                if(debug) {
-                    Gizmos.DrawLine(hit.point, hit.normal!.add(hit.point), 0x00FF00);
+            });
+            if (hits?.length) {
+                // Get the first hit that is not a child of *this* object. Because we do not want to lerp to a surface that is part of the object itself, since that would result in *this* object moving closer and closer to the camera as it tries to snap to itself
+                const hit = hits[0];//.find(h => !this.gameObject.contains(h.object));
+                if (hit) {
+                    if (this.damping > 0) {
+                        this.gameObject.worldPosition = _position.lerp(hit.point, this.context.time.deltaTime / this.damping);
+                        // this._distance = this.gameObject.worldPosition.distanceTo(cameraPosition);
+                    }
+                    else {
+                        this.gameObject.worldPosition = hit.point;
+                        // this._distance = hit.point.distanceTo(cameraPosition);
+                    }
+                    if (debug) {
+                        Gizmos.DrawLine(hit.point, hit.normal!.add(hit.point), 0x00FF00);
+                    }
                 }
             }
         }

package/src/engine-components/webxr/WebXRImageTracking.ts

@@ -886,9 +886,11 @@ async function loadImage(url: string) {
     }
     const promise = new Promise<boolean>(res => {
         _imageElements.set(url, null);
+        if(isDevEnvironment() || debug) console.debug(`[WebXRImageTracking] Start loading image for tracking: ${url}`);
         const imageElement = document.createElement("img") as HTMLImageElement;
         imageElement.src = url;
         imageElement.addEventListener("load", async () => {
+            if(isDevEnvironment() || debug) console.debug(`[WebXRImageTracking] Loaded image for tracking: ${url}`);
             const img = await createImageBitmap(imageElement);
             _imageElements.set(url, img);
             res(true);