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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.2",
+  "version": "2.11.0-beta.4",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
@@ -30,15 +30,15 @@
   "sideEffects": false,
   "files": [
     "src",
-    "src/models",
     "index.d.ts"
   ],
   "dependencies": {
-    "@babylonjs/core": "^8.31.3",
-    "@babylonjs/loaders": "^8.31.3",
-    "@babylonjs/serializers": "^8.31.3",
+    "@babylonjs/core": "^8.36.1",
+    "@babylonjs/gui": "^8.36.1",
+    "@babylonjs/loaders": "^8.36.1",
+    "@babylonjs/serializers": "^8.36.1",
     "@panzoom/panzoom": "^4.6.0",
-    "babylonjs-gltf2interface": "^8.31.3",
+    "babylonjs-gltf2interface": "^8.36.1",
     "idb": "^8.0.3",
     "is-svg": "^6.1.0"
   },

package/src/babylonjs-animation-controller.js

@@ -0,0 +1,195 @@
+import { Color3, HighlightLayer, Mesh, PickingInfo, PointerEventTypes, Scene } from "@babylonjs/core";
+import { AdvancedDynamicTexture } from "@babylonjs/gui";
+import { OpeningAnimation } from "./babylonjs-animation-opening.js";
+
+/**
+ * BabylonJSAnimationController - Manages animation playback and interactive highlighting for model containers in Babylon.js scenes.
+ *
+ * Responsibilities:
+ *  - Detects and groups opening/closing animations in the scene.
+ *  - Tracks animated transformation nodes and their relationships to meshes.
+ *  - Highlights animated nodes and their child meshes when hovered.
+ *  - Displays and disposes the animation control menu (GUI) for animated nodes.
+ *  - Provides API for interaction and animation control.
+ *
+ * @class
+ */
+export default class BabylonJSAnimationController {
+    #scene = null;
+    #animatedNodes = [];
+    #highlightLayer = null;
+    #highlightColor = new Color3(0, 1, 0); // Color para resaltar los elementos animados (Verde)
+    #advancedDynamicTexture = null;
+    #openingAnimations = [];
+
+    /**
+     * Creates a new BabylonJSAnimationController for a Babylon.js scene.
+     * @param {Scene} scene - The Babylon.js scene instance.
+     */
+    constructor(scene) {
+        this.#scene = scene;
+        this.#initializeAnimations();
+        this.#setupPointerObservers();
+    }
+
+    /**
+     * Detects and stores animatable objects and animated nodes in the scene.
+     * @private
+     */
+    #initializeAnimations() {
+        if (!this.#scene.animationGroups.length) {
+            return;
+        }
+        this.#getAnimatedNodes();
+        this.#getOpeneingAnimations();
+    }
+
+    /**
+     * Collects the IDs of all nodes targeted by any animation group in the scene.
+     * @private
+     */
+    #getAnimatedNodes() {
+        this.#scene.animationGroups.forEach((animationGroup) => {
+            if (!animationGroup._targetedAnimations.length) {
+                return;
+            }
+            animationGroup._targetedAnimations.forEach((targetedAnimation) => {
+                if (!this.#animatedNodes.includes(targetedAnimation.target.id)) {
+                    this.#animatedNodes.push(targetedAnimation.target.id);
+                }
+            });
+        });
+    }
+
+    /**
+     * Groups opening and closing animations by node name and creates OpeningAnimation instances.
+     * @private
+     * @description
+     * Uses animation group names with the pattern "animation_open_<name>" and "animation_close_<name>".
+     */
+    #getOpeneingAnimations() {
+        const openings = {};
+        this.#scene.animationGroups.forEach((animationGroup) => {
+            const match = animationGroup.name.match(/^animation_(open|close)_(.+)$/);
+            if (!match) {
+                return;
+            }
+            const [, type, openingName] = match;
+            if (!openings[openingName]) {
+                openings[openingName] = { name: openingName, animationOpen: null, animationClose: null };
+            }
+            if (type === "open") {
+                openings[openingName].animationOpen = animationGroup;
+            } else if (type === "close") {
+                openings[openingName].animationClose = animationGroup;
+            }
+        });
+
+        Object.values(openings).forEach((opening) => {
+            this.#openingAnimations.push(new OpeningAnimation(opening.name, opening.animationOpen, opening.animationClose));
+        });
+    }
+
+    /**
+     * Finds the OpeningAnimation instance associated with a given node ID.
+     * @private
+     * @param {string} nodeId - The node identifier.
+     * @returns {OpeningAnimation|null} The matching OpeningAnimation instance or null.
+     */
+    #getOpeningAnimationByNode(nodeId) {
+        return this.#openingAnimations.find((openingAnimation) => openingAnimation.isAnimationForNode(nodeId));
+    }
+
+    /**
+     * Determines if a mesh belongs to a node targeted by an animation.
+     * @private
+     * @param {Mesh} mesh - The mesh to check.
+     * @returns {string|false} The animated node ID if found, otherwise false.
+     */
+    #getNodeAnimatedByMesh = function (mesh) {
+        let nodeId = false;
+        let node = mesh;
+        while (node.parent !== null && !nodeId) {
+            node = node.parent;
+            if (this.#animatedNodes.includes(node.id)) {
+                nodeId = node.id;
+            }
+        }
+        return nodeId;
+    };
+
+    /**
+     * Highlights meshes that are children of an animated node when hovered.
+     * @private
+     * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
+     */
+    #hightlightMeshesForAnimation(pickingInfo) {
+        if (!this.#highlightLayer) {
+            this.#highlightLayer = new HighlightLayer("hl_animations", this.#scene);
+        }
+
+        this.#highlightLayer.removeAllMeshes();
+        if (!pickingInfo?.hit && !pickingInfo?.pickedMesh) {
+            return;
+        }
+
+        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeId) {
+            return;
+        }
+
+        const transformNode = this.#scene.getTransformNodeByID(nodeId);
+        const nodeMeshes = transformNode.getChildMeshes();
+        if (nodeMeshes.length) {
+            nodeMeshes.forEach((mesh) => this.#highlightLayer.addMesh(mesh, this.#highlightColor));
+        }
+    }
+
+    /**
+     * Sets up pointer observers to highlight animated nodes on hover and show the animation menu on click.
+     * @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);
+            }
+        });
+    }
+
+    /**
+     * Displays the animation control menu for the animated node under the pointer.
+     * @private
+     * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
+     * @description
+     * Creates the GUI if needed and invokes OpeningAnimation.showControls.
+     */
+    #showMenu(pickingInfo) {
+        if (!pickingInfo?.hit && !pickingInfo?.pickedMesh) {
+            return;
+        }
+
+        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeId) {
+            return;
+        }
+        const openingAnimation = this.#getOpeningAnimationByNode(nodeId);
+        if (!openingAnimation) {
+            return;
+        }
+        if (!this.#advancedDynamicTexture) {
+            this.#advancedDynamicTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI_Animation");
+        }
+        openingAnimation.showControls(this.#advancedDynamicTexture);
+    }
+}

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();
+    }
+}

