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

package/lib/engine/webcomponents/needle menu/needle-menu.js

@@ -58,6 +58,18 @@ const debugNonCommercial = getParam("debugnoncommercial");
  * @category HTML
  */
 export class NeedleMenu {
+    static setElementPriority(button, priority) {
+        button.setAttribute("priority", String(priority));
+    }
+    static getElementPriority(button) {
+        const priority = button.getAttribute("priority");
+        if (priority) {
+            const val = Number.parseFloat(priority);
+            if (!Number.isNaN(val))
+                return val;
+        }
+        return undefined;
+    }
     _context;
     _menu;
     _spatialMenu;
@@ -198,7 +210,6 @@ export class NeedleMenu {
             return;
         }
         this._muteButton = ButtonsFactory.getOrCreate().createMuteButton(this._context);
-        this._muteButton.setAttribute("priority", "100");
         this._menu.appendChild(this._muteButton);
     }
     _muteButton;
@@ -209,7 +220,6 @@ export class NeedleMenu {
         }
         this._fullscreenButton = ButtonsFactory.getOrCreate().createFullscreenButton(this._context);
         if (this._fullscreenButton) {
-            this._fullscreenButton.setAttribute("priority", "150");
             this._menu.appendChild(this._fullscreenButton);
         }
     }
@@ -218,6 +228,7 @@ export class NeedleMenu {
         return this._menu.appendChild(child);
     }
 }
+// #region Web component
 /**
  * `<needle-menu>` web component — lightweight menu used by Needle Engine.
  *
@@ -272,141 +283,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);
-        }
+            .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%;
 
-        .options > select[multiple]:hover {
-            max-height: 300px;
-        }
+                /** 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);
+            }
 
-        .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;
+            .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) {
@@ -414,6 +428,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;
@@ -425,8 +440,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
+            }
         }
 
 
@@ -434,9 +453,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 {
@@ -445,8 +464,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 {
@@ -459,6 +478,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;
@@ -574,15 +597,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 **/
@@ -610,28 +642,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">
@@ -658,7 +677,8 @@ export class NeedleMenuElement extends HTMLElement {
         shadow?.appendChild(content);
         this.root = shadow.querySelector("#root");
         this.wrapper = this.root?.querySelector(".wrapper");
-        this.options = this.root?.querySelector(".options");
+        this.options = this.root?.querySelector(".options.main-container");
+        this.optionsCompactMode = this.root?.querySelector(".options.compact-only");
         this.logoContainer = this.root?.querySelector(".logo");
         this.compactMenuButton = this.root?.querySelector(".compact-menu-button");
         this.compactMenuButton.append(getIconElement("more_vert"));
@@ -762,7 +782,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);
@@ -850,6 +870,8 @@ export class NeedleMenuElement extends HTMLElement {
     wrapper;
     /** @private contains the buttons and dynamic elements */
     options;
+    /** @private contains options visible when in compact mode */
+    optionsCompactMode;
     /** @private contains the needle-logo html element */
     logoContainer;
     /** @private compact menu button element */
@@ -955,6 +977,8 @@ export class NeedleMenuElement extends HTMLElement {
         }
     }
     _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. */
+    _pauseMutationObserverOptionsContainer = false;
     /** Called when any change in the web component is detected (including in children and child attributes) */
     onChangeDetected(_mut) {
         if (this._isHandlingChange)
@@ -965,7 +989,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);
                 }
             }
         }
@@ -1048,25 +1073,28 @@ export class NeedleMenuElement extends HTMLElement {
         return false;
     }
     _lastAvailableWidthChange = 0;
-    _timeoutHandle = 0;
+    _timeoutHandleSize = 0;
+    _timeoutHandleCompactItems = 0;
     handleSizeChange = (_evt, forceOrEvent) => {
         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);
-        this._timeoutHandle = setTimeout(() => {
+        clearTimeout(this._timeoutHandleSize);
+        this._timeoutHandleSize = setTimeout(() => {
+            // console.warn("APPLY", this.root.classList.contains("compact") ? "COMPACT" : "FULL", "MODE (available width: " + availableWidth.toFixed(0) + "px)", getCurrentWidth());
             const spaceLeft = getSpaceLeft();
             if (spaceLeft < 0) {
                 this.root.classList.add("compact");
@@ -1081,9 +1109,18 @@ export class NeedleMenuElement extends HTMLElement {
                     this.foldout.classList.add("floating-panel-style");
                 }
             }
-        }, 5);
+            this._pauseMutationObserverOptionsContainer = true;
+            this.updateCompactFoldoutItem();
+            window.requestAnimationFrame(() => this._pauseMutationObserverOptionsContainer = false);
+        }, 150);
         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;
         const getSpaceLeft = () => {
@@ -1095,6 +1132,56 @@ export class NeedleMenuElement extends HTMLElement {
             return spaceLeft;
         };
     };
+    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 = null;
+            let priorityValue = -10000000;
+            const testItem = (element) => {
+                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;
     ___insertDebugOptions() {
         window.addEventListener("keydown", (e) => {
             if (e.key === "p") {