@needle-tools/engine 4.12.3 → 4.12.4-next.4498846

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

@@ -1,6 +1,8 @@
+import { TestSimulateUserData } from "../../../needle-engine.js";
 import { showBalloonMessage } from "../../debug/debug.js";
 import type { Context } from "../../engine_context.js";
 import { hasCommercialLicense, onLicenseCheckResultChanged, Telemetry } from "../../engine_license.js";
+import { LeftRoomResponse } from "../../engine_networking.js";
 import { isLocalNetwork } from "../../engine_networking_utils.js";
 import { DeviceUtilities, getParam } from "../../engine_utils.js";
 import { onXRSessionStart, XRSessionEventArgs } from "../../xr/events.js";
@@ -45,9 +47,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 +111,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;
@@ -247,7 +271,6 @@ export class NeedleMenu {
             return;
         }
         this._muteButton = ButtonsFactory.getOrCreate().createMuteButton(this._context);
-        this._muteButton.setAttribute("priority", "100");
         this._menu.appendChild(this._muteButton);
     }
     private _muteButton?: HTMLButtonElement;
@@ -260,7 +283,6 @@ export class NeedleMenu {
         }
         this._fullscreenButton = ButtonsFactory.getOrCreate().createFullscreenButton(this._context);
         if (this._fullscreenButton) {
-            this._fullscreenButton.setAttribute("priority", "150");
             this._menu.appendChild(this._fullscreenButton);
         }
     }
@@ -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
+            }
         }
 
 
