@preference-sl/pref-viewer 2.10.0-beta.13 → 2.10.0-beta.14

package/package.json

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

package/src/index.js

@@ -49,13 +49,6 @@ import { initDb, loadModel } from "./gltf-storage.js";
 class PrefViewer extends HTMLElement {
     #initialized = false;
 
-    // --- logging helper (no functional change) ---
-    #logNS = "PrefViewer";
-    #log(method, ...args) {
-        const fn = console[method] || console.log;
-        fn(`[${this.#logNS}]`, ...args);
-    }
-
     #data = {
         containers: {
             model: {
@@ -149,7 +142,6 @@ class PrefViewer extends HTMLElement {
             // JS fallback if WASM isn’t available
             fallbackUrl: `${DRACO_BASE}/draco_decoder_gltf.js`,
         };
-        this.#log("info", "constructed");
     }
 
     static get observedAttributes() {
@@ -157,8 +149,6 @@ class PrefViewer extends HTMLElement {
     }
 
     attributeChangedCallback(name, _old, value) {
-        this.#log("groupCollapsed", `attributeChanged: ${name}`);
-        this.#log("info", "new value:", value);
         let data = null;
         switch (name) {
             case "config":
@@ -187,7 +177,6 @@ class PrefViewer extends HTMLElement {
                 }
                 break;
         }
-        console.groupEnd();
     }
 
     connectedCallback() {
@@ -204,14 +193,12 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
-        this.#log("info", "connectedCallback: initializing Babylon and starting initial load");
         this.#initializeBabylon();
         this.#loadContainers(true, true, true);
         this.#initialized = true;
     }
 
     disconnectedCallback() {
-        this.#log("info", "disconnectedCallback: disposing engine and observers");
         this.#disposeEngine();
         this.#canvasResizeObserver.disconnect();
     }
@@ -241,47 +228,36 @@ class PrefViewer extends HTMLElement {
     // Data
     #checkCameraChanged(options) {
         if (!options || !options.camera) {
-            this.#log("debug", "checkCameraChanged: no camera in options");
             return false;
         }
-        const prev = this.#data.options.camera.value;
-        const next = options.camera;
-        this.#data.options.camera.changed = options.camera && options.camera !== prev ? true : false;
-        this.#data.options.camera.value = this.#data.options.camera.changed ? next : prev;
-        this.#log("info", "checkCameraChanged:", { prev, next, changed: this.#data.options.camera.changed });
+        this.#data.options.camera.changed = options.camera && options.camera !== this.#data.options.camera.value ? true : false;
+        this.#data.options.camera.value = this.#data.options.camera.changed ? options.camera : this.#data.options.camera.value;
         return this.#data.options.camera.changed;
     }
 
     #checkMaterialsChanged(options) {
         if (!options) {
-            this.#log("debug", "checkMaterialsChanged: no options object");
             return false;
         }
         let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
-            const prev = this.#data.options.materials[material].value;
-            const next = options[key];
-            this.#data.options.materials[material].changed = next && next !== prev ? true : false;
-            this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? next : prev;
+            this.#data.options.materials[material].changed = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
+            this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? options[key] : this.#data.options.materials[material].value;
             someChanged = someChanged || this.#data.options.materials[material].changed;
-            this.#log("info", "checkMaterialsChanged item:", { material, key, prev, next, changed: this.#data.options.materials[material].changed });
         });
-        this.#log("info", "checkMaterialsChanged: someChanged =", someChanged);
         return someChanged;
     }
 
     #storeChangedFlagsForContainer(container) {
         container.timestamp = container.changed.timestamp;
         container.size = container.changed.size;
