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

package/package.json

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

package/src/index.js

@@ -47,7 +47,9 @@ import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompre
 import { initDb, loadModel } from "./gltf-storage.js";
 
 class PrefViewer extends HTMLElement {
-    #initialized = false;
+    initialized = false;
+    loaded = false;
+    loading = false;
 
     #data = {
         containers: {
@@ -162,7 +164,7 @@ class PrefViewer extends HTMLElement {
                 break;
             case "show-model":
                 data = value.toLowerCase?.() === "true";
-                if (this.#initialized) {
+                if (this.initialized) {
                     data ? this.showModel() : this.hideModel();
                 } else {
                     this.#data.containers.model.show = data;
@@ -170,7 +172,7 @@ class PrefViewer extends HTMLElement {
                 break;
             case "show-scene":
                 data = value.toLowerCase?.() === "true";
-                if (this.#initialized) {
+                if (this.initialized) {
                     data ? this.showScene() : this.hideScene();
                 } else {
                     this.#data.containers.environment.show = data;
@@ -184,18 +186,19 @@ class PrefViewer extends HTMLElement {
             const error = 'PrefViewer: provide "models" as array of model and environment';
             console.error(error);
             this.dispatchEvent(
-                new CustomEvent("model-error", {
-                    detail: { error: new Error(error) },
+                new CustomEvent("scene-error", {
                     bubbles: true,
+                    cancelable: false,
                     composed: true,
+                    detail: { error: new Error(error) },
                 })
             );
             return false;
         }
 
         this.#initializeBabylon();
+        this.initialized = true;
         this.#loadContainers(true, true, true);
-        this.#initialized = true;
     }
 
     disconnectedCallback() {
@@ -225,14 +228,71 @@ class PrefViewer extends HTMLElement {
         this.shadowRoot.append(this.#wrapper);
     }
 
+    #setStatusSceneLoading(detail) {
+        this.loaded = false;
+        this.loading = true;
+        if (this.hasAttribute("loaded")) {
+            this.removeAttribute("loaded");
+        }
+        this.setAttribute("loading", "");
+        this.dispatchEvent(
+            new CustomEvent("scene-loading", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+                detail: detail,
+            })
+        );
+    }
+
+    #setStatusSceneLoaded(detail) {
+        this.loaded = true;
+        this.loading = false;
+        if (this.hasAttribute("loading")) {
+            this.removeAttribute("loading");
+        }
+        this.setAttribute("loaded", "");
+        this.dispatchEvent(
+            new CustomEvent("scene-loaded", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+                detail: detail,
+            })
+        );
+    }
+
+    #setStatusOptionsLoading(detail) {
+        this.dispatchEvent(
+            new CustomEvent("options-loading", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+                detail: detail,
+            })
+        );
+    }
+
+    #setStatusOptionsLoaded(detail) {
+        this.dispatchEvent(
+            new CustomEvent("options-loaded", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+                detail: detail,
+            })
+        );
+    }
+
     // Data
     #checkCameraChanged(options) {
         if (!options || !options.camera) {
             return false;
         }
-        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;
+        const cameraChanged = options.camera && options.camera !== this.#data.options.camera.value ? true : false
+        this.#data.options.camera.changed = cameraChanged ? { oldValue: this.#data.options.camera.value, success: false } : false;
+        this.#data.options.camera.value = cameraChanged ? options.camera : this.#data.options.camera.value;
+        return cameraChanged;
     }
 
     #checkMaterialsChanged(options) {
@@ -242,8 +302,9 @@ class PrefViewer extends HTMLElement {
         let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
-            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;
+            const materialChanged = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
+            this.#data.options.materials[material].changed = materialChanged ? { oldValue: this.#data.options.materials[material].value, success: false } : false;
+            this.#data.options.materials[material].value = materialChanged ? options[key] : this.#data.options.materials[material].value;
             someChanged = someChanged || this.#data.options.materials[material].changed;
         });
         return someChanged;
@@ -252,6 +313,7 @@ class PrefViewer extends HTMLElement {
     #storeChangedFlagsForContainer(container) {
         container.timestamp = container.changed.timestamp;
         container.size = container.changed.size;
+        container.changed.success = true;
     }
 
     #resetChangedFlags() {
@@ -340,8 +402,8 @@ class PrefViewer extends HTMLElement {
         this.#camera.lowerRadiusLimit = 5;
         this.#camera.upperRadiusLimit = 20;
         this.#camera.metadata = { locked: false }
-        this.#camera = this.#camera;
         this.#camera.attachControl(this.#canvas, true);
+        this.#scene.activeCamera = this.#camera;
     }
 
     #createLights() {
@@ -398,13 +460,13 @@ class PrefViewer extends HTMLElement {
                 if (xhr.status === 200) {
                     const size = parseInt(xhr.getResponseHeader("Content-Length"));
                     const timestamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
-                    resolve(size, timestamp);
+                    resolve([size, timestamp]);
                 } else {
-                    resolve(0, null);
+                    resolve([0, null]);
                 }
             };
             xhr.onerror = () => {
-                resolve(0, null);
+                resolve([0, null]);
             };
             xhr.send();
         });
