@preference-sl/pref-viewer 2.5.4 → 2.6.0

package/package.json

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

package/src/index.js

@@ -6,25 +6,28 @@
  * 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 `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.
+ *   • Renders glTF or GLB models in a <canvas> inside its shadow DOM.
+ *   • Supports loading via remote URLs (`model` attribute) or Base64 data URIs (`model-data` attribute).
+ *   • Automatically handles scene creation (engine, camera, lighting) and resource cleanup.
+ *   • Emits `model-loaded` and `model-error` events for integration.
  *
  * Usage
  * -----
+ * Load from a URL:
+ * ```html
  * <pref-viewer
- *   model="https://example.com/models/myModel.gltf"
+ *   model="https://example.com/models/myModel.glb"
  *   style="width:800px; height:600px;">
  * </pref-viewer>
+ * ```
  *
- * or:
- *
+ * Load from Base64 data:
+ * ```html
  * <pref-viewer
  *   model-data="data:application/gltf+json;base64,UEsDB..."
  *   style="width:800px; height:600px;">
  * </pref-viewer>
+ * ```
  */
 import {
   Engine,
@@ -53,84 +56,60 @@ class PrefViewer extends HTMLElement {
     this.dirLight = null;
     this._onWindowResize = null;
 
-    // Model data sources
+    // Model sources
     this.modelUrl = null;
     this.modelBase64 = null;
 
-    this._hasInitialized = false;
-    this._pluginHookSetup = false;
+    this._initialized = false;
+    this._urlHooked = false;
   }
 
   static get observedAttributes() {
     return ["model", "model-data"];
   }
 
-  attributeChangedCallback(name, _oldValue, newValue) {
+  attributeChangedCallback(name, _old, value) {
     if (name === "model") {
-      this.modelUrl = newValue;
+      this.modelUrl = value;
       this.modelBase64 = null;
-      if (this._hasInitialized) this._reloadModel();
+      this._initialized && this._reloadModel();
     } else if (name === "model-data") {
-      this.modelBase64 = newValue;
+      this.modelBase64 = value;
       this.modelUrl = null;
-      if (this._hasInitialized) this._reloadModel();
+      this._initialized && this._reloadModel();
     }
   }
 
   connectedCallback() {
-    // Set up URL preprocessing once
-    if (!this._pluginHookSetup) {
+    if (!this._urlHooked) {
       this._setupUrlPreprocessing();
-      this._pluginHookSetup = true;
+      this._urlHooked = 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: provide either "model" or "model-data" attribute.';
+      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;
     }
 
-    if (this.hasAttribute("model")) {
-      this.modelUrl = this.getAttribute("model");
-    }
-    if (this.hasAttribute("model-data")) {
-      this.modelBase64 = this.getAttribute("model-data");
-    }
+    this.modelUrl = this.getAttribute("model");
+    this.modelBase64 = this.getAttribute("model-data");
 
-    // Initialize Babylon (engine + scene + camera + lights + hooks)
     this._initializeBabylon();
-    this._hasInitialized = true;
-
-    // Load the specified model
+    this._initialized = true;
     this._reloadModel();
   }
 
   disconnectedCallback() {
     this._disposeEngine();
-    if (this._onWindowResize) {
-      window.removeEventListener("resize", this._onWindowResize);
-    }
+    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, "/");
-      return /^https?:\/\//i.test(fixedSlashes) ? fixedSlashes : fixedSlashes;
-    };
-
+    const transformUrl = (url) => url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/");
     SceneLoader.OnPluginActivatedObservable.add((plugin) => {
       if (plugin.name === "gltf" || plugin.name === "gltf2") {
         plugin.preprocessUrl = transformUrl;
@@ -139,23 +118,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);
   }
@@ -164,10 +134,9 @@ 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._setupInteraction();
 
     this.engine.runRenderLoop(() => this.scene && this.scene.render());
     this._onWindowResize = () => this.engine && this.engine.resize();
@@ -187,84 +156,47 @@ class PrefViewer extends HTMLElement {
   }
 
   _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 = 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() {
+  _setupInteraction() {
     this.canvas.addEventListener("wheel", (evt) => {
       if (!this.scene || !this.camera) return;
       const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
-      this.camera.target = pick.hit
-        ? pick.pickedPoint.clone()
-        : this.camera.target;
+      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);
-        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
-        );
+        const { blob, extension } = this._decodeBase64(this.modelBase64);
+        const file = new File([blob], `model${extension}`, { type: blob.type });
+        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 extMatch = this.modelUrl.match(/\.(gltf|glb)(\?|#|$)/i);
+        const extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
+        result = await SceneLoader.ImportMeshAsync(null, "", this.modelUrl, this.scene, undefined, extension);
       }
+
       this.scene.createDefaultCameraOrLight(true, true, true);
       this.dispatchEvent(
-        new CustomEvent("model-loaded", {
-          detail: { meshes: result.meshes, particleSystems: result.particleSystems },
-          bubbles: true,
-          composed: true
-        })
+        new CustomEvent("model-loaded", { detail: result, bubbles: true, composed: true })
       );
     } catch (err) {
-      console.error("PrefViewer: Error loading model:", err);
+      console.error("PrefViewer: failed to load model", err);
       this.dispatchEvent(
-        new CustomEvent("model-error", {
-          detail: { error: err },
-          bubbles: true,
-          composed: true
-        })
+        new CustomEvent("model-error", { detail: { error: err }, bubbles: true, composed: true })
       );
     }
   }
@@ -274,49 +206,24 @@ class PrefViewer extends HTMLElement {
     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;
-    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;
-    }
+  _decodeBase64(base64) {
+    const [, payload] = base64.split(",");
+    const raw = payload || base64;
+    const decoded = atob(raw);
+    let isJson = false;
+    try { JSON.parse(decoded); isJson = true; } catch {}
+    const extension = isJson ? ".gltf" : ".glb";
+    const type = isJson ? "model/gltf+json" : "model/gltf-binary";
+    const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
+    const blob = new Blob([array], { type });
+    return { blob, extension };
   }
 
-  _getExtensionFromMimeType(mimeType) {
-    if (mimeType.includes("json")) return ".gltf";
-    if (mimeType.includes("glb") || mimeType === "application/octet-stream") return ".glb";
-    return ".gltf";
+  _disposeEngine() {
+    if (!this.engine) return;
+    this.engine.dispose();
+    this.engine = this.scene = this.camera = this.hemiLight = this.dirLight = null;
   }
-
-  _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);