@preference-sl/pref-viewer 2.10.0-beta.23 → 2.10.0-beta.25

package/package.json

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

package/src/gltf-storage.js

@@ -12,52 +12,25 @@ function _getDbOrThrow() {
 }
 
 // --- internal helpers -------------------------------------------------------
-
-function _createStoreIfMissing(db, storeName) {
-    if (!db.objectStoreNames.contains(storeName)) {
-        const store = db.createObjectStore(storeName, { keyPath: "id" });
-        store.createIndex("expirationTimeStamp", "expirationTimeStamp", { unique: false });
-    }
-}
-
-/**
- * Opens a DB without specifying a version. If the required object store doesn't
- * exist, it re-opens with (currentVersion + 1) to create it.
- */
 function _openEnsuringStore(dbName, storeName) {
     return new Promise((resolve, reject) => {
-        const open = indexedDB.open(dbName);
+        const open = indexedDB.open(dbName, 5);
 
         open.onblocked = () => reject(new Error("Open blocked by another tab or worker"));
         open.onerror = () => reject(open.error);
-
-        open.onupgradeneeded = (e) => {
-            // First creation path (brand-new DB)
-            const db = e.target.result;
-            _createStoreIfMissing(db, storeName);
-        };
-
         open.onsuccess = (e) => {
-            const db = e.target.result;
+            resolve(e.target.result);
+        }
+        open.onupgradeneeded = (ev) => {
+            const upgradeDb = ev.target.result;
 
-            // If the store exists, we're done.
-            if (db.objectStoreNames.contains(storeName)) {
-                resolve(db);
-                return;
+            // Eliminar la object store si ya existe
+            if (upgradeDb.objectStoreNames.contains(storeName)) {
+                upgradeDb.deleteObjectStore(storeName);
             }
 
-            // Otherwise bump version just enough to add the store.
-            const nextVersion = db.version + 1;
-            db.close();
-
-            const upgrade = indexedDB.open(dbName, nextVersion);
-            upgrade.onblocked = () => reject(new Error("Upgrade blocked by another tab or worker"));
-            upgrade.onerror = () => reject(upgrade.error);
-            upgrade.onupgradeneeded = (ev) => {
-                const upDb = ev.target.result;
-                _createStoreIfMissing(upDb, storeName);
-            };
-            upgrade.onsuccess = (ev) => resolve(ev.target.result);
+            const store = upgradeDb.createObjectStore(storeName, { keyPath: 'id' });
+            store.createIndex('expirationTimeStamp', 'expirationTimeStamp', { unique: false });
         };
     });
 }

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.success = false));
-        Object.values(this.#data.options.materials).forEach((material) => (material.changed.success = false));
-        this.#data.options.camera.changed.success = 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
@@ -646,15 +665,15 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
-        const hadExplicitChange = !!optionMaterial.changed;
+        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)) {
+            (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)) {
+            (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) {
@@ -677,11 +696,8 @@ class PrefViewer extends HTMLElement {
         });
 
         if (someSetted) {
-            // Asegura estructura si antes era `false`
-            if (!optionMaterial.changed) {
-                optionMaterial.changed = { oldValue: optionMaterial.value, success: false };
-            }
             optionMaterial.changed.success = true;
+            optionMaterial.changed.pending = false;
         } else if (hadExplicitChange) {
             // Solo revertimos si el usuario pidió el cambio y falló
             optionMaterial.value = optionMaterial.changed.oldValue;
@@ -711,11 +727,11 @@ class PrefViewer extends HTMLElement {
 
         const camState = this.#data.options.camera;
 
-        if (!camState.value && !camState.changed && !this.#data.containers.model.changed && !this.#data.containers.environment.changed) {
+        if (!camState.value && !camState.changed.pending && !this.#data.containers.model.changed.pending && !this.#data.containers.environment.changed.pending) {
             return false;
         }
 
-        const hadExplicitChange = !!camState.changed;
+        const hadExplicitChange = !!camState.changed.pending;
 
         let camera =
             this.#data.containers.model.assetContainer?.cameras.find(c => c.name === camState.value) ||
@@ -730,20 +746,19 @@ class PrefViewer extends HTMLElement {
                     this.#data.containers.environment.assetContainer?.cameras.find(c => c.name === camState.changed.oldValue) ||
                     null;
 
-                // Asegura estructura para escribir success
-                if (!camState.changed) camState.changed = { oldValue: camState.value, oldLocked: camState.locked, success: false };
-
                 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
@@ -755,8 +770,8 @@ class PrefViewer extends HTMLElement {
             camera.metadata = { locked: camState.locked };
             // Marca success si hubo cambio explícito
             if (hadExplicitChange) {
-                if (!camState.changed) camState.changed = { oldValue: camState.value, oldLocked: camState.locked, success: false };
                 camState.changed.success = true;
+                camState.changed.pending = false;
             }
         }
 
@@ -839,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);
             }
         }
@@ -856,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 });
@@ -873,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);
             }
         }