@preference-sl/pref-viewer 2.11.0-beta.14 → 2.11.0-beta.16

package/package.json

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

package/src/babylonjs-animation-controller.js

@@ -144,6 +144,7 @@ export default class BabylonJSAnimationController {
      */
     dispose() {
         if (this.#highlightLayer) {
+            this.#highlightLayer.removeAllMeshes();
             this.#highlightLayer.dispose();
             this.#highlightLayer = null;
         }

package/src/babylonjs-animation-opening-menu.js

@@ -2,10 +2,15 @@ import OpeningAnimation from "./babylonjs-animation-opening.js";
 import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
 
 /**
- * OpeningAnimationMenu - Manages and renders the animation control menu for opening/closing animations in a Babylon.js scene.
+ * OpeningAnimationMenu - Manages and renders the interactive animation control menu for opening/closing animations in a Babylon.js scene.
  *
- * Responsibilities:
- *  - Renders a GUI menu with buttons for controlling animation playback (open, close, pause, go to opened/closed, loop).
+ * Summary:
+ *  Provides a floating HTML-based GUI menu with playback and loop controls for animated nodes, including buttons and a progress slider.
+ *  Handles user interaction, updates UI state based on animation state, and invokes external callbacks for animation actions.
+ *  Designed for integration with Babylon.js product configurators and interactive 3D applications.
+ *
+ * Key Features:
+ *  - Renders a menu with buttons for controlling animation playback (open, close, pause, go to opened/closed, loop).
  *  - Updates button states and slider position based on animation state, progress, and loop mode.
  *  - Handles user interactions and invokes provided callbacks for animation actions.
  *  - Synchronizes the slider value with animation progress, avoiding callback loops.
@@ -35,6 +40,7 @@ import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
  *  - #setPlayerButtonsState(): Updates all playback control buttons.
  *  - #setLoopButtonsState(): Updates all loop control buttons.
  *  - #createSlider(): Creates and configures the animation progress slider.
+ *  - #onSliderInput(event): Handles the slider input event for animation progress.
  *
  * Usage Example:
  *  const menu = new OpeningAnimationMenu(name, canvas, state, progress, loop, {
@@ -72,8 +78,6 @@ export default class OpeningAnimationMenu {
         repeatOff: `<svg id="repeat-off" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L15.73,19H7V22L3,18L7,14V17H13.73L7,10.27V11H5V8.27L2,5.27M17,13H19V17.18L17,15.18V13M17,5V2L21,6L17,10V7H8.82L6.82,5H17Z"/></svg>`,
     };
 
-    #isSettingSliderValue = false;
-
     /**
      * Constructs the OpeningAnimationMenu and initializes the menu UI.
      * @param {string} name - The name of the animation.
@@ -95,29 +99,6 @@ export default class OpeningAnimationMenu {
         this.#createMenu(animationState);
     }
 
-    /**
-     * Initializes and renders the menu UI, including buttons and slider.
-     * @private
-     */
-    #createMenu() {
-        this.#containerMain = document.createElement("div");
-        this.#containerMain.classList.add("pref-viewer-3d");
-        this.#containerMain.classList.add("animation-menu");
-        this.#containerMain.setAttribute("data-animation-name", this.#name);
-        this.#canvas.parentElement.prepend(this.#containerMain);
-
-        const style = document.createElement("style");
-        style.textContent = PrefViewer3DAnimationMenuStyles;
-        this.#containerMain.appendChild(style);
-
-        this.#containerButtons = document.createElement("div");
-        this.#containerButtons.classList.add("animation-menu-buttons");
-        this.#containerMain.appendChild(this.#containerButtons);
-
-        this.#createButtons();
-        this.#createSlider();
-    }
-
     /**
      * Internal helper to add a button to the menu.
      * Sets button appearance and attaches the callback for user interaction.
@@ -161,6 +142,46 @@ export default class OpeningAnimationMenu {
         this.#addButton("repeatOff", this.#icon.repeatOff, buttonsState.repeatOff.enabled, buttonsState.repeatOff.active, buttonsState.repeatOff.visible, this.#callbacks.onToggleLoop);
     }
 
+    /**
+     * Creates and configures the animation progress slider.
+     * @private
+     */
+    #createSlider() {
+        this.#slider = document.createElement("input");
+        this.#slider.setAttribute("type", "range");
+        this.#slider.setAttribute("min", "0");
+        this.#slider.setAttribute("max", "1");
+        this.#slider.setAttribute("step", "0.01");
+        this.#slider.setAttribute("value", this.#animationProgress.toString());
+        this.#slider.classList.add("animation-menu-slider");
+        this.#slider.addEventListener("input", this.#onSliderInput.bind(this));
+
+        this.#containerMain.appendChild(this.#slider);
+    }
+
+    /**
+     * Initializes and renders the menu UI, including buttons and slider.
+     * @private
+     */
+    #createMenu() {
+        this.#containerMain = document.createElement("div");
+        this.#containerMain.classList.add("pref-viewer-3d");
+        this.#containerMain.classList.add("animation-menu");
+        this.#containerMain.setAttribute("data-animation-name", this.#name);
+        this.#canvas.parentElement.prepend(this.#containerMain);
+
+        const style = document.createElement("style");
+        style.textContent = PrefViewer3DAnimationMenuStyles;
+        this.#containerMain.appendChild(style);
+
+        this.#containerButtons = document.createElement("div");
+        this.#containerButtons.classList.add("animation-menu-buttons");
+        this.#containerMain.appendChild(this.#containerButtons);
+
+        this.#createButtons();
+        this.#createSlider();
+    }
+
     /**
      * Retrieves a button control by its name.
      * @private
@@ -172,23 +193,33 @@ export default class OpeningAnimationMenu {
     }
 
     /**
-     * Updates the visual state of a button (enabled, active, visible).
+     * Combines player and loop button states.
      * @private
-     * @param {string} name - Button identifier.
-     * @param {boolean} enabled
-     * @param {boolean} active
-     * @param {boolean} visible
+     * @returns {object}
      */