@@ -468,10 +530,10 @@ class PrefViewer extends HTMLElement {
         }
 
         const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.assetContainer.changed || optionMaterial.changed)) {
+        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed || optionMaterial.changed)) {
             containers.push(this.#data.containers.model.assetContainer);
         }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.assetContainer.changed || optionMaterial.changed)) {
+        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed || optionMaterial.changed)) {
             containers.push(this.#data.containers.environment.assetContainer);
         }
         if (containers.length === 0) {
@@ -488,6 +550,12 @@ class PrefViewer extends HTMLElement {
                 })
         );
 
+        if (someSetted) {
+            optionMaterial.changed.success = true;
+        } else {
+            optionMaterial.value = optionMaterial.changed.oldValue;
+        }
+
         return someSetted;
     }
 
@@ -501,21 +569,32 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsCamera() {
-        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.assetContainer.changed)) {
+        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.changed && !this.#data.containers.environment.changed)) {
             return false;
         }
 
-        let camera = this.#data.containers.model.assetContainer?.cameras.find((cam) => cam.name === this.#data.options.camera.value) || null;
+        let camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || null;
         if (!camera) {
-            return false;
+            if (this.#data.options.camera.changed?.oldValue && this.#data.options.camera.changed?.oldValue !== this.#data.options.camera.value) {
+                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.oldValue) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === his.#data.options.camera.changed.oldValue) || null;
+            }
+            if (camera){
+                camera.metadata = { locked: this.#data.options.camera.changed.oldLocked };
+                this.#data.options.camera.value = this.#data.options.camera.changed.oldValue;
+                this.#data.options.camera.locked = this.#data.options.camera.changed.oldLocked;
+            } else {
+                camera = this.#camera;
+                this.#data.options.camera.value = null;
+                this.#data.options.camera.locked = this.#camera.metadata.locked;
+            }
+            this.#data.options.camera.changed.success = false;
+        } else {
+            camera.metadata = { locked: this.#data.options.camera.locked };
         }
-
-        camera.metadata = { locked: this.#data.options.camera.locked };
-        if (!this.#data.options.camera.locked) {
+        if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
             camera.attachControl(this.#canvas, true);
         }
         this.#scene.activeCamera = camera;
-
         return true;
     }
 
@@ -559,7 +638,7 @@ class PrefViewer extends HTMLElement {
             if (object.timestamp === container.timestamp) {
                 return false;
             } else {
-                container.changed = { timestamp: object.timestamp, size: object.size };
+                container.changed = { timestamp: object.timestamp, size: object.size, success: false };
             }
         }
 
@@ -578,17 +657,17 @@ class PrefViewer extends HTMLElement {
                 if (container.timestamp === null && container.size === size) {
                     return false;
                 } else {
-                    container.changed = { timestamp: null, size: size };
+                    container.changed = { timestamp: null, size: size, success: false };
                 }
             }
         } else {
             const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
-            const { fileSize, fileTimestamp } = await this.#getServerFileDataHeader(source);
-            if (container.timestamp === fileTimestamp && container.size === fileSize) {
+            const [fileSize, fileTimestamp ] = await this.#getServerFileDataHeader(source);
+            if (container.size === fileSize && container.timestamp === fileTimestamp) {
                 return false;
             } else {
-                container.changed = { timestamp: fileTimestamp, size: fileSize };
+                container.changed = { timestamp: fileTimestamp, size: fileSize, success: false };
             }
         }
 
@@ -605,12 +684,26 @@ class PrefViewer extends HTMLElement {
         return LoadAssetContainerAsync(file || source, this.#scene, options);
     }
 
-    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
+    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {        
         const promiseArray = [];
         promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
         promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
         promiseArray.push(loadMaterials ? this.#loadAssetContainer(this.#data.containers.materials) : false);
 
+        const loadingDetail = {
+            model: !!this.#data.containers.model.changed,
+            environment: !!this.#data.containers.environment.changed,
+            materials: !!this.#data.containers.materials.changed,
+            options: {
+                camera: !!this.#data.options.camera.changed,
+                inneWallMaterial: !!this.#data.options.materials.innerWall.changed,
+                outerWallMaterial: !!this.#data.options.materials.outerWall.changed,
+                innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed,
+                outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed,
+            },
+        };
+        this.#setStatusSceneLoading(loadingDetail);
+
         Promise.allSettled(promiseArray)
             .then(async (values) => {
                 const modelContainer = values[0];
@@ -639,24 +732,33 @@ class PrefViewer extends HTMLElement {
                 this.#setOptionsMaterials();
                 this.#setOptionsCamera();
                 this.#setVisibilityOfWallAndFloorInModel();
+                
+                const loadedDetail = {
+                    model: !!this.#data.containers.model.changed?.success,
+                    environment: !!this.#data.containers.environment.changed?.success,
+                    materials: !!this.#data.containers.materials.changed?.success,
+                    options: {
+                        camera: !!this.#data.options.camera.changed?.success,
+                        inneWallMaterial: !!this.#data.options.materials.innerWall.changed?.success,
+                        outerWallMaterial: !!this.#data.options.materials.outerWall.changed?.success,
+                        innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed?.success,
+                        outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed?.success,
+                    },
+                };
+
+                this.#setStatusSceneLoaded(loadedDetail);
 
                 this.#resetChangedFlags();
-
-                this.dispatchEvent(
-                    new CustomEvent("model-loaded", {
-                        detail: { success: "" },
-                        bubbles: true,
-                        composed: true,
-                    })
-                );
             })
             .catch((error) => {
+                this.loaded = true;
                 console.error("PrefViewer: failed to load model", error);
                 this.dispatchEvent(
-                    new CustomEvent("model-error", {
-                        detail: { error: error },
+                    new CustomEvent("scene-error", {
                         bubbles: true,
+                        cancelable: false,
                         composed: true,
+                        detail: { error: error },
                     })
                 );
             });
@@ -682,22 +784,45 @@ class PrefViewer extends HTMLElement {
             this.#checkMaterialsChanged(config.options);
         }
 
-        this.#initialized && this.#loadContainers(true, true, true);
+        this.initialized && this.#loadContainers(true, true, true);
     }
 
     setOptions(options) {
         if (!options) {
             return false;
         }
+
+        const cameraChanged = this.#checkCameraChanged(options);
+        const materialsChanged = this.#checkMaterialsChanged(options);
+
+        const loadingDetail = {
+            camera: !!this.#data.options.camera.changed,
+            inneWallMaterial: !!this.#data.options.materials.innerWall.changed,
+            outerWallMaterial: !!this.#data.options.materials.outerWall.changed,
+            innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed,
+            outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed,
+        };
+        this.#setStatusOptionsLoading(loadingDetail);
+
         let someSetted = false;
-        if (this.#checkCameraChanged(options)) {
+        if (cameraChanged) {
             someSetted = someSetted || this.#setOptionsCamera();
         }
-        if (this.#checkMaterialsChanged(options)) {
+        if (materialsChanged) {
             someSetted = someSetted || this.#setOptionsMaterials();
         }
+
+        const loadedDetail = {
+            camera: !!this.#data.options.camera.changed?.success,
+            inneWallMaterial: !!this.#data.options.materials.innerWall.changed?.success,
+            outerWallMaterial: !!this.#data.options.materials.outerWall.changed?.success,
+            innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed?.success,
+            outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed?.success,
+        };
+        this.#setStatusOptionsLoaded(loadedDetail);
+
         this.#resetChangedFlags();
-        debugger;
+
         return someSetted;
     }
 
@@ -708,7 +833,7 @@ class PrefViewer extends HTMLElement {
         }
         this.#data.containers.model.storage = model.storage || null;
         this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
-        this.#initialized && this.#loadContainers(true, false, false);
+        this.initialized && this.#loadContainers(true, false, false);
     }
 
     loadScene(scene) {
@@ -718,7 +843,7 @@ class PrefViewer extends HTMLElement {
         }
         this.#data.containers.environment.storage = scene.storage || null;
         this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
-        this.#initialized && this.#loadContainers(false, true, false);
+        this.initialized && this.#loadContainers(false, true, false);
     }
 
     showModel() {