-        this.#log("debug", "storeChangedFlagsForContainer:", { name: container.name, timestamp: container.timestamp, size: container.size });
     }
 
     #resetChangedFlags() {
         Object.values(this.#data.containers).forEach((container) => (container.changed = false));
         Object.values(this.#data.options.materials).forEach((material) => (material.changed = false));
         this.#data.options.camera.changed = false;
-        this.#log("debug", "resetChangedFlags()");
     }
 
     // Babylon.js
@@ -296,7 +272,6 @@ class PrefViewer extends HTMLElement {
         this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
         this.#canvasResizeObserver.observe(this.#canvas);
 
-        this.#log("info", "Babylon initialized: creating XR experience (if supported)...");
         await this.#createXRExperience();
     }
 
@@ -315,7 +290,7 @@ class PrefViewer extends HTMLElement {
         const sessionMode = "immersive-ar";
         const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
         if (!sessionSupported) {
-            this.#log("info", "WebXR in mode AR is not supported");
+            console.info("PrefViewer: WebXR in mode AR is not supported");
             return false;
         }
 
@@ -350,7 +325,6 @@ class PrefViewer extends HTMLElement {
             });
 
             this.addStylesToARButton();
-            this.#log("info", "WebXR experience created");
         } catch (error) {
             console.warn("PrefViewer: failed to create WebXR experience", error);
             this.#XRExperience = null;
@@ -368,7 +342,6 @@ class PrefViewer extends HTMLElement {
         this.#camera.metadata = { locked: false }
         this.#camera = this.#camera;
         this.#camera.attachControl(this.#canvas, true);
-        this.#log("info", "Default camera created");
     }
 
     #createLights() {
@@ -391,8 +364,6 @@ class PrefViewer extends HTMLElement {
         this.#cameraLight = new PointLight("pl", this.#camera.position, this.#scene);
         this.#cameraLight.parent = this.#camera;
         this.#cameraLight.intensity = 0.3;
-
-        this.#log("info", "Lights & shadows configured");
     }
 
     #setupInteraction() {
@@ -415,7 +386,6 @@ class PrefViewer extends HTMLElement {
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
         this.#shadowGen = null;
-        this.#log("info", "Engine disposed");
     }
 
     // Utility methods for loading gltf/glb
@@ -459,7 +429,7 @@ class PrefViewer extends HTMLElement {
             return { blob, extension, size };
         }
         let isJson = false;
-               try {
+        try {
             JSON.parse(decoded);
             isJson = true;
         } catch {}
@@ -484,20 +454,16 @@ class PrefViewer extends HTMLElement {
         }
         show = show !== undefined ? show : this.#data.containers.environment.visible;
         const prefixes = Object.values(this.#data.options.materials).map((material) => material.prefix);
-        const meshes = this.#data.containers.model.assetContainer.meshes.filter((meshToFilter) => prefixes.some((prefix) => meshToFilter.name.startsWith(prefix)));
-        this.#log("debug", "setVisibilityOfWallAndFloorInModel:", { show, affectedMeshes: meshes.map(m => m.name) });
-        meshes.forEach((mesh) => mesh.setEnabled(show));
+        this.#data.containers.model.assetContainer.meshes.filter((meshToFilter) => prefixes.some((prefix) => meshToFilter.name.startsWith(prefix))).forEach((mesh) => mesh.setEnabled(show));
     }
 
     #setOptionsMaterial(optionMaterial) {
         if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
-            this.#log("debug", "setOptionsMaterial: missing data", optionMaterial);
             return false;
         }
 
         const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
         if (!material) {
-            this.#log("warn", `setOptionsMaterial: material "${optionMaterial.value}" not found in materials container`);
             return false;
         }
 
@@ -509,22 +475,20 @@ class PrefViewer extends HTMLElement {
             containers.push(this.#data.containers.environment.assetContainer);
         }
         if (containers.length === 0) {
-            this.#log("debug", "setOptionsMaterial: no target containers (unchanged)");
             return false;
         }
 
-        let count = 0;
+        let someSetted = false;
         containers.forEach((container) =>
             container.meshes
                 .filter((meshToFilter) => meshToFilter.name.startsWith(optionMaterial.prefix))
                 .forEach((mesh) => {
                     mesh.material = material;
-                    count++;
+                    someSetted = true;
                 })
         );
 
-        this.#log("info", "setOptionsMaterial applied", { prefix: optionMaterial.prefix, material: optionMaterial.value, meshesUpdated: count });
-        return count > 0;
+        return someSetted;
     }
 
     #setOptionsMaterials() {
@@ -533,19 +497,16 @@ class PrefViewer extends HTMLElement {
             let settedMaterial = this.#setOptionsMaterial(material);
             someSetted = someSetted || settedMaterial;
         });
-        this.#log("info", "setOptionsMaterials: anyApplied =", someSetted);
         return someSetted;
     }
 
     #setOptionsCamera() {
         if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.assetContainer.changed)) {
-            this.#log("debug", "setOptionsCamera: skipped (no change or no camera specified)");
             return false;
         }
 
         let camera = this.#data.containers.model.assetContainer?.cameras.find((cam) => cam.name === this.#data.options.camera.value) || null;
         if (!camera) {
-            this.#log("warn", `setOptionsCamera: camera "${this.#data.options.camera.value}" not found in model`);
             return false;
         }
 