-    #setButtonState(name, enabled, active, visible = true) {
-        const button = this.#getButtonByName(name);
-        if (!button) {
-            return;
-        }
-        const classToRemove = ["active", "enabled", "disabled", "hidden", "visible"];
-        button.classList.remove(...classToRemove);
-        const stateClass = active ? "active" : enabled ? "enabled" : "disabled";
-        const visibilityClass = visible ? "visible" : "hidden";
-        button.classList.add(stateClass, visibilityClass);
+    #getButtonsState() {
+        return Object.assign(this.#getPlayerButtonsState(), this.#getLoopButtonsState());
+    }
+
+    /**
+     * Returns the state for loop control buttons.
+     * @private
+     * @returns {object}
+     */
+    #getLoopButtonsState() {
+        const buttonsState = {
+            repeat: {
+                enabled: this.#animationLoop,
+                active: false,
+                visible: this.#animationLoop,
+            },
+            repeatOff: {
+                enabled: !this.#animationLoop,
+                active: false,
+                visible: !this.#animationLoop,
+            },
+        };
+        return buttonsState;
     }
 
     /**
@@ -228,33 +259,33 @@ export default class OpeningAnimationMenu {
     }
 
     /**
-     * Returns the state for loop control buttons.
+     * Updates the visual state of a button (enabled, active, visible).
      * @private
-     * @returns {object}
+     * @param {string} name - Button identifier.
+     * @param {boolean} enabled
+     * @param {boolean} active
+     * @param {boolean} visible
      */
