@preference-sl/pref-viewer 2.1.0 → 2.1.1

package/package.json

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

package/src/index.js

@@ -35,9 +35,9 @@
  * 4. **Change models at runtime**
  *      viewer.setAttribute("model", "https://example.com/models/anotherModel.glb");
  *
- * -----------------------------------------------------------------------------
- * Implementation code below
- * -----------------------------------------------------------------------------
+ * ----------------------------------------------------------------------------- 
+ * Implementation code below with added console logs for debugging 
+ * ----------------------------------------------------------------------------- 
  */
 
 import {
@@ -55,9 +55,12 @@ import "@babylonjs/loaders";
 class PrefViewer extends HTMLElement {
   constructor() {
     super();
+    console.log("PrefViewer: constructor");
     this.attachShadow({ mode: "open" });
     this._createCanvas();
     this._wrapCanvas();
+
+    // Initialize properties
     this.engine = null;
     this.scene = null;
     this.camera = null;
@@ -72,27 +75,36 @@ class PrefViewer extends HTMLElement {
   }
 
   attributeChangedCallback(name, _oldValue, newValue) {
+    console.log(`PrefViewer: attributeChangedCallback - ${name} changed to ${newValue}`);
     if (name === "model" && newValue) {
       this.modelUrl = newValue;
+      console.log(`PrefViewer: modelUrl set to ${this.modelUrl}`);
       this._reloadModel();
     }
   }
 
   connectedCallback() {
+    console.log("PrefViewer: connectedCallback");
     // If no `model` attribute is present, use default bundled GLTF
     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}`);
+    } else {
+      this.modelUrl = this.getAttribute("model");
+      console.log(`PrefViewer: model attribute present, using ${this.modelUrl}`);
     }
     this._initializeBabylon();
   }
 
   disconnectedCallback() {
+    console.log("PrefViewer: disconnectedCallback - disposing engine");
     this._disposeEngine();
     window.removeEventListener("resize", this._onWindowResize);
   }
 
   // ====== Private setup methods ======
   _createCanvas() {
+    console.log("PrefViewer: _createCanvas");
     this.canvas = document.createElement("canvas");
     Object.assign(this.canvas.style, {
       width: "100%",
@@ -102,6 +114,7 @@ class PrefViewer extends HTMLElement {
   }
 
   _wrapCanvas() {
+    console.log("PrefViewer: _wrapCanvas");
     const wrapper = document.createElement("div");
     Object.assign(wrapper.style, {
       width: "100%",
@@ -113,48 +126,62 @@ class PrefViewer extends HTMLElement {
   }
 
   _initializeBabylon() {
+    console.log("PrefViewer: _initializeBabylon - creating engine and scene");
     // 1) Create engine and 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) Hook into Babylon’s GLTF loader so "https://..." URIs aren't prefixed with blob:
+    console.log("PrefViewer: Adding preprocessUrl hook");
     SceneLoader.OnPluginActivatedObservable.add((plugin) => {
+      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;
         };
       }
     });
 
     // 3) Create camera and lights
+    console.log("PrefViewer: _createCamera and _createLights");
     this._createCamera();
     this._createLights();
 
     // 4) Hook up input/event handlers
+    console.log("PrefViewer: _setupEventListeners");
     this._setupEventListeners();
 
     // 5) Start render loop
+    console.log("PrefViewer: Starting render loop");
     this.engine.runRenderLoop(() => {
       if (this.scene) {
         this.scene.render();
       }
     });
-    this._onWindowResize = () => this.engine.resize();
+    this._onWindowResize = () => {
+      console.log("PrefViewer: Window resized - calling engine.resize()");
+      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",
@@ -168,6 +195,7 @@ class PrefViewer extends HTMLElement {
   }
 
   _createLights() {
+    console.log("PrefViewer: _createLights");
     // Simple hemispheric + directional as a starting point
     this.hemiLight = new HemisphericLight(
       "hemiLight",
@@ -186,6 +214,7 @@ 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;
@@ -207,7 +236,9 @@ class PrefViewer extends HTMLElement {
 
   // ====== Model loading / management ======
   async _reloadModel() {
+    console.log(`PrefViewer: _reloadModel - loading ${this.modelUrl}`);
     if (!this.scene || !this.modelUrl) {
+      console.warn("PrefViewer: _reloadModel aborted (scene or modelUrl missing)");
       return;
     }
 
@@ -215,6 +246,7 @@ class PrefViewer extends HTMLElement {
     this._disposePreviousMeshes();
 
     try {
+      console.log(`PrefViewer: ImportMeshAsync("${this.modelUrl}")`);
       const result = await SceneLoader.ImportMeshAsync(
         null,
         "",
@@ -223,10 +255,10 @@ class PrefViewer extends HTMLElement {
         undefined,
         ".gltf"
       );
-      // After loading, create defaults if none exist
+      console.log("PrefViewer: Model loaded, creating default camera/light if needed");
       this.scene.createDefaultCameraOrLight(true, true, true);
 
-      // Dispatch "model-loaded" event
+      console.log("PrefViewer: Dispatching model-loaded event");
       this.dispatchEvent(
         new CustomEvent("model-loaded", {
           detail: {
@@ -238,8 +270,8 @@ class PrefViewer extends HTMLElement {
         })
       );
     } catch (err) {
-      console.error("Error loading model:", err);
-      // Dispatch "model-error" event
+      console.error("PrefViewer: Error loading model:", err);
+      console.log("PrefViewer: Dispatching model-error event");
       this.dispatchEvent(
         new CustomEvent("model-error", {
           detail: { error: err },
@@ -251,9 +283,11 @@ class PrefViewer extends HTMLElement {
   }
 
   _disposePreviousMeshes() {
+    console.log("PrefViewer: _disposePreviousMeshes");
     if (!this.scene) return;
     this.scene.meshes.slice().forEach((mesh) => {
       if (mesh.getClassName() === "Mesh") {
+        console.log(`PrefViewer: Disposing mesh ${mesh.name}`);
         mesh.dispose();
       }
     });
@@ -261,6 +295,7 @@ class PrefViewer extends HTMLElement {
 
   // ====== Cleanup ======
   _disposeEngine() {
+    console.log("PrefViewer: _disposeEngine");
     if (this.engine) {
       this.engine.dispose();
       this.engine = null;