@preference-sl/pref-viewer 2.1.1 → 2.1.3

package/package.json

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

package/src/index.js

@@ -36,7 +36,7 @@
  *      viewer.setAttribute("model", "https://example.com/models/anotherModel.glb");
  *
  * ----------------------------------------------------------------------------- 
- * Implementation code below with added console logs for debugging 
+ * Implementation code below with updated preprocessUrl 
  * ----------------------------------------------------------------------------- 
  */
 
@@ -60,14 +60,17 @@ class PrefViewer extends HTMLElement {
     this._createCanvas();
     this._wrapCanvas();
 
-    // Initialize properties
+    // These will be set in _initializeBabylon()
     this.engine = null;
     this.scene = null;
     this.camera = null;
     this.hemiLight = null;
     this.dirLight = null;
-    this.modelUrl = null;
     this._onWindowResize = null;
+
+    // modelUrl might be provided via attribute before connectedCallback
+    this.modelUrl = null;
+    this._hasInitialized = false;
   }
 
   static get observedAttributes() {
@@ -75,17 +78,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 initialization has already happened
+      if (this._hasInitialized) {
+        this._reloadModel();
+      }
     }
   }
 
   connectedCallback() {
     console.log("PrefViewer: connectedCallback");
-    // If no `model` attribute is present, use default bundled GLTF
+    // 1) Determine modelUrl now that element is connected
     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 +99,15 @@ class PrefViewer extends HTMLElement {
       this.modelUrl = this.getAttribute("model");
       console.log(`PrefViewer: model attribute present, using ${this.modelUrl}`);
     }
+
+    // 2) Initialize Babylon (engine + scene + camera + lights + hooks)
     this._initializeBabylon();
+
+    // 3) Mark that initialization is done
+    this._hasInitialized = true;
+
+    // 4) Load whatever modelUrl we have
+    this._reloadModel();
   }
 
   disconnectedCallback() {
@@ -127,28 +141,39 @@ class PrefViewer extends HTMLElement {
 
   _initializeBabylon() {
     console.log("PrefViewer: _initializeBabylon - creating engine and scene");
-    // 1) Create engine and scene
+
+    // 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) Hook into Babylon’s GLTF loader so "https://..." URIs aren't prefixed with blob:
+    // 2) Hook into Babylon’s GLTF loader so that any URIs starting with "blob:…"
+    //    get stripped off before we check for an absolute "https://".
     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;
+          // a) If the loader already prepended "blob:…", strip it out.
+          //    Regex explanation: ^blob:(?:file|https?|ftp):\/\/[^\/]+\/(.*)
+          //    basically removes the entire "blob:http://localhost:3000/" prefix.
+          const stripped = url.replace(
+            /^blob:(?:http|https|file):\/\/[^\/]+\/(.+)/i,
+            "$1"
+          );
+          // b) Normalize backslashes "\" → forward slashes "/"
+          const fixedSlashes = stripped.replace(/\\/g, "/");
+          console.log(
+            `PrefViewer: preprocessUrl received "${url}", stripped to "${stripped}", normalized to "${fixedSlashes}"`
+          );
+          // c) If it now starts with "http://" or "https://", return it as an absolute URL:
+          if (/^https?:\/\//i.test(fixedSlashes)) {
+            console.log(`PrefViewer: preprocessUrl returning absolute URL "${fixedSlashes}"`);
+            return fixedSlashes;
           }
-          // Otherwise, leave it (Babylon will treat it relative to the blob)
-          console.log(`PrefViewer: preprocessUrl returning relative URL "${fixed}"`);
-          return fixed;
+          // d) Otherwise, return the relative path (Babylon will resolve it relative to the blob if needed)
+          console.log(`PrefViewer: preprocessUrl returning relative URL "${fixedSlashes}"`);
+          return fixedSlashes;
         };
       }
     });
@@ -158,11 +183,11 @@ class PrefViewer extends HTMLElement {
     this._createCamera();
     this._createLights();
 
-    // 4) Hook up input/event handlers
+    // 4) Hook up input/event handlers (e.g. wheel-to-zoom)
     console.log("PrefViewer: _setupEventListeners");
     this._setupEventListeners();
 
-    // 5) Start render loop
+    // 5) Start Babylon’s render loop
     console.log("PrefViewer: Starting render loop");
     this.engine.runRenderLoop(() => {
       if (this.scene) {
@@ -174,10 +199,6 @@ 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() {
@@ -196,7 +217,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),
@@ -218,7 +238,6 @@ class PrefViewer extends HTMLElement {
     // 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 +245,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;