@preference-sl/pref-viewer 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.1.0",
+  "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
- * -----------------------------------------------------------------------------
- */
-
 import {
   Engine,
   Scene,
@@ -55,16 +13,22 @@ import "@babylonjs/loaders";
 class PrefViewer extends HTMLElement {
   constructor() {
     super();
+    console.log("PrefViewer: constructor");
     this.attachShadow({ mode: "open" });
     this._createCanvas();
     this._wrapCanvas();
+
+    // 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() {
@@ -72,27 +36,45 @@ class PrefViewer extends HTMLElement {
   }
 
   attributeChangedCallback(name, _oldValue, newValue) {
+    console.log(`PrefViewer: attributeChangedCallback - ${name} -> ${newValue}`);
     if (name === "model" && newValue) {
       this.modelUrl = newValue;
-      this._reloadModel();
+      console.log(`PrefViewer: modelUrl set to ${this.modelUrl}`);
+      // Only reload if we've already initialized Babylon
+      if (this._hasInitialized) {
+        this._reloadModel();
+      }
     }
   }
 
   connectedCallback() {
-    // If no `model` attribute is present, use default bundled GLTF
+    console.log("PrefViewer: connectedCallback");
+    // 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}`);
+    } else {
+      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() {
+    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 +84,7 @@ class PrefViewer extends HTMLElement {
   }
 
   _wrapCanvas() {
+    console.log("PrefViewer: _wrapCanvas");
     const wrapper = document.createElement("div");
     Object.assign(wrapper.style, {
       width: "100%",
@@ -113,49 +96,55 @@ 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, "/");
-          // If it starts with http:// or https://, return as-is:
+          console.log(`PrefViewer: preprocessUrl received "${url}", normalized to "${fixed}"`);
           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)
-    this._reloadModel();
   }
 
   _createCamera() {
-    // ArcRotateCamera that orbits around origin
+    console.log("PrefViewer: _createCamera");
     this.camera = new ArcRotateCamera(
       "camera",
       Math.PI / 2,
@@ -168,7 +157,7 @@ class PrefViewer extends HTMLElement {
   }
 
   _createLights() {
-    // Simple hemispheric + directional as a starting point
+    console.log("PrefViewer: _createLights");
     this.hemiLight = new HemisphericLight(
       "hemiLight",
       new Vector3(0, 1, 0),
@@ -186,10 +175,9 @@ class PrefViewer extends HTMLElement {
   }
 
   _setupEventListeners() {
-    // Zoom toward point-of-interest on wheel scroll
+    console.log("PrefViewer: _setupEventListeners");
     this.canvas.addEventListener("wheel", (evt) => {
       if (!this.scene || !this.camera) return;
-
       const pickResult = this.scene.pick(
         this.scene.pointerX,
         this.scene.pointerY
@@ -197,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;
@@ -207,7 +194,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 +204,7 @@ class PrefViewer extends HTMLElement {
     this._disposePreviousMeshes();
 
     try {
+      console.log(`PrefViewer: ImportMeshAsync("${this.modelUrl}")`);
       const result = await SceneLoader.ImportMeshAsync(
         null,
         "",
@@ -223,10 +213,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 +228,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,16 +241,18 @@ 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();
       }
     });
   }
 
-  // ====== Cleanup ======
   _disposeEngine() {
+    console.log("PrefViewer: _disposeEngine");
     if (this.engine) {
       this.engine.dispose();
       this.engine = null;