@needle-tools/engine 4.16.0-next.bc4d35d → 4.16.1

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 {
@@ -169,7 +169,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     public get context() { return this._context; }
 
     private _context!: Context;
-    private _overlay_ar: AROverlayHandler;
+    private _overlay_ar!: AROverlayHandler;
     private _loadingProgress01: number = 0;
     private _loadingView?: ILoadingViewHandler;
     private _previousSrc: string | null | string[] = null;
@@ -179,28 +179,8 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
 
     constructor() {
         super();
-        // TODO: do we want to rename this event?
-        this.addEventListener("ready", this.onReady);
-        this._overlay_ar = new AROverlayHandler();
-        this._context = new Context({ domElement: this });
-    }
-
-    private ensureInitialized() {
-        if (!this._didInitialize) {
-            this._didInitialize = true;
-            this.initializeDom();
-        }
-    }
-
-    private initializeDom() {
-
-        ensureFonts();
-
-        const shadow = this.attachShadow({ mode: 'open', delegatesFocus: true });
-        this.setAttribute("role", "application");
-        this.setAttribute("aria-label", "Needle Engine 3D scene");
+        this.attachShadow({ mode: 'open', delegatesFocus: true });
         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');
 
@@ -266,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;
@@ -279,25 +259,36 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     <slot class="overlay-content" style="display: contents;"></slot>
 </div>
 `;
-        // #endregion
 
-        shadow.appendChild(template.content.cloneNode(true));
+        this.shadowRoot!.appendChild(template.content.cloneNode(true));
 
+        // 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");
-        }
-        
-        this.ensureInitialized();
+    connectedCallback() {
+        if (debug) console.log("<needle-engine> connected");
 
+        this.ensureInitialized();
         this.setPublicKey();
         this.setVersion();
 
@@ -306,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);
@@ -455,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 });
@@ -489,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
@@ -914,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. */
@@ -922,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;
@@ -943,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;
@@ -966,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 */
@@ -981,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;
@@ -1012,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. */
@@ -1083,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);
     }
@@ -1127,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;
@@ -1136,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);
     }
 }