@needle-tools/engine 4.12.4-next.46bee95 → 4.12.5-next.1be4457

package/src/engine/debug/debug_overlay.ts

@@ -112,7 +112,7 @@ export function addLog(type: LogType, message: string | any[], _file?: string |
     const context = ContextRegistry.Current;
     let domElement = context?.domElement ?? document.querySelector("needle-engine");
     // check if we're in webxr dom overlay
-    if (context.isInAR) {
+    if (context?.isInAR) {
         domElement = context.arOverlayElement;
     }
     if (!domElement) return;

package/src/engine/engine_animation.ts

@@ -1,6 +1,6 @@
 import { AnimationAction, AnimationClip, AnimationMixer, KeyframeTrack, Object3D, PropertyBinding, Vector3Like } from "three";
-import { isDevEnvironment } from "./debug/index.js";
 
+import { isDevEnvironment } from "./debug/index.js";
 import type { Context } from "./engine_context.js";
 import { GLTF, IAnimationComponent, Model } from "./engine_types.js";
 import { TypeStore } from "./engine_typestore.js";

package/src/engine/webcomponents/WebXRButtons.ts

@@ -240,7 +240,7 @@ export class WebXRButtonFactory {
     private hideElementDuringXRSession(element: HTMLElement) {
         onXRSessionStart(_ => {
             element["previous-display"] = element.style.display;
-            element.style.display = "none";
+            element.style.setProperty("display", "none", "important");
         });
         onXRSessionEnd(_ => {
             if (element["previous-display"] != undefined)

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

@@ -269,7 +269,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;
@@ -282,7 +281,6 @@ export class NeedleMenu {
         }
         this._fullscreenButton = ButtonsFactory.getOrCreate().createFullscreenButton(this._context);
         if (this._fullscreenButton) {
-            this._fullscreenButton.setAttribute("priority", "150");
             this._menu.appendChild(this._fullscreenButton);
         }
     }
@@ -527,9 +525,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 {
@@ -538,8 +536,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 {
@@ -671,22 +669,23 @@ 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: 1rem;
+            padding-left: 1em;
         }
         .compact.has-options .logo {
             border: none;
             padding-left: 0;
-            margin-bottom: .02rem;
+            margin-bottom: .02em;
         }
         .compact .options.compact-only {
             display: initial;
             & > * {
                 min-height: 1em;
+                padding: .4em .4em;
             }
         }
         .compact .options {
@@ -870,7 +869,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);
@@ -1073,6 +1072,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[]) {
@@ -1083,7 +1084,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)
                 }
             }
         }
@@ -1168,29 +1170,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")
@@ -1205,41 +1212,19 @@ export class NeedleMenuElement extends HTMLElement {
                     this.foldout.classList.add("floating-panel-style");
                 }
             }
+            this._pauseMutationObserverOptionsContainer = true;
+            this.updateCompactFoldoutItem();
+            window.requestAnimationFrame(() => this._pauseMutationObserverOptionsContainer = false);
 
-            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;
+        }, 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;
@@ -1253,6 +1238,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);

package/src/engine-components/Animation.ts

@@ -1,6 +1,6 @@
 import { AnimationAction, AnimationClip, AnimationMixer, LoopOnce, LoopRepeat } from "three";
-import { AnimationUtils } from "../engine/engine_animation.js";
 
+import { AnimationUtils } from "../engine/engine_animation.js";
 import { Mathf } from "../engine/engine_math.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { IAnimationComponent } from "../engine/engine_types.js";

package/src/engine-components/utils/OpenURL.ts

@@ -57,8 +57,6 @@ export class OpenURL extends Behaviour implements IPointerClickHandler {
             url = "mailto:" + url;
         }
 
-        if (isDevEnvironment()) showBalloonMessage("Open URL: " + url)
-
         switch (this.mode) {
             case OpenURLMode.NewTab:
                 if (DeviceUtilities.isSafari()) {

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

@@ -551,8 +551,6 @@ export class WebXR extends Behaviour {
      * and device capabilities. Handles creating AR, VR, QuickLook buttons and utility buttons like QR codes.
      */
     private handleCreatingHTML() {
-        const xrButtonsPriority = 50;
-
         if (this.createARButton || this.createVRButton || this.useQuicklookExport) {
             // Quicklook / iOS
             if ((DeviceUtilities.isiOS() && DeviceUtilities.isSafari()) || debugQuicklook) {
@@ -560,18 +558,18 @@ export class WebXR extends Behaviour {
                     const usdzExporter = GameObject.findObjectOfType(USDZExporter);
                     if (!usdzExporter || (usdzExporter && usdzExporter.allowCreateQuicklookButton)) {
                         const button = this.getButtonsFactory().createQuicklookButton();
-                        this.addButton(button, xrButtonsPriority);
+                        this.addButton(button);
                     }
                 }
             }
             // WebXR
             if (this.createARButton) {
                 const arbutton = this.getButtonsFactory().createARButton();
-                this.addButton(arbutton, xrButtonsPriority);
+                this.addButton(arbutton);
             }
             if (this.createVRButton) {
                 const vrbutton = this.getButtonsFactory().createVRButton();
-                this.addButton(vrbutton, xrButtonsPriority);
+                this.addButton(vrbutton);
             }
         }
 
@@ -579,7 +577,7 @@ export class WebXR extends Behaviour {
             NeedleXRSession.isVRSupported().then(supported => {
                 if (!supported) {
                     const button = this.getButtonsFactory().createSendToQuestButton();
-                    this.addButton(button, xrButtonsPriority);
+                    this.addButton(button);
                 }
             });
         }
@@ -592,7 +590,7 @@ export class WebXR extends Behaviour {
             }
             else if (!DeviceUtilities.isMobileDevice()) {
                 const qrCode = ButtonsFactory.getOrCreate().createQRCode();
-                this.addButton(qrCode, xrButtonsPriority);
+                this.addButton(qrCode,);
             }
         }
     }
@@ -607,9 +605,8 @@ export class WebXR extends Behaviour {
      * @param button The HTML element to add
      * @param priority The button's priority value (lower numbers appear first)
      */
-    private addButton(button: HTMLElement, priority: number) {
+    private addButton(button: HTMLElement) {
         this._buttons.push(button);
-        button.setAttribute("priority", priority.toString());
         this.context.menu.appendChild(button);
     }