package/src/babylonjs-animation-opening.js

@@ -0,0 +1,496 @@
+import { AdvancedDynamicTexture } from "@babylonjs/gui";
+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.
+ *
+ * Responsibilities:
+ *  - Controls playback of opening and closing AnimationGroups.
+ *  - Tracks animation state (paused, closed, opened, opening, closing).
+ *  - Synchronizes animation progress and UI controls.
+ *  - Handles loop mode and progress threshold logic.
+ *  - Provides methods for play, pause, go to opened/closed, and progress control.
+ *  - Manages the animation control menu (OpeningAnimationMenu) and its callbacks.
+ *
+ * Public Methods:
+ *  - 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.
+ *  - hideControls(): Hides the animation control menu.
+ *  - isControlsVisible(): Returns true if the control menu is visible for this animation.
+ *
+ * Public Properties:
+ *  - state: Returns the current animation state.
+ *
+ * Private Methods:
+ *  - #getNodesFromAnimationGroups(): Collects node IDs affected by the animation groups.
+ *  - #onOpened(): Handles end of opening animation.
+ *  - #onClosed(): Handles end of closing animation.
+ *  - #goToOpened(useLoop): Sets state to opened and optionally loops to close.
+ *  - #goToClosed(useLoop): Sets state to closed and optionally loops to open.
+ *  - #goToFrameAndPause(frame): Moves to a specific frame and pauses.
+ *  - #getCurrentFrame(): Gets the current frame based on state.
+ *  - #getFrameFromProgress(progress): Calculates frame from progress value.
+ *  - #getProgress(): Calculates progress (0-1) from current frame.
+ *  - #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 {
+    static states = {
+        paused: 0,
+        closed: 1,
+        opened: 2,
+        opening: 3,
+        closing: 4,
+    };
+
+    #openAnimation = null;
+    #closeAnimation = null;
+
+    #nodes = [];
+    #state = OpeningAnimation.states.closed;
+    #lastPausedFrame = 0;
+    #startFrame = 0;
+    #endFrame = 0;
+    #speedRatio = 1.0;
+    #loop = false;
+
+    #advancedDynamicTexture = null;
+    #menu = null;
+    #progressThreshold = 0.025;
+
+    /**
+     * 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).
+     * @param {AnimationGroup} openAnimationGroup - Babylon.js AnimationGroup for the opening animation.
+     * @param {AnimationGroup} closeAnimationGroup - Babylon.js AnimationGroup for the closing animation.
+     * @description
+     * Initializes internal state, sets up frame ranges, collects affected nodes, and attaches end-of-animation observers.
+     */
+    constructor(name, openAnimationGroup, closeAnimationGroup) {
+        this.name = name;
+        this.#openAnimation = openAnimationGroup;
+        this.#closeAnimation = closeAnimationGroup;
+
+        this.#openAnimation.stop();
+        this.#openAnimation._loopAnimation = false;
+        this.#closeAnimation.stop();
+        this.#closeAnimation._loopAnimation = false;
+
+        this.#startFrame = this.#openAnimation.from;
+        this.#endFrame = this.#openAnimation.to;
+        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));
+    }
+
+    /**
+     * Collects node IDs affected by the opening and closing animation groups.
+     * Populates the #nodes array with unique node identifiers.
+     * @private
+     */
+    #getNodesFromAnimationGroups() {
+        [this.#openAnimation, this.#closeAnimation].forEach((animationGroup) => {
+            animationGroup._targetedAnimations.forEach((targetedAnimation) => {
+                if (!this.#nodes.includes(targetedAnimation.target.id)) {
+                    this.#nodes.push(targetedAnimation.target.id);
+                }
+            });
+        });
+    }
+
+    /**
+     * Handles the end of the opening animation group.
+     * @private
+     */
+    #onOpened() {
+        this.#goToOpened(true);
+    }
+
+    /**
+     * Handles the end of the closing animation group.
+     * @private
+     */
+    #onClosed() {
+        this.#goToClosed(true);
+    }
+
+    /**
+     * Moves the animation to the fully opened state, optionally looping to close.
+     * @private
+     * @param {boolean} useLoop - If true, starts closing animation after opening.
+     */
+    #goToOpened(useLoop = false) {
+        this.#lastPausedFrame = this.#endFrame;
+
+        if (this.#openAnimation._isStarted && !this.#openAnimation._isPaused) {
+            this.#openAnimation.pause();
+        }
+        this.#openAnimation.goToFrame(this.#endFrame);
+
+        this.#closeAnimation.pause();
+        this.#closeAnimation.goToFrame(this.#startFrame);
+
+        this.#state = OpeningAnimation.states.opened;
+        this.#updateControls();
+
+        if (this.#loop && useLoop) {
+            this.playClose();
+        }
+    }
+
+    /**
+     * Moves the animation to the fully closed state, optionally looping to open.
+     * @private
+     * @param {boolean} useLoop - If true, starts opening animation after closing.
+     */
+    #goToClosed(useLoop = false) {
+        this.#lastPausedFrame = this.#startFrame;
+
+        if (this.#closeAnimation._isStarted && !this.#closeAnimation._isPaused) {
+            this.#closeAnimation.pause();
+        }
+        this.#closeAnimation.goToFrame(this.#endFrame - this.#startFrame);
+
+        this.#openAnimation.pause();
+        this.#openAnimation.goToFrame(this.#startFrame);
+
+        this.#state = OpeningAnimation.states.closed;
+        this.#updateControls();
+
+        if (this.#loop && useLoop) {
+            this.playOpen();
+        }
+    }
+
+    /**
+     * Moves the animation to a specific frame and pauses.
+     * @private
+     * @param {number} frame - The frame to go to and pause.
+     */
+    #goToFrameAndPause(frame) {
+        if (!frame) {
+            return;
+        }
+
+        if (this.#state === OpeningAnimation.states.opening) {
+            this.#openAnimation.pause();
+        }
+        if (this.#state === OpeningAnimation.states.closing) {
+            this.#closeAnimation.pause();
+        }
+
+        if (this.#openAnimation._isStarted && this.#openAnimation._isPaused) {
+            this.#openAnimation.goToFrame(frame);
+        } else {
+            this.#openAnimation.start();
+            this.#openAnimation.pause();
+            this.#openAnimation.goToFrame(frame);
+        }
+
+        this.#lastPausedFrame = frame;
+        this.#state = OpeningAnimation.states.paused;
+        this.#updateControls();
+    }
+
+    /**
+     * Gets the current frame of the animation based on its state.
+     * @private
+     * @returns {number} The current frame.
+     */
+    #getCurrentFrame() {
+        let currentFrame;
+        if (this.#state === OpeningAnimation.states.opening) {
+            currentFrame = this.#openAnimation.getCurrentFrame();
+        } else if (this.#state === OpeningAnimation.states.closing) {
+            currentFrame = this.#endFrame - this.#closeAnimation.getCurrentFrame();
+        } else {
+            currentFrame = this.#lastPausedFrame;
+        }
+
+        // Ensure currentFrame is within startFrame and endFrame
+        if (currentFrame < this.#startFrame) {
+            currentFrame = this.#startFrame;
+        } else if (currentFrame > this.#endFrame) {
+            currentFrame = this.#endFrame;
+        }
+
+        return currentFrame;
+    }
+
+    /**
+     * Calculates the frame number from a normalized progress value (0-1).
+     * @private
+     * @param {number} progress - Progress value between 0 and 1.
+     * @returns {number} The corresponding frame.
+     */
+    #getFrameFromProgress(progress) {
+        const frame = this.#startFrame + (this.#endFrame - this.#startFrame) * progress;
+        return frame;
+    }
+
+    /**
+     * Calculates the normalized progress (0-1) from the current frame.
+     * @private
+     * @returns {number} Progress value.
+     */
+    #getProgress() {
+        const currentFrame = this.#getCurrentFrame();
+        const progress = (currentFrame - this.#startFrame) / (this.#endFrame - this.#startFrame);
+        return progress;
+    }
+
+    /**
+     * Applies threshold logic to the progress value to snap to 0 or 1 if near the ends.
+     * Prevents floating point errors from leaving the animation in an in-between state.
+     * @private
+     * @param {number} progress - Progress value.
+     * @returns {number} Thresholded progress.
+     */
+    #checkProgress(progress) {
+        if (progress <= this.#progressThreshold) {
+            progress = 0;
+        } else if (progress >= 1 - this.#progressThreshold) {
+            progress = 1;
+        }
+        return progress;
+    }
+
+    /**
+     * Updates the slider value in the animation control menu to match the current progress.
+     * @private
+     */
+    #updateControlsSlider() {
+        if (!this.isControlsVisible()) {
+            return;
+        }
+        this.#menu.animationProgress = this.#getProgress();
+    }
+
+    /**
+     * Updates all controls in the animation menu (buttons, slider) to reflect the current state and progress.
+     * @private
+     */
+    #updateControls() {
+        if (!this.isControlsVisible()) {
+            return;
+        }
+        if (!this.#menu) {
+            return;
+        }
+        this.#menu.animationState = this.#state;
+        this.#menu.animationProgress = this.#getProgress();
+    }
+
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+
+    /**
+     * Checks if the animation affects the given node.
+     * @param {string} node - Node identifier.
+     * @returns {boolean}
+     */
+    isAnimationForNode(node) {
+        return this.#nodes.includes(node);
+    }
+
+    /**
+     * Starts the opening animation.
+     * @public
+     */
+    playOpen() {
+        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();
+        }
+
+        if (this.#openAnimation._isStarted && this.#openAnimation._isPaused) {
+            this.#openAnimation.goToFrame(this.#lastPausedFrame);
+            this.#openAnimation.restart();
+        } else {
+            this.#openAnimation.start(false, this.#speedRatio, this.#lastPausedFrame, this.#endFrame, undefined);
+        }
+
+        this.#state = OpeningAnimation.states.opening;
+        this.#updateControls();
+    }
+
+    /**
+     * Starts the closing animation.
+     * @public
+     */
+    playClose() {
+        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();
+        }
+
+        if (this.#closeAnimation._isStarted && this.#closeAnimation._isPaused) {
+            this.#closeAnimation.goToFrame(this.#endFrame - this.#lastPausedFrame);
+            this.#closeAnimation.restart();
+        } else {
+            this.#closeAnimation.start(false, this.#speedRatio, this.#endFrame - this.#lastPausedFrame, this.#endFrame, undefined);
+        }
+
+        this.#state = OpeningAnimation.states.closing;
+        this.#updateControls();
+    }
+
+    /**
+     * Pauses the current animation.
+     * @public
+     */
+    pause() {
+        if (this.#state === OpeningAnimation.states.opening) {
+            this.#lastPausedFrame = this.#openAnimation.getCurrentFrame();
+            this.#openAnimation.pause();
+        }
+        if (this.#state === OpeningAnimation.states.closing) {
+            this.#lastPausedFrame = this.#endFrame - this.#closeAnimation.getCurrentFrame();
+            this.#closeAnimation.pause();
+        }
+        this.#state = OpeningAnimation.states.paused;
+        this.#updateControls();
+    }
+
+    /**
+     * Moves animation to the fully opened state.
+     * @public
+     */
+    goToOpened() {
+        this.#goToOpened(false);
+    }
+
+    /**
+     * Moves animation to the fully closed state.
+     * @public
+     */
+    goToClosed() {
+        this.#goToClosed(false);
+    }
+
+    /**
+     * Displays the animation control menu and sets up callbacks.
+     * Synchronizes slider and button states with animation.
+     * @public
+     * @param {AdvancedDynamicTexture} advancedDynamicTexture - Babylon.js GUI texture.
+     */
+    showControls(advancedDynamicTexture) {
+        this.#advancedDynamicTexture = advancedDynamicTexture;
+        this.#advancedDynamicTexture.metadata = { animationName: this.name };
+        const controlCallbacks = {
+            onGoToOpened: () => {
+                if (this.#state === OpeningAnimation.states.opened) {
+                    return;
+                }
+                this.goToOpened();
+            },
+            onOpen: () => {
+                if (this.#state === OpeningAnimation.states.opened || this.#state === OpeningAnimation.states.opening) {
+                    return;
+                }
+                this.playOpen();
+            },
+            onPause: () => {
+                if (this.#state === OpeningAnimation.states.paused || this.#state === OpeningAnimation.states.closed || this.#state === OpeningAnimation.states.opened) {
+                    return;
+                }
+                this.pause();
+            },
+            onClose: () => {
+                if (this.#state === OpeningAnimation.states.closed || this.#state === OpeningAnimation.states.closing) {
+                    return;
+                }
+                this.playClose();
+            },
+            onGoToClosed: () => {
+                if (this.#state === OpeningAnimation.states.closed) {
+                    return;
+                }
+                this.goToClosed();
+            },
+            onSetAnimationProgress: (progress) => {
+                progress = this.#checkProgress(progress);
+                if (progress === 0) {
+                    this.goToClosed();
+                } else if (progress === 1) {
+                    this.goToOpened();
+                } else {
+                    const frame = this.#getFrameFromProgress(progress);
+                    this.#goToFrameAndPause(frame);
+                }
+            },
+            onToggleLoop: () => {
+                this.#loop = !this.#loop;
+                this.#menu.animationLoop = this.#loop;
+            },
+        };
+        this.#menu = new OpeningAnimationMenu(this.#advancedDynamicTexture, 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));
+    }
+
+    /**
+     * Hides the animation control menu and removes observers.
+     * @public
+     */
+    hideControls() {
+        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;
+    }
+
+    /**
+     * Checks if the animation controls menu is currently visible for this animation instance.
+     * @public
+     * @returns {boolean} True if controls are visible for this animation; otherwise, false.
+     */
+    isControlsVisible() {
+        return !!(this.#advancedDynamicTexture && this.#advancedDynamicTexture.metadata?.animationName === this.name && this.#menu);
+    }
+
+    /**
+     * ---------------------------
+     * Public properties
+     * ---------------------------
+     */
+
+    /**
+     * Returns the current animation state.
+     * @public
+     * @returns {number}
+     */
+
+    get state() {
+        return this.#state;
+    }
+}