@@ -554,7 +515,6 @@ class PrefViewer extends HTMLElement {
             camera.attachControl(this.#canvas, true);
         }
         this.#scene.activeCamera = camera;
-        this.#log("info", "setOptionsCamera: activated", { name: camera.name, locked: this.#data.options.camera.locked });
 
         return true;
     }
@@ -563,7 +523,6 @@ class PrefViewer extends HTMLElement {
         if (container.assetContainer && !container.visible && container.show) {
             container.assetContainer.addAllToScene();
             container.visible = true;
-            this.#log("debug", "addContainer -> visible", container.name);
         }
     }
 
@@ -571,7 +530,6 @@ class PrefViewer extends HTMLElement {
         if (container.assetContainer && container.visible) {
             container.assetContainer.removeAllFromScene();
             container.visible = false;
-            this.#log("debug", "removeContainer -> hidden", container.name);
         }
     }
 
@@ -583,24 +541,15 @@ class PrefViewer extends HTMLElement {
             this.#shadowGen.addShadowCaster(mesh, true);
         });
         this.#addContainer(container);
-        this.#log("debug", "replaceContainer:", container.name, {
-            meshes: container.assetContainer.meshes?.length,
-            materials: container.assetContainer.materials?.length,
-            cameras: container.assetContainer.cameras?.length,
-        });
     }
 
     async #loadAssetContainer(container) {
         let storage = container?.storage;
 
         if (!storage) {
-            this.#log("debug", `loadAssetContainer(${container?.name}): no storage provided`);
             return false;
         }
 
-        this.#log("groupCollapsed", `loadAssetContainer -> ${container.name}`);
-        this.#log("info", "storage:", storage);
-
         let source = storage.url || null;
 
         if (storage.db && storage.table && storage.id) {
@@ -608,18 +557,13 @@ class PrefViewer extends HTMLElement {
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
             if (object.timestamp === container.timestamp) {
-                this.#log("info", "IndexedDB source unchanged (timestamp match). Skipping reload.");
-                console.groupEnd();
                 return false;
             } else {
                 container.changed = { timestamp: object.timestamp, size: object.size };
-                this.#log("info", "IndexedDB source changed:", container.changed);
             }
         }
 
         if (!source) {
-            this.#log("warn", "no source (url/db) to load");
-            console.groupEnd();
             return false;
         }
 
@@ -632,12 +576,9 @@ class PrefViewer extends HTMLElement {
             });
             if (!container.changed) {
                 if (container.timestamp === null && container.size === size) {
-                    this.#log("info", "Base64 source unchanged (size match). Skipping reload.");
-                    console.groupEnd();
                     return false;
                 } else {
                     container.changed = { timestamp: null, size: size };
-                    this.#log("info", "Base64 source changed (size):", container.changed);
                 }
             }
         } else {
@@ -645,12 +586,9 @@ class PrefViewer extends HTMLElement {
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
             const { fileSize, fileTimestamp } = await this.#getServerFileDataHeader(source);
             if (container.timestamp === fileTimestamp && container.size === fileSize) {
-                this.#log("info", "URL source unchanged (HEAD size/timestamp). Skipping reload.");
-                console.groupEnd();
                 return false;
             } else {
                 container.changed = { timestamp: fileTimestamp, size: fileSize };
-                this.#log("info", "URL source changed:", container.changed);
             }
         }
 
@@ -664,19 +602,10 @@ class PrefViewer extends HTMLElement {
             },
         };
 
-        this.#log("info", "Loading asset container with options:", options);
-        const result = await LoadAssetContainerAsync(file || source, this.#scene, options);
-        this.#log("info", "Asset container loaded:", {
-            meshes: result.meshes?.length,
-            materials: result.materials?.length,
-            cameras: result.cameras?.length,
-        });
-        console.groupEnd();
-        return result;
+        return LoadAssetContainerAsync(file || source, this.#scene, options);
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
-        this.#log("groupCollapsed", "loadContainers flags", { loadModel, loadEnvironment, loadMaterials });
         const promiseArray = [];
         promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
         promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
@@ -688,12 +617,6 @@ class PrefViewer extends HTMLElement {
                 const environmentContainer = values[1];
                 const materialsContainer = values[2];
 
-                this.#log("info", "loadContainers results:", {
-                    model: modelContainer?.status,
-                    environment: environmentContainer?.status,
-                    materials: materialsContainer?.status,
-                });
-
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
                     this.#replaceContainer(this.#data.containers.model, modelContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.model);
