@needle-tools/engine 4.12.3 → 4.12.4-next.46bee95

package/src/engine/webcomponents/icons.ts

@@ -1,6 +1,7 @@
 import { Texture } from "three";
 
 
+const fontname = "Material Symbols Outlined";
 
 /** Returns a HTML element containing an icon. Using https://fonts.google.com/icons   
  * As a string you should pass in the name of the icon, e.g. "add" or "delete" 
@@ -14,6 +15,20 @@ export function getIconElement(str: string): HTMLElement {
     span.classList.add("material-symbols-outlined", "notranslate");
     span.setAttribute("translate", "no");
     span.innerText = str;
+    span.style.visibility = "hidden";
+    span.style.userSelect = "none";
+    fontReady(fontname).then(res => {
+        if (res) span.style.visibility = "";
+        else {
+            if (str === "more_vert") {
+                span.style.visibility = "";
+                span.innerText = "More";
+            }
+            else {
+                span.style.display = "none";
+            }
+        }
+    })
     return span;
 }
 
@@ -26,12 +41,8 @@ export function isIconElement(element: Node): boolean {
 const textures = new Map<string, Texture | null>();
 
 export async function getIconTexture(str: string): Promise<Texture | null> {
-    const fontname = "Material Symbols Outlined";
     // check if font has loaded
-    if (!document.fonts.check(`1em '${fontname}'`)) {
-        console.log("Font not loaded yet");
-        await document.fonts.ready;
-    }
+    await fontReady(fontname);
     if (textures.has(str)) {
         return textures.get(str) as Texture | null;
     }
@@ -55,4 +66,35 @@ export async function getIconTexture(str: string): Promise<Texture | null> {
     }
     textures.set(str, null);
     return null;
+}
+
+
+const loadingPromises: Map<string, Promise<boolean>> = new Map();
+
+async function fontReady(fontName: string, retries: number = 5, currentRetry: number = 0): Promise<boolean> {
+    const res = document.fonts.check(`1em '${fontName}'`);
+    if (!res) {
+        await document.fonts.ready;
+    }
+
+    // check again after waiting for fonts to be ready
+    // we cache this promise once but delete it after it has resolved (since we want to retry if it fails) so that we don't have multiple promises for the same font loading at the same time
+    const promise = loadingPromises.get(fontName) || document.fonts.load(`1em '${fontName}'`)
+        .then(res => res?.length > 0)
+        .finally(() => {
+            loadingPromises.delete(fontName);
+        });
+    loadingPromises.set(fontName, promise);
+    const loaded = await promise;
+    if (!loaded) {
+        if (currentRetry < retries) {
+            return new Promise(res => {
+                setTimeout(() => {
+                    res(fontReady(fontName, retries, currentRetry + 1));
+                }, 1000);
+            });
+        }
+        return false;
+    }
+    return true;
 }

package/src/engine/webcomponents/index.ts

@@ -1,2 +1,2 @@
 
-export { NeedleMenu } from "./needle menu/needle-menu.js";
+export { NeedleMenu } from "./needle menu/needle-menu.js";

package/src/engine/webcomponents/logo-element.ts

@@ -44,7 +44,6 @@ export class NeedleLogoElement extends HTMLElement {
         img {
             height: 100%;
             align-self: end;
-            margin-left: 0.6rem;
             transition: transform 0.2s;
         }
         img.with-text {

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -45,9 +45,17 @@ export declare type ButtonInfo = {
     label: string,
     /** Material icon name: https://fonts.google.com/icons */
     icon?: string,
-    /**  "left" or "right" to place the icon on the left or right side of the button. Default is "left" */
+    /** "left" or "right" to place the icon on the left or right side of the button. Default is "left" */
     iconSide?: "left" | "right",
-    /** Low priority is icon is on the left, high priority is icon is on the right. Default is undefined */
+    /** 
+     * Priority controls the order of buttons in the menu.   
+     * If not enough space is available to show all buttons - the highest priority elements will always be visible
+     * 
+     * **Sorting**  
+     * Low priority is icon is on the left, 
+     * high priority is icon is on the right.   
+     * @default undefined 
+     */
     priority?: number;
     /** Experimental. Allows to put two buttons in one row for the compact layout */
     class?: "row2";
