Needle Engine 3.47.8

Files changed (13) hide show

src/engine-components/DragControls.ts +2 -0
src/engine/engine_serialization_core.ts +1 -1
src/engine/engine_three_utils.ts +1 -0
src/engine-components/utils/LookAt.ts +11 -6
src/engine/extensions/NEEDLE_techniques_webgl.ts +11 -3
src/engine/webcomponents/needle menu/needle-menu.ts +39 -15
src/engine/xr/NeedleXRSession.ts +12 -1
src/engine/codegen/register_types.ts +2 -2
src/engine-components/RendererInstancing.ts +44 -25
src/engine-components/export/usdz/USDZExporter.ts +8 -4
src/engine-components/webxr/WebXR.ts +13 -6
src/engine/webcomponents/needle menu/dist/needle-menu.js +662 -0
src/engine/xr/usdz.ts +31 -0

src/engine-components/DragControls.ts CHANGED Viewed

@@ -117,6 +117,8 @@
         const wasKinematicKey = "_rigidbody-was-kinematic";
         if (this._rigidbody?.[wasKinematicKey] === false) {
             this._rigidbody.isKinematic = false;
+            this._rigidbody[wasKinematicKey] = undefined;
         }
         this._rigidbody = null;

src/engine/engine_serialization_core.ts CHANGED Viewed