-    #getLoopButtonsState() {
-        const buttonsState = {
-            repeat: {
-                enabled: this.#animationLoop,
-                active: false,
-                visible: this.#animationLoop,
-            },
-            repeatOff: {
-                enabled: !this.#animationLoop,
-                active: false,
-                visible: !this.#animationLoop,
-            },
-        };
-        return buttonsState;
+    #setButtonState(name, enabled, active, visible = true) {
+        const button = this.#getButtonByName(name);
+        if (!button) {
+            return;
+        }
+        const classToRemove = ["active", "enabled", "disabled", "hidden", "visible"];
+        button.classList.remove(...classToRemove);
+        const stateClass = active ? "active" : enabled ? "enabled" : "disabled";
+        const visibilityClass = visible ? "visible" : "hidden";
+        button.classList.add(stateClass, visibilityClass);
     }
 
     /**
-     * Combines player and loop button states.
+     * Updates all loop control buttons according to current loop mode.
      * @private
-     * @returns {object}
      */
-    #getButtonsState() {
-        return Object.assign(this.#getPlayerButtonsState(), this.#getLoopButtonsState());
+    #setLoopButtonsState() {
+        const buttonsState = this.#getLoopButtonsState();
+        this.#setButtonState("repeat", buttonsState.repeat.enabled, buttonsState.repeat.active, buttonsState.repeat.visible);
+        this.#setButtonState("repeatOff", buttonsState.repeatOff.enabled, buttonsState.repeatOff.active, buttonsState.repeatOff.visible);
     }
 
     /**
@@ -271,39 +302,17 @@ export default class OpeningAnimationMenu {
     }
 
     /**
-     * Updates all loop control buttons according to current loop mode.
-     * @private
-     */
-    #setLoopButtonsState() {
-        const buttonsState = this.#getLoopButtonsState();
-        this.#setButtonState("repeat", buttonsState.repeat.enabled, buttonsState.repeat.active, buttonsState.repeat.visible);
-        this.#setButtonState("repeatOff", buttonsState.repeatOff.enabled, buttonsState.repeatOff.active, buttonsState.repeatOff.visible);
-    }
-
-    /**
-     * Creates and configures the animation progress slider.
+     * Handles the slider input event for animation progress.
      * @private
+     * @param {Event} event - The input event from the slider.
+     * @returns {void}
+     * @description
+     * If the slider value is being set programmatically, the event is ignored to prevent callback loops.
      */
