@preference-sl/pref-viewer 2.11.0-beta.12 → 2.11.0-beta.13

package/package.json

@@ -1,53 +1,65 @@
 {
-  "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.12",
-  "description": "Web Component to preview GLTF models with Babylon.js",
-  "author": "Alex Moreno Palacio <amoreno@preference.es>",
-  "scripts": {
-    "release": "standard-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
-    "release:beta": "standard-version --prerelease beta --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
-    "build": "esbuild src/index.js --bundle --platform=node --format=esm --outfile=dist/bundle.js --sourcemap",
-    "start": "npm run build && http-server -c-1 . -p 8080",
-    "test": "vitest"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://bitbucket.org/preferencesl/pref-viewer.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "type": "module",
-  "main": "src/index.js",
-  "types": "index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./src/index.js",
-      "require": "./src/index.js"
+    "name": "@preference-sl/pref-viewer",
+    "version": "2.11.0-beta.13",
+    "description": "Web Component to preview GLTF models with Babylon.js",
+    "author": "Alex Moreno Palacio <amoreno@preference.es>",
+    "scripts": {
+        "build:prefweb": "webpack --config webpack.config.cjs --mode production",
+        "build:prefweb:dev": "webpack --config webpack.config.cjs --mode development",
+        "release": "standard-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
+        "release:beta": "standard-version --prerelease beta --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
+        "build": "esbuild src/index.js --bundle --platform=node --format=esm --outfile=dist/bundle.js --sourcemap",
+        "start": "npm run build && http-server -c-1 . -p 8080",
+        "test": "vitest"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://bitbucket.org/preferencesl/pref-viewer.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "license": "MIT",
+    "type": "module",
+    "main": "src/index.js",
+    "types": "index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./src/index.js",
+            "require": "./src/index.js"
+        }
+    },
+    "sideEffects": false,
+    "files": [
+        "src",
+        "index.d.ts"
+    ],
+    "dependencies": {
+        "@babylonjs/core": "^8.39.0",
+        "@babylonjs/gui": "^8.39.0",
+        "@babylonjs/loaders": "^8.39.0",
+        "@babylonjs/serializers": "^8.39.0",
+        "@panzoom/panzoom": "^4.6.0",
+        "babylonjs-gltf2interface": "^8.39.0",
+        "buffer": "^6.0.3",
+        "idb": "^8.0.3",
+        "is-svg": "^6.1.0",
+        "jszip": "^3.10.1",
+        "stream": "^0.0.3",
+        "string_decoder": "^1.3.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.22.0",
+        "@babel/preset-env": "^7.22.0",
+        "babel-loader": "^9.2.1",
+        "clean-webpack-plugin": "^4.0.0",
+        "esbuild": "^0.25.10",
+        "http-server": "^14.1.1",
+        "jsdom": "^26.1.0",
+        "standard-version": "^9.5.0",
+        "terser-webpack-plugin": "^5.3.6",
+        "vitest": "^3.2.3",
+        "webpack": "^5.88.2",
+        "webpack-cli": "^5.1.4"
     }
-  },
-  "sideEffects": false,
-  "files": [
-    "src",
-    "index.d.ts"
-  ],
-  "dependencies": {
-    "@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.36.1",
-    "idb": "^8.0.3",
-    "is-svg": "^6.1.0",
-    "jszip": "^3.10.1"
-  },
-  "devDependencies": {
-    "esbuild": "^0.25.10",
-    "http-server": "^14.1.1",
-    "jsdom": "^26.1.0",
-    "standard-version": "^9.5.0",
-    "vitest": "^3.2.3"
-  }
 }

package/src/babylonjs-animation-controller.js

