@preference-sl/pref-viewer 2.10.0-beta.18 → 2.10.0-beta.19

package/package.json

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

package/src/gltf-storage.js

@@ -12,25 +12,52 @@ 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, 5);
+        const open = indexedDB.open(dbName);
 
         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) => {
-            resolve(e.target.result);
-        }
-        open.onupgradeneeded = (ev) => {
-            const upgradeDb = ev.target.result;
+            const db = e.target.result;
 
-            // Eliminar la object store si ya existe
-            if (upgradeDb.objectStoreNames.contains(storeName)) {
-                upgradeDb.deleteObjectStore(storeName);
+            // If the store exists, we're done.
+            if (db.objectStoreNames.contains(storeName)) {
+                resolve(db);
+                return;
             }
 
-            const store = upgradeDb.createObjectStore(storeName, { keyPath: 'id' });
-            store.createIndex('expirationTimeStamp', 'expirationTimeStamp', { unique: false });
+            // 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);
         };
     });
 }

package/src/index.js

@@ -253,7 +253,7 @@ class PrefViewer extends HTMLElement {
             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_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,
@@ -263,7 +263,7 @@ class PrefViewer extends HTMLElement {
             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_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,
@@ -300,13 +300,13 @@ class PrefViewer extends HTMLElement {
 
     #setStatusOptionsLoaded() {
         const toLoadDetail = {
-            inneWallMaterial: !!this.#data.options.materials.innerWall.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,
         };
         const loadedDetail = {
-            inneWallMaterial: !!this.#data.options.materials.innerWall.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,
@@ -353,17 +353,10 @@ class PrefViewer extends HTMLElement {
         return someChanged;
     }
 
-    #storeChangedFlagsForContainer(container, success) {
-        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.success = success;
-        } else {
-            container.changed = { success: success };
-        }
+    #storeChangedFlagsForContainer(container) {
+        container.timeStamp = container.changed.timeStamp;
+        container.size = container.changed.size;
+        container.changed.success = true;
     }
 
     #resetChangedFlags() {
@@ -457,7 +450,6 @@ class PrefViewer extends HTMLElement {
     }
 
     #createLights() {
-        
         // 1) Stronger ambient fill
         this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
         this.#hemiLight.intensity = 0.6;
@@ -689,7 +681,7 @@ class PrefViewer extends HTMLElement {
             if (object.timeStamp === container.timeStamp) {
                 return false;
             } else {
-                Object.assign(container.changed, { timeStamp: object.timeStamp, size: object.size, success: false });
+                container.changed = { timeStamp: object.timeStamp, size: object.size, success: false };
             }
         }
 
@@ -708,17 +700,17 @@ class PrefViewer extends HTMLElement {
                 if (container.timeStamp === null && container.size === size) {
                     return false;
                 } else {
-                    Object.assign(container.changed, { timeStamp: null, size: size, success: false });
+                    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.size === fileSize && container.timeStamp === fileTimestamp) {
+            const [fileSize, fileTimeStamp ] = await this.#getServerFileDataHeader(source);
+            if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
                 return false;
             } else {
-                Object.assign(container.changed, { timeStamp: fileTimestamp, size: fileSize, success: false });
+                container.changed = { timeStamp: fileTimeStamp, size: fileSize, success: false };
             }
         }
 
@@ -736,13 +728,13 @@ class PrefViewer extends HTMLElement {
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {        
-        this.#setStatusSceneLoading();
-
         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);
 
+        this.#setStatusSceneLoading();
+
         Promise.allSettled(promiseArray)
             .then(async (values) => {
                 const modelContainer = values[0];
@@ -751,25 +743,21 @@ class PrefViewer extends HTMLElement {
 
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
                     this.#replaceContainer(this.#data.containers.model, modelContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model, true);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.model);
                 } else {
                     this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
                     this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.environment);
                 } else {
                     this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
                 }
 
                 if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
                     this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, true);
-                } else {
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.materials);
                 }
 
                 this.#setOptionsMaterials();
@@ -800,13 +788,10 @@ class PrefViewer extends HTMLElement {
         }
 
         // Containers
-        this.#data.containers.model.changed = { storage: this.#data.containers.model.storage || null };
         this.#data.containers.model.storage = config.model?.storage || null;
         this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
-        this.#data.containers.environment.changed = { storage: this.#data.containers.environment.storage || null };
         this.#data.containers.environment.storage = config.scene?.storage || null;
         this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
-        this.#data.containers.materials.changed = { storage: this.#data.containers.materials.storage || null };
         this.#data.containers.materials.storage = config.materials?.storage || null;
 
         // Options
@@ -844,7 +829,6 @@ class PrefViewer extends HTMLElement {
         if (!model) {
             return false;
         }
-        this.#data.containers.model.changed = { storage: this.#data.containers.model.storage || null };
         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);
@@ -855,22 +839,11 @@ class PrefViewer extends HTMLElement {
         if (!scene) {
             return false;
         }
-        this.#data.containers.environment.changed = { storage: this.#data.containers.environment.storage || null };
         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);
     }
 
-    loadMaterials(materials) {
-        materials = typeof materials === "string" ? JSON.parse(materials) : materials;
-        if (!materials) {
-            return false;
-        }
-        this.#data.containers.materials.changed = { storage: this.#data.containers.materials.storage || null };
-        this.#data.containers.materials.storage = materials.storage || null;
-        this.initialized && this.#loadContainers(false, false, true);
-    }
-
     showModel() {
         this.#data.containers.model.show = true;
         this.#addContainer(this.#data.containers.model);