-    #createSlider() {
-        this.#slider = document.createElement("input");
-        this.#slider.setAttribute("type", "range");
-        this.#slider.setAttribute("min", "0");
-        this.#slider.setAttribute("max", "1");
-        this.#slider.setAttribute("step", "0.01");
-        this.#slider.setAttribute("value", this.#animationProgress.toString());
-        this.#slider.classList.add("animation-menu-slider");
-
-        this.#slider.addEventListener("input", (event) => {
-            if (this.#isSettingSliderValue) {
-                this.#isSettingSliderValue = false;
-                return;
-            }
-            if (this.#callbacks && typeof this.#callbacks.onSetAnimationProgress === "function") {
-                this.#callbacks.onSetAnimationProgress(event.target.value);
-            }
-        });
-
-        this.#containerMain.appendChild(this.#slider);
+    #onSliderInput(event) {
+        if (this.#callbacks && typeof this.#callbacks.onSetAnimationProgress === "function") {
+            this.#callbacks.onSetAnimationProgress(event.target.value);
+        }
     }
 
     /**
@@ -344,14 +353,12 @@ export default class OpeningAnimationMenu {
 
     /**
      * Sets the animation progress value and updates the slider position.
-     * When called, the slider value is updated programmatically without triggering the slider's value change callback.
      * @public
      * @param {number} progress - The new animation progress value (between 0 and 1).
      */
     set animationProgress(progress) {
         this.#animationProgress = progress;
-        this.#isSettingSliderValue = true;
-        this.#slider.value = progress;
+        this.#slider.value = progress.toString();
     }
 
     /**

package/src/babylonjs-controller.js

@@ -1,24 +1,31 @@
-import { ArcRotateCamera, AssetContainer, Camera, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointerEventTypes, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager } from "@babylonjs/core";
+import { ArcRotateCamera, AssetContainer, Camera, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointerEventTypes, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager, WebXRState } from "@babylonjs/core";
 import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression.js";
 import "@babylonjs/loaders";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression.js";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
+import JSZip from "jszip";
 
 import GLTFResolver from "./gltf-resolver.js";
 import { MaterialData } from "./pref-viewer-3d-data.js";
 import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
 
 /**
- * BabylonJSController - Main controller for managing Babylon.js 3D scenes, assets, and interactions.
+ * BabylonJSController - Main controller for managing Babylon.js 3D scenes, assets, rendering, and user interactions in PrefViewer.
  *
- * Responsibilities:
+ * Summary:
+ *  Provides a high-level API for initializing, loading, displaying, and exporting 3D models and environments using Babylon.js.
+ *  Manages advanced rendering features, AR integration, asset containers, and user interaction logic.
+ *
+ * Key Responsibilities:
  *  - Initializes and manages the Babylon.js engine, scene, camera, lights, and asset containers.
  *  - Handles loading, replacing, and disposing of 3D models, environments, and materials.
  *  - Configures advanced rendering features such as Draco mesh compression, shadows, and image-based lighting (IBL).
  *  - Integrates Babylon.js WebXR experience for augmented reality (AR) support.
- *  - Provides methods for downloading models and scenes in GLB, GLTF, and USDZ formats.
+ *  - Provides methods for downloading models and scenes in GLB, glTF (ZIP), and USDZ formats.
  *  - Manages camera and material options, container visibility, and user interactions.
  *  - Observes canvas resize events and updates the engine accordingly.
+ *  - Designed for integration with PrefViewer and GLTFResolver.
+ *  - All resource management and rendering operations are performed asynchronously for performance.
  *
  * Usage:
  *  - Instantiate: const controller = new BabylonJSController(canvas, containers, options);
@@ -26,7 +33,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - Load assets: await controller.load();
  *  - Set camera/material options: controller.setCameraOptions(), controller.setMaterialOptions();
  *  - Control visibility: controller.setContainerVisibility(name, show);
- *  - Download assets: controller.downloadModelGLB(), controller.downloadModelGLTF(), controller.downloadModelUSDZ(), controller.downloadModelAndSceneGLB(), controller.downloadModelAndSceneGLTF(), controller.downloadModelAndSceneUSDZ();
+ *  - Download assets: controller.downloadGLB(), controller.downloadGLTF(), controller.downloadUSDZ();
  *  - Disable rendering: controller.disable();
  *
  * Public Methods:
@@ -40,7 +47,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - downloadGLTF(content): Downloads the current scene, model, or environment as a glTF ZIP file.
  *  - downloadUSDZ(content): Downloads the current scene, model, or environment as a USDZ file.
  *
- * Private Methods:
+ * Private Methods (using ECMAScript private fields):
  *  - #configureDracoCompression(): Sets up Draco mesh compression.
  *  - #renderLoop(): Babylon.js render loop callback.
  *  - #addStylesToARButton(): Styles AR button.
@@ -58,6 +65,8 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - #onKeyUp(event): Handles keyup events for download dialog and shortcuts.
  *  - #enableInteraction(): Adds canvas and scene interaction event listeners.
  *  - #disableInteraction(): Removes canvas and scene interaction event listeners.
+ *  - #disposeAnimationController(): Disposes the animation controller if it exists.
+ *  - #disposeXRExperience(): Disposes the Babylon.js WebXR experience if it exists.
  *  - #disposeEngine(): Disposes engine and releases all resources.
  *  - #setOptionsMaterial(optionMaterial): Applies a material option to relevant meshes.
  *  - #setOptions_Materials(): Applies all material options from configuration.
@@ -77,11 +86,6 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - #addDateToName(name): Appends the current date/time to a name string.
  *  - #downloadZip(files, name, comment, addDateInName): Generates and downloads a ZIP file.
  *  - #openDownloadDialog(): Opens the modal download dialog.
- *
- * Notes:
- *  - Designed for integration with PrefViewer and GLTFResolver.
- *  - Supports advanced Babylon.js features for product visualization and configurators.
- *  - All resource management and rendering operations are performed asynchronously for performance.
  */
 export default class BabylonJSController {
     // Canvas HTML element
@@ -463,6 +467,46 @@ export default class BabylonJSController {
         }
     }
 