@@ -1,20 +1,27 @@
-import { Color3, HighlightLayer, Mesh, PickingInfo, PointerEventTypes, Scene } from "@babylonjs/core";
+import { Color3, HighlightLayer, Mesh, PickingInfo, Scene } from "@babylonjs/core";
 import { AdvancedDynamicTexture } from "@babylonjs/gui";
 import { PrefViewerColors } from "./styles.js";
 import OpeningAnimation from "./babylonjs-animation-opening.js";
 
 /**
- * BabylonJSAnimationController - Manages animation playback and interactive highlighting for model containers in Babylon.js scenes.
+ * BabylonJSAnimationController - Manages animation playback, highlighting, and interactive controls for animated nodes in Babylon.js scenes.
  *
- * Responsibilities:
+ * Summary:
+ *  This class detects, groups, and manages opening/closing animations for scene nodes, provides interactive highlighting of animated nodes and their meshes, and displays a GUI menu for animation control. It is designed for integration with product configurators and interactive 3D applications using Babylon.js.
+ *
+ * Key features:
  *  - 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.
+ *  - Highlights animated nodes and their child meshes on pointer hover.
+ *  - Displays and disposes the animation control menu (Babylon.js GUI) for animated nodes.
+ *  - Provides public API for highlighting, showing the animation menu, and disposing resources.
+ *  - Cleans up all resources and observers to prevent memory leaks.
  *
  * Public Methods:
  *  - dispose(): Disposes all resources managed by the animation controller.
+ *  - hightlightMeshes(pickingInfo): Highlights meshes that are children of an animated node when hovered.
+ *  - hideMenu(): Hides and disposes the animation control menu (Babylon.js GUI) if it exists.
+ *  - showMenu(pickingInfo): Displays the animation control menu for the animated node under the pointer.
  *
  * @class
  */