@@ -713,12 +636,10 @@ class PrefViewer extends HTMLElement {
                     this.#storeChangedFlagsForContainer(this.#data.containers.materials);
                 }
 
-                const materialsApplied = this.#setOptionsMaterials();
-                const cameraApplied = this.#setOptionsCamera();
+                this.#setOptionsMaterials();
+                this.#setOptionsCamera();
                 this.#setVisibilityOfWallAndFloorInModel();
 
-                this.#log("info", "post-load options applied", { materialsApplied, cameraApplied });
-
                 this.#resetChangedFlags();
 
                 this.dispatchEvent(
@@ -728,8 +649,6 @@ class PrefViewer extends HTMLElement {
                         composed: true,
                     })
                 );
-                this.#log("info", "model-loaded event dispatched");
-                console.groupEnd();
             })
             .catch((error) => {
                 console.error("PrefViewer: failed to load model", error);
@@ -740,18 +659,13 @@ class PrefViewer extends HTMLElement {
                         composed: true,
                     })
                 );
-                this.#log("error", "model-error event dispatched");
-                console.groupEnd();
             });
     }
 
     // Public Methods
     loadConfig(config) {
-        this.#log("groupCollapsed", "loadConfig called with:", config);
         config = typeof config === "string" ? JSON.parse(config) : config;
         if (!config) {
-            this.#log("warn", "loadConfig: no config provided");
-            console.groupEnd();
             return false;
         }
 
@@ -762,30 +676,17 @@ class PrefViewer extends HTMLElement {
         this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
         this.#data.containers.materials.storage = config.materials?.storage || null;
 
-        this.#log("info", "containers set from config", {
-            model: this.#data.containers.model,
-            environment: this.#data.containers.environment,
-            materials: this.#data.containers.materials,
-        });
-
         // Options
         if (config.options) {
-            const camChanged = this.#checkCameraChanged(config.options);
-            const matsChanged = this.#checkMaterialsChanged(config.options);
-            this.#log("info", "options parsed", { camChanged, matsChanged, options: this.#data.options });
-        } else {
-            this.#log("debug", "no options in config");
+            this.#checkCameraChanged(config.options);
+            this.#checkMaterialsChanged(config.options);
         }
 
         this.#initialized && this.#loadContainers(true, true, true);
-        console.groupEnd();
     }
 
     setOptions(options) {
-        this.#log("groupCollapsed", "setOptions called with:", options);
         if (!options) {
-            this.#log("warn", "setOptions: no options");
-            console.groupEnd();
             return false;
         }
         let someSetted = false;
@@ -796,63 +697,47 @@ class PrefViewer extends HTMLElement {
             someSetted = someSetted || this.#setOptionsMaterials();
         }
         this.#resetChangedFlags();
-        this.#log("info", "setOptions result:", { applied: someSetted, currentOptions: this.#data.options });
         debugger;
-        console.groupEnd();
         return someSetted;
     }
 
     loadModel(model) {
-        this.#log("groupCollapsed", "loadModel called with:", model);
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
-            this.#log("warn", "loadModel: no model object");
-            console.groupEnd();
             return false;
         }
         this.#data.containers.model.storage = model.storage || null;
         this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
-        this.#log("info", "model container updated", this.#data.containers.model);
         this.#initialized && this.#loadContainers(true, false, false);
-        console.groupEnd();
     }
 
     loadScene(scene) {
-        this.#log("groupCollapsed", "loadScene called with:", scene);
         scene = typeof scene === "string" ? JSON.parse(scene) : scene;
         if (!scene) {
-            this.#log("warn", "loadScene: no scene object");
-            console.groupEnd();
             return false;
         }
         this.#data.containers.environment.storage = scene.storage || null;
         this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
-        this.#log("info", "environment container updated", this.#data.containers.environment);
         this.#initialized && this.#loadContainers(false, true, false);
-        console.groupEnd();
     }
 
     showModel() {
-        this.#log("info", "showModel()");
         this.#data.containers.model.show = true;
         this.#addContainer(this.#data.containers.model);
     }
 
     hideModel() {
-        this.#log("info", "hideModel()");
         this.#data.containers.model.show = false;
         this.#removeContainer(this.#data.containers.model);
     }
 
     showScene() {
-        this.#log("info", "showScene()");
         this.#data.containers.environment.show = true;
         this.#addContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
     }
 
     hideScene() {
-        this.#log("info", "hideScene()");
         this.#data.containers.environment.show = false;
         this.#removeContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();