@preference-sl/pref-viewer 2.11.0 → 2.12.0-beta.1

package/package.json

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

package/src/babylonjs-animation-controller.js

@@ -113,18 +113,18 @@ export default class BabylonJSAnimationController {
     }
 
     /**
-     * Determines if a mesh belongs to a node targeted by an animation.
+     * Finds all animated node IDs associated with a given mesh by traversing its parent hierarchy.
      * @private
      * @param {Mesh} mesh - The mesh to check.
-     * @returns {string|false} The animated node ID if found, otherwise false.
+     * @returns {Array<string>} Array of animated node IDs associated with the mesh.
      */
-    #getNodeAnimatedByMesh = function (mesh) {
-        let nodeId = false;
+    #getNodesAnimatedByMesh = function (mesh) {
+        let nodeId = [];
         let node = mesh;
-        while (node.parent !== null && !nodeId) {
+        while (node.parent !== null) {
             node = node.parent;
-            if (this.#animatedNodes.includes(node.id)) {
-                nodeId = node.id;
+            if (this.#animatedNodes.includes(node.id) && !nodeId.includes(node.id)) {
+                nodeId.push(node.id);
             }
         }
         return nodeId;
@@ -169,16 +169,29 @@ export default class BabylonJSAnimationController {
             return;
         }
 
-        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
-        if (!nodeId) {
+        const nodeIds = this.#getNodesAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeIds.length) {
             return;
         }
 
-        const transformNode = this.#scene.getTransformNodeByID(nodeId);
-        const nodeMeshes = transformNode.getChildMeshes();
-        if (nodeMeshes.length) {
-            nodeMeshes.forEach((mesh) => this.#highlightLayer.addMesh(mesh, this.#highlightColor));
-        }
+        const transformNodes = [];
+        nodeIds.forEach((nodeId) => {
+            const transformNode = this.#scene.getTransformNodeByID(nodeId);
+            if (transformNode) {
+                transformNodes.push(transformNode);
+            }
+        });
+
+        transformNodes.forEach((transformNode) => {
+            const nodeMeshes = transformNode.getChildMeshes();
+            if (nodeMeshes.length) {
+                nodeMeshes.forEach((mesh) => {
+                    if (!this.#highlightLayer.hasMesh(mesh)) {
+                        this.#highlightLayer.addMesh(mesh, this.#highlightColor);
+                    }
+                });
+            }
+        });
     }
 
     /**
@@ -203,15 +216,20 @@ export default class BabylonJSAnimationController {
 
         this.hideMenu();
 
-        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
-        if (!nodeId) {
-            return;
-        }
-        const openingAnimation = this.#getOpeningAnimationByNode(nodeId);
-        if (!openingAnimation) {
+        const nodeIds = this.#getNodesAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeIds.length) {
             return;
         }
+        const openingAnimations = [];
+        nodeIds.forEach((nodeId) => {
+            const openingAnimation = this.#getOpeningAnimationByNode(nodeId);
+            if (!openingAnimation) {
+                return;
+            }
+            openingAnimations.push(openingAnimation);
+        });
 
-        openingAnimation.showControls(this.#canvas);
+        const startedAnimation = openingAnimations.find((animation) => animation.state !== OpeningAnimation.states.closed);
+        startedAnimation ? startedAnimation.showControls(this.#canvas, openingAnimations) : openingAnimations[0].showControls(this.#canvas, openingAnimations);
     }
 }

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

@@ -5,17 +5,19 @@ import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
  * OpeningAnimationMenu - Manages and renders the interactive animation control menu for opening/closing animations in a Babylon.js scene.
  *
  * Summary:
- *  Provides a floating HTML-based GUI menu with playback and loop controls for animated nodes, including buttons and a progress slider.
+ *  Provides a floating HTML-based GUI menu with playback and loop controls for animated nodes, including buttons, a progress slider, and a selector for switching between multiple animations.
  *  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).
+ *  - Displays a selector UI for switching between multiple opening animations, showing only the animation name without prefix.
  *  - 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.
  *  - Provides setters to update animation state, progress, and loop mode from external controllers.
  *  - Disposes and cleans up all DOM resources when no longer needed.
+ *  - Resets other animation menus when switching between animations.
  *
  * Public Setters:
  *  - set animationState(state): Updates the animation state and button states.
@@ -29,9 +31,10 @@ import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
  *  - isVisible: Returns whether the animation menu is currently visible in the DOM.
  *
  * Private Methods:
- *  - #createMenu(): Initializes and renders the menu UI.
+ *  - #createMenu(): Initializes and renders the menu UI, including the selector, buttons, and slider.
  *  - #addButton(name, imageSVG, enabled, active, visible, callback): Adds a button to the menu with specified properties.
  *  - #createButtons(): Creates all control buttons and sets their initial states.
+ *  - #createSelector(): Creates a selector UI element for switching between available opening animations, omitting the prefix in the display name.
  *  - #getButtonByName(name): Retrieves a button control by its name.
  *  - #setButtonState(name, enabled, active, visible): Updates the visual state of a button.
  *  - #getPlayerButtonsState(): Returns the state (enabled, active, visible) for playback control buttons.
@@ -41,16 +44,18 @@ import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
  *  - #setLoopButtonsState(): Updates all loop control buttons.
  *  - #createSlider(): Creates and configures the animation progress slider.
  *  - #onSliderInput(event): Handles the slider input event for animation progress.
+ *  - #resetOtherAnimations(): Resets all other opening animations except the current one.
  *
  * Usage Example:
- *  const menu = new OpeningAnimationMenu(name, canvas, state, progress, loop, {
+ *  const menu = new OpeningAnimationMenu(name, canvas, state, progress, loop, openingAnimations, {
  *      onOpen: () => { ... },
  *      onClose: () => { ... },
  *      onPause: () => { ... },
  *      onGoToOpened: () => { ... },
  *      onGoToClosed: () => { ... },
  *      onToggleLoop: () => { ... },
- *      onSetAnimationProgress: (progress) => { ... }
+ *      onSetAnimationProgress: (progress) => { ... },
+ *      onChangeAnimation: () => { ... }
  *  });
  *  menu.animationState = OpeningAnimation.states.opening;
  *  menu.animationProgress = 0.5;
@@ -60,6 +65,7 @@ export default class OpeningAnimationMenu {
     #animationState = OpeningAnimation.states.closed;
     #animationProgress = 0;
     #animationLoop = false;
+    #openingAnimations = [];
     #callbacks = null;
 
     #name = "";
@@ -89,17 +95,20 @@ export default class OpeningAnimationMenu {
      * @param {number} animationState - Current animation state (enum).
      * @param {number} animationProgress - Current animation progress (0 to 1).
      * @param {boolean} animationLoop - Whether the animation is set to loop.
+     * @param {Array<OpeningAnimation>} openingAnimations - Array of OpeningAnimation instances to manage.
      * @param {object} callbacks - Callback functions for menu actions (play, pause, open, close, etc.).
      * @public
      */
-    constructor(name, canvas, animationState, animationProgress, animationLoop, callbacks) {
+    constructor(name, canvas, animationState, animationProgress, animationLoop, openingAnimations, callbacks) {
         this.#name = name;
         this.#canvas = canvas;
         this.#animationState = animationState;
         this.#animationProgress = animationProgress;
         this.#animationLoop = animationLoop;
+        this.#openingAnimations = openingAnimations;
         this.#callbacks = callbacks;
 
+        this.#resetOtherAnimations();
         this.#createMenu(animationState);
     }
 
@@ -131,6 +140,46 @@ export default class OpeningAnimationMenu {
         this.#containerButtons.appendChild(button);
     }
 
+    /**
+     * Creates a selector UI element for switching between available opening animations.
+     * @private
+     * @returns {void}
+     */
+    #createSelector() {
+        if (!Array.isArray(this.#openingAnimations) || this.#openingAnimations.length < 2) {
+            return; // No selector needed if only one animation
+        }
+
+        const selector = document.createElement("div");
+        selector.classList.add("animation-menu-selector");
+
+        this.#openingAnimations.forEach((animation) => {
+            const button = document.createElement("button");
+            button.classList.add("button-selector");
+            // Remove prefix before "_" for display
+            const nameParts = animation.name.split("_");
+            button.textContent = nameParts.length > 1 ? nameParts.slice(1).join("_") : animation.name;
+
+            // Highlight the current animation
+            if (animation.name === this.#name) {
+                button.classList.add("active");
+            }
+
+            button.addEventListener("click", (event) => {
+                if (animation.name !== this.#name) {
+                    if (this.#callbacks.onChangeAnimation && typeof this.#callbacks.onChangeAnimation === "function") {
+                        this.#callbacks.onChangeAnimation();
+                    }
+                    animation.showControls(this.#canvas, this.#openingAnimations);
+                }
+            });
+
+            selector.appendChild(button);
+        });
+
+        this.#containerMain.prepend(selector);
+    }
+
     /**
      * Creates all control buttons and sets their initial states.
      * @private
@@ -183,6 +232,7 @@ export default class OpeningAnimationMenu {
         this.#containerButtons.classList.add("animation-menu-buttons");
         this.#containerMain.appendChild(this.#containerButtons);
 
+        this.#createSelector();
         this.#createButtons();
         this.#createSlider();
     }
@@ -263,6 +313,20 @@ export default class OpeningAnimationMenu {
         return buttonsState;
     }
 
+    /**
+     * Resets all other opening animations except the current one.
+     * @private
+     * @returns {void}
+     */
+    #resetOtherAnimations() {
+        this.#openingAnimations.forEach((animation) => {
+            if (animation.name !== this.#name) {
+                animation.hideControls();
+                animation.goToClosed();
+            }
+        });
+    }
+
     /**
      * Updates the visual state of a button (enabled, active, visible).
      * @private

package/src/babylonjs-animation-opening.js

@@ -19,7 +19,7 @@ import OpeningAnimationMenu from "./babylonjs-animation-opening-menu.js";
  *  - pause(): Pauses the current animation.
  *  - goToOpened(): Moves animation to the fully opened state.
  *  - goToClosed(): Moves animation to the fully closed state.
- *  - showControls(canvas): Displays the animation control menu.
+ *  - showControls(canvas, openingAnimations): Displays the animation control menu and sets up callbacks.
  *  - hideControls(): Hides the animation control menu.
  *  - isControlsVisible(): Returns true if the control menu is visible for this animation.
  *
@@ -433,8 +433,9 @@ export default class OpeningAnimation {
      * Synchronizes slider and button states with animation.
      * @public
      * @param {HTMLCanvasElement} canvas - The canvas element for rendering.
+     * @param {Array<OpeningAnimation>} openingAnimations - Array of OpeningAnimation instances to manage.
      */