@@ -33,7 +40,6 @@ export default class BabylonJSAnimationController {
     constructor(scene) {
         this.#scene = scene;
         this.#initializeAnimations();
-        this.#setupPointerObservers();
     }
 
     /**
@@ -123,12 +129,38 @@ export default class BabylonJSAnimationController {
         return nodeId;
     };
 
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+
+    /**
+     * Disposes all resources managed by the animation controller.
+     * Cleans up the highlight layer, GUI texture, and internal animation/node lists.
+     * Should be called when the controller is no longer needed to prevent memory leaks.
+     * @public
+     */
+    dispose() {
+        if (this.#highlightLayer) {
+            this.#highlightLayer.dispose();
+            this.#highlightLayer = null;
+        }
+        this.hideMenu();
+        this.#animatedNodes = [];
+        this.#openingAnimations = [];
+        const observer = this.#scene.onPointerObservable._observers.find((observer) => observer.callback.name.includes("#onAnimationPointerObservable"));
+        if (observer) {
+            this.#scene.onPointerObservable.remove(observer);
+        }
+    }
+
     /**
      * Highlights meshes that are children of an animated node when hovered.
-     * @private
+     * @public
      * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
      */
-    #hightlightMeshesForAnimation(pickingInfo) {
+    hightlightMeshes(pickingInfo) {
         if (!this.#highlightLayer) {
             this.#highlightLayer = new HighlightLayer("hl_animations", this.#scene);
         }
@@ -151,52 +183,32 @@ export default class BabylonJSAnimationController {
     }
 
     /**
-     * Sets up pointer observers to highlight animated nodes on hover and show the animation menu on click.
-     * @private
-     */
-    #setupPointerObservers() {
-        if (this.#openingAnimations.length === 0) {
-            return;
-        }
-        this.#scene.onPointerObservable.add(this.#onAnimationPointerObservable.bind(this));
-    }
-
-    /**
-     * Handles pointer events in the Babylon.js scene for animation interaction.
-     * On pointer move, highlights meshes belonging to animated nodes under the cursor.
-     * On pointer up (click), disposes any existing GUI and displays the animation control menu for the selected node.
-     *
-     * @private
-     * @param {PointerInfo} pointerInfo - The pointer event information from Babylon.js.
+     * Hides and disposes the animation control menu (Babylon.js GUI) if it exists.
+     * @public
+     * @returns {void}
      */
-    #onAnimationPointerObservable(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);
+    hideMenu() {
+        // Remove any previously created Babylon GUI
+        if (this.#advancedDynamicTexture) {
+            this.#advancedDynamicTexture.dispose();
+            this.#advancedDynamicTexture = null;
         }
     }
 
     /**
      * Displays the animation control menu for the animated node under the pointer.
-     * @private
+     * @public
      * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
      * @description
      * Creates the GUI if needed and invokes OpeningAnimation.showControls.
      */
-    #showMenu(pickingInfo) {
+    showMenu(pickingInfo) {
         if (!pickingInfo?.hit && !pickingInfo?.pickedMesh) {
             return;
         }
 
+        this.hideMenu();
+
         const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
         if (!nodeId) {
             return;
@@ -206,31 +218,8 @@ export default class BabylonJSAnimationController {
             return;
         }
         if (!this.#advancedDynamicTexture) {
-            this.#advancedDynamicTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI_Animation");
+            this.#advancedDynamicTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI_Animation", true, this.#scene);
         }
         openingAnimation.showControls(this.#advancedDynamicTexture);
     }
-
-    /**
-     * Disposes all resources managed by the animation controller.
-     * Cleans up the highlight layer, GUI texture, and internal animation/node lists.
-     * Should be called when the controller is no longer needed to prevent memory leaks.
-     * @public
-     */
-    dispose() {
-        if (this.#highlightLayer) {
-            this.#highlightLayer.dispose();
-            this.#highlightLayer = null;
-        }
-        if (this.#advancedDynamicTexture) {
-            this.#advancedDynamicTexture.dispose();
-            this.#advancedDynamicTexture = null;
-        }
-        this.#animatedNodes = [];
-        this.#openingAnimations = [];
-        const observer = this.#scene.onPointerObservable._observers.find((observer) => observer.callback.name.includes("#onAnimationPointerObservable"));
-        if (observer) {
-            this.#scene.onPointerObservable.remove(observer);
-        }
-    }
 }

package/src/babylonjs-animation-opening.js

@@ -138,11 +138,15 @@ export default class OpeningAnimation {
     #goToOpened(useLoop = false) {
         this.#lastPausedFrame = this.#endFrame;
 
-        if (this.#openAnimation._isStarted && !this.#openAnimation._isPaused) {
-            this.#openAnimation.pause();
+        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);
 
@@ -162,11 +166,15 @@ export default class OpeningAnimation {
     #goToClosed(useLoop = false) {
         this.#lastPausedFrame = this.#startFrame;
 
-        if (this.#closeAnimation._isStarted && !this.#closeAnimation._isPaused) {
-            this.#closeAnimation.pause();
+        if (!this.#closeAnimation._isStarted) {
+            this.#closeAnimation.start();
         }
+        this.#closeAnimation.pause();
         this.#closeAnimation.goToFrame(this.#endFrame - this.#startFrame);
 
+        if (!this.#openAnimation._isStarted) {
+            this.#openAnimation.start();
+        }
         this.#openAnimation.pause();
         this.#openAnimation.goToFrame(this.#startFrame);
 

package/src/babylonjs-controller.js

@@ -1,7 +1,7 @@
-import { ArcRotateCamera, AssetContainer, Camera, 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 { ArcRotateCamera, AssetContainer, Camera, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointerEventTypes, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager } from "@babylonjs/core";
+import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression.js";
 import "@babylonjs/loaders";
-import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
+import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression.js";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 
 import GLTFResolver from "./gltf-resolver.js";
@@ -45,19 +45,37 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - #renderLoop(): Babylon.js render loop callback.
  *  - #addStylesToARButton(): Styles AR button.
  *  - #createXRExperience(): Initializes WebXR AR experience.
- *  - #createCamera(), #createLights(), #initializeEnvironmentTexture(), #initializeIBLShadows(), #initializeShadows(): Scene setup.
- *  - #setMaxSimultaneousLights(): Updates max simultaneous lights for materials.
- *  - #enableInteraction(), #disableInteraction(): Canvas interaction handlers.
- *  - #disposeEngine(): Disposes engine and resources.
- *  - #onMouseWheel(event), #onKeyUp(event): Canvas event handlers.
- *  - #setOptionsMaterial(), #setOptions_Materials(), #setOptions_Camera(): Applies material/camera options.
- *  - #findContainerByName(), #addContainer(), #removeContainer(), #replaceContainer(): Container management.
- *  - #getPrefViewer3DComponent(), #getPrefViewerComponent(): Custom element references.
- *  - #updateVisibilityAttributeInComponents(): Updates parent visibility attributes.
- *  - #setVisibilityOfWallAndFloorInModel(): Controls wall/floor mesh visibility.
- *  - #stopRender(), #startRender(): Render loop control.
- *  - #loadAssetContainer(), #loadContainers(): Asset loading.
- *  - #downloadZip(): Generates and downloads a ZIP file.
+ *  - #createCamera(): Creates and configures the main camera.
+ *  - #createLights(): Creates and configures scene lights and shadows.
+ *  - #initializeEnvironmentTexture(): Loads and sets the HDR environment texture.
+ *  - #initializeIBLShadows(): Sets up IBL shadow pipeline and assigns meshes/materials.
+ *  - #initializeShadows(): Sets up standard or IBL shadows for meshes.
+ *  - #setMaxSimultaneousLights(): Updates max simultaneous lights for all materials.
+ *  - #onPointerObservable(info): Handles pointer events and dispatches to pointer/mouse handlers.
+ *  - #onPointerUp(event, pickInfo): Handles pointer up events (e.g., right-click for animation menu).
+ *  - #onPointerMove(event, pickInfo): Handles pointer move events (e.g., mesh highlighting).
+ *  - #onMouseWheel(event, pickInfo): Handles mouse wheel events for camera zoom.
+ *  - #onKeyUp(event): Handles keyup events for download dialog and shortcuts.
+ *  - #enableInteraction(): Adds canvas and scene interaction event listeners.
+ *  - #disableInteraction(): Removes canvas and scene interaction event listeners.
+ *  - #disposeEngine(): Disposes engine and releases all resources.
+ *  - #setOptionsMaterial(optionMaterial): Applies a material option to relevant meshes.
+ *  - #setOptions_Materials(): Applies all material options from configuration.
+ *  - #setOptions_Camera(): Applies camera options from configuration.
+ *  - #findContainerByName(name): Finds a container by its name.
+ *  - #addContainer(container, updateVisibility): Adds a container to the scene and updates visibility.
+ *  - #removeContainer(container, updateVisibility): Removes a container from the scene and updates visibility.
+ *  - #replaceContainer(container, newAssetContainer): Replaces a container in the scene.
+ *  - #getPrefViewer3DComponent(): Caches and retrieves the parent PREF-VIEWER-3D element.
+ *  - #getPrefViewerComponent(): Caches and retrieves the parent PREF-VIEWER element.
+ *  - #updateVisibilityAttributeInComponents(name, isVisible): Updates parent visibility attributes.
+ *  - #setVisibilityOfWallAndFloorInModel(show): Controls wall/floor mesh visibility.
+ *  - #stopRender(): Stops the Babylon.js render loop.
+ *  - #startRender(): Starts the Babylon.js render loop.
+ *  - #loadAssetContainer(container): Loads an asset container asynchronously.
+ *  - #loadContainers(): Loads all asset containers and adds them to the scene.
+ *  - #addDateToName(name): Appends the current date/time to a name string.
+ *  - #downloadZip(files, name, comment, addDateInName): Generates and downloads a ZIP file.
  *  - #openDownloadDialog(): Opens the modal download dialog.
  *
  * Notes:
@@ -401,13 +419,34 @@ export default class BabylonJSController {
     }
 
     /**
-     * Sets up interaction handlers for the Babylon.js canvas.
+     * Handles pointer events observed on the Babylon.js scene.
+     * @private
+     * @param {PointerInfo} info - The pointer event information from Babylon.js.
+     * @returns {void}
+     */
+    #onPointerObservable(info) {
+        const pickInfo = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
+        if (info.type === PointerEventTypes.POINTERUP) {
+            this.#onPointerUp(info.event, pickInfo);
+        } else if (info.type === PointerEventTypes.POINTERMOVE) {
+            this.#onPointerMove(info.event, pickInfo);
+        } else if (info.type === PointerEventTypes.POINTERWHEEL) {
+            this.#onMouseWheel(info.event, pickInfo);
+        }
+    }
+
+    /**
+     * Sets up interaction handlers for the Babylon.js canvas and scene.
      * @private
      * @returns {void}
      */
     #enableInteraction() {
-        this.#canvas.addEventListener("wheel", this.#onMouseWheel.bind(this));
-        this.#canvas.addEventListener("keyup", this.#onKeyUp.bind(this));
+        if (this.#canvas) {
+            this.#canvas.addEventListener("keyup", this.#onKeyUp.bind(this));
+        }
+        if (this.#scene) {
+            this.#scene.onPointerObservable.add(this.#onPointerObservable.bind(this));
+        }
     }
 
     /**
@@ -416,8 +455,12 @@ export default class BabylonJSController {
      * @returns {void}
      */
     #disableInteraction() {
-        this.#canvas.removeEventListener("wheel", this.#onMouseWheel.bind(this));
-        this.#canvas.removeEventListener("keyup", this.#onKeyUp.bind(this));
+        if (this.#canvas) {
+            this.#canvas.removeEventListener("keyup", this.#onKeyUp.bind(this));
+        }
+        if (this.#scene !== null) {
+            this.#scene.onPointerObservable.removeCallback(this.#onPointerObservable.bind(this));
+        }
     }
 
     /**
@@ -436,18 +479,37 @@ export default class BabylonJSController {
         this.#XRExperience = null;
     }
 
+    /**
+     * Handles keyup events on the Babylon.js canvas for triggering model and scene downloads.
+     * @private
+     * @param {KeyboardEvent} event - The keyup event.
+     * @returns {void}
+     */
+    #onKeyUp(event) {
+        // CTRL + ALT + letter
+        if (event.ctrlKey && event.altKey && event.key !== undefined) {
+            switch (event.key.toLowerCase()) {
+                case "d":
+                    this.#openDownloadDialog();
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
     /**
      * Handles mouse wheel events on the Babylon.js canvas for zooming the camera.
      * @private
      * @param {WheelEvent} event - The mouse wheel event.
-     * @returns {void|false}
+     * @param {Object} pickInfo - The result of the scene pick operation (not used in this method).
+     * @returns {void|false} Returns false if there is no active camera; otherwise, void.
      */
-    #onMouseWheel(event) {
-        if (!this.#scene || !this.#camera) {
+    #onMouseWheel(event, pickInfo) {
+        if (!this.#scene?.activeCamera) {
             return false;
         }
-        //const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
-        //this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
+        //this.#scene.activeCamera.target = pickInfo.hit ? pickInfo.pickedPoint.clone() : this.#scene.activeCamera.target;
         if (!this.#scene.activeCamera.metadata?.locked) {
             this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
         }
@@ -455,24 +517,35 @@ export default class BabylonJSController {
     }
 
     /**
-     * Handles keyup events on the Babylon.js canvas for triggering model and scene downloads.
+     * Handles pointer up events on the Babylon.js scene.
      * @private
-     * @param {KeyboardEvent} event - The keyup event.
+     * @param {PointerEvent} event - The pointer up event.
+     * @param {PickInfo} pickInfo - The result of the scene pick operation.
      * @returns {void}
      */
-    #onKeyUp(event) {
-        // CTRL + ALT + letter
-        if (event.ctrlKey && event.altKey && event.key !== undefined) {
-            switch (event.key.toLowerCase()) {
-                case "d":
-                    this.#openDownloadDialog();
-                    break;
-                default:
-                    break;
+    #onPointerUp(event, pickInfo) {
+        if (this.#babylonJSAnimationController) {
+            this.#babylonJSAnimationController.hideMenu();
+            // Right click for showing animation menu
+            if (event.button === 2) {
+                this.#babylonJSAnimationController.showMenu(pickInfo);
             }
         }
     }
 
+    /**
+     * Handles pointer move events on the Babylon.js scene.
+     * @private
+     * @param {PointerEvent} event - The pointer move event.
+     * @param {PickInfo} pickInfo - The result of the scene pick operation.
+     * @returns {void}
+     */
+    #onPointerMove(event, pickInfo) {
+        if (this.#babylonJSAnimationController) {
+            this.#babylonJSAnimationController.hightlightMeshes(pickInfo);
+        }
+    }
+
     /**
      * Applies material options from the configuration to the relevant meshes.
      * @private