@@ -101,6 +109,20 @@ export declare type ButtonInfo = {
  * @category HTML
  */
 export class NeedleMenu {
+
+    static setElementPriority(button: HTMLElement, priority: number) {
+        button.setAttribute("priority", String(priority));
+    }
+
+    static getElementPriority(button: HTMLElement): number | undefined {
+        const priority = button.getAttribute("priority");
+        if (priority) {
+            const val = Number.parseFloat(priority);
+            if (!Number.isNaN(val)) return val;
+        }
+        return undefined;
+    }
+
     private readonly _context: Context;
     private readonly _menu: NeedleMenuElement;
     private readonly _spatialMenu: NeedleSpatialMenu;
@@ -274,6 +296,8 @@ export class NeedleMenu {
 
 }
 
+// #region Web component
+
 /**
  * `<needle-menu>` web component — lightweight menu used by Needle Engine.
  *
@@ -333,141 +357,144 @@ export class NeedleMenuElement extends HTMLElement {
             pointer-events: none;
         }
 
-        #root {
-            position: absolute;
-            width: auto;
-            max-width: 95%;
-            left: 50%;
-            transform: translateX(-50%);
-            top: min(20px, 10vh);
-            padding: 0.3rem;
-            display: flex;
-            visibility: visible;
-            flex-direction: row-reverse; /* if we overflow this should be right aligned so the logo is always visible */
-            pointer-events: all;
-            z-index: 1000;
-        }
+        /** we put base styles in a layer to allow overrides more easily (e.g. the button.mode requested animation should override the base styles) */
+        @layer base {
 
-        /** hide the menu if it's empty **/
-        #root.has-no-options.logo-hidden {
-            display: none; 
-        }
+            #root {
+                position: absolute;
+                width: auto;
+                max-width: 95%;
+                left: 50%;
+                transform: translateX(-50%);
+                top: min(20px, 10vh);
+                padding: 0.3rem;
+                display: flex;
+                visibility: visible;
+                flex-direction: row-reverse; /* if we overflow this should be right aligned so the logo is always visible */
+                pointer-events: all;
+                z-index: 1000;
+            }
 
-        /** using a div here because then we can change the class for placement **/
-        #root.bottom {
-            top: auto;
-            bottom: min(30px, 10vh);
-        }
-        #root.top {
-            top: calc(.7rem + env(safe-area-inset-top));
-        }
-        
-        .wrapper {
-            position: relative;
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: stretch;
-            gap: 0px;
-            padding: 0 0rem;
-        }
+            /** hide the menu if it's empty **/
+            #root.has-no-options.logo-hidden {
+                display: none; 
+            }
 
-        .wrapper > *, .options > button, .options > select, ::slotted(*) {
-            position: relative;
-            border: none;
-            border-radius: 0;
-            outline: 1px solid rgba(0,0,0,0);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            max-height: 2.3rem;
-            max-width: 100%;
+            /** using a div here because then we can change the class for placement **/
+            #root.bottom {
+                top: auto;
+                bottom: min(30px, 10vh);
+            }
+            #root.top {
+                top: calc(.7rem + env(safe-area-inset-top));
+            }
+            
+            .wrapper {
+                position: relative;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: stretch;
+                gap: 0px;
+                padding: 0 0rem;
+            }
 
