@preference-sl/pref-viewer 2.10.0-beta.22 → 2.10.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.10.0-beta.22",
+  "version": "2.10.0-beta.24",
   "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 },
             },
             materials: {
                 innerWall: {
                     value: null,
                     prefix: "innerWall",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 outerWall: {
                     value: null,
                     prefix: "outerWall",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 innerFloor: {
                     value: null,
                     prefix: "innerFloor",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 outerFloor: {
                     value: null,
                     prefix: "outerFloor",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
             },
         },
@@ -261,24 +261,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 = {
@@ -315,16 +315,16 @@ class PrefViewer extends HTMLElement {
     #setStatusOptionsLoaded() {
         console.log("PrefViewer: #setStatusOptionsLoaded()");
         const toLoadDetail = {
-            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,
+            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 = {
-            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,
+            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 = {
@@ -350,7 +350,13 @@ class PrefViewer extends HTMLElement {
         }
         const changed = options.camera !== this.#data.options.camera.value;
         console.log("PrefViewer: #checkCameraChanged()", { incoming: options.camera, previous: this.#data.options.camera.value, changed });
-        this.#data.options.camera.changed = changed ? { oldValue: this.#data.options.camera.value, oldLocked: this.#data.options.camera.locked, success: false } : false;
+        this.#data.options.camera.changed = {
+            ...this.#data.options.camera.changed,
+            pending: changed,
+            success: false,
+            oldValue: changed ? this.#data.options.camera.value : this.#data.options.camera.changed.oldValue,
+            oldLocked: changed ? this.#data.options.camera.locked : this.#data.options.camera.changed.oldLocked,
+        };
         if (changed) this.#data.options.camera.value = options.camera;
 
         return changed;
@@ -363,11 +369,19 @@ 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;
-            console.log("PrefViewer: #checkMaterialsChanged()", { key, incoming: options[key], previous: this.#data.options.materials[material].value, materialChanged });
-            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 materialState = this.#data.options.materials[material];
+            const prev = materialState.value;
+            const incoming = options[key];
+            const materialChanged = !!incoming && incoming !== prev;
+            console.log("PrefViewer: #checkMaterialsChanged()", { key, incoming, previous: prev, materialChanged });
+            materialState.changed = {
+                ...materialState.changed,
+                pending: materialChanged,
+                success: false,
+                oldValue: materialChanged ? prev : materialState.changed.oldValue,
+            };
+            materialState.value = materialChanged ? incoming : prev;
+            someChanged = someChanged || materialChanged;
         });
         return someChanged;
     }
@@ -377,13 +391,18 @@ class PrefViewer extends HTMLElement {
         container.timeStamp = container.changed.timeStamp;
         container.size = container.changed.size;
         container.changed.success = true;
+        container.changed.pending = false;
     }
 
     #resetChangedFlags() {
         console.log("PrefViewer: #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) => {
+            node.changed.success = false;
+            node.changed.pending = false;
+        };
+        Object.values(this.#data.containers).forEach(reset);
+        Object.values(this.#data.options.materials).forEach(reset);
+        reset(this.#data.options.camera);
     }
 
     // Babylon.js
@@ -638,17 +657,23 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
-        const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
+        const material = this.#data.containers.materials.assetContainer?.materials
+            .find((mat) => mat.name === optionMaterial.value) || null;
+
         if (!material) {
             console.warn("PrefViewer: material not found", optionMaterial.value);
             return false;
         }
 
+        const hadExplicitChange = !!optionMaterial.changed.pending;
+
         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) {
@@ -666,11 +691,15 @@ class PrefViewer extends HTMLElement {
                 })
         );
 
-        console.log("PrefViewer: material assignment result", { prefix: optionMaterial.prefix, material: optionMaterial.value, someSetted });
+        console.log("PrefViewer: material assignment result", {
+            prefix: optionMaterial.prefix, material: optionMaterial.value, someSetted
+        });
 
         if (someSetted) {
             optionMaterial.changed.success = true;
-        } else {
+            optionMaterial.changed.pending = false;
+        } else if (hadExplicitChange) {
+            // Solo revertimos si el usuario pidió el cambio y falló
             optionMaterial.value = optionMaterial.changed.oldValue;
         }
 
@@ -695,29 +724,58 @@ class PrefViewer extends HTMLElement {
             modelChanged: this.#data.containers.model.changed,
             envChanged: this.#data.containers.environment.changed
         });
-        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.changed && !this.#data.containers.environment.changed)) {
+
+        const camState = this.#data.options.camera;
+
+        if (!camState.value && !camState.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;
+        const hadExplicitChange = !!camState.changed.pending;
+
+        let camera =
+            this.#data.containers.model.assetContainer?.cameras.find(c => c.name === camState.value) ||
+            this.#data.containers.environment.assetContainer?.cameras.find(c => c.name === camState.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 === 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;
+            // Si falló la cámara solicitada y hubo cambio explícito, intentamos volver a la anterior
+            if (hadExplicitChange && camState.changed.oldValue && camState.changed.oldValue !== camState.value) {
+                camera =
+                    this.#data.containers.model.assetContainer?.cameras.find(c => c.name === camState.changed.oldValue) ||
+                    this.#data.containers.environment.assetContainer?.cameras.find(c => c.name === camState.changed.oldValue) ||
+                    null;
+
+                if (camera) {
+                    camera.metadata = { locked: camState.changed.oldLocked };
+                    camState.value = camState.changed.oldValue;
+                    camState.locked = camState.changed.oldLocked;
+                    camState.changed.success = false;
+                    camState.changed.pending = false;
+                } else {
+                    // Fallback a la cámara por defecto del componente
+                    camera = this.#camera;
+                    camState.value = null;
+                    camState.locked = this.#camera.metadata.locked;
+                    camState.changed.success = false;
+                    camState.changed.pending = false;
+                }
             } else {
+                // No hubo cambio explícito: usa fallback sin tocar changed
                 camera = this.#camera;
-                this.#data.options.camera.value = null;
-                this.#data.options.camera.locked = this.#camera.metadata.locked;
+                camState.value = null;
+                camState.locked = this.#camera.metadata.locked;
             }
-            this.#data.options.camera.changed.success = false;
         } else {
-            camera.metadata = { locked: this.#data.options.camera.locked };
+            camera.metadata = { locked: camState.locked };
+            // Marca success si hubo cambio explícito
+            if (hadExplicitChange) {
+                camState.changed.success = true;
+                camState.changed.pending = false;
+            }
         }
-        if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
+
+        if (!camState.locked && camState.value !== null) {
             camera.attachControl(this.#canvas, true);
         }
         this.#scene.activeCamera = camera;
@@ -796,7 +854,13 @@ class PrefViewer extends HTMLElement {
                 console.log("PrefViewer: DB entry unchanged, skipping", container.name);
                 return false;
             } else {
-                container.changed = { timeStamp: object.timeStamp, size: object.size, success: false };
+                container.changed = {
+                    ...container.changed,
+                    pending: true,
+                    success: false,
+                    timeStamp: object.timeStamp,
+                    size: object.size,
+                };
                 console.log("PrefViewer: DB entry changed", container.changed);
             }
         }
@@ -813,12 +877,18 @@ 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) {
                     console.log("PrefViewer: same base64 size and null timestamp, skipping", container.name);
                     return false;
                 } else {
-                    container.changed = { timeStamp: null, size: size, success: false };
+                    container.changed = {
+                        ...container.changed,
+                        pending: true,
+                        success: false,
+                        timeStamp: null,
+                        size: size,
+                    };
                 }
             }
             console.log("PrefViewer: prepared File from base64", { name: file.name, size: file.size, type: file.type });
@@ -830,7 +900,13 @@ class PrefViewer extends HTMLElement {
                 console.log("PrefViewer: remote file unchanged, skipping", container.name);
                 return false;
             } else {
-                container.changed = { timeStamp: fileTimeStamp, size: fileSize, success: false };
+                container.changed = {
+                    ...container.changed,
+                    pending: true,
+                    success: false,
+                    timeStamp: fileTimeStamp,
+                    size: fileSize,
+                };
                 console.log("PrefViewer: remote file changed", container.changed);
             }
         }