@needle-tools/engine 4.16.0-next.1243700 → 4.16.0-next.1c21170

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

@@ -129,6 +129,7 @@ export class NeedleMenu {
 
     constructor(context: Context) {
         this._menu = NeedleMenuElement.getOrCreate(context.domElement, context);
+        this._menu.ensureInitialized();
         this._context = context;
         this._spatialMenu = new NeedleSpatialMenu(context, this._menu);
         window.addEventListener("message", this.onPostMessage);
@@ -337,9 +338,13 @@ export class NeedleMenuElement extends HTMLElement {
 
     private _domElement: HTMLElement | null = null;
     private _context: Context | null = null;
+    private _didInitialize = false;
 
     constructor() {
         super();
+    }
+
+    private initializeDom() {
 
         const 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
@@ -793,7 +798,7 @@ export class NeedleMenuElement extends HTMLElement {
 
 
         let context = this._context;
-        // we need to assign it in the timeout because the reference is set *after* the constructor did run
+        // we need to assign it in the timeout because the reference is set *after* the element is initialized
         setTimeout(() => context = this._context);
 
         // watch changes
@@ -862,13 +867,21 @@ export class NeedleMenuElement extends HTMLElement {
         }
     }
 
+    ensureInitialized() {
+        if (!this._didInitialize) {
+            this._didInitialize = true;
+            this.initializeDom();
+        }
+    }
+
     private _sizeChangeInterval;
 
     connectedCallback() {
+        this.ensureInitialized();
         window.addEventListener("resize", this.handleSizeChange);
         this.handleMenuVisible();
         this._sizeChangeInterval = setInterval(() => this.handleSizeChange(undefined, false), 5000);
-        // the dom element is set after the constructor runs
+        // the dom element is set after initialization runs
         setTimeout(() => {
             this._domElement?.addEventListener("resize", this.handleSizeChange);
             this._domElement?.addEventListener("click", this.#onClick);
@@ -956,19 +969,19 @@ export class NeedleMenuElement extends HTMLElement {
 
     // private _root: ShadowRoot | null = null;
     /** @private root container element inside shadow DOM */
-    private readonly root: HTMLDivElement;
+    private root!: HTMLDivElement;
     /** @private wraps the whole content (internal layout) */
-    private readonly wrapper: HTMLDivElement;
+    private wrapper!: HTMLDivElement;
     /** @private contains the buttons and dynamic elements */
-    private readonly options: HTMLDivElement;
+    private options!: HTMLDivElement;
     /** @private contains options visible when in compact mode */
-    private readonly optionsCompactMode: HTMLDivElement;
+    private optionsCompactMode!: HTMLDivElement;
     /** @private contains the needle-logo html element */
-    private readonly logoContainer: HTMLDivElement;
+    private logoContainer!: HTMLDivElement;
     /** @private compact menu button element */
-    private readonly compactMenuButton: HTMLButtonElement;
+    private compactMenuButton!: HTMLButtonElement;
     /** @private foldout container used in compact mode */
-    private readonly foldout: HTMLDivElement;
+    private foldout!: HTMLDivElement;
 
 
     private readonly trackedElements: WeakSet<Node> = new WeakSet();

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

@@ -14,7 +14,7 @@ import { getParam } from "../engine_utils.js";
 import { RGBAColor } from "../js-extensions/RGBAColor.js";
 import { ensureFonts } from "./fonts.js";
 import { arContainerClassName, AROverlayHandler } from "./needle-engine.ar-overlay.js";
-import type { registerObservableAttribute} from "./needle-engine.extras.js";
+import type { registerObservableAttribute } from "./needle-engine.extras.js";
 import { calculateProgress01, EngineLoadingView, type ILoadingViewHandler } from "./needle-engine.loading.js";
 
 declare global {
@@ -168,27 +168,19 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
      */
     public get context() { return this._context; }
 
-    private _context: Context;
-    private _overlay_ar: AROverlayHandler;
+    private _context!: Context;
+    private _overlay_ar!: AROverlayHandler;
     private _loadingProgress01: number = 0;
     private _loadingView?: ILoadingViewHandler;
     private _previousSrc: string | null | string[] = null;
     /** @private set to true after <needle-engine> did load completely at least once. Set to false when < to false when <needle-engine> is removed from the document removed from the document */
     private _didFullyLoad: boolean = false;
+    private _didInitialize = false;
 
     constructor() {
         super();
-        this._overlay_ar = new AROverlayHandler();
-        // TODO: do we want to rename this event?
-        this.addEventListener("ready", this.onReady);
-
-        ensureFonts();
-
         this.attachShadow({ mode: 'open', delegatesFocus: true });
-        this.setAttribute("role", "application");
-        this.setAttribute("aria-label", "Needle Engine 3D scene");
         const template = document.createElement('template');
-        // #region CSS
         template.innerHTML = `<style>
     @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
 
@@ -254,7 +246,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     }
     :host .quit-ar-button {
         position: absolute;
-        // top: env(titlebar-area-y); /** this doesnt work **/
+        /** top: env(titlebar-area-y); this doesnt work **/
         top: 60px; /** camera access needs a bit more space **/
         right: 20px;
         z-index: 9999;
@@ -267,24 +259,36 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     <slot class="overlay-content" style="display: contents;"></slot>
 </div>
 `;
-        // #endregion
 
-        if (this.shadowRoot)
-            this.shadowRoot.appendChild(template.content.cloneNode(true));
+        this.shadowRoot!.appendChild(template.content.cloneNode(true));
 
-        this._context = new Context({ domElement: this });
+        // TODO: do we want to rename this event?
+        this.addEventListener("ready", this.onReady);
         this.addEventListener("error", this.onError);
     }
 
+    private ensureInitialized() {
+        if (!this._didInitialize) {
+            this._didInitialize = true;
+            this.initializeDom();
+        }
+    }
+
+    // #region Init DOM
+    private initializeDom() {
+        ensureFonts();
+        this.setAttribute("role", "application");
+        this.setAttribute("aria-label", "Needle Engine 3D scene");
+    }
+
 
     /**
      * @internal
      */
-    async connectedCallback() {
-        if (debug) {
-            console.log("<needle-engine> connected");
-        }
+    connectedCallback() {
+        if (debug) console.log("<needle-engine> connected");
 
+        this.ensureInitialized();
         this.setPublicKey();
         this.setVersion();
 
@@ -293,9 +297,13 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
             this.setAttribute("tabindex", "0");
 
 
+        this._overlay_ar = new AROverlayHandler();
+        this._context ??= new Context({ domElement: this }); // we might have one already if onLoad is running
         this.addEventListener("xr-session-started", this.onXRSessionStarted);
         this.onSetupDesktop();
 
+
+
         if (!this.getAttribute("src")) {
             const global = (globalThis as any)["needle:codegen_files"] as unknown as string;
             if (debug) console.log("src is null, trying to load from globalThis[\"needle:codegen_files\"]", global);
@@ -442,6 +450,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     private async onLoad() {
 
         if (!this.isConnected) return;
+
         if (!this._context) {
             if (debug) console.warn("Create new context");
             this._context = new Context({ domElement: this });
@@ -476,7 +485,6 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         this.classList.add("loading");
 
 
-
         // Loading start events
         const allowOverridingDefaultLoading = hasCommercialLicense();
         // default loading can be overriden by calling preventDefault in the onload start event
@@ -901,7 +909,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     setAttribute(name: 'ktx2DecoderPath', value: string): void;
     /** Prevent Needle Engine context from being disposed when the element is removed from the DOM */
     setAttribute(name: 'keep-alive', value: 'true' | 'false'): void;
-    
+
     /** @private Public key used for licensing and feature gating. */
     setAttribute(name: 'public-key', value: string): void;
     /** @private Engine version string — usually set by the build/runtime. */
@@ -909,7 +917,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
 
     // LoadingAttributes
     // ...
-    
+
     // SkyboxAttributes
     /** URL to .exr, .hdr, .png, .jpg to be used as skybox */
     setAttribute(name: 'background-image', value: string): void;
@@ -930,7 +938,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
      * @example "background-color='#ff0000'" will set the background color to red.
      */
     setAttribute(name: 'background-color', value: string): void;
-    
+
     // RenderingAttributes
     /** Enable/disable renderer canvas transparency. */
     setAttribute(name: 'transparent', value: 'true' | 'false'): void;
@@ -953,9 +961,9 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     setAttribute(name: "autoplay", value: 'true' | 'false'): void;
     /** @private Used for switching the scene in SceneSwitcher */
     setAttribute(name: 'scene', value: string): void;
-    
+
     // setAttribute(name: 'loadstart', value: string): void;
-    
+
     /** @private Experimental.*/
     setAttribute(name: 'loading-blur', value: 'true' | 'false'): void;
     /** @private */
@@ -968,9 +976,9 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     /** Generic typed setter for known Needle Engine attributes */
     // Comment out to see errors inside NE for undocumented attributes
     // setAttribute<T extends keyof NeedleEngineAttributes>(qualifiedName: T, value: NeedleEngineAttributes[T]): void;
-    
+
     setAttribute(qualifiedName: ({} & string), value: string): void;
-    
+
     // The ones we're using internally:
     /*
     setAttribute(name: "tabindex", value: string): void;
@@ -999,7 +1007,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     getAttribute(name: 'ktx2DecoderPath'): string | null;
     /** Prevent Needle Engine context from being disposed when the element is removed from the DOM */
     getAttribute(name: 'keep-alive'): string | null;
-    
+
     /** @private Public key used for licensing and feature gating. */
     getAttribute(name: 'public-key'): string | null;
     /** @private Engine version string — usually set by the build/runtime. */
@@ -1070,13 +1078,13 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     /** Typed getter for known NeedleEngine attribute names; returns the typed shape declared in NeedleEngineAttributes or null. */
     // getAttribute<T extends keyof NeedleEngineAttributes>(qualifiedName: T): NeedleEngineAttributes[T] | null;
     getAttribute(qualifiedName: ({} & string)): string | null;
-    
+
     // The ones we're using interally:
     /*
     getAttribute(name: "autostart"): string | null;
     getAttribute(name: "tabindex"): string | null;
     */
-    
+
     getAttribute(qualifiedName: string): string | null {
         return super.getAttribute(qualifiedName);
     }
@@ -1114,7 +1122,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
     // This would be better but doesn't completely solve it
     // addEventListener(type: ({} & string), listener: any, options?: boolean | AddEventListenerOptions): void;
-    
+
     // The ones we're using interally:
     /* 
     addEventListener(type: "error", listener: (ev: ErrorEvent) => void, options?: boolean | AddEventListenerOptions): void;
@@ -1123,8 +1131,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     addEventListener(type: "drop", listener: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): void;
     addEventListener(type: "dragover", listener: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): void;
     */
-    addEventListener(type: string, listener: any, options?: boolean | AddEventListenerOptions): void
-    {
+    addEventListener(type: string, listener: any, options?: boolean | AddEventListenerOptions): void {
         return super.addEventListener(type, listener as EventListenerOrEventListenerObject, options);
     }
 }