@preference-sl/pref-viewer 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.1.2",
+  "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

@@ -1,3 +1,45 @@
+/**
+ * =============================================================================
+ * 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 updated preprocessUrl 
+ * ----------------------------------------------------------------------------- 
+ */
+
 import {
   Engine,
   Scene,
@@ -18,7 +60,7 @@ class PrefViewer extends HTMLElement {
     this._createCanvas();
     this._wrapCanvas();
 
-    // These will be assigned in initBabylon():
+    // These will be set in _initializeBabylon()
     this.engine = null;
     this.scene = null;
     this.camera = null;
@@ -26,7 +68,7 @@ class PrefViewer extends HTMLElement {
     this.dirLight = null;
     this._onWindowResize = null;
 
-    // modelUrl may be set via attribute before connectedCallback
+    // modelUrl might be provided via attribute before connectedCallback
     this.modelUrl = null;
     this._hasInitialized = false;
   }
@@ -40,7 +82,7 @@ class PrefViewer extends HTMLElement {
     if (name === "model" && newValue) {
       this.modelUrl = newValue;
       console.log(`PrefViewer: modelUrl set to ${this.modelUrl}`);
-      // Only reload if we've already initialized Babylon
+      // Only reload if initialization has already happened
       if (this._hasInitialized) {
         this._reloadModel();
       }
@@ -49,7 +91,7 @@ class PrefViewer extends HTMLElement {
 
   connectedCallback() {
     console.log("PrefViewer: connectedCallback");
-    // 1) Determine modelUrl (either from attribute or default)
+    // 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}`);
@@ -58,11 +100,13 @@ class PrefViewer extends HTMLElement {
       console.log(`PrefViewer: model attribute present, using ${this.modelUrl}`);
     }
 
-    // 2) Now initialize Babylon
+    // 2) Initialize Babylon (engine + scene + camera + lights + hooks)
     this._initializeBabylon();
-    // 3) Mark that init is done
+
+    // 3) Mark that initialization is done
     this._hasInitialized = true;
-    // 4) Finally, load whatever modelUrl we have
+
+    // 4) Load whatever modelUrl we have
     this._reloadModel();
   }
 
@@ -97,25 +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) => {
-          const fixed = url.replace(/\\/g, "/");
-          console.log(`PrefViewer: preprocessUrl received "${url}", normalized to "${fixed}"`);
-          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;
           }
-          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;
         };
       }
     });
@@ -125,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) {
@@ -145,6 +203,7 @@ class PrefViewer extends HTMLElement {
 
   _createCamera() {
     console.log("PrefViewer: _createCamera");
+    // ArcRotateCamera that orbits around origin
     this.camera = new ArcRotateCamera(
       "camera",
       Math.PI / 2,
@@ -176,6 +235,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;
       const pickResult = this.scene.pick(
@@ -251,6 +311,7 @@ class PrefViewer extends HTMLElement {
     });
   }
 
+  // ====== Cleanup ======
   _disposeEngine() {
     console.log("PrefViewer: _disposeEngine");
     if (this.engine) {