@preference-sl/pref-viewer 2.11.0-beta.3 → 2.11.0-beta.4

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

@@ -0,0 +1,360 @@
+import { AdvancedDynamicTexture, Button, Control, Image, Slider, StackPanel } from "@babylonjs/gui";
+import { OpeningAnimation } from "./babylonjs-animation-opening.js";
+
+/**
+ * OpeningAnimationMenu - Manages and renders the animation control menu for opening/closing animations in a Babylon.js scene.
+ *
+ * Responsibilities:
+ *  - Renders a GUI 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.
+ *
+ * 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.
+ *
+ * Private Methods:
+ *  - #createMenu(): Initializes and renders the menu UI.
+ *  - #addButton(name, imageURL, 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.
+ *
+ * Usage Example:
+ *  const menu = new OpeningAnimationMenu(adt, state, progress, loop, {
+ *      onOpen: () => { ... },
+ *      onClose: () => { ... },
+ *      onPause: () => { ... },
+ *      onGoToOpened: () => { ... },
+ *      onGoToClosed: () => { ... },
+ *      onToggleLoop: () => { ... },
+ *      onSetAnimationProgress: (progress) => { ... }
+ *  });
+ *  menu.animationState = OpeningAnimation.states.opening;
+ *  menu.animationProgress = 0.5;
+ *  menu.animationLoop = true;
+ */
+export class OpeningAnimationMenu {
+    #animationState = OpeningAnimation.states.closed;
+    #animationProgress = 0;
+    #animationLoop = false;
+    #callbacks = null;
+
+    // GUI Elements
+    #advancedDynamicTexture = null;
+    #mainPanel = null;
+    #secondaryPanel = null;
+    #slider = null;
+
+    // Style properties
+    #buttonSize = 28;
+    #buttonLoopPaddingLeft = 3;
+    #colorActive = "#6BA53A";
+    #colorEnabled = "#333333";
+    #colorDisabled = "#777777";
+    #colorIcon = "#FFFFFF";
+    #colorBorder = "#FFFFFF";
+    #sliderThumbWidth = 20;
+    #sliderBarOffset = 10;
+    #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 fill="${this.#colorIcon}" 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 fill="${this.#colorIcon}" 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 fill="${this.#colorIcon}" 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 fill="${this.#colorIcon}" 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 fill="${this.#colorIcon}" 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 fill="${this.#colorIcon}" 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 fill="${this.#colorIcon}" 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>`,
+    };
+
+    #isSettingSliderValue = false;
+
+    /**
+     * Constructs the OpeningAnimationMenu and initializes the menu UI.
+     * @param {AdvancedDynamicTexture} advancedDynamicTexture - Babylon.js GUI texture for rendering controls.
+     * @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(advancedDynamicTexture, animationState, animationProgress, animationLoop, callbacks) {
+        this.#advancedDynamicTexture = advancedDynamicTexture;
+        this.#animationState = animationState;
+        this.#animationProgress = animationProgress;
+        this.#animationLoop = animationLoop;
+        this.#callbacks = callbacks;
+
+        this.#createMenu(animationState);
+    }
+
+    /**
+     * Initializes and renders the menu UI, including buttons and slider.
+     * @private
+     */
+    #createMenu() {
+        if (!this.#advancedDynamicTexture) {
+            return;
+        }
+        this.#mainPanel = new StackPanel();
+        this.#mainPanel.isVertical = true;
+        this.#secondaryPanel = new StackPanel();
+        this.#secondaryPanel.isVertical = false;
+        this.#secondaryPanel.height = `${this.#buttonSize}px`;
+        this.#mainPanel.addControl(this.#secondaryPanel);
+
+        this.#advancedDynamicTexture.addControl(this.#mainPanel);
+        this.#mainPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
+        this.#mainPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
+
+        this.#createButtons();
+        this.#createSlider();
+    }
+
+    /**
+     * 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, imageURL, enabled = true, active = false, visible = true, callback) {
+        const buttonProps = {
+            background: active ? this.#colorActive : enabled ? this.#colorEnabled : this.#colorDisabled,
+            color: this.#colorBorder,
+            cornerRadius: 0,
+            height: `${this.#buttonSize}px`,
+            hoverCursor: "pointer",
+            width: `${this.#buttonSize}px`,
+            isVisible: visible,
+        };
+        const button = Button.CreateImageOnlyButton(`button_animation_${name}`, imageURL);
+        Object.assign(button, buttonProps);
+        button.image.stretch = Image.STRETCH_UNIFORM;
+        button.onPointerUpObservable.add(() => {
+            if (callback && typeof callback === "function") {
+                callback();
+            }
+        });
+        this.#secondaryPanel.addControl(button);
+    }
+
+    /**
+     * Creates all control buttons and sets their initial states.
+     * @private
+     */
+    #createButtons() {
+        const buttonsState = this.#getButtonsState();
+        this.#addButton("closed", `data:image/svg+xml,${encodeURIComponent(this.#icon.closed)}`, buttonsState.closed.enabled, buttonsState.closed.active, buttonsState.closed.visible, this.#callbacks.onGoToClosed);
+        this.#addButton("close", `data:image/svg+xml,${encodeURIComponent(this.#icon.close)}`, buttonsState.close.enabled, buttonsState.close.active, buttonsState.close.visible, this.#callbacks.onClose);
+        this.#addButton("pause", `data:image/svg+xml,${encodeURIComponent(this.#icon.pause)}`, buttonsState.pause.enabled, buttonsState.pause.active, buttonsState.pause.visible, this.#callbacks.onPause);
+        this.#addButton("open", `data:image/svg+xml,${encodeURIComponent(this.#icon.open)}`, buttonsState.open.enabled, buttonsState.open.active, buttonsState.open.visible, this.#callbacks.onOpen);
+        this.#addButton("opened", `data:image/svg+xml,${encodeURIComponent(this.#icon.opened)}`, buttonsState.opened.enabled, buttonsState.opened.active, buttonsState.opened.visible, this.#callbacks.onGoToOpened);
+        this.#addButton("repeat", `data:image/svg+xml,${encodeURIComponent(this.#icon.repeat)}`, buttonsState.repeat.enabled, buttonsState.repeat.active, buttonsState.repeat.visible, this.#callbacks.onToggleLoop);
+        this.#addButton("repeatOff", `data:image/svg+xml,${encodeURIComponent(this.#icon.repeatOff)}`, buttonsState.repeatOff.enabled, buttonsState.repeatOff.active, buttonsState.repeatOff.visible, this.#callbacks.onToggleLoop);
+
+        // Adjust padding for loop buttons
+        this.#getButtonByName("repeat").paddingLeft = `${this.#buttonLoopPaddingLeft}px`;
+        this.#getButtonByName("repeat").width = `${this.#buttonSize + this.#buttonLoopPaddingLeft}px`;
+        this.#getButtonByName("repeatOff").paddingLeft = `${this.#buttonLoopPaddingLeft}px`;
+        this.#getButtonByName("repeatOff").width = `${this.#buttonSize + this.#buttonLoopPaddingLeft}px`;
+    }
+
+    /**
+     * 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.#advancedDynamicTexture.getControlByName(`button_animation_${name}`);
+    }
+
+    /**
+     * 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;
+        }
+        button.background = active ? this.#colorActive : enabled ? this.#colorEnabled : this.#colorDisabled;
+        button.isVisible = visible;
+    }
+
+    /**
+     * 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;
+    }
+
+    /**
+     * 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;
+    }
+
+    /**
+     * Combines player and loop button states.
+     * @private
+     * @returns {object}
+     */
+    #getButtonsState() {
+        return Object.assign(this.#getPlayerButtonsState(), this.#getLoopButtonsState());
+    }
+
+    /**
+     * 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);
+    }
+
+    /**
+     * 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);
+    }
+
+    /**
+     * Creates and configures the animation progress slider.
+     * @private
+     */
+    #createSlider() {
+        const sliderProps = {
+            minimum: 0,
+            maximum: 1,
+            value: this.#animationProgress,
+            height: `${this.#buttonSize}px`,
+            width: `${this.#buttonSize * 7 + this.#buttonLoopPaddingLeft}px`, // Width based on number of buttons visible
+            barOffset: `${this.#sliderBarOffset}px`,
+            isThumbCircle: true,
+            thumbWidth: `${this.#sliderThumbWidth}px`,
+            background: this.#colorDisabled,
+            color: this.#colorEnabled,
+            borderColor: this.#colorBorder,
+            thumbColor: this.#colorEnabled,
+        };
+        this.#slider = new Slider("slider_animation_progress");
+        Object.assign(this.#slider, sliderProps);
+        this.#slider.onValueChangedObservable.add((value) => {
+            if (this.#isSettingSliderValue) {
+                this.#isSettingSliderValue = false;
+                return;
+            }
+            if (this.#callbacks && typeof this.#callbacks.onSetAnimationProgress === "function") {
+                this.#callbacks.onSetAnimationProgress(value);
+            }
+        });
+        this.#mainPanel.addControl(this.#slider);
+    }
+
+    /**
+     * ---------------------------
+     * 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.
+     * When called, the slider value is updated programmatically without triggering the slider's value change callback.
+     * @public
+     * @param {number} progress - The new animation progress value (between 0 and 1).
+     */
+    set animationProgress(progress) {
+        this.#animationProgress = progress;
+        this.#isSettingSliderValue = true;
+        this.#slider.value = progress;
+    }
+
+    /**
+     * 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();
+    }
+}