@preference-sl/pref-viewer 2.4.0 → 2.5.1

package/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
+  "version": "2.5.1",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
@@ -35,6 +36,5 @@
   },
   "devDependencies": {
     "standard-version": "^9.5.0"
-  },
-  "version": "2.4.0"
+  }
 }

package/src/index.js

@@ -26,10 +26,10 @@
  * 3. **Listen for loading events (optional)**
  *      const viewer = document.querySelector("pref-viewer");
  *      viewer.addEventListener("model-loaded", (evt) => {
- *        console.log("Loaded meshes:", evt.detail.meshes);
+ *       xx
  *      });
  *      viewer.addEventListener("model-error", (evt) => {
- *        console.error("Failed to load model:", evt.detail.error);
+ *        xx
  *      });
  *
  * 4. **Change models at runtime**
@@ -39,7 +39,6 @@
  * Implementation code below with updated preprocessUrl 
  * ----------------------------------------------------------------------------- 
  */
-
 import {
   Engine,
   Scene,
@@ -59,7 +58,7 @@ class PrefViewer extends HTMLElement {
     this._createCanvas();
     this._wrapCanvas();
 
-    // These will be set in _initializeBabylon()
+    // Babylon.js core objects
     this.engine = null;
     this.scene = null;
     this.camera = null;
@@ -67,10 +66,10 @@ class PrefViewer extends HTMLElement {
     this.dirLight = null;
     this._onWindowResize = null;
 
-    // modelUrl might be provided via attribute before connectedCallback
+    // modelUrl will be provided via attribute
     this.modelUrl = null;
     this._hasInitialized = false;
-    this._pluginHookSetup = false; // Track if we've already set up the plugin hook
+    this._pluginHookSetup = false;
   }
 
   static get observedAttributes() {
@@ -78,9 +77,8 @@ class PrefViewer extends HTMLElement {
   }
 
   attributeChangedCallback(name, _oldValue, newValue) {
-    if (name === "model" && newValue) {
+    if (name === "model") {
       this.modelUrl = newValue;
-      // Only reload if initialization has already happened
       if (this._hasInitialized) {
         this._reloadModel();
       }
@@ -88,27 +86,34 @@ class PrefViewer extends HTMLElement {
   }
 
   connectedCallback() {
-    
-    // Set up the plugin hook ONCE globally before any other initialization
+    // Set up URL preprocessing once
     if (!this._pluginHookSetup) {
       this._setupUrlPreprocessing();
       this._pluginHookSetup = true;
     }
 
-    // 1) Determine modelUrl now that element is connected
+    // Require a model attribute; fail early if missing
     if (!this.hasAttribute("model")) {
-      this.modelUrl = new URL("./models/window.gltf", import.meta.url).href;
-    } else {
-      this.modelUrl = this.getAttribute("model");
+      const errorMsg = 'PrefViewer: No "model" attribute provided.';
+      console.error(errorMsg);
+      this.dispatchEvent(
+        new CustomEvent("model-error", {
+          detail: { error: new Error(errorMsg) },
+          bubbles: true,
+          composed: true
+        })
+      );
+      return;
     }
 
-    // 2) Initialize Babylon (engine + scene + camera + lights + hooks)
-    this._initializeBabylon();
+    // Initialize modelUrl from attribute
+    this.modelUrl = this.getAttribute("model");
 
-    // 3) Mark that initialization is done
+    // Initialize Babylon (engine + scene + camera + lights + hooks)
+    this._initializeBabylon();
     this._hasInitialized = true;
 
-    // 4) Load whatever modelUrl we have
+    // Load the specified model
     this._reloadModel();
   }
 
@@ -119,38 +124,29 @@ class PrefViewer extends HTMLElement {
     }
   }
 
-  // ====== URL Preprocessing Setup ======
+  // ====== URL Preprocessing ======
   _setupUrlPreprocessing() {
-    
     const transformUrl = (url) => {
-      // a) If the loader already prepended "blob:…", strip it out.
       const stripped = url.replace(
         /^blob:(?:http|https|file):\/\/[^\/]+\/(.+)/i,
         "$1"
       );
-      // b) Normalize backslashes "\" → forward slashes "/"
       const fixedSlashes = stripped.replace(/\\/g, "/");
-
-      // c) If it now starts with "http://" or "https://", return it as an absolute URL:
       if (/^https?:\/\//i.test(fixedSlashes)) {
         return fixedSlashes;
       }
-      // d) Otherwise, return the relative path
       return fixedSlashes;
     };
 
     SceneLoader.OnPluginActivatedObservable.add((plugin) => {
       if (plugin.name === "gltf" || plugin.name === "gltf2") {
-        // Support both sync and async preprocessing
         plugin.preprocessUrl = transformUrl;
-        if (typeof plugin.preprocessUrlAsync === 'function' || plugin.preprocessUrlAsync === undefined) {
-          plugin.preprocessUrlAsync = (url) => Promise.resolve(transformUrl(url));
-        }
+        plugin.preprocessUrlAsync = (url) => Promise.resolve(transformUrl(url));
       }
     });
   }
 
-  // ====== Private setup methods ======
+  // ====== Setup Helpers ======
   _createCanvas() {
     this.canvas = document.createElement("canvas");
     Object.assign(this.canvas.style, {
@@ -172,26 +168,20 @@ class PrefViewer extends HTMLElement {
   }
 
   _initializeBabylon() {
-
-    // 1) Create the Babylon engine & scene
     this.engine = new Engine(this.canvas, true, { alpha: true });
     this.scene = new Scene(this.engine);
     this.scene.clearColor = new Color4(1, 1, 1, 1);
 
-    // 2) Create camera and lights
     this._createCamera();
     this._createLights();
-
-    // 3) Hook up input/event handlers (e.g. wheel-to-zoom)
     this._setupEventListeners();
 
-    // 4) Start Babylon's render loop
     this.engine.runRenderLoop(() => {
       if (this.scene) {
         this.scene.render();
       }
     });
-    
+
     this._onWindowResize = () => {
       if (this.engine) {
         this.engine.resize();
@@ -201,7 +191,6 @@ class PrefViewer extends HTMLElement {
   }
 
   _createCamera() {
-    // ArcRotateCamera that orbits around origin
     this.camera = new ArcRotateCamera(
       "camera",
       Math.PI / 2,
@@ -231,7 +220,6 @@ class PrefViewer extends HTMLElement {
   }
 
   _setupEventListeners() {
-    // Zoom toward point-of-interest on wheel scroll
     this.canvas.addEventListener("wheel", (evt) => {
       if (!this.scene || !this.camera) return;
       const pickResult = this.scene.pick(
@@ -248,14 +236,13 @@ class PrefViewer extends HTMLElement {
     });
   }
 
-  // ====== Model loading / management ======
+  // ====== Model Management ======
   async _reloadModel() {
     if (!this.scene || !this.modelUrl) {
       console.warn("PrefViewer: _reloadModel aborted (scene or modelUrl missing)");
       return;
     }
 
-    // Dispose previous meshes so we don't accumulate them
     this._disposePreviousMeshes();
 
     try {
@@ -267,14 +254,11 @@ class PrefViewer extends HTMLElement {
         undefined,
         ".gltf"
       );
-      this.scene.createDefaultCameraOrLight(true, true, true);
 
+      this.scene.createDefaultCameraOrLight(true, true, true);
       this.dispatchEvent(
         new CustomEvent("model-loaded", {
-          detail: {
-            meshes: result.meshes,
-            particleSystems: result.particleSystems
-          },
+          detail: { meshes: result.meshes, particleSystems: result.particleSystems },
           bubbles: true,
           composed: true
         })
@@ -313,4 +297,4 @@ class PrefViewer extends HTMLElement {
   }
 }
 
-customElements.define("pref-viewer", PrefViewer);
+customElements.define("pref-viewer", PrefViewer);