@preference-sl/pref-viewer 2.11.0-beta.2 → 2.11.0-beta.20

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

@@ -0,0 +1,395 @@
+import OpeningAnimation from "./babylonjs-animation-opening.js";
+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.
+ *  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.
+ *  - Provides setters to update animation state, progress, and loop mode from external controllers.
+ *  - Disposes and cleans up all DOM resources when no longer needed.
+ *
+ * Public Setters:
+ *  - set animationState(state): Updates the animation state and button states.
+ *  - set animationProgress(progress): Updates the animation progress and slider value.
+ *  - set animationLoop(loop): Updates the loop mode and loop button states.
+ *
+ * Public Methods:
+ *  - dispose(): Disposes the animation menu and releases all associated DOM resources.
+ *
+ * Public Getters:
+ *  - isVisible: Returns whether the animation menu is currently visible in the DOM.
+ *
+ * Private Methods:
+ *  - #createMenu(): Initializes and renders the menu UI.
+ *  - #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.
+ *  - #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.
+ *  - #getLoopButtonsState(): Returns the state for loop control buttons.
+ *  - #getButtonsState(): Combines player and loop button states.
+ *  - #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, {
+ *      onOpen: () => { ... },
+ *      onClose: () => { ... },
+ *      onPause: () => { ... },
+ *      onGoToOpened: () => { ... },
+ *      onGoToClosed: () => { ... },
+ *      onToggleLoop: () => { ... },
+ *      onSetAnimationProgress: (progress) => { ... }
+ *  });
+ *  menu.animationState = OpeningAnimation.states.opening;
+ *  menu.animationProgress = 0.5;
+ *  menu.animationLoop = true;
+ */
+export default class OpeningAnimationMenu {
+    #animationState = OpeningAnimation.states.closed;
+    #animationProgress = 0;
+    #animationLoop = false;
+    #callbacks = null;
+
+    #name = "";
+    #canvas = null;
+    #containerMain = null;
+    #containerButtons = null;
+    #slider = null;
+
+    #icon = {
+        close: `<svg id="play-backwards" 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="M16,18.86V4.86l-11,7,11,7Z"/></svg>`,
+        closed: `<svg id="skip-backward" 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="M20,5V19L13,12M6,5V19H4V5M13,5V19L6,12"/></svg>`,
+        open: `<svg id="play" 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="M8,5.14v14l11-7-11-7Z"/></svg>`,
+        opened: `<svg id="skip-forward" 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="M4,5V19L11,12M18,5V19H20V5M11,5V19L18,12"/></svg>`,
+        pause: `<svg id="pause" 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="M14,19H18V5H14M6,19H10V5H6V19Z"/></svg>`,
+        repeat: `<svg id="repeat" 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="M17,17H7V14L3,18L7,22V19H19V13H17M7,7H17V10L21,6L17,2V5H5V11H7V7Z"/></svg>`,
+        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>`,
+    };
+
+    #handler = {
+        onSliderInput: null,
+    };
+
+    /**
+     * Constructs the OpeningAnimationMenu and initializes the menu UI.
+     * @param {string} name - The name of the animation.
+     * @param {HTMLCanvasElement} canvas - The canvas element for rendering.
+     * @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 {object} callbacks - Callback functions for menu actions (play, pause, open, close, etc.).
+     * @public
+     */
+    constructor(name, canvas, animationState, animationProgress, animationLoop, callbacks) {
+        this.#name = name;
+        this.#canvas = canvas;
+        this.#animationState = animationState;
+        this.#animationProgress = animationProgress;
+        this.#animationLoop = animationLoop;
+        this.#callbacks = callbacks;
+
+        this.#createMenu(animationState);
+    }
+
+    /**
+     * Internal helper to add a button to the menu.
+     * Sets button appearance and attaches the callback for user interaction.
+     * @private
+     * @param {string} name - Button identifier.
+     * @param {string} imageURL - SVG image data URL for the button icon.
+     * @param {boolean} enabled - Whether the button is enabled.
+     * @param {boolean} active - Whether the button is visually active.
+     * @param {boolean} visible - Whether the button is visible.
+     * @param {function} callback - Callback to invoke on button click.
+     */
+    #addButton(name, imageSVG, enabled = true, active = false, visible = true, callback) {
+        const stateClass = active ? "active" : enabled ? "enabled" : "disabled";
+        const visibilityClass = visible ? "visible" : "hidden";
+
+        const button = document.createElement("button");
+        button.classList.add(stateClass, visibilityClass);
+        button.setAttribute("name", `button_animation_${name}`);
+        button.innerHTML = imageSVG;
+        button.addEventListener("click", (event) => {
+            if (callback && typeof callback === "function") {
+                callback();
+            }
+        });
+
+        this.#containerButtons.appendChild(button);
+    }
+
+    /**
+     * Creates all control buttons and sets their initial states.
+     * @private
+     */
+    #createButtons() {
+        const buttonsState = this.#getButtonsState();
+        this.#addButton("closed", this.#icon.closed, buttonsState.closed.enabled, buttonsState.closed.active, buttonsState.closed.visible, this.#callbacks.onGoToClosed);
+        this.#addButton("close", this.#icon.close, buttonsState.close.enabled, buttonsState.close.active, buttonsState.close.visible, this.#callbacks.onClose);
+        this.#addButton("pause", this.#icon.pause, buttonsState.pause.enabled, buttonsState.pause.active, buttonsState.pause.visible, this.#callbacks.onPause);
+        this.#addButton("open", this.#icon.open, buttonsState.open.enabled, buttonsState.open.active, buttonsState.open.visible, this.#callbacks.onOpen);
+        this.#addButton("opened", this.#icon.opened, buttonsState.opened.enabled, buttonsState.opened.active, buttonsState.opened.visible, this.#callbacks.onGoToOpened);
+        this.#addButton("repeat", this.#icon.repeat, buttonsState.repeat.enabled, buttonsState.repeat.active, buttonsState.repeat.visible, this.#callbacks.onToggleLoop);
+        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.#handler.onSliderInput = this.#onSliderInput.bind(this);
+        this.#slider.addEventListener("input", this.#handler.onSliderInput);
+
+        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
+     * @param {string} name - Button identifier.
+     * @returns {Button|null} The button control or null if not found.
+     */
+    #getButtonByName(name) {
+        return this.#containerButtons.querySelector(`button[name="button_animation_${name}"]`);
+    }
+
+    /**
+     * Combines player and loop button states.
+     * @private
+     * @returns {object}
+     */
+    #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;
+    }
+
+    /**
+     * Returns the state (enabled, active, visible) for playback control buttons.
+     * @private
+     * @returns {object}
+     */
+    #getPlayerButtonsState() {
+        const buttonsState = {
+            opened: {
+                enabled: this.#animationState !== OpeningAnimation.states.opened,
+                active: false,
+                visible: true,
+            },
+            open: {
+                enabled: this.#animationState !== OpeningAnimation.states.opened && this.#animationState !== OpeningAnimation.states.opening,
+                active: this.#animationState === OpeningAnimation.states.opening,
+                visible: true,
+            },
+            pause: {
+                enabled: this.#animationState !== OpeningAnimation.states.paused && this.#animationState !== OpeningAnimation.states.closed && this.#animationState !== OpeningAnimation.states.opened,
+                active: this.#animationState === OpeningAnimation.states.paused,
+                visible: true,
+            },
+            close: {
+                enabled: this.#animationState !== OpeningAnimation.states.closed && this.#animationState !== OpeningAnimation.states.closing,
+                active: this.#animationState === OpeningAnimation.states.closing,
+                visible: true,
+            },
+            closed: {
+                enabled: this.#animationState !== OpeningAnimation.states.closed,
+                active: false,
+                visible: true,
+            },
+        };
+        return buttonsState;
+    }
+
+    /**
+     * Updates the visual state of a button (enabled, active, visible).
+     * @private
+     * @param {string} name - Button identifier.
+     * @param {boolean} enabled
+     * @param {boolean} active
+     * @param {boolean} visible
+     */
+    #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);
+    }
+
+    /**
+     * 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);
+    }
+
+    /**
+     * Updates all playback control buttons according to current animation state.
+     * @private
+     */
+    #setPlayerButtonsState() {
+        const buttonsState = this.#getPlayerButtonsState();
+        this.#setButtonState("opened", buttonsState.opened.enabled, buttonsState.opened.active, buttonsState.opened.visible);
+        this.#setButtonState("open", buttonsState.open.enabled, buttonsState.open.active, buttonsState.open.visible);
+        this.#setButtonState("pause", buttonsState.pause.enabled, buttonsState.pause.active, buttonsState.pause.visible);
+        this.#setButtonState("close", buttonsState.close.enabled, buttonsState.close.active, buttonsState.close.visible);
+        this.#setButtonState("closed", buttonsState.closed.enabled, buttonsState.closed.active, buttonsState.closed.visible);
+    }
+
+    /**
+     * 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.
+     */
+    #onSliderInput(event) {
+        if (this.#callbacks && typeof this.#callbacks.onSetAnimationProgress === "function") {
+            this.#callbacks.onSetAnimationProgress(event.target.value);
+        }
+    }
+
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+
+    /**
+     * Disposes the animation menu and releases all associated DOM resources.
+     * @public
+     * @returns {void}
+     */
+    dispose() {
+        this.#slider.removeEventListener("input", this.#handler.onSliderInput);
+        if (this.isVisible) {
+            this.#containerMain.remove();
+        }
+        this.#containerMain = null;
+        this.#containerButtons = null;
+        this.#slider = null;
+    }
+
+    /**
+     * ---------------------------
+     * Public setters
+     * ---------------------------
+     */
+
+    /**
+     * Sets the animation loop mode and updates loop button states.
+     * @public
+     * @param {boolean} loop
+     */
+    set animationLoop(loop) {
+        this.#animationLoop = loop;
+        this.#setLoopButtonsState();
+    }
+
+    /**
+     * Sets the animation progress value and updates the slider position.
+     * @public
+     * @param {number} progress - The new animation progress value (between 0 and 1).
+     */
+    set animationProgress(progress) {
+        this.#animationProgress = progress;
+        this.#slider.value = progress.toString();
+    }
+
+    /**
+     * Sets the animation state and updates playback button states.
+     * @public
+     * @param {number} state - The new animation state (enum).
+     */
+    set animationState(state) {
+        this.#animationState = state;
+        this.#setPlayerButtonsState();
+    }
+
+    /**
+     * ---------------------------
+     * Public getters
+     * ---------------------------
+     */
+
+    /**
+     * Returns whether the animation menu is currently visible in the DOM.
+     * @public
+     * @returns {boolean} True if the menu is visible, false otherwise.
+     */
+    get isVisible() {
+        const menuElement = this.#canvas.parentElement.querySelector(`div.animation-menu[data-animation-name="${this.#name}"]`);
+        return !!menuElement;
+    }
+}