-    showControls(canvas) {
+    showControls(canvas, openingAnimations = []) {
         const controlCallbacks = {
             onGoToOpened: () => {
                 if (this.#state === OpeningAnimation.states.opened) {
@@ -481,8 +482,14 @@ export default class OpeningAnimation {
                 this.#loop = !this.#loop;
                 this.#menu.animationLoop = this.#loop;
             },
+            onChangeAnimation: () => {
+                if (this.#state !== OpeningAnimation.states.closed) {
+                    this.goToClosed();
+                }
+                this.hideControls();
+            },
         };
-        this.#menu = new OpeningAnimationMenu(this.name, canvas, this.#state, this.#getProgress(), this.#loop, controlCallbacks);
+        this.#menu = new OpeningAnimationMenu(this.name, canvas, this.#state, this.#getProgress(), this.#loop, openingAnimations, controlCallbacks);
 
         // Attach to Babylon.js scene render loop for real-time updates
         this.#openAnimation._scene.onBeforeRenderObservable.add(this.#handlers.updateControlsSlider);

package/src/styles.js

@@ -111,15 +111,62 @@ export const PrefViewer3DAnimationMenuStyles = `
         --slider-thumb-width: 20px;
         --slider-bar-height: 8px;
         --slider-bar-offset: 10px;
+        --selector-button-radius: 6px;
+        --selector-button-padding-horizontal: 8px;
+        --selector-button-padding-vertical: 4px;
+        --selector-button-font-size: 14px;
+        --selector-button-font-weight: 500;
+        --width: calc(var(--button-size) * 6 + var(--button-spacing) * 5 + var(--button-loop-margin-left));
 
         display: block;
         position: absolute;
         bottom: 10px;
 
-        right: calc(50% - ((6 * var(--button-size) + 5 * var(--button-spacing) + var(--button-loop-margin-left)) / 2));
+        right: calc(50% - (var(--width) / 2));
         z-index: 1000;
     }
 
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector {
+        fore
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--button-spacing);
+        max-width: var(--width);
+        margin-bottom: var(--button-spacing);
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button {
+        display: block;
+        padding: var(--selector-button-padding-vertical) var(--selector-button-padding-horizontal);
+        margin: 0;
+        border: 1px solid var(--color-border);
+        border-radius: var(--selector-button-radius);
+        background: var(--color-enabled);
+        color: var(--color-icon);
+        font-size: var(--selector-button-font-size);
+        font-weight: var(--selector-button-font-weight);
+        line-height: 1;
+        flex: 1;
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button.active {
+        background: var(--color-active);
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button.active:hover {
+        background: var(--color-active-hover);
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button:not(.active) {
+        cursor: pointer;
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button:not(.active):hover {
+        background: var(--color-enabled-hover);
+    }
+
     div.pref-viewer-3d.animation-menu>div.animation-menu-buttons {
         padding: 0;
         margin: 0;