@preference-sl/pref-viewer 2.5.3 → 2.5.5

package/package.json

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

package/src/index.js

@@ -78,22 +78,16 @@ class PrefViewer extends HTMLElement {
   }
 
   connectedCallback() {
-    // Set up URL preprocessing once
     if (!this._pluginHookSetup) {
       this._setupUrlPreprocessing();
       this._pluginHookSetup = true;
     }
 
-    // Require either a model URL or Base64 data
     if (!this.hasAttribute("model") && !this.hasAttribute("model-data")) {
-      const errorMsg = 'PrefViewer: No "model" or "model-data" attribute provided.';
-      console.error(errorMsg);
+      const err = 'PrefViewer: No "model" or "model-data" attribute provided.';
+      console.error(err);
       this.dispatchEvent(
-        new CustomEvent("model-error", {
-          detail: { error: new Error(errorMsg) },
-          bubbles: true,
-          composed: true
-        })
+        new CustomEvent("model-error", { detail: { error: new Error(err) }, bubbles: true, composed: true })
       );
       return;
     }
@@ -105,35 +99,21 @@ class PrefViewer extends HTMLElement {
       this.modelBase64 = this.getAttribute("model-data");
     }
 
-    // Initialize Babylon (engine + scene + camera + lights + hooks)
     this._initializeBabylon();
     this._hasInitialized = true;
-
-    // Load the specified model
     this._reloadModel();
   }
 
   disconnectedCallback() {
     this._disposeEngine();
-    if (this._onWindowResize) {
-      window.removeEventListener("resize", this._onWindowResize);
-    }
+    if (this._onWindowResize) window.removeEventListener("resize", this._onWindowResize);
   }
 
