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

package/package.json

@@ -1,52 +1,64 @@
 {
-  "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.2",
-  "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 --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.20",
+    "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.2",
+        "@babylonjs/loaders": "^8.39.2",
+        "@babylonjs/serializers": "^8.39.2",
+        "@panzoom/panzoom": "^4.6.0",
+        "babylonjs-gltf2interface": "^8.39.2",
+        "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",
-    "src/models",
-    "index.d.ts"
-  ],
-  "dependencies": {
-    "@babylonjs/core": "^8.31.3",
-    "@babylonjs/loaders": "^8.31.3",
-    "@babylonjs/serializers": "^8.31.3",
-    "@panzoom/panzoom": "^4.6.0",
-    "babylonjs-gltf2interface": "^8.31.3",
-    "idb": "^8.0.3",
-    "is-svg": "^6.1.0"
-  },
-  "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

@@ -0,0 +1,217 @@
+import { Color3, HighlightLayer, Mesh, PickingInfo, Scene } from "@babylonjs/core";
+import { PrefViewerColors } from "./styles.js";
+import OpeningAnimation from "./babylonjs-animation-opening.js";
+
+/**
+ * BabylonJSAnimationController - Manages animation playback, highlighting, and interactive controls for animated nodes in Babylon.js scenes.
+ *
+ * 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 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 on pointer hover.
+ *  - Displays and disposes the animation control menu 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 if it exists.
+ *  - showMenu(pickingInfo): Displays the animation control menu for the animated node under the pointer.
+ *
+ * @class
+ */
+export default class BabylonJSAnimationController {
+    #scene = null;
+    #canvas = null;
+    #animatedNodes = [];
+    #highlightLayer = null;
+    #highlightColor = Color3.FromHexString(PrefViewerColors.primary);
+    #openingAnimations = [];
+
+    /**
+     * Creates a new BabylonJSAnimationController for a Babylon.js scene.
+     * @param {Scene} scene - The Babylon.js scene instance.
+     */
+    constructor(scene) {
+        this.#scene = scene;
+        this.#canvas = this.#scene._engine._renderingCanvas;
+        this.#initializeAnimations();
+    }
+
+    /**
+     * Detects and stores animatable objects and animated nodes in the scene.
+     * @private
+     */
+    #initializeAnimations() {
+        this.hideMenu(); // Clean up any existing menus
+        if (!this.#scene.animationGroups.length) {
+            return;
+        }
+        this.#getAnimatedNodes();
+        this.#getOpeningAnimations();
+    }
+
+    /**
+     * Collects the IDs of all nodes targeted by any animation group in the scene.
+     * @private
+     */
+    #getAnimatedNodes() {
+        this.#scene.animationGroups.forEach((animationGroup) => {
+            animationGroup.stop();
+            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>".
+     */
+    #getOpeningAnimations() {
+        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;
+    };
+
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+
+    /**
+     * Disposes all resources managed by the animation controller.
+     * Cleans up the highlight layer, animation menu, 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.removeAllMeshes();
+            this.#highlightLayer.dispose();
+            this.#highlightLayer = null;
+        }
+        this.hideMenu();
+        this.#animatedNodes = [];
+        this.#openingAnimations.forEach((openingAnimation) => openingAnimation.dispose());
+        this.#openingAnimations = [];
+    }
+
+    /**
+     * Highlights meshes that are children of an animated node when hovered.
+     * @public
+     * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
+     */
+    hightlightMeshes(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));
+        }
+    }
+
+    /**
+     * Hides and disposes the animation control menu if it exists.
+     * @public
+     * @returns {void}
+     */
+    hideMenu() {
+        this.#openingAnimations.forEach((openingAnimation) => openingAnimation.hideControls());
+        this.#canvas.parentElement.querySelectorAll("div.pref-viewer-3d.animation-menu").forEach((menu) => menu.remove());
+    }
+
+    /**
+     * Displays the animation control menu for the animated node under the pointer.
+     * @public
+     * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
+     */
+    showMenu(pickingInfo) {
+        if (!pickingInfo?.hit && !pickingInfo?.pickedMesh) {
+            return;
+        }
+
+        this.hideMenu();
+
+        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeId) {
+            return;
+        }
+        const openingAnimation = this.#getOpeningAnimationByNode(nodeId);
+        if (!openingAnimation) {
+            return;
+        }
+
+        openingAnimation.showControls(this.#canvas);
+    }
+}