@preference-sl/pref-viewer 2.11.0-beta.5 → 2.11.0-beta.7

package/package.json

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

package/src/babylonjs-animation-controller.js

@@ -12,6 +12,9 @@ import { OpeningAnimation } from "./babylonjs-animation-opening.js";
  *  - Displays and disposes the animation control menu (GUI) for animated nodes.
  *  - Provides API for interaction and animation control.
  *
+ * Public Methods:
+ *  - dispose(): Disposes all resources managed by the animation controller.
+ *
  * @class
  */
 export default class BabylonJSAnimationController {
@@ -50,6 +53,7 @@ export default class BabylonJSAnimationController {
      */
     #getAnimatedNodes() {
         this.#scene.animationGroups.forEach((animationGroup) => {
+            animationGroup.stop();
             if (!animationGroup._targetedAnimations.length) {
                 return;
             }
@@ -150,21 +154,34 @@ export default class BabylonJSAnimationController {
      * @private
      */
     #setupPointerObservers() {
-        this.#scene.onPointerObservable.add((pointerInfo) => {
-            if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
-                const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
-                this.#hightlightMeshesForAnimation(pickingInfo);
-            }
-            if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-                // Remove any previously created Babylon GUI
-                if (this.#advancedDynamicTexture) {
-                    this.#advancedDynamicTexture.dispose();
-                    this.#advancedDynamicTexture = null;
-                }
-                const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
-                this.#showMenu(pickingInfo);
+        if (this.#openingAnimations.length === 0) {
+            return;
+        }
+        this.#scene.onPointerObservable.add(this.#onAnimationPointerObservable.bind(this));
+    }
+
+    /**
+     * Handles pointer events in the Babylon.js scene for animation interaction.
+     * On pointer move, highlights meshes belonging to animated nodes under the cursor.
+     * On pointer up (click), disposes any existing GUI and displays the animation control menu for the selected node.
+     *
+     * @private
+     * @param {PointerInfo} pointerInfo - The pointer event information from Babylon.js.
+     */
+    #onAnimationPointerObservable(pointerInfo) {
+        if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
+            const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
+            this.#hightlightMeshesForAnimation(pickingInfo);
+        }
+        if (pointerInfo.type === PointerEventTypes.POINTERUP) {
+            // Remove any previously created Babylon GUI
+            if (this.#advancedDynamicTexture) {
+                this.#advancedDynamicTexture.dispose();
+                this.#advancedDynamicTexture = null;
             }
-        });
+            const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
+            this.#showMenu(pickingInfo);
+        }
     }
 
     /**
@@ -192,4 +209,27 @@ export default class BabylonJSAnimationController {
         }
         openingAnimation.showControls(this.#advancedDynamicTexture);
     }
+
+    /**
+     * Disposes all resources managed by the animation controller.
+     * Cleans up the highlight layer, GUI texture, and internal animation/node lists.
+     * Should be called when the controller is no longer needed to prevent memory leaks.
+     * @public
+     */
+    dispose() {
+        if (this.#highlightLayer) {
+            this.#highlightLayer.dispose();
+            this.#highlightLayer = null;
+        }
+        if (this.#advancedDynamicTexture) {
+            this.#advancedDynamicTexture.dispose();
+            this.#advancedDynamicTexture = null;
+        }
+        this.#animatedNodes = [];
+        this.#openingAnimations = [];
+        const observer = this.#scene.onPointerObservable._observers.find((observer) => observer.callback.name.includes("#onAnimationPointerObservable"));
+        if (observer) {
+            this.#scene.onPointerObservable.remove(observer);
+        }
+    }
 }

package/src/babylonjs-controller.js

@@ -5,7 +5,7 @@ import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 
 import GLTFResolver from "./gltf-resolver.js";
