@preference-sl/pref-viewer 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "license": "MIT",

package/src/index.js

@@ -1,45 +1,3 @@
-/**
- * =============================================================================
- * PrefViewer Web Component (JavaScript)
- * =============================================================================
- *
- * Overview
- * --------
- * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
- *   • Inserts a <canvas> into its shadow DOM to render a glTF model.
- *   • Creates and manages a Babylon Engine, Scene, ArcRotateCamera, and basic lighting.
- *   • Listens for a `model` attribute to load different glTF files (defaults to "./models/patata.gltf").
- *   • Automatically disposes previous meshes when switching models.
- *   • Dispatches “model-loaded” and “model-error” CustomEvents so host pages can react.
- *
- * Usage
- * -----
- * 1. **Import the script (module)**
- *      <script type="module" src="path/to/pref-viewer.js"></script>
- *
- * 2. **Place the custom element in your HTML**
- *      <pref-viewer
- *        model="https://example.com/models/myModel.gltf"
- *        style="width:800px; height:600px;">
- *      </pref-viewer>
- *
- * 3. **Listen for loading events (optional)**
- *      const viewer = document.querySelector("pref-viewer");
- *      viewer.addEventListener("model-loaded", (evt) => {
- *        console.log("Loaded meshes:", evt.detail.meshes);
- *      });
- *      viewer.addEventListener("model-error", (evt) => {
- *        console.error("Failed to load model:", evt.detail.error);
- *      });
- *
- * 4. **Change models at runtime**
- *      viewer.setAttribute("model", "https://example.com/models/anotherModel.glb");
- *
- * ----------------------------------------------------------------------------- 
- * Implementation code below with added console logs for debugging 
- * ----------------------------------------------------------------------------- 
- */
-
 import {
   Engine,
   Scene,
@@ -60,14 +18,17 @@ class PrefViewer extends HTMLElement {
     this._createCanvas();
     this._wrapCanvas();
 
-    // Initialize properties
+    // These will be assigned in initBabylon():
     this.engine = null;
     this.scene = null;
     this.camera = null;
     this.hemiLight = null;
     this.dirLight = null;
-    this.modelUrl = null;
     this._onWindowResize = null;
+
+    // modelUrl may be set via attribute before connectedCallback
+    this.modelUrl = null;
+    this._hasInitialized = false;
   }
 
   static get observedAttributes() {
@@ -75,17 +36,20 @@ class PrefViewer extends HTMLElement {
   }
 
   attributeChangedCallback(name, _oldValue, newValue) {
-    console.log(`PrefViewer: attributeChangedCallback - ${name} changed to ${newValue}`);
+    console.log(`PrefViewer: attributeChangedCallback - ${name} -> ${newValue}`);
     if (name === "model" && newValue) {
       this.modelUrl = newValue;
       console.log(`PrefViewer: modelUrl set to ${this.modelUrl}`);
-      this._reloadModel();
+      // Only reload if we've already initialized Babylon
+      if (this._hasInitialized) {
+        this._reloadModel();
+      }
     }
   }
 
   connectedCallback() {
     console.log("PrefViewer: connectedCallback");
-    // If no `model` attribute is present, use default bundled GLTF
+    // 1) Determine modelUrl (either from attribute or default)
     if (!this.hasAttribute("model")) {
       this.modelUrl = new URL("./models/patata.gltf", import.meta.url).href;
       console.log(`PrefViewer: no model attribute, defaulting to ${this.modelUrl}`);
@@ -93,7 +57,13 @@ class PrefViewer extends HTMLElement {
       this.modelUrl = this.getAttribute("model");
       console.log(`PrefViewer: model attribute present, using ${this.modelUrl}`);
     }
+
+    // 2) Now initialize Babylon
     this._initializeBabylon();
+    // 3) Mark that init is done
+    this._hasInitialized = true;
+    // 4) Finally, load whatever modelUrl we have
+    this._reloadModel();
   }
 
   disconnectedCallback() {
@@ -138,15 +108,12 @@ class PrefViewer extends HTMLElement {
       console.log(`PrefViewer: Plugin activated - ${plugin.name}`);
       if (plugin.name === "gltf" || plugin.name === "gltf2") {
         plugin.preprocessUrl = (url) => {
-          // Normalize backslashes to forward slashes
           const fixed = url.replace(/\\/g, "/");
           console.log(`PrefViewer: preprocessUrl received "${url}", normalized to "${fixed}"`);
-          // If it starts with http:// or https://, return as-is:
           if (/^https?:\/\//i.test(fixed)) {
             console.log(`PrefViewer: preprocessUrl returning absolute URL "${fixed}"`);
             return fixed;
           }
-          // Otherwise, leave it (Babylon will treat it relative to the blob)
           console.log(`PrefViewer: preprocessUrl returning relative URL "${fixed}"`);
           return fixed;
         };
@@ -174,15 +141,10 @@ class PrefViewer extends HTMLElement {
       this.engine.resize();
     };
     window.addEventListener("resize", this._onWindowResize);
-
-    // 6) Load the initial model (if modelUrl is already set)
-    console.log("PrefViewer: _initializeBabylon calling _reloadModel");
-    this._reloadModel();
   }
 
   _createCamera() {
     console.log("PrefViewer: _createCamera");
-    // ArcRotateCamera that orbits around origin
     this.camera = new ArcRotateCamera(
       "camera",
       Math.PI / 2,
@@ -196,7 +158,6 @@ class PrefViewer extends HTMLElement {
 
   _createLights() {
     console.log("PrefViewer: _createLights");
-    // Simple hemispheric + directional as a starting point
     this.hemiLight = new HemisphericLight(
       "hemiLight",
       new Vector3(0, 1, 0),
@@ -215,10 +176,8 @@ class PrefViewer extends HTMLElement {
 
   _setupEventListeners() {
     console.log("PrefViewer: _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(
         this.scene.pointerX,
         this.scene.pointerY
@@ -226,7 +185,6 @@ class PrefViewer extends HTMLElement {
       const pivotPoint = pickResult.hit
         ? pickResult.pickedPoint.clone()
         : this.camera.target.clone();
-
       this.camera.target = pivotPoint;
       this.camera.inertialRadiusOffset +=
         evt.deltaY * this.camera.wheelPrecision * 0.01;
@@ -293,7 +251,6 @@ class PrefViewer extends HTMLElement {
     });
   }
 
-  // ====== Cleanup ======
   _disposeEngine() {
     console.log("PrefViewer: _disposeEngine");
     if (this.engine) {