@needle-tools/engine 4.16.0-next.1243700 → 4.16.0-next.34e2848

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,23 +168,33 @@ 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);
+    }
+
+    private ensureInitialized() {
+        if (!this._didInitialize) {
+            this._didInitialize = true;
+            this.initializeDom();
+        }
+    }
+
+    private initializeDom() {
 
         ensureFonts();
 
-        this.attachShadow({ mode: 'open', delegatesFocus: true });
+        const shadow = this.attachShadow({ mode: 'open', delegatesFocus: true });
         this.setAttribute("role", "application");
         this.setAttribute("aria-label", "Needle Engine 3D scene");
         const template = document.createElement('template');
@@ -269,10 +279,8 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
 `;
         // #endregion
 
-        if (this.shadowRoot)
-            this.shadowRoot.appendChild(template.content.cloneNode(true));
+        shadow.appendChild(template.content.cloneNode(true));
 
-        this._context = new Context({ domElement: this });
         this.addEventListener("error", this.onError);
     }
 
@@ -280,11 +288,10 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     /**
      * @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 +300,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 +453,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 });
@@ -901,7 +913,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 +921,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 +942,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 +965,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 +980,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 +1011,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 +1082,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 +1126,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 +1135,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);
     }
 }