@preference-sl/pref-viewer 2.10.0-beta.4 → 2.10.0-beta.6

package/package.json

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

package/src/gltf-storage.js

@@ -1,148 +1,253 @@
-// Inicializar IndexedDB
+// wwwroot/js/gltf-storage.js
+
+// Public, inspectable namespace
+const PC = (globalThis.PrefConfigurator ??= {});
+PC.version = PC.version ?? "1.0.1"; // bump if you change schema
+PC.db = PC.db ?? null;              // public handle (no private state)
+
+function _getDbOrThrow() {
+  const db = PC.db;
+  if (!db) throw new Error("Database not initialized. Call initDb(...) first.");
+  return db;
+}
+
+// --- 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);
+
+    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;
+
+      // If the store exists, we're done.
+      if (db.objectStoreNames.contains(storeName)) {
+        resolve(db);
+        return;
+      }
+
+      // 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);
+    };
+  });
+}
+
+// --- public API -------------------------------------------------------------
+
+// Inicializar IndexedDB y dejar el handle en PrefConfigurator.db (público)
 export async function initDb(dbName, storeName) {
-    return new Promise((resolve, reject) => {
-        const request = indexedDB.open(dbName, 1);
-
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => {
-            window.gltfDB = request.result;
-            resolve();
-        };
-
-        request.onupgradeneeded = (event) => {
-            const db = event.target.result;
-            if (!db.objectStoreNames.contains(storeName)) {
-                const store = db.createObjectStore(storeName, { keyPath: "id" });
-                store.createIndex("type", "type", { unique: false });
-                store.createIndex("timestamp", "timestamp", { unique: false });
-            }
-        };
-    });
+  const db = await _openEnsuringStore(dbName, storeName);
+
+  // Close any previous handle to avoid versionchange blocking
+  try { PC.db?.close?.(); } catch {}
+  PC.db = db;
+
+  // If another tab upgrades, close gracefully so next call can re-init
+  db.onversionchange = () => {
+    try { db.close(); } catch {}
+    if (PC.db === db) PC.db = null;
+    console.warn("[PrefConfigurator] DB connection closed due to versionchange. Re-run initDb().");
+  };
 }
 
 // Guardar modelo
 export async function saveModel(modelDataStr, storeName) {
-    return new Promise((resolve, reject) => {
-        if (!window.gltfDB) {
-            reject(new Error("Database not initialized"));
-            return;
-        }
-        let modelData = JSON.parse(modelDataStr);
-
-        const dataToStore = {
-            ...modelData,
-            data: modelData.data,
-            size: modelData.data.length,
-            timestamp: new Date().toISOString(),
-        };
-
-        const transaction = window.gltfDB.transaction([storeName], "readwrite");
-        const store = transaction.objectStore(storeName);
-        const request = store.put(dataToStore);
-
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => resolve();
-    });
+  return new Promise((resolve, reject) => {
+    let db;
+    try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
+
+    let modelData;
+    try { modelData = JSON.parse(modelDataStr); }
+    catch (e) { reject(new Error("saveModel: modelDataStr is not valid JSON")); return; }
+
+    const dataToStore = {
+      ...modelData,
+      data: modelData.data,
+      size: (modelData?.data?.length ?? 0)
+    };
+
+    const tx = db.transaction([storeName], "readwrite");
+    const store = tx.objectStore(storeName);
+    const req = store.put(dataToStore);
+
+    req.onerror = () => reject(req.error);
+    req.onsuccess = () => resolve();
+  });
 }
 
 // Cargar modelo
 export function loadModel(modelId, storeName) {
-    return new Promise((resolve, reject) => {
-        if (!globalThis.gltfDB) {
-            reject(new Error("Database not initialized"));
-            return;
-        }
-        const tx = globalThis.gltfDB.transaction([storeName], "readonly");
-        const store = tx.objectStore(storeName);
-        const req = store.get(modelId);
-        req.onerror = () => reject(req.error);
-        req.onsuccess = () => resolve(req.result ?? null);
-    });
+  return new Promise((resolve, reject) => {
+    let db;
+    try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
+
+    const tx = db.transaction([storeName], "readonly");
+    const store = tx.objectStore(storeName);
+    const req = store.get(modelId);
+
+    req.onerror = () => reject(req.error);
+    req.onsuccess = () => resolve(req.result ?? null);
+  });
 }
 
