@preference-sl/pref-viewer 2.10.0-beta.26 → 2.10.0-beta.27

package/package.json

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

package/src/index.js

@@ -61,7 +61,7 @@ class PrefViewer extends HTMLElement {
                 visible: false,
                 size: null,
                 timeStamp: null,
-                changed: false,
+                changed: { pending: false, success: false },
             },
             environment: {
                 name: "environment",
@@ -71,7 +71,7 @@ class PrefViewer extends HTMLElement {
                 visible: false,
                 size: null,
                 timeStamp: null,
-                changed: false,
+                changed: { pending: false, success: false },
             },
             materials: {
                 name: "materials",
@@ -81,35 +81,35 @@ class PrefViewer extends HTMLElement {
                 visible: false,
                 size: null,
                 timeStamp: null,
-                changed: false,
+                changed: { pending: false, success: false },
             },
         },
         options: {
             camera: {
                 value: null,
                 locked: true,
-                changed: false,
+                changed: { pending: false, success: false, oldValue: null, oldLocked: true },
             },
             materials: {
                 innerWall: {
                     value: null,
                     prefix: "innerWall",
-                    changed: false,
+                    changed: { pending: false, success: false, oldValue: null },
                 },
                 outerWall: {
                     value: null,
                     prefix: "outerWall",
-                    changed: false,
+                    changed: { pending: false, success: false, oldValue: null },
                 },
                 innerFloor: {
                     value: null,
                     prefix: "innerFloor",
-                    changed: false,
+                    changed: { pending: false, success: false, oldValue: null },
                 },
                 outerFloor: {
                     value: null,
                     prefix: "outerFloor",
-                    changed: false,
+                    changed: { pending: false, success: false, oldValue: null },
                 },
             },
         },
@@ -249,24 +249,24 @@ class PrefViewer extends HTMLElement {
         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_innerWallMaterial: !!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,
+            container_model: !!this.#data.containers.model.changed.pending,
+            container_environment: !!this.#data.containers.environment.changed.pending,
+            container_materials: !!this.#data.containers.materials.changed.pending,
+            options_camera: !!this.#data.options.camera.changed.pending,
+            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
+            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
+            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
+            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
         };
         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_innerWallMaterial: !!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,
+            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_innerWallMaterial: !!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 = {
@@ -301,18 +301,18 @@ class PrefViewer extends HTMLElement {
 
     #setStatusOptionsLoaded() {
         const toLoadDetail = {
-            camera: !!this.#data.options.camera.changed,
-            innerWallMaterial: !!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,
+            camera: !!this.#data.options.camera.changed.pending,
+            innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
+            outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
+            innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
+            outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
         };
         const loadedDetail = {
-            camera: !!this.#data.options.camera.changed?.success,
-            innerWallMaterial: !!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,
+            camera: !!this.#data.options.camera.changed.success,
+            innerWallMaterial: !!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 = {
@@ -336,10 +336,17 @@ class PrefViewer extends HTMLElement {
         if (!options || !options.camera) {
             return false;
         }
-        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;
+        const prev = this.#data.options.camera.value;
+        const changed = options.camera !== prev;
+
+        this.#data.options.camera.changed.pending = changed;
+        this.#data.options.camera.changed.success = false;
+        if (changed) {
+            this.#data.options.camera.changed.oldValue = prev;
+            this.#data.options.camera.changed.oldLocked = this.#data.options.camera.locked;
+            this.#data.options.camera.value = options.camera;
+        }
+        return changed;
     }
 
     #checkMaterialsChanged(options) {
@@ -349,10 +356,18 @@ class PrefViewer extends HTMLElement {
         let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
-            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;
+            const state = this.#data.options.materials[material];
+            const prev = state.value;
+            const incoming = options[key];
+            const materialChanged = !!incoming && incoming !== prev;
+
+            state.changed.pending = materialChanged;
+            state.changed.success = false;
+            if (materialChanged) {
+                state.changed.oldValue = prev;
+                state.value = incoming;
+            }
+            someChanged = someChanged || materialChanged;
         });
         return someChanged;
     }
@@ -361,19 +376,23 @@ class PrefViewer extends HTMLElement {
         if (success) {
             container.timeStamp = container.changed.timeStamp;
             container.size = container.changed.size;
-            container.changed.success = success;
-        } else if (container.changed) {
-            container.source = container.changed.source;
-            container.changed = false;
+            container.changed.success = true;
+            container.changed.pending = false;
         } else {
-            container.changed = false;
+            container.changed.success = false;
+            container.changed.pending = false;
         }
     }
 
     #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;
+        const reset = (node) => {
+            if (!node.changed) node.changed = {};
+            node.changed.pending = false;
+            node.changed.success = false;
+        };
+        Object.values(this.#data.containers).forEach(reset);
+        Object.values(this.#data.options.materials).forEach(reset);
+        reset(this.#data.options.camera);
     }
 
     // Babylon.js
@@ -646,7 +665,7 @@ class PrefViewer extends HTMLElement {
         try {
             JSON.parse(decoded);
             isJson = true;
-        } catch {}
+        } catch { }
         extension = isJson ? ".gltf" : ".glb";
         const type = isJson ? "model/gltf+json" : "model/gltf-binary";
         const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
@@ -675,17 +694,17 @@ class PrefViewer extends HTMLElement {
         if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
             return false;
         }
-        
+
         const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
         if (!material) {
             return false;
         }
-        
+
         const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed || this.#data.containers.materials.changed || optionMaterial.changed)) {
+        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
             containers.push(this.#data.containers.model.assetContainer);
         }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed || this.#data.containers.materials.changed || optionMaterial.changed)) {
+        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
             containers.push(this.#data.containers.environment.assetContainer);
         }
         if (containers.length === 0) {
@@ -704,8 +723,11 @@ class PrefViewer extends HTMLElement {
 
         if (someSetted) {
             optionMaterial.changed.success = true;
-        } else {
+            optionMaterial.changed.pending = false;
+        } else if (optionMaterial.changed.pending) {
             optionMaterial.value = optionMaterial.changed.oldValue;
+            optionMaterial.changed.success = false;
+            optionMaterial.changed.pending = false;
         }
 
         return someSetted;
@@ -721,27 +743,39 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsCamera() {
-        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.changed && !this.#data.containers.environment.changed)) {
+        if (
+            !this.#data.options.camera.value &&
+            !this.#data.options.camera.changed.pending &&
+            !this.#data.containers.model.changed.pending &&
+            !this.#data.containers.environment.changed.pending
+        ) {
             return false;
         }
 
         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) {
             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;
+                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 === this.#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;
+                this.#data.options.camera.changed.success = false;
+                this.#data.options.camera.changed.pending = false;
             } 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;
+                this.#data.options.camera.changed.pending = false;
             }
-            this.#data.options.camera.changed.success = false;
         } else {
             camera.metadata = { locked: this.#data.options.camera.locked };
+            if (this.#data.options.camera.changed.pending) {
+                this.#data.options.camera.changed.success = true;
+                this.#data.options.camera.changed.pending = false;
+            }
         }
         if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
             camera.attachControl(this.#canvas, true);
@@ -788,10 +822,11 @@ class PrefViewer extends HTMLElement {
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
             if (object.timeStamp === container.timeStamp) {
-                container.changed = false;
+                container.changed.pending = false;
+                container.changed.success = false;
                 return false;
             } else {
-                Object.assign(container.changed, { timeStamp: object.timeStamp, size: object.size, success: false });
+                Object.assign(container.changed, { timeStamp: object.timeStamp, size: object.size, success: false, pending: true });
             }
         }
 
@@ -806,12 +841,13 @@ class PrefViewer extends HTMLElement {
             file = new File([blob], `${container.name}${extension}`, {
                 type: blob.type,
             });
-            if (!container.changed) {
+            if (!container.changed.pending) {
                 if (container.timeStamp === null && container.size === size) {
-                    container.changed = false;
+                    container.changed.pending = false;
+                    container.changed.success = false;
                     return false;
                 } else {
-                    Object.assign(container.changed, { timeStamp: null, size: size, success: false });
+                    Object.assign(container.changed, { timeStamp: null, size: size, success: false, pending: true });
                 }
             }
         } else {
@@ -819,10 +855,11 @@ class PrefViewer extends HTMLElement {
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
             const [fileSize, fileTimeStamp] = await this.#getServerFileDataHeader(source);
             if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
-                container.changed = false;
+                container.changed.pending = false;
+                container.changed.success = false;
                 return false;
             } else {
-                Object.assign(container.changed, { timeStamp: fileTimeStamp, size: fileSize, success: false });
+                Object.assign(container.changed, { timeStamp: fileTimeStamp, size: fileSize, success: false, pending: true });
             }
         }
 
@@ -917,17 +954,24 @@ class PrefViewer extends HTMLElement {
 
         // Containers
         const loadModel = !!config.model?.storage;
-        this.#data.containers.model.changed = loadModel ? { storage: this.#data.containers.model.storage } : false;
+        // CHANGED: marcar pending, no boolean
+        this.#data.containers.model.changed.pending = loadModel;
+        this.#data.containers.model.changed.success = false;
+        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
         this.#data.containers.model.storage = loadModel ? config.model.storage : this.#data.containers.model.storage;
         this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
 
         const loadEnvironment = !!config.scene?.storage;
-        this.#data.containers.environment.changed = loadEnvironment ? { storage: this.#data.containers.environment.storage } : false;
+        this.#data.containers.environment.changed.pending = loadEnvironment;
+        this.#data.containers.environment.changed.success = false;
+        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
         this.#data.containers.environment.storage = loadEnvironment ? config.scene.storage : this.#data.containers.environment.storage;
         this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
 
         const loadMaterials = !!config.materials?.storage;
-        this.#data.containers.materials.changed = loadMaterials ? { storage: this.#data.containers.materials.storage } : false;
+        this.#data.containers.materials.changed.pending = loadMaterials;
+        this.#data.containers.materials.changed.success = false;
+        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
         this.#data.containers.materials.storage = loadMaterials ? config.materials.storage : this.#data.containers.materials.storage;
 
         // Options
@@ -965,7 +1009,9 @@ class PrefViewer extends HTMLElement {
             return false;
         }
         const loadModel = !!model.storage;
-        this.#data.containers.model.changed = loadModel ? { storage: this.#data.containers.model.storage } : false;
+        this.#data.containers.model.changed.pending = loadModel;
+        this.#data.containers.model.changed.success = false;
+        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
         this.#data.containers.model.storage = loadModel ? model.storage : this.#data.containers.model.storage;
         this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
         this.initialized && this.#loadContainers(loadModel, false, false);
@@ -977,7 +1023,9 @@ class PrefViewer extends HTMLElement {
             return false;
         }
         const loadEnvironment = !!scene.storage;
-        this.#data.containers.environment.changed = loadEnvironment ? { storage: this.#data.containers.environment.storage } : false;
+        this.#data.containers.environment.changed.pending = loadEnvironment;
+        this.#data.containers.environment.changed.success = false;
+        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
         this.#data.containers.environment.storage = loadEnvironment ? scene.storage : this.#data.containers.environment.storage;
         this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
         this.initialized && this.#loadContainers(false, loadEnvironment, false);
@@ -989,7 +1037,9 @@ class PrefViewer extends HTMLElement {
             return false;
         }
         const loadMaterials = !!materials.storage;
-        this.#data.containers.materials.changed = loadMaterials ? { storage: this.#data.containers.materials.storage } : false;
+        this.#data.containers.materials.changed.pending = loadMaterials;
+        this.#data.containers.materials.changed.success = false;
+        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
         this.#data.containers.materials.storage = loadMaterials ? materials.storage : this.#data.containers.materials.storage;
         this.initialized && this.#loadContainers(false, false, loadMaterials);
     }