@preference-sl/pref-viewer 2.11.0-beta.8 → 2.11.0

package/src/babylonjs-animation-opening.js

@@ -1,5 +1,4 @@
-import { AdvancedDynamicTexture } from "@babylonjs/gui";
-import { OpeningAnimationMenu } from "./babylonjs-animation-opening-menu.js";
+import OpeningAnimationMenu from "./babylonjs-animation-opening-menu.js";
 
 /**
  * OpeningAnimation - Manages open/close animations for a model part (e.g., a door) in a Babylon.js scene.
@@ -13,13 +12,14 @@ import { OpeningAnimationMenu } from "./babylonjs-animation-opening-menu.js";
  *  - Manages the animation control menu (OpeningAnimationMenu) and its callbacks.
  *
  * Public Methods:
+ *  - dispose(): Disposes the OpeningAnimation instance and releases all associated resources.
  *  - isAnimationForNode(node): Checks if the animation affects the given node.
  *  - playOpen(): Starts the opening animation.
  *  - playClose(): Starts the closing animation.
  *  - pause(): Pauses the current animation.
  *  - goToOpened(): Moves animation to the fully opened state.
  *  - goToClosed(): Moves animation to the fully closed state.
- *  - showControls(advancedDynamicTexture): Displays the animation control menu.
+ *  - showControls(canvas): Displays the animation control menu.
  *  - hideControls(): Hides the animation control menu.
  *  - isControlsVisible(): Returns true if the control menu is visible for this animation.
  *
@@ -39,16 +39,8 @@ import { OpeningAnimationMenu } from "./babylonjs-animation-opening-menu.js";
  *  - #checkProgress(progress): Applies threshold logic to progress.
  *  - #updateControlsSlider(): Updates the slider in the control menu.
  *  - #updateControls(): Updates all controls in the menu.
- *
- * Usage Example:
- *  const anim = new OpeningAnimation("door", openGroup, closeGroup);
- *  anim.playOpen();
- *  anim.pause();
- *  anim.goToClosed();
- *  anim.showControls(adt);
- *  anim.hideControls();
  */
