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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.2",
+  "version": "2.11.0-beta.3",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
@@ -30,15 +30,16 @@
   "sideEffects": false,
   "files": [
     "src",
-    "src/models",
+    "src/images",
     "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,536 @@
+import { Color3, PointerEventTypes, HighlightLayer } from "@babylonjs/core";
+import { AdvancedDynamicTexture, StackPanel, Control, Button, Image } from "@babylonjs/gui";
+
+// https://doc.babylonjs.com/typedoc/classes/BABYLON.AnimationGroup
+class OpeningAnimationController {
+    static states = {
+        paused: 0,
+        closed: 1,
+        opened: 2,
+        opening: 3,
+        closing: 4,
+    };
+
+    #openAnimation = null;
+    #closeAnimation = null;
+
+    #nodes = [];
+    #state = OpeningAnimationController.states.closed;
+    #currentFrame = 0;
+    #startFrame = 0;
+    #endFrame = 0;
+    #speedRatio = 1.0;
+
+    #advancedDynamicTexture = null;
+    #menu = null;
+
+    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));
+    }
+
+    #getNodesFromAnimationGroups() {
+        [this.#openAnimation, this.#closeAnimation].forEach((animationGroup) => {
+            animationGroup._targetedAnimations.forEach((targetedAnimation) => {
+                if (!this.#nodes.includes(targetedAnimation.target.id)) {
+                    this.#nodes.push(targetedAnimation.target.id);
+                }
+            });
+        });
+    }
+
+    #onOpened() {
+        this.goToOpened();
+    }
+
+    #onClosed() {
+        this.goToClosed();
+    }
+
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+
+    isAnimationForNode(node) {
+        return this.#nodes.includes(node);
+    }
+
+    playOpen() {
+        if (this.#state === OpeningAnimationController.states.opening || this.#state === OpeningAnimationController.states.opened) {
+            return;
+        }
+        if (this.#state === OpeningAnimationController.states.closing) {
+            this.#currentFrame = this.#endFrame - this.#closeAnimation.getCurrentFrame();
+            this.#closeAnimation.pause();
+        }
+
+        if (this.#openAnimation._isStarted && this.#openAnimation._isPaused) {
+            this.#openAnimation.goToFrame(this.#currentFrame);
+            this.#openAnimation.restart();
+        } else {
+            this.#openAnimation.start(false, this.#speedRatio, this.#currentFrame, this.#endFrame, undefined);
+        }
+
+        this.#state = OpeningAnimationController.states.opening;
+        this.updateControls();
+    }
+
+    playClose() {
+        if (this.#state === OpeningAnimationController.states.closing || this.#state === OpeningAnimationController.states.closed) {
+            return;
+        }
+        if (this.#state === OpeningAnimationController.states.opening) {
+            this.#currentFrame = this.#openAnimation.getCurrentFrame();
+            this.#openAnimation.pause();
+        }
+
+        if (this.#closeAnimation._isStarted && this.#closeAnimation._isPaused) {
+            this.#closeAnimation.goToFrame(this.#endFrame - this.#currentFrame);
+            this.#closeAnimation.restart();
+        } else {
+            this.#closeAnimation.start(false, this.#speedRatio, this.#endFrame - this.#currentFrame, this.#endFrame, undefined);
+        }
+
+        this.#state = OpeningAnimationController.states.closing;
+        this.updateControls();
+    }
+
+    pause() {
+        if (this.#state === OpeningAnimationController.states.opening) {
+            this.#currentFrame = this.#openAnimation.getCurrentFrame();
+            this.#openAnimation.pause();
+        }
+        if (this.#state === OpeningAnimationController.states.closing) {
+            this.#currentFrame = this.#endFrame - this.#closeAnimation.getCurrentFrame();
+            this.#closeAnimation.pause();
+        }
+        this.#state = OpeningAnimationController.states.paused;
+        this.updateControls();
+    }
+
+    goToOpened() {
+        this.#currentFrame = this.#endFrame;
+
+        if (this.#openAnimation._isStarted) {
+            this.#openAnimation.start();
+        }
+        this.#openAnimation.pause();
+        this.#openAnimation.goToFrame(this.#endFrame);
+
+        if (!this.#closeAnimation._isStarted) {
+            this.#closeAnimation.start();
+        }
+        this.#closeAnimation.pause();
+        this.#closeAnimation.goToFrame(this.#startFrame);
+
+        this.#state = OpeningAnimationController.states.opened;
+        this.updateControls();
+    }
+
+    goToClosed() {
+        this.#currentFrame = this.#startFrame;
+        if (this.#openAnimation._isStarted) {
+            this.#openAnimation.start();
+        }
+        this.#openAnimation.pause();
+        this.#openAnimation.goToFrame(this.#startFrame);
+
+        if (this.#closeAnimation._isStarted) {
+            this.#closeAnimation.start();
+        }
+        this.#closeAnimation.pause();
+        this.#closeAnimation.goToFrame(this.#endFrame);
+
+        this.#state = OpeningAnimationController.states.closed;
+        this.updateControls();
+    }
+
+    showControls(advancedDynamicTexture, mesh) {
+        this.#advancedDynamicTexture = advancedDynamicTexture;
+        this.#advancedDynamicTexture.metadata = { name: this.name };
+        const controlCallbacks = {
+            onGoToOpened: () => {
+                if (this.#state === OpeningAnimationController.states.opened) {
+                    return;
+                }
+                this.goToOpened();
+                this.hideControls();
+            },
+            onOpen: () => {
+                if (this.#state === OpeningAnimationController.states.opened || this.#state === OpeningAnimationController.states.opening) {
+                    return;
+                }
+                this.playOpen();
+                this.hideControls();
+            },
+            onPause: () => {
+                if (this.#state === OpeningAnimationController.states.paused || this.#state === OpeningAnimationController.states.closed || this.#state === OpeningAnimationController.states.opened) {
+                    return;
+                }
+                this.pause();
+                this.hideControls();
+            },
+            onClose: () => {
+                if (this.#state === OpeningAnimationController.states.closed || this.#state === OpeningAnimationController.states.closing) {
+                    return;
+                }
+                this.playClose();
+                this.hideControls();
+            },
+            onGoToClosed: () => {
+                if (this.#state === OpeningAnimationController.states.closed) {
+                    return;
+                }
+                this.goToClosed();
+                this.hideControls();
+            },
+        };
+        this.#menu = new AnimationMenu(this.#advancedDynamicTexture, mesh, this.#state, controlCallbacks);
+    }
+
+    hideControls() {
+        if (!this.isControlsVisible()) {
+            return;
+        }
+        this.#advancedDynamicTexture.dispose();
+        this.#advancedDynamicTexture = null;
+    }
+
+    updateControls() {
+        if (!this.isControlsVisible()) {
+            return;
+        }
+        if (!this.#menu) {
+            return;
+        }
+        this.#menu.animationState = this.#state;
+    }
+
+    isControlsVisible() {
+        return this.#advancedDynamicTexture !== null || this.#advancedDynamicTexture?.metadata?.name === this.name;
+    }
+
+    /**
+     * ---------------------------
+     * Public properties
+     * ---------------------------
+     */
+
+    get state() {
+        return this.#state;
+    }
+}
+
+/**
+ * AnimationMenu - Models and renders a popup menu for controlling animation playback in a Babylon.js 3D scene.
+ *
+ * Responsibilities:
+ *  - Creates a Babylon.js GUI panel with buttons for animation actions (open, close, pause, go to opened/closed).
+ *  - Handles button states (enabled/disabled, active/inactive) based on animation state.
+ *  - Attaches the menu to a mesh and disposes it when an action is taken.
+ *  - Allows external callbacks for each action.
+ *
+ * Usage:
+ *  const menu = new AnimationMenu(advancedDynamicTexture, mesh, animationState, {
+ *      onOpen: () => { ... },
+ *      onClose: () => { ... },
+ *      onPause: () => { ... },
+ *      onGoToOpened: () => { ... },
+ *      onGoToClosed: () => { ... }
+ *  });
+ *  menu.show();
+ *  menu.hide();
+ */
+
+class AnimationMenu {
+    #advancedDynamicTexture = null;
+    #animationState = OpeningAnimationController.states.closed;
+    #mesh = null;
+    #callbacks = null;
+    #panel = null;
+    #colorActive = "#6BA53A";
+    #colorEnabled = "#333333";
+    #colorDisabled = "#777777";
+
+    /**
+     * @param {AdvancedDynamicTexture} advancedDynamicTexture - Babylon.js GUI texture.
+     * @param {BABYLON.Mesh} mesh - Mesh to attach the menu to.
+     * @param {number} animationState - Current animation state (enum).
+     * @param {object} callbacks - Callback functions for menu actions.
+     */
+    constructor(advancedDynamicTexture, mesh, animationState, callbacks) {
+        this.#advancedDynamicTexture = advancedDynamicTexture;
+        this.#mesh = mesh;
+        this.#animationState = animationState;
+        this.#callbacks = callbacks;
+
+        this.#createMenu(animationState);
+    }
+
+    /**
+     * Renders the menu and attaches it to the mesh.
+     */
+    #createMenu() {
+        if (!this.#advancedDynamicTexture || !this.#mesh) {
+            return;
+        }
+        this.#panel = new StackPanel();
+        this.#panel.isVertical = false;
+        this.#panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
+        this.#panel.left = 0;
+        this.#panel.top = 0;
+        this.#advancedDynamicTexture.addControl(this.#panel);
+        this.#panel.linkWithMesh(this.#mesh);
+
+        this.#createButtons();
+        this.#setButtonsState();
+    }
+
+    /**
+     * Internal helper to add a button to the menu.
+     * @private
+     */
+    #addButton(name, imageURL, callback) {
+        const button = Button.CreateImageOnlyButton(`button_animation_${name}`, imageURL);
+        button.image.stretch = Image.STRETCH_UNIFORM;
+        button.color = "white";
+        button.hoverCursor = "pointer";
+        button.width = "28px";
+        button.height = "28px";
+        button.cornerRadius = 0;
+        button.background = this.#colorEnabled;
+        button.onPointerUpObservable.add(() => {
+            if (callback) {
+                callback();
+            }
+        });
+        this.#panel.addControl(button);
+    }
+
+    #createButtons() {
+        this.#addButton("closed", "../src/images/icon-skip-backward.svg", this.#callbacks.onGoToClosed);
+        this.#addButton("close", "../src/images/icon-play-backwards.svg", this.#callbacks.onClose);
+        this.#addButton("pause", "../src/images/icon-pause.svg", this.#callbacks.onPause);
+        this.#addButton("open", "../src/images/icon-play.svg", this.#callbacks.onOpen);
+        this.#addButton("opened", "../src/images/icon-skip-forward.svg", this.#callbacks.onGoToOpened);
+    }
+
+    #setButtonState(name, enabled, active) {
+        const button = this.#advancedDynamicTexture.getControlByName(`button_animation_${name}`);
+        if (!button) {
+            return;
+        }
+        button.background = active ? this.#colorActive : enabled ? this.#colorEnabled : this.#colorDisabled;
+    }
+
+    #setButtonsState() {
+        const goToOpenedButtonEnabled = this.#animationState !== OpeningAnimationController.states.opened;
+        const goToOpenedButtonActive = false;
+        const openButtonEnabled = this.#animationState !== OpeningAnimationController.states.opened && this.#animationState !== OpeningAnimationController.states.opening;
+        const openButtonActive = this.#animationState === OpeningAnimationController.states.opening;
+        const pauseButtonEnabled = this.#animationState !== OpeningAnimationController.states.paused && this.#animationState !== OpeningAnimationController.states.closed && this.#animationState !== OpeningAnimationController.states.opened;
+        const pauseButtonActive = this.#animationState === OpeningAnimationController.states.paused;
+        const closeButtonEnabled = this.#animationState !== OpeningAnimationController.states.closed && this.#animationState !== OpeningAnimationController.states.closing;
+        const closeButtonActive = this.#animationState === OpeningAnimationController.states.closing;
+        const goToClosedButtonEnabled = this.#animationState !== OpeningAnimationController.states.closed;
+        const goToClosedButtonActive = false;
+
+        this.#setButtonState("opened", goToOpenedButtonEnabled, goToOpenedButtonActive);
+        this.#setButtonState("open", openButtonEnabled, openButtonActive);
+        this.#setButtonState("pause", pauseButtonEnabled, pauseButtonActive);
+        this.#setButtonState("close", closeButtonEnabled, closeButtonActive);
+        this.#setButtonState("closed", goToClosedButtonEnabled, goToClosedButtonActive);
+    }
+
+    set animationState(state) {
+        this.#animationState = state;
+        this.#setButtonsState();
+    }
+}
+
+/**
+ * BabylonJSAnimationController - Manages animation playback and interactive highlighting for model containers in Babylon.js scenes.
+ *
+ * Responsibilities:
+ *  - Detects if the loaded model container contains animations.
+ *  - Controls playback state: playing forward, playing backward, paused.
+ *  - Tracks and manages animated transformation nodes.
+ *  - Highlights animated nodes when hovered by the cursor.
+ *  - Provides API for play, pause, reverse, and highlight operations.
+ */
+export default class BabylonJSAnimationController {
+    #scene = null;
+    #assetContainer = null;
+    #animatedNodes = [];
+    #highlightLayer = null;
+    #highlightColor = new Color3(0, 1, 0); // Color para resaltar los elementos animados (Verde)
+    #advancedDynamicTexture = null;
+    #openingAnimations = [];
+
+    /**
+     * @param {BABYLON.Scene} scene - The Babylon.js scene instance.
+     * @param {BABYLON.AssetContainer} assetContainer - The loaded asset container.
+     */
+    constructor(scene, assetContainer) {
+        this.#scene = scene;
+        this.#assetContainer = assetContainer;
+        this.#initializeAnimations();
+        this.#setupPointerObservers();
+    }
+
+    /**
+     * Detects and stores animatable objects and animated nodes in the model container.
+     * @private
+     */
+    #initializeAnimations() {
+        if (!this.#assetContainer.animationGroups.length) {
+            return;
+        }
+
+        this.#getAnimatedNodes();
+        this.#getOpeneingAnimations();
+    }
+
+    #getAnimatedNodes() {
+        this.#assetContainer.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);
+                }
+            });
+        });
+    }
+
+    #getOpeneingAnimations() {
+        const openings = {};
+        this.#assetContainer.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 OpeningAnimationController(opening.name, opening.animationOpen, opening.animationClose));
+        });
+    }
+
+    #getOpeningAnimationByNode(nodeId) {
+        return this.#openingAnimations.find((openingAnimation) => openingAnimation.isAnimationForNode(nodeId));
+    }
+
+    /**
+     * Busca si una malla pertenece a un nodo que es objetivo de alguna animación
+     * @param {BABYLON.Mesh} mesh Malla
+     * @param {Array} targetNodeIds Array con los identificadores de los nodos que son objetivo de alguna animación
+     * @returns {Array} Array de 2 posiciones: [0] Identificador del nodo que es objetivo de alguna animación (o false si no lo es), [1] Array con las mallas hijas del nodo que es objetivo de alguna animación (o vacío si no lo es)
+     * @description
+     * El segundo elemento del array devuelto es se necesita para poder resaltar esas mallas hijas cuando el puntero del ratón está sobre alguna de ellas
+     */
+    #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;
+    };
+
+    /**
+     * Ilumina las mallas que son objetivo de alguna animación si el puntero del ratón está sobre una de ellas
+     * @param {BABYLON.PickingInfo} pickingInfo Información del trazado del rayo desde la cámara activa hasta el puntero del ratón
+     */
+    #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.
+     * @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) {
+                // Eliminar cualquier Babylon GUI que se haya creado anteriormente
+                if (this.#advancedDynamicTexture) {
+                    this.#advancedDynamicTexture.dispose();
+                    this.#advancedDynamicTexture = null;
+                }
+                const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
+                this.#showMenu(pickingInfo);
+            }
+        });
+    }
+
+    #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, pickingInfo.pickedMesh);
+    }
+}

