@preference-sl/pref-viewer 2.5.1 → 2.5.3

package/package.json

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

package/src/index.js

@@ -8,36 +8,23 @@
  * `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/window.gltf").
+ *   • Listens for `model` (URL) or `model-data` (Base64) attributes to load different glTF files.
  *   • 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>
+ * <pref-viewer
+ *   model="https://example.com/models/myModel.gltf"
+ *   style="width:800px; height:600px;">
+ * </pref-viewer>
  *
- * 2. **Place the custom element in your HTML**
- *      <pref-viewer
- *        model="https://example.com/models/myModel.gltf"
- *        style="width:800px; height:600px;">
- *      </pref-viewer>
+ * or:
  *
- * 3. **Listen for loading events (optional)**
- *      const viewer = document.querySelector("pref-viewer");
- *      viewer.addEventListener("model-loaded", (evt) => {
- *       xx
- *      });
- *      viewer.addEventListener("model-error", (evt) => {
- *        xx
- *      });
- *
- * 4. **Change models at runtime**
- *      viewer.setAttribute("model", "https://example.com/models/anotherModel.glb");
- *
- * ----------------------------------------------------------------------------- 
- * Implementation code below with updated preprocessUrl 
- * ----------------------------------------------------------------------------- 
+ * <pref-viewer
+ *   model-data="data:application/gltf+json;base64,UEsDB..."
+ *   style="width:800px; height:600px;">
+ * </pref-viewer>
  */
 import {
   Engine,
@@ -66,22 +53,27 @@ class PrefViewer extends HTMLElement {
     this.dirLight = null;
     this._onWindowResize = null;
 
-    // modelUrl will be provided via attribute
+    // Model data sources
     this.modelUrl = null;
+    this.modelBase64 = null;
+
     this._hasInitialized = false;
     this._pluginHookSetup = false;
   }
 
   static get observedAttributes() {
-    return ["model"];
+    return ["model", "model-data"];
   }
 
   attributeChangedCallback(name, _oldValue, newValue) {
     if (name === "model") {
       this.modelUrl = newValue;
-      if (this._hasInitialized) {
-        this._reloadModel();
-      }
+      this.modelBase64 = null;
+      if (this._hasInitialized) this._reloadModel();
+    } else if (name === "model-data") {
+      this.modelBase64 = newValue;
+      this.modelUrl = null;
+      if (this._hasInitialized) this._reloadModel();
     }
   }
 
@@ -92,9 +84,9 @@ class PrefViewer extends HTMLElement {
       this._pluginHookSetup = true;
     }
 
-    // Require a model attribute; fail early if missing
-    if (!this.hasAttribute("model")) {
-      const errorMsg = 'PrefViewer: No "model" attribute provided.';
+    // 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);
       this.dispatchEvent(
         new CustomEvent("model-error", {
@@ -106,8 +98,12 @@ class PrefViewer extends HTMLElement {
       return;
     }
 
-    // Initialize modelUrl from attribute
-    this.modelUrl = this.getAttribute("model");
+    if (this.hasAttribute("model")) {
+      this.modelUrl = this.getAttribute("model");
+    }
+    if (this.hasAttribute("model-data")) {
+      this.modelBase64 = this.getAttribute("model-data");
+    }
 
     // Initialize Babylon (engine + scene + camera + lights + hooks)
     this._initializeBabylon();
@@ -177,15 +173,11 @@ class PrefViewer extends HTMLElement {
     this._setupEventListeners();
 
     this.engine.runRenderLoop(() => {
-      if (this.scene) {
-        this.scene.render();
-      }
+      if (this.scene) this.scene.render();
     });
 
     this._onWindowResize = () => {
-      if (this.engine) {
-        this.engine.resize();
-      }
+      if (this.engine) this.engine.resize();
     };
     window.addEventListener("resize", this._onWindowResize);
   }
@@ -238,27 +230,45 @@ class PrefViewer extends HTMLElement {
 
   // ====== Model Management ======
   async _reloadModel() {
-    if (!this.scene || !this.modelUrl) {
-      console.warn("PrefViewer: _reloadModel aborted (scene or modelUrl missing)");
+    if (!this.scene || (!this.modelUrl && !this.modelBase64)) {
+      console.warn("PrefViewer: _reloadModel aborted (no scene or no model)");
       return;
     }
 
     this._disposePreviousMeshes();
 
     try {
-      const result = await SceneLoader.ImportMeshAsync(
-        null,
-        "",
-        this.modelUrl,
-        this.scene,
-        undefined,
-        ".gltf"
-      );
+      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
+        );
+      } else {
+        const ext = this._getExtensionFromUrl(this.modelUrl);
+        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 },
+          detail: {
+            meshes: result.meshes,
+            particleSystems: result.particleSystems
+          },
           bubbles: true,
           composed: true
         })
@@ -278,12 +288,51 @@ class PrefViewer extends HTMLElement {
   _disposePreviousMeshes() {
     if (!this.scene) return;
     this.scene.meshes.slice().forEach((mesh) => {
-      if (mesh.getClassName() === "Mesh") {
-        mesh.dispose();
-      }
+      if (mesh.getClassName() === "Mesh") mesh.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;
+    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;
+    }
+  }
+
+  _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) {