+// Descargar archivo desde base64
 export function downloadFileFromBytes(fileName, bytesBase64, mimeType) {
-    const link = document.createElement("a");
-    link.download = fileName;
-    link.href = `data:${mimeType};base64,${bytesBase64}`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+  const link = document.createElement("a");
+  link.download = fileName;
+  link.href = `data:${mimeType};base64,${bytesBase64}`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
 }
 
 // Obtener todos los modelos (solo metadata)
 export async function getAllModels(storeName) {
-    return new Promise((resolve, reject) => {
-        if (!window.gltfDB) {
-            reject(new Error("Database not initialized"));
-            return;
-        }
-
-        const transaction = window.gltfDB.transaction([storeName], "readonly");
-        const store = transaction.objectStore(storeName);
-        const request = store.getAll();
-
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => {
-            // Excluir los datos binarios para evitar transferir demasiados datos
-            const results = request.result.map((item) => ({
-                id: item.id,
-                metadata: item.metadata,
-                timestamp: item.timestamp,
-                size: item.size,
-                type: item.type,
-            }));
-            resolve(JSON.stringify(results));
-        };
-    });
+  return new Promise((resolve, reject) => {
+    let db;
+    try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
+
+    const tx = db.transaction([storeName], "readonly");
+    const store = tx.objectStore(storeName);
+    const req = store.getAll();
+
+    req.onerror = () => reject(req.error);
+    req.onsuccess = () => {
+      const items = Array.isArray(req.result) ? req.result : [];
+      const results = items.map(item => ({
+        id: item.id,
+        metadata: item.metadata,
+        timeStamp: item.timeStamp,
+        size: item.size
+      }));
+      // keep old behavior: return JSON string
+      resolve(JSON.stringify(results));
+    };
+  });
 }
 
-// Eliminar modelo
+// Eliminar modelo por id
 export async function deleteModel(modelId, storeName) {
-    return new Promise((resolve, reject) => {
-        if (!window.gltfDB) {
-            reject(new Error("Database not initialized"));
-            return;
-        }
-
-        const transaction = window.gltfDB.transaction([storeName], "readwrite");
-        const store = transaction.objectStore(storeName);
-        const request = store.delete(modelId);
-
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => resolve();
-    });
+  return new Promise((resolve, reject) => {
+    let db;
+    try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
+
+    const tx = db.transaction([storeName], "readwrite");
+    const store = tx.objectStore(storeName);
+    const req = store.delete(modelId);
+
+    req.onerror = () => reject(req.error);
+    req.onsuccess = () => resolve();
+  });
 }
 
-// Limpiar toda la base de datos
+// Limpiar toda la store
 export async function clearAll(storeName) {
-    return new Promise((resolve, reject) => {
-        if (!window.gltfDB) {
-            reject(new Error("Database not initialized"));
-            return;
-        }
-
-        const transaction = window.gltfDB.transaction([storeName], "readwrite");
-        const store = transaction.objectStore(storeName);
-        const request = store.clear();
-
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => resolve();
-    });
+  return new Promise((resolve, reject) => {
+    let db;
+    try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
+
+    const tx = db.transaction([storeName], "readwrite");
+    const store = tx.objectStore(storeName);
+    const req = store.clear();
+
+    req.onerror = () => reject(req.error);
+    req.onsuccess = () => resolve();
+  });
 }
 