-import { ContainerData, MaterialData } from "./pref-viewer-3d-data.js";
+import { MaterialData } from "./pref-viewer-3d-data.js";
 import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
 
 /**
@@ -452,7 +452,7 @@ export default class BabylonJSController {
             if (container.state.name === "materials") {
                 return;
             }
-            if (container.assetContainer && (container.isPending || materialContainer.isPending || optionMaterial.isPending)) {
+            if (container.assetContainer && (container.state.isPending || materialContainer.state.isPending || optionMaterial.isPending)) {
                 assetContainersToProcess.push(container.assetContainer);
             }
         });
@@ -504,7 +504,7 @@ export default class BabylonJSController {
         const modelContainer = this.#containers.model;
         const environmentContainer = this.#containers.environment;
 
-        if (!cameraState.isPending && !modelContainer.isPending && !environmentContainer.isPending) {
+        if (!cameraState.isPending && !modelContainer.state.isPending && !environmentContainer.state.isPending) {
             return false;
         }
 
@@ -559,7 +559,7 @@ export default class BabylonJSController {
      * Finds and returns the asset container object by its name.
      * @private
      * @param {string} name - The name of the container to find.
-     * @returns {ContainerData|null} The matching container object, or null if not found.
+     * @returns {Object|null} The matching container object, or null if not found.
      */
     #findContainerByName(name) {
         return Object.values(this.#containers).find((container) => container.state.name === name) || null;
@@ -612,7 +612,7 @@ export default class BabylonJSController {
     /**
      * Adds the asset container to the Babylon.js scene if it should be shown and is not already visible.
      * @private
-     * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @param {object} container - The container object containing asset state and metadata.
      * @param {boolean} [updateVisibility=true] - If true, updates the visibility attribute in parent components.
      * @returns {boolean} True if the container was added, false otherwise.
      */
@@ -631,7 +631,7 @@ export default class BabylonJSController {
     /**
      * Removes the asset container from the Babylon.js scene if it is currently visible.
      * @private
-     * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @param {object} container - The container object containing asset state and metadata.
      * @param {boolean} [updateVisibility=true] - If true, updates the visibility attribute in parent components.
      * @returns {boolean} True if the container was removed, false otherwise.
      */
@@ -650,7 +650,7 @@ export default class BabylonJSController {
     /**
      * Replaces the asset container in the Babylon.js scene with a new one.
      * @private
-     * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @param {object} container - The container object containing asset state and metadata.
      * @param {AssetContainer} newAssetContainer - The new asset container to add to the scene.
      * @returns {boolean} True if the container was replaced and added, false otherwise.
      */
@@ -703,8 +703,8 @@ export default class BabylonJSController {
     /**
      * Loads an asset container (model, environment, materials, etc.) using the provided container state.
      * @private
-     * @param {ContainerData} container - The container object containing asset state and metadata.
-     * @returns {Promise<[ContainerData, AssetContainer|boolean]>} Resolves to an array with the container and the loaded asset container, or false if loading fails.
+     * @param {object} container - The container object containing asset state and metadata.
+     * @returns {Promise<[object, AssetContainer|boolean]>} Resolves to an array with the container and the loaded asset container, or false if loading fails.
      * @description
      * Resolves the asset source using GLTFResolver, prepares plugin options, and loads the asset into the Babylon.js scene.
      * Updates the container's cache data and returns the container along with the loaded asset container or false if loading fails.
@@ -768,6 +768,10 @@ export default class BabylonJSController {
 
         await Promise.allSettled(promiseArray)
             .then((values) => {
+                if (this.#babylonJSAnimationController) {
+                    this.#babylonJSAnimationController.dispose();
+                    this.#babylonJSAnimationController = null;
+                };
                 values.forEach((result) => {
                     const container = result.value ? result.value[0] : null;
                     const assetContainer = result.value ? result.value[1] : null;
@@ -775,10 +779,7 @@ export default class BabylonJSController {
                         if (container.state.name === "model") {
                             assetContainer.lights = [];
                         }
-                        const replaced = this.#replaceContainer(container, assetContainer);
-                        if (replaced && container.state.name === "model") {
-                            this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
-                        }
+                        this.#replaceContainer(container, assetContainer);
                         container.state.setSuccess(true);
                     } else {
                         if (container.assetContainer && container.state.mustBeShown !== container.state.isVisible && container.state.name === "materials") {
@@ -787,7 +788,7 @@ export default class BabylonJSController {
                         container.state.setSuccess(false);
                     }
                 });
-
+                
                 this.#setOptions_Materials();
                 this.#setOptions_Camera();
                 this.#setVisibilityOfWallAndFloorInModel();
@@ -802,9 +803,9 @@ export default class BabylonJSController {
             .finally(async () => {
                 this.#setMaxSimultaneousLights();
                 this.#initializeShadows();
+                this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
                 this.#startRender();
             });
-
         return detail;
     }