@preference-sl/pref-viewer 2.13.0-beta.11 → 2.13.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.13.0-beta.11",
+    "version": "2.13.0-beta.12",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {

package/src/babylonjs-controller.js

@@ -39,7 +39,8 @@ import { translate } from "./localization/i18n.js";
  *  5. Use `setContainerVisibility`, `setMaterialOptions`, `setCameraOptions`, or `setIBLOptions` for targeted updates; these
  *     helpers stop/restart the render loop while they rebuild camera-dependent resources.
  *  6. Invoke `disable()` when the element disconnects to tear down scenes, XR sessions, observers, and handlers.
- *     The controller also disposes the shared GLTF resolver, which closes its internal IndexedDB handle.
+ *     `disable()` is asynchronous; it waits for XR/session shutdown before engine disposal and also disposes the
+ *     shared GLTF resolver, which closes its internal IndexedDB handle.
  *
  * Public API Highlights
  *  - constructor(canvas, containers, options)
@@ -65,6 +66,8 @@ import { translate } from "./localization/i18n.js";
  *    in SSR/Node contexts (though functionality activates only in browsers).
  *  - Pointer-pick lifecycle: hover/highlight raycasts are sampled on POINTERMOVE (time + distance thresholds), wheel
  *    input avoids picks entirely, and right-click POINTERUP performs an on-demand pick for context-menu targeting.
+ *  - Teardown lifecycle: concurrent `disable()` calls are coalesced into a single in-flight promise to avoid races
+ *    during XR exit and engine disposal.
  */
 export default class BabylonJSController {
     #RENDER_SETTINGS_STORAGE_KEY = "pref-viewer/render-settings";
@@ -96,7 +99,7 @@ export default class BabylonJSController {
     #shadowGen = [];
     #XRExperience = null;
     #canvasResizeObserver = null;
-
+    
     #hdrTexture = null; // reusable in-memory HDR source cloned into scene.environmentTexture across reloads
     #lastPickedMeshId = null;
 
@@ -148,6 +151,12 @@ export default class BabylonJSController {
         movePickMinDistancePx: 2, // skip picks for sub-pixel jitter
     };
 
+    // Promises to track async disable() lifecycle when XR and general teardown may run concurrently; ensures idempotent disable calls are safe and callers can await full teardown completion.
+    #disablingPromises = {
+        xr: null,
+        general: null,
+    };
+
     /**
      * Constructs a new BabylonJSController instance.
      * Initializes the canvas, asset containers, and options for the Babylon.js scene.
@@ -1308,30 +1317,43 @@ export default class BabylonJSController {
 
     /**
      * Disposes the Babylon.js WebXR experience if it exists.
+     * If XR is currently active, waits for `exitXRAsync()` before disposing to avoid
+     * tearing down the engine while the XR session is still shutting down.
+     * Concurrent calls share the same in-flight promise so disposal runs only once.
      * @private
-     * @returns {void}
+     * @returns {Promise<void>}
      */
-    #disposeXRExperience() {
-        if (!this.#XRExperience) {
+    async #disposeXRExperience() {
+        if (this.#disablingPromises.xr) {
+            return await this.#disablingPromises.xr;
+        }
+
+        const xrExperience = this.#XRExperience;
+        if (!xrExperience) {
             return;
         }
 
-        if (this.#XRExperience.baseExperience.state === WebXRState.IN_XR) {
-            this.#XRExperience.baseExperience
-                .exitXRAsync()
-                .then(() => {
-                    this.#XRExperience.dispose();
-                    this.#XRExperience = null;
-                })
-                .catch((error) => {
-                    console.warn("Error exiting XR experience:", error);
-                    this.#XRExperience.dispose();
+        this.#disablingPromises.xr = (async () => {
+            try {
+                if (xrExperience.baseExperience?.state === WebXRState.IN_XR) {
+                    await xrExperience.baseExperience.exitXRAsync();
+                }
+            } catch (error) {
+                console.warn("PrefViewer: Error exiting XR experience:", error);
+            } finally {
+                try {
+                    xrExperience.dispose();
+                } catch (error) {
+                    console.warn("PrefViewer: Error disposing XR experience:", error);
+                }
+                if (this.#XRExperience === xrExperience) {
                     this.#XRExperience = null;
-                });
-        } else {
-            this.#XRExperience.dispose();
-            this.#XRExperience = null;
-        }
+                }
+                this.#disablingPromises.xr = null;
+            }
+        })();
+
+        await this.#disablingPromises.xr;
     }
 
     /**
@@ -2345,17 +2367,40 @@ export default class BabylonJSController {
     /**
      * Disposes the Babylon.js engine and disconnects the canvas resize observer.
      * Cleans up all scene, camera, light, XR, and GLTF resolver resources.
+     * The teardown is asynchronous: it waits for XR/session-dependent shutdown work
+     * before disposing the engine, and coalesces concurrent calls into one in-flight promise.
      * @public
-     * @returns {void}
+     * @returns {Promise<void>}
      */
-    disable() {
-        this.#disableInteraction();
-        this.#disposeAnimationController();
-        this.#disposeGLTFResolver();
-        this.#disposeXRExperience();
-        this.#unloadCameraDependentEffects();
-        this.#stopEngineRenderLoop();
-        this.#disposeEngine();
+    async disable() {
+        if (this.#disablingPromises.general) {
+            return await this.#disablingPromises.general;
+        }
+
+        this.#disablingPromises.general = (async () => {
+            this.#disableInteraction();
+            this.#disposeAnimationController();
+            this.#disposeGLTFResolver();
+            try {
+                await this.#disposeXRExperience();
+            } catch (error) {
+                console.warn("PrefViewer: Error while disposing XR experience:", error);
+            }
+            try {
+                await this.#unloadCameraDependentEffects();
+            } catch (error) {
+                console.warn("PrefViewer: Error while unloading camera-dependent effects:", error);
+            } finally {
+                this.#stopEngineRenderLoop();
+                this.#disposeEngine();
+            }
+        })();
+
+        try {
+            await this.#disablingPromises.general;
+        } finally {
+            this.#disablingPromises.general = null;
+        }
     }
 
     /**

package/src/localization/i18n.js

@@ -40,7 +40,7 @@ export const setLocale = (localeId) => {
         try {
             listener(currentLocale);
         } catch (error) {
-            console.warn("PrefViewer i18n listener failed", error);
+            console.warn("PrefViewer: i18n listener failed", error);
         }
     });
     return currentLocale;

package/src/pref-viewer-3d.js

@@ -162,7 +162,7 @@ export default class PrefViewer3D extends HTMLElement {
      */
     disconnectedCallback() {
         if (this.#babylonJSController) {
-            this.#babylonJSController.disable();
+            void this.#babylonJSController.disable();
         }
     }