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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.5",
+  "version": "2.11.0-beta.6",
   "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

@@ -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;
     }