package/src/babylonjs-controller.js

@@ -1,9 +1,12 @@
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience, MeshBuilder, WebXRFeatureName, HDRCubeTexture, IblShadowsRenderPipeline } from "@babylonjs/core";
+import { ArcRotateCamera, AssetContainer, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager } from "@babylonjs/core";
 import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
 import "@babylonjs/loaders";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
+
 import GLTFResolver from "./gltf-resolver.js";
+import { ContainerData, MaterialData } from "./pref-viewer-3d-data.js";
+import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
 
 /**
  * BabylonJSController - Main controller for managing Babylon.js 3D scenes, assets, and interactions.
@@ -76,6 +79,7 @@ export default class BabylonJSController {
     #options = {};
 
     #gltfResolver = null; // GLTFResolver instance
+    #babylonJSAnimationController = null; // AnimationController instance
 
     /**
      * Constructs a new BabylonJSController instance.
@@ -414,7 +418,7 @@ export default class BabylonJSController {
     /**
      * Applies material options from the configuration to the relevant meshes.
      * @private
-     * @param {object} optionMaterial - Material option containing value, nodePrefixes, nodeNames, and state.
+     * @param {MaterialData} optionMaterial - Material option containing value, nodePrefixes, nodeNames, and state.
      * @returns {boolean} True if any mesh material was set, false otherwise.
      */
     #setOptionsMaterial(optionMaterial) {
