@preference-sl/pref-viewer 2.5.2 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "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();
@@ -132,10 +128,7 @@ class PrefViewer extends HTMLElement {
         "$1"
       );
       const fixedSlashes = stripped.replace(/\\/g, "/");
-      if (/^https?:\/\//i.test(fixedSlashes)) {
-        return fixedSlashes;
-      }
-      return fixedSlashes;
+      return /^https?:\/\//i.test(fixedSlashes) ? fixedSlashes : fixedSlashes;
     };
 
     SceneLoader.OnPluginActivatedObservable.add((plugin) => {
@@ -176,17 +169,8 @@ class PrefViewer extends HTMLElement {
     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);
   }
 
@@ -209,7 +193,6 @@ class PrefViewer extends HTMLElement {
       this.scene
     );
     this.hemiLight.intensity = 0.6;
-
     this.dirLight = new DirectionalLight(
       "dirLight",
       new Vector3(-0.5, -1, -0.5),
@@ -222,39 +205,50 @@ class PrefViewer extends HTMLElement {
   _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) {
-      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);
+        const fileName = `model${ext}`;
+        const file = new File([blob], fileName, { type: blob.type });
+        console.log('[PrefViewer] Importing from File:', fileName, blob);
+        result = await SceneLoader.ImportMeshAsync(
+          null,
+          "",
+          file,
+          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", {
@@ -277,24 +271,52 @@ class PrefViewer extends HTMLElement {
 
   _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());
   }
 
-  // ====== Cleanup ======
-  _disposeEngine() {
-    if (this.engine) {
-      this.engine.dispose();
-      this.engine = null;
-      this.scene = null;
-      this.camera = null;
-      this.hemiLight = null;
-      this.dirLight = null;
+  _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) { this.engine.dispose(); this.engine = null; this.scene = null; this.camera = null; this.hemiLight = null; this.dirLight = null; } }
 }
 
 customElements.define("pref-viewer", PrefViewer);