@@ -495,9 +527,9 @@ export class NeedleMenuElement extends HTMLElement {
 
         .logo {
             cursor: pointer;
-            padding-left: 0.0rem;
-            padding-bottom: .02rem;
-            margin-right: 0.5rem;
+            padding-left: 0.5em;
+            padding-bottom: .02em;
+            margin-right: 0.6em;
         }
         .logo-hidden {
             .logo {
@@ -506,8 +538,8 @@ export class NeedleMenuElement extends HTMLElement {
         }
         :host .has-options .logo {
             border-left: 1px solid rgba(40,40,40,.4);
-            margin-left: 0.3rem;
-            margin-right: 0.5rem;
+            margin-left: 0.3em;
+            margin-right: 0.6em;
         }
 
         .logo > span {
@@ -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;
@@ -635,15 +671,24 @@ export class NeedleMenuElement extends HTMLElement {
         }
 
         .compact .options > *, .compact .options > ::slotted(*) {
-            font-size: 1.2rem;
-            padding: .6rem .5rem;
+            font-size: 1.2em;
+            padding: .6em .5em;
             width: 100%;
         }
+        .compact.has-options {
+            padding-left: 1em;
+        }
         .compact.has-options .logo {
             border: none;
             padding-left: 0;
-            margin-left: 1rem;
-            margin-bottom: .02rem;
+            margin-bottom: .02em;
+        }
+        .compact .options.compact-only {
+            display: initial;
+            & > * {
+                min-height: 1em;
+                padding: .4em .4em;
+            }
         }
         .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 **/
@@ -671,28 +716,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 +755,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"));
@@ -838,7 +871,7 @@ export class NeedleMenuElement extends HTMLElement {
     connectedCallback() {
         window.addEventListener("resize", this.handleSizeChange);
         this.handleMenuVisible();
-        this._sizeChangeInterval = setInterval(() => this.handleSizeChange(undefined, true), 5000);
+        this._sizeChangeInterval = setInterval(() => this.handleSizeChange(undefined, false), 5000);
         // the dom element is set after the constructor runs
         setTimeout(() => {
             this._domElement?.addEventListener("resize", this.handleSizeChange);
@@ -932,6 +965,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 */
@@ -1039,6 +1074,8 @@ export class NeedleMenuElement extends HTMLElement {
     }
 
     private _isHandlingChange = false;
+    /** During modification of options container (e.g. when moving items into the extra buttons container) the mutation observer should not trigger an update event immediately. This is a workaround for the total size required for all elements not being calculated reliably. */
+    private _pauseMutationObserverOptionsContainer = false;
 
     /** Called when any change in the web component is detected (including in children and child attributes) */
     private onChangeDetected(_mut: MutationRecord[]) {
@@ -1049,7 +1086,8 @@ export class NeedleMenuElement extends HTMLElement {
             this.handleMenuVisible();
             for (const mut of _mut) {
                 if (mut.target == this.options) {
-                    this.onOptionsChildrenChanged(mut);
+                    if (!this._pauseMutationObserverOptionsContainer)
+                        this.onOptionsChildrenChanged(mut)
                 }
             }
         }
@@ -1134,29 +1172,34 @@ export class NeedleMenuElement extends HTMLElement {
 
 
     private _lastAvailableWidthChange = 0;
-    private _timeoutHandle: number = 0;
+    private _timeoutHandleSize: number = 0;
+    private _timeoutHandleCompactItems: number = 0;
 
     private handleSizeChange = (_evt?: Event, forceOrEvent?: boolean) => {
         if (!this._domElement) return;
+        // if (this._isApplyingSizeUpdate) return;
 
         const width = this._domElement.clientWidth;
         if (width < 100) {
-            clearTimeout(this._timeoutHandle!);
+            clearTimeout(this._timeoutHandleSize!);
             this.root.classList.add("compact");
             this.foldout.classList.add("floating-panel-style");
             return;
         }
 
-        const padding = 20 * 2;
+        const padding = 10 * 2;
         const availableWidth = width - padding;
 
         // if the available width has not changed significantly then we can skip the rest
         if (!forceOrEvent && Math.abs(availableWidth - this._lastAvailableWidthChange) < 1) return;
         this._lastAvailableWidthChange = availableWidth;
 
-        clearTimeout(this._timeoutHandle!);
+        clearTimeout(this._timeoutHandleSize!);
+
+        this._timeoutHandleSize = setTimeout(() => {
+
+            // console.warn("APPLY", this.root.classList.contains("compact") ? "COMPACT" : "FULL", "MODE (available width: " + availableWidth.toFixed(0) + "px)", getCurrentWidth());
 
-        this._timeoutHandle = setTimeout(() => {
             const spaceLeft = getSpaceLeft();
             if (spaceLeft < 0) {
                 this.root.classList.add("compact")
@@ -1171,10 +1214,19 @@ export class NeedleMenuElement extends HTMLElement {
                     this.foldout.classList.add("floating-panel-style");
                 }
             }
-        }, 5) as unknown as number;
+            this._pauseMutationObserverOptionsContainer = true;
+            this.updateCompactFoldoutItem();
+            window.requestAnimationFrame(() => this._pauseMutationObserverOptionsContainer = false);
+
+        }, 150) as unknown as number;
 
         const getCurrentWidth = () => {
-            return this.options.clientWidth + this.logoContainer.clientWidth;
+            let totalWidthRequired = 0;
+            totalWidthRequired += this.options.getBoundingClientRect().width;
+            totalWidthRequired += this.optionsCompactMode.getBoundingClientRect().width;
+            totalWidthRequired += 10 * this.options.childElementCount; // padding
+            totalWidthRequired += this.logoContainer.style.display != "none" ? this.logoContainer.getBoundingClientRect().width : 0;;
+            return totalWidthRequired;
         }
 
         let lastSpaceLeft = -1;
@@ -1188,6 +1240,59 @@ export class NeedleMenuElement extends HTMLElement {
         }
     }
 
+    private updateCompactFoldoutItem() {
+
+        if (this.root.classList.contains("compact")) {
+
+            // 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;
+            const testItem = (element: ChildNode | null) => {
+                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 = window.getComputedStyle(element);
+                        if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
+                            return;
+                        }
+                        priorityItem = element;
+                        priorityValue = priority;
+                    }
+                }
+            }
+            for (let i = 0; i < this.options.children.length; i++) {
+                testItem(this.options.children.item(i));
+            }
+            for (let i = 0; i < this.optionsCompactMode.children.length; i++) {
+                testItem(this.optionsCompactMode.children.item(i));
+            }
+
+            if (priorityItem && !this.optionsCompactMode.contains(priorityItem)) {
+                this.optionsCompactMode.childNodes.forEach(element => {
+                    this.options.appendChild(element);
+                });
+                const item = priorityItem;
+                this.optionsCompactMode.appendChild(item);
+                // console.warn("In compact mode, moved item with priority " + priorityValue + " to compact foldout:", item);
+            }
+            else if (!priorityItem) {
+                // console.warn("In compact mode but no item has priority, showing all items in foldout");
+                this.optionsCompactMode.childNodes.forEach(element => {
+                    this.options.appendChild(element);
+                });
+            }
+        }
+        else {
+            // console.warn("Not in compact mode but trying to update compact foldout item");
+            this.optionsCompactMode.childNodes.forEach(element => {
+                this.options.appendChild(element);
+            });
+        }
+    }
+    // private _foldoutItemVisibleInterval = 0;
 
 
     private ___insertDebugOptions() {

package/src/engine/webcomponents/needle-engine.ar-overlay.ts

@@ -121,6 +121,7 @@ export class AROverlayHandler {
 
         const quitARSlot = document.createElement("slot");
         quitARSlot.style.display = "contents";
+        quitARSlot.style.padding = "10px"; 
         quitARSlot.setAttribute("name", "quit-ar");
         this.appendElement(quitARSlot, element);
         this._createdAROnlyElements.push(quitARSlot);