@@ -542,7 +546,7 @@ export default class BabylonJSController {
      * Finds and returns the asset container object by its name.
      * @private
      * @param {string} name - The name of the container to find.
-     * @returns {object|null} The matching container object, or null if not found.
+     * @returns {ContainerData|null} The matching container object, or null if not found.
      */
     #findContainerByName(name) {
         return Object.values(this.#containers).find((container) => container.state.name === name) || null;
@@ -595,7 +599,7 @@ export default class BabylonJSController {
     /**
      * Adds the asset container to the Babylon.js scene if it should be shown and is not already visible.
      * @private
-     * @param {object} container - The container object containing asset state and metadata.
+     * @param {ContainerData} container - The container object containing asset state and metadata.
      * @returns {boolean} True if the container was added, false otherwise.
      */
     #addContainer(container) {
@@ -611,7 +615,7 @@ export default class BabylonJSController {
     /**
      * Removes the asset container from the Babylon.js scene if it is currently visible.
      * @private
-     * @param {object} container - The container object containing asset state and metadata.
+     * @param {ContainerData} container - The container object containing asset state and metadata.
      * @returns {boolean} True if the container was removed, false otherwise.
      */
     #removeContainer(container) {
@@ -627,9 +631,9 @@ export default class BabylonJSController {
     /**
      * Replaces the asset container in the Babylon.js scene with a new one.
      * @private
-     * @param {object} container - The container object containing asset state and metadata.
-     * @param {object} newAssetContainer - The new asset container to add to the scene.
-     * @returns {boolean} True if the container was replaced, false otherwise.
+     * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @param {AssetContainer} newAssetContainer - The new asset container to add to the scene.
+     * @returns {boolean} True if the container was replaced and added, false otherwise.
      */
     #replaceContainer(container, newAssetContainer) {
         if (container.assetContainer) {
@@ -639,8 +643,7 @@ export default class BabylonJSController {
         }
         this.#scene.getEngine().releaseEffects();
         container.assetContainer = newAssetContainer;
-        this.#addContainer(container);
-        return true;
+        return this.#addContainer(container);
     }
     /**
      * Sets the visibility of wall and floor meshes in the model container based on the provided value or environment visibility.
@@ -663,7 +666,6 @@ export default class BabylonJSController {
      * @private
      * @returns {void}
      */
-    #stopR;
     #stopRender() {
         this.#engine.stopRenderLoop(this.#renderLoop.bind(this));
     }
@@ -681,8 +683,8 @@ export default class BabylonJSController {
     /**
      * Loads an asset container (model, environment, materials, etc.) using the provided container state.
      * @private
-     * @param {object} container - The container object containing asset state and metadata.
-     * @returns {Promise<[object, AssetContainer|boolean]>} Resolves to an array with the container and the loaded asset container, or false if loading fails.
+     * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @returns {Promise<[ContainerData, AssetContainer|boolean]>} Resolves to an array with the container and the loaded asset container, or false if loading fails.
      * @description
      * Resolves the asset source using GLTFResolver, prepares plugin options, and loads the asset into the Babylon.js scene.
      * Updates the container's cache data and returns the container along with the loaded asset container or false if loading fails.
@@ -753,7 +755,10 @@ export default class BabylonJSController {
                         if (container.state.name === "model") {
                             assetContainer.lights = [];
                         }
-                        this.#replaceContainer(container, assetContainer);
+                        const replacedAndAdded = this.#replaceContainer(container, assetContainer);
+                        if (replacedAndAdded && container.state.name === "model") {
+                            this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
+                        }
                         container.state.setSuccess(true);
                     } else {
                         if (container.assetContainer && container.state.mustBeShown !== container.state.isVisible && container.state.name === "materials") {

package/src/index.js

@@ -270,7 +270,7 @@ class PrefViewer extends HTMLElement {
 
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
+            cancelable: true,
             composed: true,
         };
         if (detail) {
@@ -294,7 +294,7 @@ class PrefViewer extends HTMLElement {
 
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
+            cancelable: true,
             composed: true,
         };
         this.dispatchEvent(new CustomEvent("drawing-loading", customEventOptions));
@@ -316,7 +316,7 @@ class PrefViewer extends HTMLElement {
 
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
+            cancelable: true,
             composed: true,
         };
         if (detail) {
@@ -333,9 +333,11 @@ class PrefViewer extends HTMLElement {
      * @returns {void}
      */
     #on2DZoomChanged(event) {
+        event.stopPropagation();
+        event.preventDefault();
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
+            cancelable: true,
             composed: true,
             detail: event.detail,
         };

package/src/pref-viewer-2d.js

@@ -221,9 +221,9 @@ export class PrefViewer2D extends HTMLElement {
         const error = "PrefViewer2D: Error in SVG provided for loading. Ensure the SVG is a URL to an SVG file, a string containing a SVG, or a string containing a base64-encoded SVG.";
         const detail = { error: new Error(error) };
         const customEventOptions = {
-            bubbles: true,
-            cancelable: false,
-            composed: true,
+            bubbles: true, // indicates whether the event bubbles up through the DOM tree or not
+            cancelable: true, // indicates whether the event can be canceled, and therefore prevented as if the event never happened
+            composed: false, // indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM
             detail: detail,
         };
         this.dispatchEvent(new CustomEvent("drawing-error", customEventOptions));
@@ -238,8 +238,8 @@ export class PrefViewer2D extends HTMLElement {
     #onLoaded() {
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
         };
         this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions));
 
@@ -258,8 +258,8 @@ export class PrefViewer2D extends HTMLElement {
     #onLoading() {
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
         };
         this.dispatchEvent(new CustomEvent("drawing-loading", customEventOptions));
 
@@ -285,10 +285,11 @@ export class PrefViewer2D extends HTMLElement {
     #onPanzoomChanged(state) {
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
             detail: state,
         };
+        customEventOptions.detail.desde2d = "true";
         this.dispatchEvent(new CustomEvent("drawing-zoom-changed", customEventOptions));
     }
 

package/src/pref-viewer-3d.js

@@ -1,4 +1,4 @@
-import { ContainerData, MaterialData, CameraData } from "./pref-viewer-3d-data.js";
+import { CameraData, ContainerData, MaterialData } from "./pref-viewer-3d-data.js";
 import BabylonJSController from "./babylonjs-controller.js";
 
 /**
@@ -303,9 +303,9 @@ export class PrefViewer3D extends HTMLElement {
      */
     #onLoading() {
         const customEventOptions = {
-            bubbles: true,
-            cancelable: false,
-            composed: true,
+            bubbles: true, // indicates whether the event bubbles up through the DOM tree or not
+            cancelable: true, // indicates whether the event can be canceled, and therefore prevented as if the event never happened
+            composed: false, // indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM
         };
         this.dispatchEvent(new CustomEvent("scene-loading", customEventOptions));
 
@@ -351,8 +351,8 @@ export class PrefViewer3D extends HTMLElement {
 
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
             detail: detail,
         };
         this.dispatchEvent(new CustomEvent("scene-loaded", customEventOptions));
@@ -375,8 +375,8 @@ export class PrefViewer3D extends HTMLElement {
     #onSettingOptions() {
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
         };
         this.dispatchEvent(new CustomEvent("scene-setting-options", customEventOptions));
 
@@ -416,8 +416,8 @@ export class PrefViewer3D extends HTMLElement {
         
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
             detail: detail,
         };
         this.dispatchEvent(new CustomEvent("scene-set-options", customEventOptions));