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

package/package.json

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

package/src/index.js

@@ -228,7 +228,7 @@ class PrefViewer extends HTMLElement {
         this.shadowRoot.append(this.#wrapper);
     }
 
-    #setStatusSceneLoading(detail) {
+    #setStatusSceneLoading() {
         this.loaded = false;
         this.loading = true;
         if (this.hasAttribute("loaded")) {
@@ -240,14 +240,40 @@ class PrefViewer extends HTMLElement {
                 bubbles: true,
                 cancelable: false,
                 composed: true,
-                detail: detail,
             })
         );
     }
 
-    #setStatusSceneLoaded(detail) {
+    #setStatusSceneLoaded() {
         this.loaded = true;
         this.loading = false;
+
+        const toLoadDetail = {
+            container_model: !!this.#data.containers.model.changed,
+            container_environment: !!this.#data.containers.environment.changed,
+            container_materials: !!this.#data.containers.materials.changed,
+            options_camera: !!this.#data.options.camera.changed,
+            options_inneWallMaterial: !!this.#data.options.materials.innerWall.changed,
+            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed,
+            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed,
+            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed,
+        };
+        const loadedDetail = {
+            container_model: !!this.#data.containers.model.changed?.success,
+            container_environment: !!this.#data.containers.environment.changed?.success,
+            container_materials: !!this.#data.containers.materials.changed?.success,
+            options_camera: !!this.#data.options.camera.changed?.success,
+            options_inneWallMaterial: !!this.#data.options.materials.innerWall.changed?.success,
+            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed?.success,
+            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed?.success,
+            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed?.success,
+        };
+
+        const detail = {
+            tried: toLoadDetail,
+            success: loadedDetail,
+        };
+
         if (this.hasAttribute("loading")) {
             this.removeAttribute("loading");
         }
@@ -262,18 +288,36 @@ class PrefViewer extends HTMLElement {
         );
     }
 
-    #setStatusOptionsLoading(detail) {
+    #setStatusOptionsLoading() {
         this.dispatchEvent(
             new CustomEvent("options-loading", {
                 bubbles: true,
                 cancelable: false,
                 composed: true,
-                detail: detail,
             })
         );
     }
 
-    #setStatusOptionsLoaded(detail) {
+    #setStatusOptionsLoaded() {
+
+        const toLoadDetail = {
+            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,
+        };
+        const loadedDetail = {
+            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,
+        };
+
+        const detail = {
+            tried: toLoadDetail,
+            success: loadedDetail,
+        };
+
         this.dispatchEvent(
             new CustomEvent("options-loaded", {
                 bubbles: true,
@@ -520,6 +564,7 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsMaterial(optionMaterial) {
+        debugger;
         if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
             return false;
         }
@@ -530,10 +575,10 @@ class PrefViewer extends HTMLElement {
         }
 
         const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed || optionMaterial.changed)) {
+        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed || this.#data.containers.materials.changed || optionMaterial.changed)) {
             containers.push(this.#data.containers.model.assetContainer);
         }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed || optionMaterial.changed)) {
+        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed || this.#data.containers.materials.changed || optionMaterial.changed)) {
             containers.push(this.#data.containers.environment.assetContainer);
         }
         if (containers.length === 0) {
@@ -689,7 +734,7 @@ class PrefViewer extends HTMLElement {
         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);
-
+debugger;
         const loadingDetail = {
             model: !!this.#data.containers.model.changed,
             environment: !!this.#data.containers.environment.changed,
@@ -732,22 +777,7 @@ 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.#setStatusSceneLoaded();
                 this.#resetChangedFlags();
             })
             .catch((error) => {
@@ -792,35 +822,17 @@ class PrefViewer extends HTMLElement {
             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);
+        this.#setStatusOptionsLoading();
 
         let someSetted = false;
-        if (cameraChanged) {
+        if (this.#checkCameraChanged(options)) {
             someSetted = someSetted || this.#setOptionsCamera();
         }
-        if (materialsChanged) {
+        if (this.#checkMaterialsChanged(options)) {
             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.#setStatusOptionsLoaded();
         this.#resetChangedFlags();
 
         return someSetted;