-export class OpeningAnimation {
+export default class OpeningAnimation {
     static states = {
         paused: 0,
         closed: 1,
@@ -57,21 +49,26 @@ export class OpeningAnimation {
         closing: 4,
     };
 
+    name = "";
     #openAnimation = null;
     #closeAnimation = null;
-
     #nodes = [];
+    #menu = null;
+
     #state = OpeningAnimation.states.closed;
     #lastPausedFrame = 0;
     #startFrame = 0;
     #endFrame = 0;
     #speedRatio = 1.0;
     #loop = false;
-
-    #advancedDynamicTexture = null;
-    #menu = null;
     #progressThreshold = 0.025;
 
+    #handlers = {
+        onOpened: null,
+        onClosed: null,
+        updateControlsSlider: null,
+    };
+
     /**
      * Creates a new OpeningAnimation instance for managing open/close animations of a model part.
      * @param {string} name - The identifier for this animation (e.g., door name).
@@ -95,8 +92,15 @@ export class OpeningAnimation {
         this.#speedRatio = this.#openAnimation.speedRatio || 1.0;
 
         this.#getNodesFromAnimationGroups();
-        this.#openAnimation.onAnimationGroupEndObservable.add(this.#onOpened.bind(this));
-        this.#closeAnimation.onAnimationGroupEndObservable.add(this.#onClosed.bind(this));
+        this.#bindHandlers();
+        this.#openAnimation.onAnimationGroupEndObservable.add(this.#handlers.onOpened);
+        this.#closeAnimation.onAnimationGroupEndObservable.add(this.#handlers.onClosed);
+    }
+
+    #bindHandlers() {
+        this.#handlers.onOpened = this.#onOpened.bind(this);
+        this.#handlers.onClosed = this.#onClosed.bind(this);
+        this.#handlers.updateControlsSlider = this.#updateControlsSlider.bind(this);
     }
 
     /**
@@ -138,13 +142,18 @@ export class OpeningAnimation {
     #goToOpened(useLoop = false) {
         this.#lastPausedFrame = this.#endFrame;
 
-        if (this.#openAnimation._isStarted && !this.#openAnimation._isPaused) {
+        if (this.#openAnimation._isStarted && !this.#openAnimation._isPaused){
             this.#openAnimation.pause();
         }
-        this.#openAnimation.goToFrame(this.#endFrame);
+         this.#openAnimation.goToFrame(this.#endFrame);
 
-        this.#closeAnimation.pause();
-        this.#closeAnimation.goToFrame(this.#startFrame);
+        if (this.#closeAnimation._isStarted && this.#closeAnimation._isPaused) {
+            this.#closeAnimation.goToFrame(this.#startFrame);
+        } else {
+            this.#closeAnimation.start();
+            this.#closeAnimation.pause();
+            this.#closeAnimation.goToFrame(this.#startFrame);
+        }
 
         this.#state = OpeningAnimation.states.opened;
         this.#updateControls();
@@ -167,8 +176,13 @@ export class OpeningAnimation {
         }
         this.#closeAnimation.goToFrame(this.#endFrame - this.#startFrame);
 
-        this.#openAnimation.pause();
-        this.#openAnimation.goToFrame(this.#startFrame);
+        if (this.#openAnimation._isStarted && this.#openAnimation._isPaused) {
+            this.#openAnimation.goToFrame(this.#startFrame);
+        } else {
+            this.#openAnimation.start();
+            this.#openAnimation.pause();
+            this.#openAnimation.goToFrame(this.#startFrame);
+        }
 
         this.#state = OpeningAnimation.states.closed;
         this.#updateControls();
@@ -303,6 +317,25 @@ export class OpeningAnimation {
      * ---------------------------
      */
 
+    /**
+     * Disposes the OpeningAnimation instance and releases all associated resources.
+     * @public
+     * @returns {void}
+     */
+    dispose() {
+        this.hideControls();
+        if (this.#openAnimation) {
+            this.#openAnimation.onAnimationGroupEndObservable.removeCallback(this.#handlers.onOpened);
+            this.#openAnimation = null;
+        }
+        if (this.#closeAnimation) {
+            this.#closeAnimation.onAnimationGroupEndObservable.removeCallback(this.#handlers.onClosed);
+            this.#closeAnimation = null;
+        }
+        this.#nodes = [];
+        this.name = "";
+    }
+
     /**
      * Checks if the animation affects the given node.
      * @param {string} node - Node identifier.
@@ -320,6 +353,7 @@ export class OpeningAnimation {
         if (this.#state === OpeningAnimation.states.opening || this.#state === OpeningAnimation.states.opened) {
             return;
         }
+
         if (this.#state === OpeningAnimation.states.closing) {
             this.#lastPausedFrame = this.#endFrame - this.#closeAnimation.getCurrentFrame();
             this.#closeAnimation.pause();
@@ -344,6 +378,7 @@ export class OpeningAnimation {
         if (this.#state === OpeningAnimation.states.closing || this.#state === OpeningAnimation.states.closed) {
             return;
         }
+
         if (this.#state === OpeningAnimation.states.opening) {
             this.#lastPausedFrame = this.#openAnimation.getCurrentFrame();
             this.#openAnimation.pause();
@@ -397,11 +432,9 @@ export class OpeningAnimation {
      * Displays the animation control menu and sets up callbacks.
      * Synchronizes slider and button states with animation.
      * @public
-     * @param {AdvancedDynamicTexture} advancedDynamicTexture - Babylon.js GUI texture.
+     * @param {HTMLCanvasElement} canvas - The canvas element for rendering.
      */
-    showControls(advancedDynamicTexture) {
-        this.#advancedDynamicTexture = advancedDynamicTexture;
-        this.#advancedDynamicTexture.metadata = { animationName: this.name };
+    showControls(canvas) {
         const controlCallbacks = {
             onGoToOpened: () => {
                 if (this.#state === OpeningAnimation.states.opened) {
@@ -449,10 +482,10 @@ export class OpeningAnimation {
                 this.#menu.animationLoop = this.#loop;
             },
         };
-        this.#menu = new OpeningAnimationMenu(this.#advancedDynamicTexture, this.#state, this.#getProgress(), this.#loop, controlCallbacks);
+        this.#menu = new OpeningAnimationMenu(this.name, canvas, this.#state, this.#getProgress(), this.#loop, controlCallbacks);
 
         // Attach to Babylon.js scene render loop for real-time updates
-        this.#openAnimation._scene.onBeforeRenderObservable.add(this.#updateControlsSlider.bind(this));
+        this.#openAnimation._scene.onBeforeRenderObservable.add(this.#handlers.updateControlsSlider);
     }
 
     /**
@@ -463,10 +496,9 @@ export class OpeningAnimation {
         if (!this.isControlsVisible()) {
             return;
         }
-        // Remove the observer when controls are hidden
-        this.#openAnimation._scene.onBeforeRenderObservable.removeCallback(this.#updateControlsSlider.bind(this));
-        this.#advancedDynamicTexture.dispose();
-        this.#advancedDynamicTexture = null;
+        this.#openAnimation?._scene?.onBeforeRenderObservable.removeCallback(this.#handlers.updateControlsSlider);
+        this.#menu.dispose();
+        this.#menu = null;
     }
 
     /**
@@ -475,7 +507,7 @@ export class OpeningAnimation {
      * @returns {boolean} True if controls are visible for this animation; otherwise, false.
      */
     isControlsVisible() {
-        return !!(this.#advancedDynamicTexture && this.#advancedDynamicTexture.metadata?.animationName === this.name && this.#menu);
+        return !!(this.#menu?.isVisible);
     }
 
     /**
@@ -489,7 +521,6 @@ export class OpeningAnimation {
      * @public
      * @returns {number}
      */
-
     get state() {
         return this.#state;
     }