-            /** basic font settings for all entries **/
-            font-size: 1rem;
-            font-family: 'Roboto Flex', sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 500;
-            font-weight: 200;
-            font-variation-settings: "wdth" 100;
-            color: rgb(20,20,20);
-        }
-
-        .options > select[multiple]:hover {
-            max-height: 300px;
-        }
-
-        .floating-panel-style {
-            background: rgba(255, 255, 255, .4);
-            outline: rgb(0 0 0 / 5%) 1px solid;
-            border: 1px solid rgba(255, 255, 255, .1);
-            box-shadow: 0px 7px 0.5rem 0px rgb(0 0 0 / 6%), inset 0px 0px 1.3rem rgba(0,0,0,.05);
-            border-radius: 1.5rem;
-            /** 
-             * to make nested background filter work 
-             * https://stackoverflow.com/questions/60997948/backdrop-filter-not-working-for-nested-elements-in-chrome 
-             **/
-            &::before {
-                content: '';
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-                z-index: -1;
+            .wrapper > *, .options > button, .options > select, ::slotted(*) {
+                position: relative;
+                border: none;
+                border-radius: 0;
+                outline: 1px solid rgba(0,0,0,0);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                max-height: 2.3rem;
+                max-width: 100%;
+
+                /** basic font settings for all entries **/
+                font-size: 1rem;
+                font-family: 'Roboto Flex', sans-serif;
+                font-optical-sizing: auto;
+                font-weight: 400;
+                font-variation-settings: "wdth" 100;
+                color: rgb(20,20,20);
+            }
+
+            .options > select[multiple]:hover {
+                max-height: 300px;
+            }
+
+            .floating-panel-style {
+                background: rgba(255, 255, 255, .4);
+                outline: rgb(0 0 0 / 5%) 1px solid;
+                border: 1px solid rgba(255, 255, 255, .1);
+                box-shadow: 0px 7px 0.5rem 0px rgb(0 0 0 / 6%), inset 0px 0px 1.3rem rgba(0,0,0,.05);
                 border-radius: 1.5rem;
-                -webkit-backdrop-filter: blur(8px);
-                backdrop-filter: blur(8px);
+                /** 
+                 * to make nested background filter work 
+                 * https://stackoverflow.com/questions/60997948/backdrop-filter-not-working-for-nested-elements-in-chrome 
+                 **/
+                &::before {
+                    content: '';
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    top: 0;
+                    left: 0;
+                    z-index: -1;
+                    border-radius: 1.5rem;
+                    -webkit-backdrop-filter: blur(8px);
+                    backdrop-filter: blur(8px);
+                }
             }
-        }
 
-        a {
-            color: inherit;
-            text-decoration: none;
-        }
+            a {
+                color: inherit;
+                text-decoration: none;
+            }
 
-        .options {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-        }
+            .options {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+            }
 
-        .options > *, ::slotted(*) {
-            max-height: 2.25rem;
-            padding: .4rem .5rem;
-        }
+            .options > *, ::slotted(*) {
+                max-height: 2.25rem;
+                padding: .4rem .5rem;
+            }
         
-        :host .options > *, ::slotted(*) {
-            background: transparent;
-            border: none;
-            white-space: nowrap;
-            transition: all 0.1s linear .02s;
-            border-radius: 1.5rem;
-            user-select: none;
-        }
-        :host .options > *:hover, ::slotted(*:hover) {
-            cursor: pointer;
-            color: black;
-            background: rgba(245, 245, 245, .8);
-            box-shadow: inset 0 0 1rem rgba(0,0,30,.2);
-            outline: rgba(0,0,0,.1) 1px solid;
-        }
-        :host .options > *:active, ::slotted(*:active) {
-            background: rgba(255, 255, 255, .8);
-            box-shadow: inset 0px 1px 1px rgba(255,255,255,.5), inset 0 0 2rem rgba(0,0,30,.2), inset 0px 2px 4px rgba(0,0,20,.5);
-            transition: all 0.05s linear;
-        }
-        :host .options > *:focus, ::slotted(*:focus) {
-            outline: rgba(255,255,255,.5) 1px solid;
-        }
-        :host .options > *:focus-visible, ::slotted(*:focus-visible) {
-            outline: rgba(0,0,0,.5) 1px solid;
-        }
+            :host .options > *, ::slotted(*) {
+                background: transparent;
+                border: none;
+                white-space: nowrap;
+                transition: all 0.1s linear .02s;
+                border-radius: 1.5rem;
+                user-select: none;
+            }
+            :host .options > *:hover, ::slotted(*:hover) {
+                cursor: pointer;
+                color: black;
+                background: rgba(245, 245, 245, .8);
+                box-shadow: inset 0 0 1rem rgba(0,0,30,.2);
+                outline: rgba(0,0,0,.1) 1px solid;
+            }
+            :host .options > *:active, ::slotted(*:active) {
+                background: rgba(255, 255, 255, .8);
+                box-shadow: inset 0px 1px 1px rgba(255,255,255,.5), inset 0 0 2rem rgba(0,0,30,.2), inset 0px 2px 4px rgba(0,0,20,.5);
+                transition: all 0.05s linear;
+            }
+            :host .options > *:focus, ::slotted(*:focus) {
+                outline: rgba(255,255,255,.5) 1px solid;
+            }
+            :host .options > *:focus-visible, ::slotted(*:focus-visible) {
+                outline: rgba(0,0,0,.5) 1px solid;
+            }
 
-        :host .options > *:disabled, ::slotted(*:disabled) {
-            background: rgba(0,0,0,.05);
-            color: rgba(60,60,60,.7);
-            pointer-events: none;
+            :host .options > *:disabled, ::slotted(*:disabled) {
+                background: rgba(0,0,0,.05);
+                color: rgba(60,60,60,.7);
+                pointer-events: none;
+            }
         }
 
         button, ::slotted(button) {
@@ -475,6 +502,7 @@ export class NeedleMenuElement extends HTMLElement {
         }
 
         /** XR button animation **/
+        
         :host button.this-mode-is-requested {
             background: repeating-linear-gradient(to right, #fff 0%, #fff 40%, #aaffff 55%, #fff 80%);
             background-size: 200% auto;
@@ -486,8 +514,12 @@ export class NeedleMenuElement extends HTMLElement {
         }
         
         @keyframes AnimationName {
-            0% { background-position: 0% 0 }
-            100% { background-position: -200% 0 }
+            0% { 
+                background-position: 0% 0 
+            }
+            100% { 
+                background-position: -200% 0
+            }
         }
 
 
@@ -520,6 +552,10 @@ export class NeedleMenuElement extends HTMLElement {
 
         /** Hide the menu button normally **/
         .compact-menu-button { display: none; }
+
+        /** Hide the compact only options when not in compact mode */
+        .options.compact-only { display: none; }
+
         /** And show it when we're in compact mode **/
         .compact .compact-menu-button {
             position: relative;
@@ -639,12 +675,20 @@ export class NeedleMenuElement extends HTMLElement {
             padding: .6rem .5rem;
             width: 100%;
         }
+        .compact.has-options {
+            padding-left: 1rem;
+        }
         .compact.has-options .logo {
             border: none;
             padding-left: 0;
-            margin-left: 1rem;
             margin-bottom: .02rem;
         }
+        .compact .options.compact-only {
+            display: initial;
+            & > * {
+                min-height: 1em;
+            }
+        }
         .compact .options {
             /** e.g. if we have a very wide menu item like a select with long option names we don't want to overflow **/
             max-width: 100%;
@@ -671,28 +715,15 @@ export class NeedleMenuElement extends HTMLElement {
                 display: none !important;
             }
         }
-        
-        /* dark mode */
-        /*
-        @media (prefers-color-scheme: dark) {
-            :host {
-                background: rgba(0,0,0, .6);
-            }
-            :host button {
-                color: rgba(200,200,200);
-            }
-            :host button:hover {
-                background: rgba(100,100,100, .8);
-            }
-        }
-        */
 
         </style>
         
         <div id="root" class="logo-hidden floating-panel-style bottom">
             <div class="wrapper">
+                <div class="options compact-only" part="options">
+                </div>
                 <div class="foldout">
-                    <div class="options" part="options">
+                    <div class="options main-container" part="options">
                         <slot></slot>
                     </div>
                     <div class="options" part="options">
@@ -723,7 +754,8 @@ export class NeedleMenuElement extends HTMLElement {
         this.root = shadow.querySelector("#root") as HTMLDivElement;
 
         this.wrapper = this.root?.querySelector(".wrapper") as HTMLDivElement;
-        this.options = this.root?.querySelector(".options") as HTMLDivElement;
+        this.options = this.root?.querySelector(".options.main-container") as HTMLDivElement;
+        this.optionsCompactMode = this.root?.querySelector(".options.compact-only") as HTMLDivElement;
         this.logoContainer = this.root?.querySelector(".logo") as HTMLDivElement;
         this.compactMenuButton = this.root?.querySelector(".compact-menu-button") as HTMLButtonElement;
         this.compactMenuButton.append(getIconElement("more_vert"));
@@ -932,6 +964,8 @@ export class NeedleMenuElement extends HTMLElement {
     private readonly wrapper: HTMLDivElement;
     /** @private contains the buttons and dynamic elements */
     private readonly options: HTMLDivElement;
+    /** @private contains options visible when in compact mode */
+    private readonly optionsCompactMode: HTMLDivElement;
     /** @private contains the needle-logo html element */
     private readonly logoContainer: HTMLDivElement;
     /** @private compact menu button element */
@@ -1171,6 +1205,37 @@ export class NeedleMenuElement extends HTMLElement {
                     this.foldout.classList.add("floating-panel-style");
                 }
             }
+
+            if (this.root.classList.contains("compact")) {
+                this.optionsCompactMode.childNodes.forEach(element => {
+                    element.remove();
+                });
+                // Find items in the folding list with the highest priority
+                // The one with the highest priority will be added to the visible container
+                let priorityItem: HTMLElement | null = null;
+                let priorityValue: number = -10000000;
+                for (let i = 0; i < this.options.children.length; i++) {
+                    const element = this.options.children.item(i);
+                    if (element instanceof HTMLElement) {
+                        const priority = NeedleMenu.getElementPriority(element);
+                        if (priority !== undefined && priority > priorityValue) {
+                            // check if the element is hidden
+                            // @TODO: use computed styles
+                            const style = element.style;
+                            if (style.display === "none") continue;
+                            priorityItem = element;
+                            priorityValue = priority;
+                        }
+                    }
+                }
+                if (priorityItem) {
+                    const item = priorityItem;
+                    const clone = item.cloneNode(true);
+                    clone.addEventListener("click", () => item.click())
+                    this.optionsCompactMode.appendChild(clone);
+                }
+            }
+
         }, 5) as unknown as number;
 
         const getCurrentWidth = () => {

package/src/engine/xr/NeedleXRSession.ts

@@ -454,6 +454,9 @@ export class NeedleXRSession implements INeedleXRSession {
      */
     static async start(mode: XRSessionMode | "ar" | "quicklook", init?: XRSessionInit, context?: Context): Promise<NeedleXRSession | null> {
 
+        // setup session init args, make sure we have default values
+        if (!init) init = {};
+
         // handle iOS platform where "immersive-ar" is special:
         // - we either launch QuickLook
         // - or forward to the Needle App Clip experience for WebXR AR
@@ -477,7 +480,9 @@ export class NeedleXRSession implements INeedleXRSession {
             }
 
             if (!arSupported && (mode === "immersive-ar" || mode === "ar")) {
-                // const debugAppClip = getParam("debugappclip")
+
+                this.invokeSessionRequestStart("immersive-ar", init);
+
                 // Forward to the AppClip experience (Using the apple.com url the appclip overlay shows immediately)
                 // const url =`https://appclip.needle.tools/ar?url=${(location.href)}`;
                 const url = new URL("https://appclip.apple.com/id?p=tools.needle.launch-app.Clip");
@@ -511,6 +516,10 @@ export class NeedleXRSession implements INeedleXRSession {
                     else window.location.href = urlStr;
                 }
 
+                setTimeout(() => {
+                    this.invokeSessionRequestEnd("immersive-ar", init || {}, null);
+                }, 3000);
+
                 return null;
             }
         }
@@ -549,9 +558,6 @@ export class NeedleXRSession implements INeedleXRSession {
 
         //performance.mark('NeedleXRSession start');
 
-        // setup session init args, make sure we have default values
-        if (!init) init = {};
-
         switch (mode) {
 
             // Setup VR initialization parameters
@@ -615,9 +621,7 @@ export class NeedleXRSession implements INeedleXRSession {
                 script.onBeforeXR(mode, init);
             }
         }
-        for (const listener of this._sessionRequestStartListeners) {
-            listener({ mode, init });
-        }
+        this.invokeSessionRequestStart(mode, init);
         if (debug) showBalloonMessage("Requesting " + mode + " session (" + Date.now() + ")");
         Telemetry.sendEvent(Context.Current, "xr", {
             action: "session_request",
@@ -637,9 +641,7 @@ export class NeedleXRSession implements INeedleXRSession {
         });
         this._currentSessionRequest = undefined;
         this._currentSessionRequestMode = null;
-        for (const listener of this._sessionRequestEndListeners) {
-            listener({ mode, init, newSession: newSession || null });
-        }
+        this.invokeSessionRequestEnd(mode, init, newSession);
         if (!newSession) {
             console.warn("XR Session request was rejected");
             return null;
@@ -650,6 +652,17 @@ export class NeedleXRSession implements INeedleXRSession {
         return session;
     }
 
+    private static invokeSessionRequestStart(mode: XRSessionMode, init: XRSessionInit) {
+        for (const listener of this._sessionRequestStartListeners) {
+            listener({ mode, init });
+        }
+    }
+    private static invokeSessionRequestEnd(mode: XRSessionMode, init: XRSessionInit, session: XRSession | null | undefined | void) {
+        for (const listener of this._sessionRequestEndListeners) {
+            listener({ mode, init, newSession: session || null });
+        }
+    }
+
     static setSession(mode: XRSessionMode, session: XRSession, init: XRSessionInit, context: Context) {
         if (this._activeSession) {
             console.error("A XRSession is already running");

package/src/engine-components/Animation.ts

@@ -1,4 +1,5 @@
 import { AnimationAction, AnimationClip, AnimationMixer, LoopOnce, LoopRepeat } from "three";
+import { AnimationUtils } from "../engine/engine_animation.js";
 
 import { Mathf } from "../engine/engine_math.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
@@ -447,7 +448,7 @@ export class Animation extends Behaviour implements IAnimationComponent {
             action.time = Mathf.lerp(options.minMaxOffsetNormalized.x, options.minMaxOffsetNormalized.y, Math.random()) * clip.duration;
         }
         // If the animation is at the end, reset the time
-        else if(action.time >= action.getClip().duration) {
+        else if (action.time >= action.getClip().duration) {
             action.time = 0;
         }
 
@@ -473,6 +474,8 @@ export class Animation extends Behaviour implements IAnimationComponent {
         action.paused = false;
         action.play();
 
+        window.requestAnimationFrame(() => AnimationUtils.testIfRootCanAnimate(action));
+
         if (debug) console.log("PLAY", action.getClip().name, action)
         const handle = new AnimationHandle(action, this.mixer!, options, _ => {
             this._handles.splice(this._handles.indexOf(handle), 1);

package/src/engine-components/AnimatorController.ts

@@ -1,6 +1,7 @@
 import { AnimationAction, AnimationClip, AnimationMixer, AxesHelper, Euler, KeyframeTrack, LoopOnce, Object3D, Quaternion, Vector3 } from "three";
 
 import { isDevEnvironment } from "../engine/debug/index.js";
+import { AnimationUtils } from "../engine/engine_animation.js";
 import { Mathf } from "../engine/engine_math.js";
 import { InstantiateIdProvider } from "../engine/engine_networking_instantiate.js";
 import { assign, SerializationContext, TypeSerializer } from "../engine/engine_serialization_core.js";
@@ -775,6 +776,8 @@ export class AnimatorController {
             else action.weight = 1;
             action.play();
 
+            window.requestAnimationFrame(() => AnimationUtils.testIfRootCanAnimate(action));
+
             if (this.rootMotionHandler) {
                 this.rootMotionHandler.onStart(action);
             }