@preference-sl/pref-viewer 2.2.0 → 2.3.0

package/package.json

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

package/src/index.js

@@ -71,6 +71,7 @@ class PrefViewer extends HTMLElement {
     // modelUrl might be provided via attribute before connectedCallback
     this.modelUrl = null;
     this._hasInitialized = false;
+    this._pluginHookSetup = false; // Track if we've already set up the plugin hook
   }
 
   static get observedAttributes() {
@@ -91,6 +92,13 @@ class PrefViewer extends HTMLElement {
 
   connectedCallback() {
     console.log("PrefViewer: connectedCallback");
+    
+    // Set up the plugin hook ONCE globally before any other initialization
+    if (!this._pluginHookSetup) {
+      this._setupUrlPreprocessing();
+      this._pluginHookSetup = true;
+    }
+
     // 1) Determine modelUrl now that element is connected
     if (!this.hasAttribute("model")) {
       this.modelUrl = new URL("./models/window.gltf", import.meta.url).href;
@@ -113,7 +121,47 @@ class PrefViewer extends HTMLElement {
   disconnectedCallback() {
     console.log("PrefViewer: disconnectedCallback - disposing engine");
     this._disposeEngine();
-    window.removeEventListener("resize", this._onWindowResize);
+    if (this._onWindowResize) {
+      window.removeEventListener("resize", this._onWindowResize);
+    }
+  }
+
+  // ====== URL Preprocessing Setup ======
+  _setupUrlPreprocessing() {
+    console.log("PrefViewer: Setting up URL preprocessing hook");
+    
+    const transformUrl = (url) => {
+      // a) If the loader already prepended "blob:…", strip it out.
+      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;
+      }
+      // d) Otherwise, return the relative path
+      console.log(`PrefViewer: preprocessUrl returning relative URL "${fixedSlashes}"`);
+      return fixedSlashes;
+    };
+
+    SceneLoader.OnPluginActivatedObservable.add((plugin) => {
+      console.log(`PrefViewer: Plugin activated - ${plugin.name}`);
+      if (plugin.name === "gltf" || plugin.name === "gltf2") {
+        // Support both sync and async preprocessing
+        plugin.preprocessUrl = transformUrl;
+        if (typeof plugin.preprocessUrlAsync === 'function' || plugin.preprocessUrlAsync === undefined) {
+          plugin.preprocessUrlAsync = (url) => Promise.resolve(transformUrl(url));
+        }
+        console.log("PrefViewer: URL preprocessing hooks set up for GLTF plugin");
+      }
+    });
   }
 
   // ====== Private setup methods ======
@@ -147,56 +195,28 @@ class PrefViewer extends HTMLElement {
     this.scene = new Scene(this.engine);
     this.scene.clearColor = new Color4(1, 1, 1, 1);
 
-    // 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) => {
-          // 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;
-          }
-          // 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;
-        };
-      }
-    });
-
-    // 3) Create camera and lights
+    // 2) Create camera and lights
     console.log("PrefViewer: _createCamera and _createLights");
     this._createCamera();
     this._createLights();
 
-    // 4) Hook up input/event handlers (e.g. wheel-to-zoom)
+    // 3) Hook up input/event handlers (e.g. wheel-to-zoom)
     console.log("PrefViewer: _setupEventListeners");
     this._setupEventListeners();
 
-    // 5) Start Babylon’s render loop
+    // 4) Start Babylon's render loop
     console.log("PrefViewer: Starting render loop");
     this.engine.runRenderLoop(() => {
       if (this.scene) {
         this.scene.render();
       }
     });
+    
     this._onWindowResize = () => {
       console.log("PrefViewer: Window resized - calling engine.resize()");
-      this.engine.resize();
+      if (this.engine) {
+        this.engine.resize();
+      }
     };
     window.addEventListener("resize", this._onWindowResize);
   }
@@ -260,7 +280,7 @@ class PrefViewer extends HTMLElement {
       return;
     }
 
-    // Dispose previous meshes so we don’t accumulate them
+    // Dispose previous meshes so we don't accumulate them
     this._disposePreviousMeshes();
 
     try {