package/src/babylonjs-controller.js

@@ -3,7 +3,9 @@ import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompre
 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 BabylonJSAnimationController from "./babylonjs-animation-controller.js";
 
 /**
  * BabylonJSController - Main controller for managing Babylon.js 3D scenes, assets, and interactions.
@@ -76,6 +78,7 @@ export default class BabylonJSController {
     #options = {};
 
     #gltfResolver = null; // GLTFResolver instance
+    #babylonJSAnimationController = null; // AnimationController instance
 
     /**
      * Constructs a new BabylonJSController instance.
@@ -629,7 +632,7 @@ export default class BabylonJSController {
      * @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.
+     * @returns {boolean} True if the container was replaced and added, false otherwise.
      */
     #replaceContainer(container, newAssetContainer) {
         if (container.assetContainer) {
@@ -639,8 +642,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 +665,6 @@ export default class BabylonJSController {
      * @private
      * @returns {void}
      */
-    #stopR;
     #stopRender() {
         this.#engine.stopRenderLoop(this.#renderLoop.bind(this));
     }
@@ -753,7 +754,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, assetContainer);
+                        }
                         container.state.setSuccess(true);
                     } else {
                         if (container.assetContainer && container.state.mustBeShown !== container.state.isVisible && container.state.name === "materials") {

package/src/images/icon-pause.svg

@@ -0,0 +1 @@
+<svg id="pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg>

package/src/images/icon-play-backwards.svg

@@ -0,0 +1 @@
+<svg id="play_backwards" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M16,18.86V4.86l-11,7,11,7Z" /></svg>

package/src/images/icon-play.svg

@@ -0,0 +1 @@
+<svg id="play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M8,5.14v14l11-7-11-7Z" /></svg>

package/src/images/icon-skip-backward.svg

@@ -0,0 +1 @@
+<svg id="skip-backward" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M20,5V19L13,12M6,5V19H4V5M13,5V19L6,12" /></svg>

package/src/images/icon-skip-forward.svg

@@ -0,0 +1 @@
+<svg id="skip-forward" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M4,5V19L11,12M18,5V19H20V5M11,5V19L18,12" /></svg>

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

@@ -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));