-  // ====== URL Preprocessing ======
   _setupUrlPreprocessing() {
     const transformUrl = (url) => {
-      const stripped = url.replace(
-        /^blob:(?:http|https|file):\/\/[^\/]+\/(.+)/i,
-        "$1"
-      );
-      const fixedSlashes = stripped.replace(/\\/g, "/");
-      if (/^https?:\/\//i.test(fixedSlashes)) {
-        return fixedSlashes;
-      }
-      return fixedSlashes;
+      const stripped = url.replace(/^blob:(?:http|https|file):\/\/[^\/]+\/(.+)/i, "$1");
+      return stripped.replace(/\\/g, "/");
     };
-
     SceneLoader.OnPluginActivatedObservable.add((plugin) => {
       if (plugin.name === "gltf" || plugin.name === "gltf2") {
         plugin.preprocessUrl = transformUrl;
@@ -142,23 +122,14 @@ class PrefViewer extends HTMLElement {
     });
   }
 
-  // ====== Setup Helpers ======
   _createCanvas() {
     this.canvas = document.createElement("canvas");
-    Object.assign(this.canvas.style, {
-      width: "100%",
-      height: "100%",
-      display: "block"
-    });
+    Object.assign(this.canvas.style, { width: "100%", height: "100%", display: "block" });
   }
 
   _wrapCanvas() {
     const wrapper = document.createElement("div");
-    Object.assign(wrapper.style, {
-      width: "100%",
-      height: "100%",
-      position: "relative"
-    });
+    Object.assign(wrapper.style, { width: "100%", height: "100%", position: "relative" });
     wrapper.appendChild(this.canvas);
     this.shadowRoot.append(wrapper);
   }
@@ -167,182 +138,97 @@ class PrefViewer extends HTMLElement {
     this.engine = new Engine(this.canvas, true, { alpha: true });
     this.scene = new Scene(this.engine);
     this.scene.clearColor = new Color4(1, 1, 1, 1);
-
     this._createCamera();
     this._createLights();
     this._setupEventListeners();
-
-    this.engine.runRenderLoop(() => {
-      if (this.scene) this.scene.render();
-    });
-
-    this._onWindowResize = () => {
-      if (this.engine) this.engine.resize();
-    };
+    this.engine.runRenderLoop(() => this.scene && this.scene.render());
+    this._onWindowResize = () => this.engine && this.engine.resize();
     window.addEventListener("resize", this._onWindowResize);
   }
 
   _createCamera() {
     this.camera = new ArcRotateCamera(
-      "camera",
-      Math.PI / 2,
-      Math.PI / 3,
-      10,
-      Vector3.Zero(),
-      this.scene
+      "camera", Math.PI/2, Math.PI/3, 10, Vector3.Zero(), this.scene
     );
     this.camera.attachControl(this.canvas, true);
   }
 
   _createLights() {
-    this.hemiLight = new HemisphericLight(
-      "hemiLight",
-      new Vector3(0, 1, 0),
-      this.scene
-    );
+    this.hemiLight = new HemisphericLight("hemiLight", new Vector3(0,1,0), this.scene);
     this.hemiLight.intensity = 0.6;
-
-    this.dirLight = new DirectionalLight(
-      "dirLight",
-      new Vector3(-0.5, -1, -0.5),
-      this.scene
-    );
-    this.dirLight.position = new Vector3(0, 5, 0);
+    this.dirLight = new DirectionalLight("dirLight", new Vector3(-0.5,-1,-0.5), this.scene);
+    this.dirLight.position = new Vector3(0,5,0);
     this.dirLight.intensity = 0.8;
   }
 
   _setupEventListeners() {
     this.canvas.addEventListener("wheel", (evt) => {
       if (!this.scene || !this.camera) return;
-      const pickResult = this.scene.pick(
-        this.scene.pointerX,
-        this.scene.pointerY
-      );
-      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;
+      const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
+      this.camera.target = pick.hit ? pick.pickedPoint.clone() : this.camera.target;
+      this.camera.inertialRadiusOffset += evt.deltaY * this.camera.wheelPrecision * 0.01;
       evt.preventDefault();
     });
   }
 
-  // ====== Model Management ======
   async _reloadModel() {
-    if (!this.scene || (!this.modelUrl && !this.modelBase64)) {
-      console.warn("PrefViewer: _reloadModel aborted (no scene or no model)");
-      return;
-    }
-
+    if (!this.scene || (!this.modelUrl && !this.modelBase64)) return;
     this._disposePreviousMeshes();
-
     try {
       let result;
       if (this.modelBase64) {
-        const blob = this._createBlobFromBase64(this.modelBase64);
-        const ext = this._getExtensionFromMimeType(blob.type);
-        result = await SceneLoader.ImportMeshAsync(
-          null,
-          "",
-          blob,
-          this.scene,
-          undefined,
-          ext
-        );
+        const { blob, extension } = this._createBlobFromBase64(this.modelBase64);
+        const fileName = `model${extension}`;
+        const file = new File([blob], fileName, { type: blob.type });
+        console.log('[PrefViewer] Loading from Base64 as File:', fileName);
+        result = await SceneLoader.ImportMeshAsync(null, "", file, this.scene, undefined, extension);
       } else {
-        const ext = this._getExtensionFromUrl(this.modelUrl);
-        result = await SceneLoader.ImportMeshAsync(
-          null,
-          "",
-          this.modelUrl,
-          this.scene,
-          undefined,
-          ext
-        );
+        const ext = (this.modelUrl.match(/\.(gltf|glb)(\?|#|$)/i) || [])[1]?.toLowerCase() || 'gltf';
+        result = await SceneLoader.ImportMeshAsync(null, "", this.modelUrl, this.scene, undefined, `.${ext}`);
       }
-
       this.scene.createDefaultCameraOrLight(true, true, true);
-      this.dispatchEvent(
-        new CustomEvent("model-loaded", {
-          detail: {
-            meshes: result.meshes,
-            particleSystems: result.particleSystems
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.dispatchEvent(new CustomEvent("model-loaded", { detail: result, bubbles: true, composed: true }));
     } catch (err) {
       console.error("PrefViewer: Error loading model:", err);
-      this.dispatchEvent(
-        new CustomEvent("model-error", {
-          detail: { error: err },
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.dispatchEvent(new CustomEvent("model-error", { detail: { error: err }, bubbles: true, composed: true }));
     }
   }
 
   _disposePreviousMeshes() {
     if (!this.scene) return;
-    this.scene.meshes.slice().forEach((mesh) => {
-      if (mesh.getClassName() === "Mesh") mesh.dispose();
-    });
+    this.scene.meshes.slice().forEach(m => m.getClassName()==="Mesh" && m.dispose());
   }
 
   _createBlobFromBase64(base64) {
-    console.log('[PrefViewer] _createBlobFromBase64 called');
-    const [prefix, data] = base64.split(',');
-    console.log('[PrefViewer] prefix:', prefix);
-    let mimeType = 'application/octet-stream';
-    if (prefix && prefix.startsWith('data:')) {
-      const end = prefix.indexOf(';');
-      mimeType = prefix.substring(5, end >= 0 ? end : prefix.length) || mimeType;
-    }
-    console.log('[PrefViewer] inferred mimeType:', mimeType);
-    const raw = data ?? base64;
+    console.log('[PrefViewer] Decoding Base64...');
+    const [prefix, payload] = base64.split(',');
+    const raw = payload ?? base64;
+    let decoded;
     try {
-      const binary = atob(raw);
-      const array = Uint8Array.from(binary, (c) => c.charCodeAt(0));
-      const blob = new Blob([array], { type: mimeType });
-      console.log('[PrefViewer] Blob created:', blob);
-      return blob;
-    } catch (err) {
-      console.error('[PrefViewer] Failed to decode Base64 or create Blob:', err);
-      this.dispatchEvent(
-        new CustomEvent('model-error', {
-          detail: { error: err },
-          bubbles: true,
-          composed: true
-        })
-      );
-      throw err;
+      decoded = atob(raw);
+    } catch (e) {
+      console.error('[PrefViewer] atob failed:', e);
+      throw e;
     }
+    // detect JSON vs binary glb
+    let isJson = false;
+    try {
+      JSON.parse(decoded);
+      isJson = true;
+    } catch {}
+    const extension = isJson ? '.gltf' : '.glb';
+    const type = isJson ? 'model/gltf+json' : 'model/gltf-binary';
+    console.log('[PrefViewer] Detected format:', extension, type);
+    const array = Uint8Array.from(decoded, c => c.charCodeAt(0));
+    const blob = new Blob([array], { type });
+    console.log('[PrefViewer] Created Blob of size', blob.size);
+    return { blob, extension };
   }
 
-  _getExtensionFromMimeType(mimeType) {
-    if (mimeType.includes("json")) return ".gltf";
-    if (mimeType.includes("glb") || mimeType === "application/octet-stream") return ".glb";
-    return ".gltf";
-  }
-
-  _getExtensionFromUrl(url) {
-    const match = url.match(/\.(gltf|glb)(\?|#|$)/i);
-    return match ? `.${match[1].toLowerCase()}` : ".gltf";
-  }
-
-  // ====== Cleanup ======
   _disposeEngine() {
-    if (this.engine) {
-      this.engine.dispose();
-      this.engine = null;
-      this.scene = null;
-      this.camera = null;
-      this.hemiLight = null;
-      this.dirLight = null;
-    }
+    if (!this.engine) return;
+    this.engine.dispose();
+    this.engine = this.scene = this.camera = this.hemiLight = this.dirLight = null;
   }
 }