@@ -412,7 +412,7 @@
             }
         }
         if (typeof value === "string") {
-            if (serialized.endsWith(".gltf") || serialized.endsWith(".glb")) {
+            if (typeof serialized === "string" && (serialized.endsWith(".gltf") || serialized.endsWith(".glb"))) {
                 addLog(LogType.Warn, `<strong>Missing serialization for object reference!</strong>\n\nPlease change to: \n@serializable(AssetReference)\n${key}? : AssetReference;\n\nin script ${typeName}.ts\n<a href="https://docs.needle.tools/serializable" target="_blank">documentation</a>`);
                 console.warn(typeName, key, obj[key], obj);
                 continue;

src/engine/engine_three_utils.ts CHANGED Viewed

@@ -46,6 +46,7 @@
             const forwardPoint = lookFrom.sub(getWorldDirection(object));
             forwardPoint.y = ypos;
             object.lookAt(forwardPoint);
+            object.quaternion.multiply(flipYQuat);
         }
         // sanitize – three.js sometimes returns NaN values when parents are non-uniformly scaled

src/engine-components/utils/LookAt.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Matrix4, Object3D, Quaternion, Vector3 } from "three";
 import { serializable } from "../../engine/engine_serialization.js";
-import { getWorldPosition, getWorldQuaternion, lookAtObject, setWorldQuaternion } from "../../engine/engine_three_utils.js";
+import { lookAtObject } from "../../engine/engine_three_utils.js";
 import { type UsdzBehaviour } from "../../engine-components/export/usdz/extensions/behavior/Behaviour.js";
 import { ActionBuilder, BehaviorModel, TriggerBuilder, USDVec3 } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
 import { USDObject } from "../../engine-components/export/usdz/ThreeUSDZExporter.js";
@@ -45,7 +45,12 @@
         if (!target) target = this.context.mainCamera;
         if (!target) return;
-        lookAtObject(this.gameObject, target, this.keepUpDirection, this.copyTargetRotation);
+        let copyTargetRotation = this.copyTargetRotation;
+        // Disable copy target rotation during VR/AR session: https://linear.app/needle/issue/NE-5634
+        if (this.context.isInVR || this.context.isInPassThrough) {
+            copyTargetRotation = false;
+        }
+        lookAtObject(this.gameObject, target, this.keepUpDirection, copyTargetRotation);
         if (this.invertForward)
             this.gameObject.quaternion.multiply(LookAt.flipYQuat);
@@ -55,7 +60,7 @@
     createBehaviours(ext, model: USDObject, _context) {
         if (model.uuid === this.gameObject.uuid) {
             let alignmentTarget = model;
             // not entirely sure why we need to do this - looks like LookAt with up vector doesn't work properly in
             // QuickLook, so we need to introduce an empty parent and rotate the model by 90° around Y
             if (this.keepUpDirection) {
@@ -72,9 +77,9 @@
             const lookAt = new BehaviorModel("lookat " + this.name,
                 TriggerBuilder.sceneStartTrigger(),
                 ActionBuilder.lookAtCameraAction(
-                    alignmentTarget,
-                    undefined,
-                    this.invertForward ? USDVec3.back : USDVec3.forward,
+                    alignmentTarget,
+                    undefined,
+                    this.invertForward ? USDVec3.back : USDVec3.forward,
                     this.keepUpDirection ? USDVec3.up : USDVec3.zero
                 ),
             );

src/engine/extensions/NEEDLE_techniques_webgl.ts CHANGED Viewed

@@ -354,13 +354,21 @@
             return null;
         }
         if (!mat.extensions || !mat.extensions[NEEDLE_TECHNIQUES_WEBGL_NAME]) {
-            if (debug) console.log("material " + index + " does not use NEEDLE_techniques_webgl");
+            if (debug) console.log(`Material ${index} does not use NEEDLE_techniques_webgl`);
             return null;
         }
+        if(debug) console.log(`Material ${index} uses NEEDLE_techniques_webgl`, mat);
         const techniqueIndex = mat.extensions[NEEDLE_TECHNIQUES_WEBGL_NAME].technique;
-        if (techniqueIndex < 0) return null;
+        if (techniqueIndex < 0) {
+            console.debug(`Material ${index} does not have a valid technique index`);
+            return null;
+        }
         const shaders: SHADERDATA.ShaderData = this.parser.json.extensions[NEEDLE_TECHNIQUES_WEBGL_NAME];
-        if (!shaders) return null;
+        if (!shaders) {
+            if(debug) console.error("Missing shader data", this.parser.json.extensions);
+            else console.debug("Missing custom shader data in parser.json.extensions");
+            return null;
+        }
         if (debug) console.log(shaders);
         const technique: SHADERDATA.Technique = shaders.techniques[techniqueIndex];
         if (!technique) return null;

src/engine/webcomponents/needle menu/needle-menu.ts CHANGED Viewed

@@ -139,6 +139,9 @@
             this._menu["previousParent"] = this._menu.parentNode;
             this._context.arOverlayElement.appendChild(this._menu);
             args.session.session.addEventListener("end", this.onExitXR);
+            // Close the foldout if it's open on entering AR
+            this._menu.closeFoldout();
         }
     }
@@ -367,8 +370,8 @@
             white-space: nowrap;
             transition: all 0.1s linear .02s;
             border-radius: 0.8rem;
+            user-select: none;
         }
         :host .options > *:hover, ::slotted(*:hover) {
             cursor: pointer;
             color: black;
@@ -440,6 +443,7 @@
         .compact-menu-button { display: none; }
         /** And show it when we're in compact mode **/
         .compact .compact-menu-button {
+            position: relative;
             display: block;
             background: none;
             border: none;
@@ -449,6 +453,8 @@
             padding: 0 .3rem;
             padding-top: .2rem;
+            z-index: 100;
             color: #000;
             &:hover {
@@ -458,6 +464,14 @@
             &:focus {
                 outline: 1px solid rgba(255,255,255,.5);
             }
+            & .expanded-click-area {
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 10%;
+                bottom: 10%;
+                transform: scale(1.8);
+            }
         }
         .has-no-options .compact-menu-button {
             display: none;
@@ -601,7 +615,9 @@
                     <span class="madewith notranslate">powered by</span>
                 </div>
             </div>
-            <button class="compact-menu-button"></button>
+            <button class="compact-menu-button">
+                <div class="expanded-click-area"></div>
+            </button>
         </div>
         `;
@@ -799,6 +815,13 @@
         this.style.display = visible ? "flex" : "none";
     }
+    /**
+     * If the menu is in compact mode and the foldout is currently open (to show all menu options) then this will close the foldout
+     */
+    closeFoldout() {
+        this.root.classList.remove("open");
+    }
     // private _root: ShadowRoot | null = null;
     private readonly root: HTMLDivElement;
     /** wraps the whole content */
@@ -881,26 +904,27 @@
         this.handleSizeChange(undefined, true);
         if (_mut.type === "childList") {
-            let needsSorting = false;
-            const now = Date.now();
-            // sort children by priority only when necessary
-            for (let i = 0; i < _mut.addedNodes.length; i++) {
-                const child = _mut.addedNodes[i] as HTMLElement;
-                const lastTime = this._didSort.get(child);
-                if (typeof lastTime === "number" && now - lastTime < 100) continue;
-                this._didSort.set(child, now);
-                needsSorting = true;
-            }
-            if (needsSorting) {
+            if (_mut.addedNodes.length > 0) {
                 const children = Array.from(this.options.children);
                 children.sort((a, b) => {
                     const p1 = parseInt(a.getAttribute("priority") || "0");
                     const p2 = parseInt(b.getAttribute("priority") || "0");
                     return p1 - p2;
                 });
-                for (const child of children) {
-                    this.options.appendChild(child);
+                let sortingChanged = false;
+                for (let i = 0; i < children.length; i++) {
+                    const existing = this.options.children[i];
+                    const child = children[i];
+                    if (existing !== child) {
+                        sortingChanged = true;
+                        break;
+                    }
                 }
+                if (sortingChanged) {
+                    for (const child of children) {
+                        this.options.appendChild(child);
+                    }
+                }
             }
         }
     }

src/engine/xr/NeedleXRSession.ts CHANGED Viewed

@@ -8,13 +8,14 @@
 import { registerFrameEventCallback, unregisterFrameEventCallback } from "../engine_lifecycle_functions_internal.js";
 import { getBoundingBox, getTempQuaternion, getTempVector, getWorldPosition, getWorldQuaternion, getWorldScale, setWorldPosition, setWorldQuaternion, setWorldScale } from "../engine_three_utils.js";
 import type { ICamera, IComponent, INeedleXRSession } from "../engine_types.js";
-import { delay, getParam, isDesktop, isQuest } from "../engine_utils.js";
+import { delay, getParam, isDesktop, isiOS, isQuest } from "../engine_utils.js";
 import { invokeXRSessionEnd, invokeXRSessionStart } from "./events.js"
 import { flipForwardMatrix, flipForwardQuaternion, ImplictXRRig } from "./internal.js";
 import { NeedleXRController } from "./NeedleXRController.js";
 import { NeedleXRSync } from "./NeedleXRSync.js";
 import { SceneTransition } from "./SceneTransition.js";
 import { SessionInfo, TemporaryXRContext } from "./TempXRContext.js";
+import { InternalUSDZRegistry } from "./usdz.js";
 import type { IXRRig } from "./XRRig.js";
 const measure_SessionStartedMarker = "NeedleXRSession onStart";
@@ -368,6 +369,16 @@
      * @param context The Needle Engine context to use
      */
     static async start(mode: XRSessionMode, init?: XRSessionInit, context?: Context): Promise<NeedleXRSession | null> {
+        // handle iOS platform where "immersive-ar" is not supported
+        // TODO: should we add a separate mode (e.g. "AR")? https://linear.app/needle/issue/NE-5303
+        if (mode === "immersive-ar" && isiOS()) {
+            if (InternalUSDZRegistry.exportAndOpen()) {
+                return null;
+            }
+        }
         if (isDevEnvironment() && getParam("debugxrpreroom")) {
             console.warn("Debug: Starting temporary XR session");
             await TemporaryXRContext.start(mode, init || NeedleXRSession.getDefaultSessionInit(mode));

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import { TypeStore } from "./../engine_typestore.js"
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components.js";
 import { ActionBuilder } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
@@ -220,7 +220,7 @@
 import { XRFlag } from "../../engine-components/webxr/XRFlag.js";
 import { XRRig } from "../../engine-components/webxr/WebXRRig.js";
 import { XRState } from "../../engine-components/webxr/XRFlag.js";
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("ActionBuilder", ActionBuilder);

src/engine-components/RendererInstancing.ts CHANGED Viewed

@@ -28,10 +28,20 @@
         renderer.applySettings(obj);
         const res = this.tryCreateOrAddInstance(obj, context, args);
         if (res) {
-            NEEDLE_progressive.assignTextureLOD(res.renderer.material, 0);
-            // renderer.loadProgressiveMeshes(res.instancer.mesh, 0);
             if (handlesArray === null) handlesArray = [];
             handlesArray.push(res);
+            // load texture lods
+            NEEDLE_progressive.assignTextureLOD(res.renderer.material, 0);
+            // Load mesh lods
+            for (const mesh of renderer.sharedMeshes) {
+                const geometry = mesh.geometry;
+                NEEDLE_progressive.assignMeshLOD(mesh, 0).then(lod => {
+                    if (lod && renderer.activeAndEnabled && geometry != lod) {
+                        res.setGeometry(lod);
+                    }
+                })
+            }
         }
         else if (level <= 0 && obj.type !== "Mesh") {
@@ -192,11 +202,11 @@
     setGeometry(geo: BufferGeometry) {
         if (this.__instanceIndex < 0) return false;
         if (this.vertexCount > this.__reservedVertexRange) {
-            console.error(`Cannot update geometry, reserved range is too small: ${this.__reservedVertexRange} < ${this.vertexCount} vertices for ${this.name}`);
+            console.error(`Cannot update geometry, reserved vertex range is too small: ${this.__reservedVertexRange} < ${this.vertexCount} vertices for ${this.name}`);
             return false;
         }
         if (this.indexCount > this.__reservedIndexRange) {
-            console.error(`Cannot update geometry, reserved range is too small: ${this.__reservedIndexRange} < ${this.indexCount} indices for ${this.name}`);
+            console.error(`Cannot update geometry, reserved index range is too small: ${this.__reservedIndexRange} < ${this.indexCount} indices for ${this.name}`);
             return false;
         }
         return this.renderer.updateGeometry(geo, this.__instanceIndex);
@@ -403,7 +413,8 @@
         if (!this.validateGeometry(geo)) {
             if (debugInstancing) console.error("Cannot add instance, invalid geometry", this.name, geo);
-            return;
+            else console.warn("Cannot add instance, invalid geometry: " + handle.name);
+            return false;
         }
         if (this.mustGrow(geo)) {
@@ -412,7 +423,7 @@
             }
             else {
                 console.error("Cannot add instance, max count reached", this.name, this.count, this._maxInstanceCount);
-                return;
+                return false;
             }
         }
@@ -425,6 +436,8 @@
         if (this._currentInstanceCount > 0)
             this._batchedMesh.visible = true;
+        return true;
     }
     remove(handle: InstanceHandle, delete_: boolean) {
@@ -480,25 +493,26 @@
         this._batchedMesh.layers.disableAll();
     }
-    private validateGeometry(_geometry: BufferGeometry): boolean {
+    private validateGeometry(geometry: BufferGeometry): boolean {
         const batchGeometry = this.geometry;
-        // for (const attributeName in batchGeometry.attributes) {
-        //     if (attributeName === "batchId") {
-        //         continue;
-        //     }
-        //     if (!geometry.hasAttribute(attributeName)) {
-        //         // geometry.setAttribute(attributeName, batchGeometry.getAttribute(attributeName).clone());
-        //         return false;
-        //         // throw new Error(`BatchedMesh: Added geometry missing "${attributeName}". All geometries must have consistent attributes.`);
-        //     }
-        //     // const srcAttribute = geometry.getAttribute(attributeName);
-        //     // const dstAttribute = batchGeometry.getAttribute(attributeName);
-        //     // if (srcAttribute.itemSize !== dstAttribute.itemSize || srcAttribute.normalized !== dstAttribute.normalized) {
-        //     //     if (debugInstancing) throw new Error('BatchedMesh: All attributes must have a consistent itemSize and normalized value.');
-        //     //     return false;
-        //     // }
-        // }
+        for (const attributeName in batchGeometry.attributes) {
+            if (attributeName === "batchId") {
+                continue;
+            }
+            if (!geometry.hasAttribute(attributeName)) {
+                console.warn(`BatchedMesh: Added geometry missing "${attributeName}". All geometries must have consistent attributes.`);
+                // geometry.setAttribute(attributeName, batchGeometry.getAttribute(attributeName).clone());
+                return false;
+                // throw new Error(`BatchedMesh: Added geometry missing "${attributeName}". All geometries must have consistent attributes.`);
+            }
+            // const srcAttribute = geometry.getAttribute(attributeName);
+            // const dstAttribute = batchGeometry.getAttribute(attributeName);
+            // if (srcAttribute.itemSize !== dstAttribute.itemSize || srcAttribute.normalized !== dstAttribute.normalized) {
+            //     if (debugInstancing) throw new Error('BatchedMesh: All attributes must have a consistent itemSize and normalized value.');
+            //     return false;
+            // }
+        }
         return true;
     }
@@ -555,6 +569,11 @@
         this._batchedMesh = newInst;
         this._maxInstanceCount = newSize;
+        // since we have a new batched mesh we need to re-add all the instances
+        // fixes https://linear.app/needle/issue/NE-5711
+        this._usedBuckets.length = 0;
+        this._availableBuckets.length = 0;
         // add current instances to new instanced mesh
         for (const handle of this._handles) {
             if (handle && handle.__instanceIndex >= 0) {
@@ -702,8 +721,8 @@
         let lod0Count = lod0.vertexCount;
         let lod0IndexCount = lod0.indexCount;
         // add some wiggle room: https://linear.app/needle/issue/NE-4505
-        lod0Count += 10;
-        lod0Count += lod0Count * .05;
+        const extra = Math.min(128, Math.ceil(lod0Count * .15));
+        lod0Count += extra;
         lod0IndexCount += 20;
         vertexCount = Math.max(vertexCount, lod0Count);
         indexCount = Math.max(indexCount, lod0IndexCount);

src/engine-components/export/usdz/USDZExporter.ts CHANGED Viewed

@@ -7,6 +7,7 @@
 import { getFormattedDate, Progress } from "../../../engine/engine_time_utils.js";
 import { getParam, isiOS, isMobileDevice, isSafari } from "../../../engine/engine_utils.js";
 import { WebXRButtonFactory } from "../../../engine/webcomponents/WebXRButtons.js";
+import { InternalUSDZRegistry } from "../../../engine/xr/usdz.js"
 import { Behaviour, GameObject } from "../../Component.js";
 import { Renderer } from "../../Renderer.js"
 import { SpriteRenderer } from "../../SpriteRenderer.js";
@@ -174,6 +175,7 @@
             showBalloonMessage("USDZ Exporter enabled: " + this.name);
         document.getElementById("open-in-ar")?.addEventListener("click", this.onClickedOpenInARElement);
+        InternalUSDZRegistry.registerExporter(this);
     }
     /** @internal */
@@ -189,6 +191,7 @@
             showBalloonMessage("USDZ Exporter disabled: " + this.name);
         document.getElementById("open-in-ar")?.removeEventListener("click", this.onClickedOpenInARElement);
+        InternalUSDZRegistry.unregisterExporter(this);
     }
     private onClickedOpenInARElement = (evt) => {
@@ -585,6 +588,7 @@
     getARScaleAndTarget(): { scale: number, _invertForward: boolean, target: Object3D, sessionRoot: Object3D | null} {
         if (!this.objectToExport) return { scale: 1, _invertForward: false, target: this.gameObject, sessionRoot: null};
+        const xr = GameObject.findObjectOfType(WebXR);
         let sessionRoot = GameObject.getComponentInParent(this.objectToExport, WebARSessionRoot);
         if(!sessionRoot) sessionRoot = GameObject.getComponentInChildren(this.objectToExport, WebARSessionRoot);
@@ -592,11 +596,11 @@
         let _invertForward = false;
         const target = this.objectToExport;
-        if (!sessionRoot) {
-            const xr = GameObject.findObjectOfType(WebXR);
-            if (xr) arScale = xr.arScale;
+        // Note: when USDZ is exported, SessionRoot might not have the correct AR scale, since that is populated upon EnterXR from WebXR.
+        if (xr) {
+            arScale = xr.arScale;
         }
-        else {
+        else if (sessionRoot) {
             arScale = sessionRoot.arScale;
             _invertForward = sessionRoot.invertForward;
         }

src/engine-components/webxr/WebXR.ts CHANGED Viewed

@@ -263,12 +263,19 @@
         this.createLocalAvatar(args.xr);
-        this._exitXRMenuButton = this.context.menu.appendChild({
-            label: "Quit XR",
-            onClick: () => this.exitXR(),
-            icon: "exit_to_app",
-            priority: 20_000,
-        });
+        // for mobile screen AR we have the "X" button to exit and don't need to add an extra menu button to close
+        // https://linear.app/needle/issue/NE-5716
+        if (args.xr.isScreenBasedAR) {
+        }
+        else {
+            this._exitXRMenuButton = this.context.menu.appendChild({
+                label: "Quit XR",
+                onClick: () => this.exitXR(),
+                icon: "exit_to_app",
+                priority: 20_000,
+            });
+        }
     }
     onUpdateXR(_args: NeedleXREventArgs): void {

src/engine/webcomponents/needle menu/dist/needle-menu.js ADDED Viewed

@@ -0,0 +1,662 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return privateMap.get(receiver);
+};
+var _onClick;
+exports.__esModule = true;
+exports.NeedleMenuElement = exports.NeedleMenu = void 0;
+var engine_license_js_1 = require("../../engine_license.js");
+var engine_networking_utils_js_1 = require("../../engine_networking_utils.js");
+var engine_utils_js_1 = require("../../engine_utils.js");
+var events_js_1 = require("../../xr/events.js");
+var buttons_js_1 = require("../buttons.js");
+var fonts_js_1 = require("../fonts.js");
+var icons_js_1 = require("../icons.js");
+var logo_element_js_1 = require("../logo-element.js");
+var needle_menu_spatial_js_1 = require("./needle-menu-spatial.js");
+var elementName = "needle-menu";
+var debug = engine_utils_js_1.getParam("debugmenu");
+var debugNonCommercial = engine_utils_js_1.getParam("debugnoncommercial");
+/**
+ * The NeedleMenu is a menu that can be displayed in the needle engine webcomponent or in VR/AR sessions.
+ * The menu can be used to add buttons to the needle engine that can be used to interact with the application.
+ * The menu can be positioned at the top or the bottom of the needle engine webcomponent
+ *
+ * @example Create a button using the NeedleMenu
+ * ```typescript
+ * onStart(ctx => {
+ *   ctx.menu.appendChild({
+ *    label: "Open Google",
+ *    icon: "google",
+ *    onClick: () => { window.open("https://www.google.com", "_blank") }
+ *   });
+ * })
+ * ```
+ *
+ * Buttons can be added to the menu using the {@link NeedleMenu#appendChild} method or by sending a postMessage event to the needle engine with the type "needle:menu". Use the {@link NeedleMenuPostMessageModel} model to create buttons with postMessage.
+ * @example Create a button using a postmessage
+ * ```javascript
+ * window.postMessage({
+ *    type: "needle:menu",
+ *    button: {
+ *      label: "Open Google",
+ *      icon: "google",
+ *      onclick: "https://www.google.com",
+ *      target: "_blank",
+ *    }
+ * }, "*");
+ * ```
+ */
+var NeedleMenu = /** @class */ (function () {
+    function NeedleMenu(context) {
+        var _this = this;
+        this.onPostMessage = function (e) {
+            // lets just allow the same origin for now
+            if (e.origin !== globalThis.location.origin)
+                return;
+            if (typeof e.data === "object") {
+                var data = e.data;
+                var type = data.type;
+                if (type === "needle:menu") {
+                    var buttoninfo_1 = data.button;
+                    if (buttoninfo_1) {
+                        if (!buttoninfo_1.label)
+                            return console.error("NeedleMenu: buttoninfo.label is required");
+                        if (!buttoninfo_1.onclick)
+                            return console.error("NeedleMenu: buttoninfo.onclick is required");
+                        var button = document.createElement("button");
+                        button.textContent = buttoninfo_1.label;
+                        if (buttoninfo_1.icon) {
+                            var icon = icons_js_1.getIconElement(buttoninfo_1.icon);
+                            button.prepend(icon);
+                        }
+                        if (buttoninfo_1.priority) {
+                            button.setAttribute("priority", buttoninfo_1.priority.toString());
+                        }
+                        button.onclick = function () {
+                            if (buttoninfo_1.onclick) {
+                                var isLink = buttoninfo_1.onclick.startsWith("http") || buttoninfo_1.onclick.startsWith("www.");
+                                var target = buttoninfo_1.target || "_blank";
+                                if (isLink) {
+                                    globalThis.open(buttoninfo_1.onclick, target);
+                                }
+                                else
+                                    console.error("NeedleMenu: onclick is not a valid link", buttoninfo_1.onclick);
+                            }
+                        };
+                        _this._menu.appendChild(button);
+                    }
+                    else if (debug)
+                        console.error("NeedleMenu: unknown postMessage event", data);
+                }
+                else if (debug)
+                    console.warn("NeedleMenu: unknown postMessage type", type, data);
+            }
+        };
+        this.onStartXR = function (args) {
+            if (args.session.isScreenBasedAR) {
+                _this._menu["previousParent"] = _this._menu.parentNode;
+                _this._context.arOverlayElement.appendChild(_this._menu);
+                args.session.session.addEventListener("end", _this.onExitXR);
+            }
+        };
+        this.onExitXR = function () {
+            if (_this._menu["previousParent"]) {
+                _this._menu["previousParent"].appendChild(_this._menu);
+                delete _this._menu["previousParent"];
+            }
+        };
+        this._menu = NeedleMenuElement.getOrCreate(context.domElement, context);
+        this._context = context;
+        this._spatialMenu = new needle_menu_spatial_js_1.NeedleSpatialMenu(context, this._menu);
+        window.addEventListener("message", this.onPostMessage);
+        events_js_1.onXRSessionStart(this.onStartXR);
+    }
+    /** @ignore internal method */
+    NeedleMenu.prototype.onDestroy = function () {
+        window.removeEventListener("message", this.onPostMessage);
+        this._menu.remove();
+        this._spatialMenu.onDestroy();
+    };
+    /** Experimental: Change the menu position to be at the top or the bottom of the needle engine webcomponent
+     * @param position "top" or "bottom"
+     */
+    NeedleMenu.prototype.setPosition = function (position) {
+        this._menu.setPosition(position);
+    };
+    /**
+     * Call to show or hide the menu.
+     * NOTE: Hiding the menu is a PRO feature and requires a needle engine license. Hiding the menu will not work in production without a license.
+     */
+    NeedleMenu.prototype.setVisible = function (visible) {
+        this._menu.setVisible(visible);
+    };
+    /** When set to false, the Needle Engine logo will be hidden. Hiding the logo requires a needle engine license */
+    NeedleMenu.prototype.showNeedleLogo = function (visible) {
+        var _a;
+        this._menu.showNeedleLogo(visible);
+        (_a = this._spatialMenu) === null || _a === void 0 ? void 0 : _a.showNeedleLogo(visible);
+        // setTimeout(()=>this.showNeedleLogo(!visible), 1000);
+    };
+    /** When enabled=true the menu will be visible in VR/AR sessions */
+    NeedleMenu.prototype.showSpatialMenu = function (enabled) {
+        this._spatialMenu.setEnabled(enabled);
+    };
+    /**
+     * Call to add or remove a button to the menu to show a QR code for the current page
+     * If enabled=true then a button will be added to the menu that will show a QR code for the current page when clicked.
+     */
+    NeedleMenu.prototype.showQRCodeButton = function (enabled) {
+        if (enabled === "desktop-only") {
+            enabled = !engine_utils_js_1.isMobileDevice();
+        }
+        if (!enabled) {
+            var button = buttons_js_1.ButtonsFactory.getOrCreate().qrButton;
+            if (button)
+                button.style.display = "none";
+            return button !== null && button !== void 0 ? button : null;
+        }
+        else {
+            var button = buttons_js_1.ButtonsFactory.getOrCreate().createQRCode();
+            button.style.display = "";
+            this._menu.appendChild(button);
+            return button;
+        }
+    };
+    /** Call to add or remove a button to the menu to mute or unmute the application
+     * Clicking the button will mute or unmute the application
+    */
+    NeedleMenu.prototype.showAudioPlaybackOption = function (visible) {
+        var _a;
+        if (!visible) {
+            (_a = this._muteButton) === null || _a === void 0 ? void 0 : _a.remove();
+            return;
+        }
+        this._muteButton = buttons_js_1.ButtonsFactory.getOrCreate().createMuteButton(this._context);
+        this._muteButton.setAttribute("priority", "100");
+        this._menu.appendChild(this._muteButton);
+    };
+    NeedleMenu.prototype.showFullscreenOption = function (visible) {
+        var _a;
+        if (!visible) {
+            (_a = this._fullscreenButton) === null || _a === void 0 ? void 0 : _a.remove();
+            return;
+        }
+        this._fullscreenButton = buttons_js_1.ButtonsFactory.getOrCreate().createFullscreenButton(this._context);
+        if (this._fullscreenButton) {
+            this._fullscreenButton.setAttribute("priority", "150");
+            this._menu.appendChild(this._fullscreenButton);
+        }
+    };
+    NeedleMenu.prototype.appendChild = function (child) {
+        return this._menu.appendChild(child);
+    };
+    return NeedleMenu;
+}());
+exports.NeedleMenu = NeedleMenu;
+var NeedleMenuElement = /** @class */ (function (_super) {
+    __extends(NeedleMenuElement, _super);
+    function NeedleMenuElement() {
+        var _a, _b, _c, _d, _e, _f;
+        var _this = _super.call(this) || this;
+        _this._domElement = null;
+        _this._context = null;
+        _onClick.set(_this, function (e) {
+            // detect a click outside the opened foldout to automatically close it
+            if (!e.defaultPrevented
+                && e.target == _this._domElement
+                && (e instanceof PointerEvent && e.button === 0)
+                && _this.root.classList.contains("open")) {
+                // The menu is open, it's a click outside the foldout?
+                var rect = _this.foldout.getBoundingClientRect();
+                var pointerEvent = e;
+                if (!(pointerEvent.clientX > rect.left
+                    && pointerEvent.clientX < rect.right
+                    && pointerEvent.clientY > rect.top
+                    && pointerEvent.clientY < rect.bottom)) {
+                    _this.root.classList.toggle("open", false);
+                }
+            }
+        });
+        _this._userRequestedLogoVisible = undefined;
+        _this._userRequestedMenuVisible = undefined;
+        _this._isHandlingChange = false;
+        _this._didSort = new Map();
+        _this._lastAvailableWidthChange = 0;
+        _this._timeoutHandle = 0;
+        _this.handleSizeChange = function (_evt, forceOrEvent) {
+            if (!_this._domElement)
+                return;
+            var width = _this._domElement.clientWidth;
+            if (width < 500) {
+                clearTimeout(_this._timeoutHandle);
+                _this.root.classList.add("compact");
+                _this.foldout.classList.add("floating-panel-style");
+                return;
+            }
+            var padding = 20 * 2;
+            var 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(function () {
+                var spaceLeft = getSpaceLeft();
+                if (spaceLeft < 0) {
+                    _this.root.classList.add("compact");
+                    _this.foldout.classList.add("floating-panel-style");
+                }
+                else if (spaceLeft > 0) {
+                    _this.root.classList.remove("compact");
+                    _this.foldout.classList.remove("floating-panel-style");
+                    if (getSpaceLeft() < 0) {
+                        // ensure we still have enough space left
+                        _this.root.classList.add("compact");
+                        _this.foldout.classList.add("floating-panel-style");
+                    }
+                }
+            }, 5);
+            var getCurrentWidth = function () {
+                return _this.options.clientWidth + _this.logoContainer.clientWidth;
+            };
+            var getSpaceLeft = function () {
+                return availableWidth - getCurrentWidth();
+            };
+        };
+        var template = document.createElement('template');
+        // TODO: make host full size again and move the buttons to a wrapper so that we can later easily open e.g. foldouts/dropdowns / use the whole canvas space
+        template.innerHTML = "<style>\n\n        #root {\n            position: absolute;\n            width: auto;\n            max-width: 95%;\n            left: 50%;\n            transform: translateX(-50%);\n            top: min(20px, 10vh);\n            padding: 0.3rem;\n            display: flex;\n            visibility: visible;\n            flex-direction: row-reverse; /* if we overflow this should be right aligned so the logo is always visible */\n            pointer-events: all;\n            z-index: 1000;\n        }\n\n        /** hide the menu if it's empty **/\n        #root.has-no-options.logo-hidden {\n            display: none; \n        }\n\n        /** using a div here because then we can change the class for placement **/\n        #root.bottom {\n            top: auto;\n            bottom: min(30px, 10vh);\n        }\n        \n        .wrapper {\n            position: relative;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: stretch;\n            gap: 0px;\n            padding: 0 .3rem;\n        }\n\n        .wrapper > *, .options > button, ::slotted(*) {\n            position: relative;\n            border: none;\n            border-radius: 0;\n            outline: 1px solid rgba(0,0,0,0);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            max-height: 2.3rem;\n\n            /** basic font settings for all entries **/\n            font-size: 1rem;\n            font-family: 'Roboto Flex', sans-serif;\n            font-optical-sizing: auto;\n            font-weight: 500;\n            font-weight: 200;\n            font-variation-settings: \"wdth\" 100;\n            color: rgb(20,20,20);\n        }\n\n        .floating-panel-style {\n            background: rgba(255, 255, 255, .4);\n            outline: rgb(0 0 0 / 5%) 1px solid;\n            border: 1px solid rgba(255, 255, 255, .1);\n            box-shadow: 0px 7px 0.5rem 0px rgb(0 0 0 / 6%), inset 0px 0px 1.3rem rgba(0,0,0,.05);\n            border-radius: 1.1999999999999993rem;\n            /** \n             * to make nested background filter work \n             * https://stackoverflow.com/questions/60997948/backdrop-filter-not-working-for-nested-elements-in-chrome \n             **/\n            &::before {\n                content: '';\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                top: 0;\n                left: 0;\n                z-index: -1;\n                border-radius: 1.1999999999999993rem;\n                -webkit-backdrop-filter: blur(8px);\n                backdrop-filter: blur(8px);\n            }\n        }\n\n        a {\n            color: inherit;\n            text-decoration: none;\n        }\n\n        .options {\n            display: flex;\n            flex-direction: row;\n        }\n\n        .options > button, ::slotted(button) {\n            height: 2.25rem;\n            padding: .4rem .5rem;\n        }\n        \n        :host .options > button, ::slotted(*) {\n            background: transparent;\n            border: none;\n            white-space: nowrap;\n            transition: all 0.1s linear .02s;\n            border-radius: 0.8rem;\n            user-select: none;\n        }\n        :host .options > *:hover, ::slotted(*:hover) {\n            cursor: pointer;\n            color: black;\n            background: rgba(245, 245, 245, .8);\n            box-shadow: inset 0 0 1rem rgba(0,0,30,.2);\n            outline: rgba(0,0,0,.1) 1px solid;\n        }\n        :host .options > *:active, ::slotted(*:active) {\n            background: rgba(255, 255, 255, .8);\n            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);\n            transition: all 0.05s linear;\n        }\n        :host .options > *:focus, ::slotted(*:focus) {\n            outline: rgba(255,255,255,.5) 1px solid;\n        }\n\n        :host .options > *:disabled, ::slotted(*:disabled) {\n            background: rgba(0,0,0,.05);\n            color: rgba(60,60,60,.7);\n            pointer-events: none;\n        }\n\n        button, ::slotted(button) {\n            gap: 0.3rem;\n        }\n\n        /** XR button animation **/\n        :host button.this-mode-is-requested {\n            background: repeating-linear-gradient(to right, #fff 0%, #fff 40%, #aaffff 55%, #fff 80%);\n            background-size: 200% auto;\n            background-position: 0 100%;\n            animation: AnimationName .7s ease infinite forwards;\n        }\n        :host button.other-mode-is-requested {\n            opacity: .5;\n        }\n        \n        @keyframes AnimationName {\n            0% { background-position: 0% 0 }\n            100% { background-position: -200% 0 }\n        }\n\n\n\n\n        .logo {\n            cursor: pointer;\n            padding-left: 0.6rem;\n        }\n        .logo-hidden {\n            .logo {\n                display: none;\n            }\n        }\n        :host .has-options .logo {\n            border-left: 1px solid rgba(40,40,40,.4);\n            margin-left: 0.3rem;\n        }\n\n        .logo > span {\n            white-space: nowrap;\n        }\n\n\n\n        /** COMPACT */\n\n        /** Hide the menu button normally **/\n        .compact-menu-button { display: none; }\n        /** And show it when we're in compact mode **/\n        .compact .compact-menu-button {\n            display: block;\n            background: none;\n            border: none;\n            border-radius: 2rem;\n\n            margin: 0;\n            padding: 0 .3rem;\n            padding-top: .2rem;\n\n            color: #000;\n\n            &:hover {\n                background: rgba(255,255,255,.2);\n                cursor: pointer;\n            }\n            &:focus {\n                outline: 1px solid rgba(255,255,255,.5);\n            }\n        }  \n        .has-no-options .compact-menu-button {\n            display: none;\n        }\n        .open .compact-menu-button {\n            background: rgba(255,255,255,.2);\n        }\n        .logo-visible .compact-menu-button { \n            margin-left: .2rem;\n        }\n        \n        /** Open and hide menu **/\n        .compact .foldout { \n            display: none;\n        }\n        .open .options, .open .foldout {\n            display: flex;\n        }\n        .compact .wrapper {\n            padding: 0;\n        }\n        .compact .wrapper, .compact .options {\n            height: auto;\n            max-height: initial;\n            flex-direction: row;\n            gap: .12rem;\n        }\n        .compact .options { \n            flex-wrap: wrap;\n            gap: .3rem;\n        }\n        .compact .top .options {\n            height: auto;\n            flex-direction: row;\n        }\n        .compact .bottom .wrapper {\n            height: auto;\n            flex-direction: column;\n        }\n\n        .compact .foldout {\n            max-height: min(100ch, calc(100vh - 100px));\n            overflow: auto;\n            overflow-x: hidden;\n            align-items: center;\n\n            position: fixed;\n            bottom: calc(100% + 5px);\n            z-index: 100;\n            width: auto;\n            left: .2rem;\n            right: .2rem;\n            padding: .2rem;\n\n        }\n        .compact.logo-hidden .foldout {\n            /** for when there's no logo we want to center the foldout **/\n            min-width: 24ch;\n            margin-left: 50%;\n            transform: translateX(calc(-50% - .2rem));\n        }\n        \n        .compact.top .foldout {\n            top: calc(100% + 5px);\n            bottom: auto;\n        }\n\n        ::-webkit-scrollbar {\n            max-width: 7px;\n            background: rgba(100,100,100,.2);\n            border-radius: .2rem;\n        }\n        ::-webkit-scrollbar-thumb {\n            background: rgba(255, 255, 255, .3);\n            border-radius: .2rem;\n        }\n        ::-webkit-scrollbar-thumb:hover {\n            background: rgb(150,150,150);\n        }\n\n        .compact .options > * {\n            font-size: 1.2rem;\n            padding: .6rem .5rem;\n        }\n        .compact.has-options .logo {\n            border: none;\n            padding-left: 0;\n            margin-left: 1rem;\n            margin-bottom: .02rem;\n        }\n        .compact .options > button {\n            display: flex;\n            flex-basis: 100%;\n            min-height: 3rem;\n        }\n        .compact .options > button.row2 {\n            //border: 1px solid red !important;\n            display: flex;\n            flex: 1;\n            flex-basis: 30%;\n        }\n\n        /** If there's really not enough space then just hide all options **/\n        @media (max-width: 100px) or (max-height: 100px){\n            .foldout {\n                display: none !important;\n            }\n            .compact-menu-button {\n                display: none !important;\n            }\n        }\n        \n        /* dark mode */\n        /*\n        @media (prefers-color-scheme: dark) {\n            :host {\n                background: rgba(0,0,0, .6);\n            }\n            :host button {\n                color: rgba(200,200,200);\n            }\n            :host button:hover {\n                background: rgba(100,100,100, .8);\n            }\n        }\n        */\n\n        </style>\n        \n        <div id=\"root\" class=\"logo-visible floating-panel-style bottom\">\n            <div class=\"wrapper\">\n                <div class=\"foldout\">\n                    <div class=\"options\" part=\"options\">\n                        <slot></slot>\n                    </div>\n                    <div class=\"options\" part=\"options\">\n                        <slot name=\"end\"></slot>\n                    </div>\n                </div>\n                <div style=\"user-select:none\" class=\"logo\">\n                    <span class=\"madewith notranslate\">powered by</span>\n                </div>\n            </div>\n            <button class=\"compact-menu-button\"></button>\n        </div>\n        ";
+        // we dont need to expose the shadow root
+        var shadow = _this.attachShadow({ mode: 'open' });
+        // we need to add the icons to both the shadow dom as well as the HEAD to work
+        // https://github.com/google/material-design-icons/issues/1165
+        fonts_js_1.ensureFonts();
+        fonts_js_1.loadFont(fonts_js_1.iconFontUrl, { loadedCallback: function () { _this.handleSizeChange(); } });
+        fonts_js_1.loadFont(fonts_js_1.iconFontUrl, { element: shadow });
+        var content = template.content.cloneNode(true);
+        shadow === null || shadow === void 0 ? void 0 : shadow.appendChild(content);
+        _this.root = shadow.querySelector("#root");
+        _this.wrapper = (_a = _this.root) === null || _a === void 0 ? void 0 : _a.querySelector(".wrapper");
+        _this.options = (_b = _this.root) === null || _b === void 0 ? void 0 : _b.querySelector(".options");
+        _this.logoContainer = (_c = _this.root) === null || _c === void 0 ? void 0 : _c.querySelector(".logo");
+        _this.compactMenuButton = (_d = _this.root) === null || _d === void 0 ? void 0 : _d.querySelector(".compact-menu-button");
+        _this.compactMenuButton.append(icons_js_1.getIconElement("more_vert"));
+        _this.foldout = (_e = _this.root) === null || _e === void 0 ? void 0 : _e.querySelector(".foldout");
+        (_f = _this.root) === null || _f === void 0 ? void 0 : _f.appendChild(_this.wrapper);
+        _this.wrapper.classList.add("wrapper");
+        var logo = logo_element_js_1.NeedleLogoElement.create();
+        logo.style.minHeight = "1rem";
+        _this.logoContainer.append(logo);
+        _this.logoContainer.addEventListener("click", function () {
+            globalThis.open("https://needle.tools", "_blank");
+        });
+        // if the user has a license then we CAN hide the needle logo
+        engine_license_js_1.onLicenseCheckResultChanged(function (res) {
+            if (res == true && engine_license_js_1.hasCommercialLicense() && !debugNonCommercial) {
+                var visible = _this._userRequestedLogoVisible;
+                if (visible === undefined)
+                    visible = false;
+                _this..call(_this, visible);
+            }
+        });
+        _this.compactMenuButton.addEventListener("click", function (evt) {
+            evt.preventDefault();
+            _this.root.classList.toggle("open");
+        });
+        var context = _this._context;
+        // we need to assign it in the timeout because the reference is set *after* the constructor did run
+        setTimeout(function () { return context = _this._context; });
+        // watch changes
+        var changeEventCounter = 0;
+        var forceVisible = function (parent, visible) {
+            var _a, _b, _c;
+            if (debug)
+                console.log("Set menu visible", visible);
+            if ((context === null || context === void 0 ? void 0 : context.isInAR) && context.arOverlayElement) {
+                if (parent != context.arOverlayElement) {
+                    context.arOverlayElement.appendChild(_this);
+                }
+            }
+            else if (_this.parentNode != ((_a = _this._domElement) === null || _a === void 0 ? void 0 : _a.shadowRoot))
+                (_c = (_b = _this._domElement) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.appendChild(_this);
+            _this.style.display = visible ? "flex" : "none";
+            _this.style.visibility = "visible";
+            _this.style.opacity = "1";
+        };
+        var isHandlingMutation = false;
+        var rootObserver = new MutationObserver(function (mutations) {
+            var _a;
+            if (isHandlingMutation) {
+                return;
+            }
+            try {
+                isHandlingMutation = true;
+                _this.onChangeDetected(mutations);
+                // ensure the menu is not hidden or removed
+                var requiredParent_1 = _this === null || _this === void 0 ? void 0 : _this.parentNode;
+                if (_this.style.display != "flex" || _this.style.visibility != "visible" || _this.style.opacity != "1" || requiredParent_1 != ((_a = _this._domElement) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {
+                    if (!engine_license_js_1.hasCommercialLicense()) {
+                        var change = changeEventCounter++;
+                        // if a user doesn't have a local pro license *but* for development the menu is hidden then we show a warning
+                        if (engine_networking_utils_js_1.isLocalNetwork() && _this._userRequestedMenuVisible === false) {
+                            // set visible once so that the check above is not triggered again
+                            if (change === 0) {
+                                // if the user requested visible to false before this code is called for the first time we want to respect the choice just in this case
+                                forceVisible(requiredParent_1, _this._userRequestedMenuVisible);
+                            }
+                            // warn only once
+                            if (change === 1) {
+                                console.warn("Needle Menu Warning: You need a PRO license to hide the Needle Engine menu \u2192 The menu will be visible in your deployed website if you don't have a PRO license. See https://needle.tools/pricing for details.");
+                            }
+                        }
+                        else {
+                            if (change === 0) {
+                                forceVisible(requiredParent_1, true);
+                            }
+                            else {
+                                setTimeout(function () { return forceVisible(requiredParent_1, true); }, 5);
+                            }
+                        }
+                    }
+                }
+            }
+            finally {
+                isHandlingMutation = false;
+            }
+        });
+        rootObserver.observe(_this.root, { childList: true, subtree: true, attributes: true });
+        if (debug) {
+            _this.___insertDebugOptions();
+        }
+        return _this;
+    }
+    NeedleMenuElement.create = function () {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement#is
+        return document.createElement(elementName, { is: elementName });
+    };
+    NeedleMenuElement.getOrCreate = function (domElement, context) {
+        var element = domElement.querySelector(elementName);
+        if (!element && domElement.shadowRoot) {
+            element = domElement.shadowRoot.querySelector(elementName);
+        }
+        if (!element) {
+            element = NeedleMenuElement.create();
+            if (domElement.shadowRoot)
+                domElement.shadowRoot.appendChild(element);
+            else
+                domElement.appendChild(element);
+        }
+        element._domElement = domElement;
+        element._context = context;
+        return element;
+    };
+    NeedleMenuElement.prototype.connectedCallback = function () {
+        var _this = this;
+        window.addEventListener("resize", this.handleSizeChange);
+        this.handleMenuVisible();
+        this._sizeChangeInterval = setInterval(function () { return _this.handleSizeChange(undefined, true); }, 5000);
+        // the dom element is set after the constructor runs
+        setTimeout(function () {
+            var _a, _b;
+            (_a = _this._domElement) === null || _a === void 0 ? void 0 : _a.addEventListener("resize", _this.handleSizeChange);
+            (_b = _this._domElement) === null || _b === void 0 ? void 0 : _b.addEventListener("click", __classPrivateFieldGet(_this, _onClick));
+        }, 1);
+    };
+    NeedleMenuElement.prototype.disconnectedCallback = function () {
+        var _a, _b;
+        window.removeEventListener("resize", this.handleSizeChange);
+        clearInterval(this._sizeChangeInterval);
+        (_a = this._domElement) === null || _a === void 0 ? void 0 : _a.removeEventListener("resize", this.handleSizeChange);
+        (_b = this._context) === null || _b === void 0 ? void 0 : _b.domElement.removeEventListener("click", __classPrivateFieldGet(this, _onClick));
+    };
+    NeedleMenuElement.prototype.showNeedleLogo = function (visible) {
+        this._userRequestedLogoVisible = visible;
+        if (!visible) {
+            if (!engine_license_js_1.hasCommercialLicense() || debugNonCommercial) {
+                console.warn("Needle Menu: You need a PRO license to hide the Needle Engine logo.");
+                var localNetwork = engine_networking_utils_js_1.isLocalNetwork();
+                if (!localNetwork)
+                    return;
+            }
+        }
+        this..call(this, visible);
+    };
+    NeedleMenuElement.prototype. = function (visible) {
+        this.logoContainer.style.display = "";
+        this.logoContainer.style.opacity = "1";
+        this.logoContainer.style.visibility = "visible";
+        if (visible) {
+            this.root.classList.remove("logo-hidden");
+            this.root.classList.add("logo-visible");
+        }
+        else {
+            this.root.classList.remove("logo-visible");
+            this.root.classList.add("logo-hidden");
+        }
+    };
+    NeedleMenuElement.prototype.setPosition = function (position) {
+        // ensure the position is of a known type:
+        if (position !== "top" && position !== "bottom") {
+            return console.error("NeedleMenu.setPosition: invalid position", position);
+        }
+        this.root.classList.remove("top", "bottom");
+        this.root.classList.add(position);
+    };
+    NeedleMenuElement.prototype.setVisible = function (visible) {
+        this._userRequestedMenuVisible = visible;
+        this.style.display = visible ? "flex" : "none";
+    };
+    NeedleMenuElement.prototype.append = function () {
+        var nodes = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            nodes[_i] = arguments[_i];
+        }
+        for (var _a = 0, nodes_1 = nodes; _a < nodes_1.length; _a++) {
+            var node = nodes_1[_a];
+            if (typeof node === "string") {
+                var element = document.createTextNode(node);
+                this.options.appendChild(element);
+            }
+            else {
+                this.options.appendChild(node);
+            }
+        }
+    };
+    NeedleMenuElement.prototype.appendChild = function (node) {
+        var _a, _b;
+        if (!(node instanceof Node)) {
+            var button = document.createElement("button");
+            button.textContent = node.label;
+            button.onclick = node.onClick;
+            button.setAttribute("priority", (_b = (_a = node.priority) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "0");
+            if (node.icon) {
+                var icon = icons_js_1.getIconElement(node.icon);
+                if (node.iconSide === "right") {
+                    button.appendChild(icon);
+                }
+                else {
+                    button.prepend(icon);
+                }
+            }
+            if (node["class"]) {
+                button.classList.add(node["class"]);
+            }
+            node = button;
+        }
+        var res = this.options.appendChild(node);
+        return res;
+    };
+    NeedleMenuElement.prototype.prepend = function () {
+        var nodes = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            nodes[_i] = arguments[_i];
+        }
+        for (var _a = 0, nodes_2 = nodes; _a < nodes_2.length; _a++) {
+            var node = nodes_2[_a];
+            if (typeof node === "string") {
+                var element = document.createTextNode(node);
+                this.options.prepend(element);
+            }
+            else {
+                this.options.prepend(node);
+            }
+        }
+    };
+    /** Called when any change in the web component is detected (including in children and child attributes) */
+    NeedleMenuElement.prototype.onChangeDetected = function (_mut) {
+        if (this._isHandlingChange)
+            return;
+        this._isHandlingChange = true;
+        try {
+            // if (debug) console.log("NeedleMenu.onChangeDetected", _mut);
+            this.handleMenuVisible();
+            for (var _i = 0, _mut_1 = _mut; _i < _mut_1.length; _i++) {
+                var mut = _mut_1[_i];
+                if (mut.target == this.options) {
+                    this.onOptionsChildrenChanged(mut);
+                }
+            }
+        }
+        finally {
+            this._isHandlingChange = false;
+        }
+    };
+    NeedleMenuElement.prototype.onOptionsChildrenChanged = function (_mut) {
+        this.root.classList.toggle("has-options", this.hasAnyVisibleOptions);
+        this.root.classList.toggle("has-no-options", !this.hasAnyVisibleOptions);
+        this.handleSizeChange(undefined, true);
+        if (_mut.type === "childList") {
+            var needsSorting = false;
+            var now = Date.now();
+            // sort children by priority only when necessary
+            for (var i = 0; i < _mut.addedNodes.length; i++) {
+                var child = _mut.addedNodes[i];
+                var lastTime = this._didSort.get(child);
+                if (typeof lastTime === "number" && now - lastTime < 100)
+                    continue;
+                this._didSort.set(child, now);
+                needsSorting = true;
+            }
+            if (needsSorting) {
+                var children = Array.from(this.options.children);
+                children.sort(function (a, b) {
+                    var p1 = parseInt(a.getAttribute("priority") || "0");
+                    var p2 = parseInt(b.getAttribute("priority") || "0");
+                    return p1 - p2;
+                });
+                for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+                    var child = children_1[_i];
+                    this.options.appendChild(child);
+                }
+            }
+        }
+    };
+    /** checks if the menu has any content and should be rendered at all
+     * if we dont have any content and logo then we hide the menu
+     */
+    NeedleMenuElement.prototype.handleMenuVisible = function () {
+        if (debug)
+            console.log("Update VisibleState: Any Content?", this.hasAnyContent);
+        if (this.hasAnyContent) {
+            this.root.style.display = "";
+        }
+        else {
+            this.root.style.display = "none";
+        }
+        this.root.classList.toggle("has-options", this.hasAnyVisibleOptions);
+        this.root.classList.toggle("has-no-options", !this.hasAnyVisibleOptions);
+    };
+    Object.defineProperty(NeedleMenuElement.prototype, "hasAnyContent", {
+        /** @returns true if we have any content OR a logo */
+        get: function () {
+            // is the logo visible?
+            if (this.logoContainer.style.display != "none")
+                return true;
+            if (this.hasAnyVisibleOptions)
+                return true;
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NeedleMenuElement.prototype, "hasAnyVisibleOptions", {
+        get: function () {
+            // do we have any visible buttons?
+            for (var i = 0; i < this.options.children.length; i++) {
+                var child = this.options.children[i];
+                // is slot?
+                if (child.tagName === "SLOT") {
+                    var slotElement = child;
+                    var nodes = slotElement.assignedNodes();
+                    for (var _i = 0, nodes_3 = nodes; _i < nodes_3.length; _i++) {
+                        var node = nodes_3[_i];
+                        if (node instanceof HTMLElement) {
+                            if (node.style.display != "none")
+                                return true;
+                        }
+                    }
+                }
+                else if (child.style.display != "none")
+                    return true;
+            }
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    NeedleMenuElement.prototype.___insertDebugOptions = function () {
+        var _this = this;
+        window.addEventListener("keydown", function (e) {
+            if (e.key === "p") {
+                _this.setPosition(_this.root.classList.contains("top") ? "bottom" : "top");
+            }
+        });
+        var removeOptionsButton = document.createElement("button");
+        removeOptionsButton.textContent = "Hide Buttons";
+        removeOptionsButton.onclick = function () {
+            var optionsChildren = new Array(_this.options.children.length);
+            for (var i = 0; i < _this.options.children.length; i++) {
+                optionsChildren[i] = _this.options.children[i];
+            }
+            for (var _i = 0, optionsChildren_1 = optionsChildren; _i < optionsChildren_1.length; _i++) {
+                var child = optionsChildren_1[_i];
+                _this.options.removeChild(child);
+            }
+            setTimeout(function () {
+                for (var _i = 0, optionsChildren_2 = optionsChildren; _i < optionsChildren_2.length; _i++) {
+                    var child = optionsChildren_2[_i];
+                    _this.options.appendChild(child);
+                }
+            }, 1000);
+        };
+        this.appendChild(removeOptionsButton);
+        var anotherButton = document.createElement("button");
+        anotherButton.textContent = "Toggle Logo";
+        anotherButton.addEventListener("click", function () {
+            _this.logoContainer.style.display = _this.logoContainer.style.display === "none" ? "" : "none";
+        });
+        this.appendChild(anotherButton);
+    };
+    return NeedleMenuElement;
+}(HTMLElement));
+exports.NeedleMenuElement = NeedleMenuElement;
+_onClick = new WeakMap();
+if (!customElements.get(elementName))
+    customElements.define(elementName, NeedleMenuElement);

src/engine/xr/usdz.ts ADDED Viewed

@@ -0,0 +1,31 @@
+declare type USDZExporter = {
+    exportAndOpen(): Promise<any>,
+}
+/**
+ * Internal registry for USDZ exporters. This is used by NeedleXRSession.start("immersive-ar")
+ */
+export namespace InternalUSDZRegistry {
+    const usdzExporter: USDZExporter[] = [];
+    export function exportAndOpen(): boolean {
+        if (!usdzExporter?.length) return false;
+        for (const exp of usdzExporter) {
+            exp.exportAndOpen();
+        }
+        return true;
+    }
+    export function registerExporter(exporter: USDZExporter) {
+        usdzExporter.push(exporter);
+    }
+    export function unregisterExporter(exporter: USDZExporter) {
+        if (!usdzExporter) return;
+        const index = usdzExporter.indexOf(exporter);
+        if (index >= 0) {
+            usdzExporter.splice(index, 1);
+        }
+    }
+}