+    /**
+     * Disposes the BabylonJSAnimationController instance if it exists.
+     * @private
+     * @returns {void}
+     */
+    #disposeAnimationController() {
+        if (this.#babylonJSAnimationController) {
+            this.#babylonJSAnimationController.dispose();
+            this.#babylonJSAnimationController = null;
+        }
+    }
+
+    /**
+     * Disposes the Babylon.js WebXR experience if it exists.
+     * @private
+     * @returns {void}
+     */
+    #disposeXRExperience() {
+        if (!this.#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.#XRExperience = null;
+                });
+        } else {
+            this.#XRExperience.dispose();
+            this.#XRExperience = null;
+        }
+    }
+
     /**
      * Disposes the Babylon.js engine and releases all associated resources.
      * @private
@@ -476,7 +520,6 @@ export default class BabylonJSController {
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
         this.#shadowGen = null;
-        this.#XRExperience = null;
     }
 
     /**
@@ -893,10 +936,7 @@ export default class BabylonJSController {
 
         await Promise.allSettled(promiseArray)
             .then((values) => {
-                if (this.#babylonJSAnimationController) {
-                    this.#babylonJSAnimationController.dispose();
-                    this.#babylonJSAnimationController = null;
-                }
+                this.#disposeAnimationController();
                 values.forEach((result) => {
                     const container = result.value ? result.value[0] : null;
                     const assetContainer = result.value ? result.value[1] : null;
@@ -966,7 +1006,6 @@ export default class BabylonJSController {
     #downloadZip(files, name = "files", comment = "", addDateInName = false) {
         name = addDateInName ? this.#addDateToName(name) : name;
 
-        const JSZip = require("jszip");
         const zip = new JSZip();
         zip.comment = comment;
 
@@ -1065,7 +1104,7 @@ export default class BabylonJSController {
      */
     async enable() {
         this.#configureDracoCompression();
-        this.#engine = new Engine(this.#canvas, true, { alpha: true });
+        this.#engine = new Engine(this.#canvas, true, { alpha: true, stencil: true, preserveDrawingBuffer: false });
         this.#engine.disableUniformBuffers = true;
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
@@ -1087,10 +1126,8 @@ export default class BabylonJSController {
     disable() {
         this.#canvasResizeObserver.disconnect();
         this.#disableInteraction();
-        if (this.#babylonJSAnimationController) {
-            this.#babylonJSAnimationController.dispose();
-            this.#babylonJSAnimationController = null;
-        }
+        this.#disposeAnimationController();
+        this.#disposeXRExperience();
         this.#disposeEngine();
     }
 

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

@@ -46,7 +46,7 @@ export class ContainerData {
         this.update.pending = true;
         this.update.storage = storage;
         this.update.success = false;
-        this.update.show = show !== undefined ? show : this.update.show;
+        this.update.show = show !== undefined ? show : this.update.show !== null ? this.update.show : this.show;
     }
     setPendingCacheData(size = 0, timeStamp = null) {
         this.update.size = size;
@@ -62,7 +62,7 @@ export class ContainerData {
         return this.visible === true;
     }
     get mustBeShown() {
-        return this.show === true;
+        return this.update.show !== null ? this.update.show === true : this.show === true;
     }
 }