-(function attachPublicAPI(global) {
-    const root = (global.PrefConfigurator ??= {});
-    const storage = {
-        initDb,
-        saveModel,
-        loadModel,
-        getAllModels,
-        deleteModel,
-        clearAll,
-        downloadFileFromBytes,
+// Borrar modelos expirados usando el índice "expirationTimeStamp"
+export async function cleanExpiredModels(storeName) {
+  return new Promise((resolve, reject) => {
+    let db;
+    try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
+
+    const tx = db.transaction([storeName], "readwrite");
+    const store = tx.objectStore(storeName);
+
+    const index = store.index("expirationTimeStamp");
+    const now = Date.now();
+    const range = IDBKeyRange.upperBound(now);
+    const cursorRequest = index.openCursor(range);
+
+    cursorRequest.onerror = () => reject(cursorRequest.error);
+    cursorRequest.onsuccess = (event) => {
+      const cursor = event.target.result;
+      if (cursor) {
+        cursor.delete();
+        cursor.continue();
+      }
     };
 
-    // versionado del módulo público
-    root.version = root.version ?? "1.0.0";
-    root.storage = Object.freeze(storage);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+// Utilidades opcionales y visibles (para usar en consola)
+export function closeDb() {
+  if (PC.db) {
+    try { PC.db.close(); } catch {}
+    PC.db = null;
+  }
+}
+
+export function deleteDatabase(dbName) {
+  return new Promise((resolve, reject) => {
+    if (PC.db && PC.db.name === dbName) {
+      try { PC.db.close(); } catch {}
+      PC.db = null;
+    }
+    const req = indexedDB.deleteDatabase(dbName);
+    req.onblocked = () => reject(new Error("Delete blocked by another tab or worker"));
+    req.onerror = () => reject(req.error);
+    req.onsuccess = () => resolve();
+  });
+}
+
+// Attach a frozen, public API (no private state)
+(function attachPublicAPI(global) {
+  const storage = {
+    initDb,
+    saveModel,
+    loadModel,
+    getAllModels,
+    deleteModel,
+    clearAll,
+    cleanExpiredModels,
+    downloadFileFromBytes,
+    // extras
+    closeDb,
+    deleteDatabase,
+  };
+  global.PrefConfigurator.storage = Object.freeze(storage);
 })(globalThis);

package/src/index.js

@@ -232,17 +232,21 @@ class PrefViewer extends HTMLElement {
         }
         this.#data.options.camera.changed = options.camera && options.camera !== this.#data.options.camera.value ? true : false;
         this.#data.options.camera.value = this.#data.options.camera.changed ? options.camera : this.#data.options.camera.value;
+        return this.#data.options.camera.changed;
     }
 
     #checkMaterialsChanged(options) {
         if (!options) {
             return false;
         }
+        let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
             this.#data.options.materials[material].changed = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
             this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? options[key] : this.#data.options.materials[material].value;
+            someChanged = someChanged || this.#data.options.materials[material].changed;
         });
+        return someChanged;
     }
 
     #storeChangedFlagsForContainer(container) {
@@ -474,37 +478,45 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
-        containers.forEach((container) => {
-            container.meshes.filter((meshToFilter) => meshToFilter.name.startsWith(optionMaterial.prefix)).forEach((mesh) => { 
-                if (mesh.material) {
-                    mesh.material.dispose();
-                }
-                mesh.material = material;
-            });
-        });
+        let someSetted = false;
+        containers.forEach((container) =>
+            container.meshes
+                .filter((meshToFilter) => meshToFilter.name.startsWith(optionMaterial.prefix))
+                .forEach((mesh) => {
+                    mesh.material = material;
+                    someSetted = true;
+                })
+        );
 
-        return true;
+        return someSetted;
     }
 
     #setOptionsMaterials() {
-        Object.values(this.#data.options.materials).forEach((material) => this.#setOptionsMaterial(material));
+        let someSetted = false;
+        Object.values(this.#data.options.materials).forEach((material) => {
+            let settedMaterial = this.#setOptionsMaterial(material);
+            someSetted = someSetted || settedMaterial;
+        });
+        return someSetted;
     }
 
     #setOptionsCamera() {
         if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.assetContainer.changed)) {
             return false;
         }
+
         let camera = this.#data.containers.model.assetContainer?.cameras.find((cam) => cam.name === this.#data.options.camera.value) || null;
         if (!camera) {
-            camera = this.#camera;
-        } else {
-            camera.metadata = { locked: this.#data.options.camera.locked };
-            if (!this.#data.options.camera.locked) {
-                camera.attachControl(this.#canvas, true);
-            }
+            return false;
         }
 
+        camera.metadata = { locked: this.#data.options.camera.locked };
+        if (!this.#data.options.camera.locked) {
+            camera.attachControl(this.#canvas, true);
+        }
         this.#scene.activeCamera = camera;
+
+        return true;
     }
 
     #addContainer(container) {
@@ -657,7 +669,7 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
-        // AssetContainers
+        // Containers
         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.storage = config.scene?.storage || null;
@@ -673,6 +685,22 @@ class PrefViewer extends HTMLElement {
         this.#initialized && this.#loadContainers(true, true, true);
     }
 
+    setOptions(options) {
+        if (!options) {
+            return false;
+        }
+        let someSetted = false;
+        if (this.#checkCameraChanged(options)) {
+            someSetted = someSetted || this.#setOptionsCamera();
+        }
+        if (this.#checkMaterialsChanged(options)) {
+            someSetted = someSetted || this.#setOptionsMaterials();
+        }
+        this.#resetChangedFlags();
+        debugger;
+        return someSetted;
+    }
+
     loadModel(model) {
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
@@ -717,9 +745,7 @@ class PrefViewer extends HTMLElement {
 
     downloadModelGLB() {
         const fileName = "model";
-        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
-            glb.downloadFiles();
-        });
+        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
     }
 
     downloadModelUSDZ() {
@@ -742,9 +768,7 @@ class PrefViewer extends HTMLElement {
 
     downloadModelAndSceneGLB() {
         const fileName = "scene";
-        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
-            glb.downloadFiles();
-        });
+        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
     }
 }