@preference-sl/pref-viewer 2.10.0-beta.3 → 2.10.0-beta.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.10.0-beta.3",
+  "version": "2.10.0-beta.30",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
@@ -34,10 +34,10 @@
     "index.d.ts"
   ],
   "dependencies": {
-    "@babylonjs/core": "^8.28.2",
-    "@babylonjs/loaders": "^8.28.2",
-    "@babylonjs/serializers": "^8.28.2",
-    "babylonjs-gltf2interface": "^8.28.2"
+    "@babylonjs/core": "^8.31.3",
+    "@babylonjs/loaders": "^8.31.3",
+    "@babylonjs/serializers": "^8.31.3",
+    "babylonjs-gltf2interface": "^8.31.3"
   },
   "devDependencies": {
     "esbuild": "^0.25.10",

package/src/gltf-storage.js

@@ -1,137 +1,214 @@
-// Inicializar IndexedDB
-export async function initDb(dbName, storeName) {
+// wwwroot/js/gltf-storage.js
+
+// Public, inspectable namespace
+const PC = (globalThis.PrefConfigurator ??= {});
+PC.version = PC.version ?? "1.0.1"; // bump if your schema changes!!
+PC.db = PC.db ?? null;
+
+function _getDbOrThrow() {
+    const db = PC.db;
+    if (!db) throw new Error("Database not initialized. Call initDb(...) first.");
+    return db;
+}
+
+// --- internal helpers -------------------------------------------------------
+function _openEnsuringStore(dbName, storeName) {
     return new Promise((resolve, reject) => {
-        const request = indexedDB.open(dbName, 1);
+        const open = indexedDB.open(dbName, 5);
 
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => {
-            window.gltfDB = request.result;
-            resolve();
-        };
+        open.onblocked = () => reject(new Error("Open blocked by another tab or worker"));
+        open.onerror = () => reject(open.error);
+        open.onsuccess = (e) => {
+            resolve(e.target.result);
+        }
+        open.onupgradeneeded = (ev) => {
+            const upgradeDb = ev.target.result;
 
-        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 });
+            // Eliminar la object store si ya existe
+            if (upgradeDb.objectStoreNames.contains(storeName)) {
+                upgradeDb.deleteObjectStore(storeName);
             }
+
+            const store = upgradeDb.createObjectStore(storeName, { keyPath: 'id' });
+            store.createIndex('expirationTimeStamp', 'expirationTimeStamp', { unique: false });
         };
     });
 }
 
+// --- public API -------------------------------------------------------------
+
+// Inicializar IndexedDB y dejar el handle en PrefConfigurator.db (público)
+export async function initDb(dbName, storeName) {
+    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);
+        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,
-            timestamp: new Date().toISOString(),
+            size: (modelData?.data?.length ?? 0)
         };
 
-        const transaction = window.gltfDB.transaction([storeName], "readwrite");
-        const store = transaction.objectStore(storeName);
-        const request = store.put(dataToStore);
+        const tx = db.transaction([storeName], "readwrite");
+        const store = tx.objectStore(storeName);
+        const req = store.put(dataToStore);
 
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => resolve();
+        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");
+        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);
+    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;
-        }
+        let db;
+        try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
 
-        const transaction = window.gltfDB.transaction([storeName], "readonly");
-        const store = transaction.objectStore(storeName);
-        const request = store.getAll();
+        const tx = db.transaction([storeName], "readonly");
+        const store = tx.objectStore(storeName);
+        const req = store.getAll();
 
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => {
-            // Excluir los datos binarios para evitar transferir demasiados datos
-            const results = request.result.map((item) => ({
+        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,
-                type: item.type,
+                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;
-        }
+        let db;
+        try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
 
-        const transaction = window.gltfDB.transaction([storeName], "readwrite");
-        const store = transaction.objectStore(storeName);
-        const request = store.delete(modelId);
+        const tx = db.transaction([storeName], "readwrite");
+        const store = tx.objectStore(storeName);
+        const req = store.delete(modelId);
 
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => resolve();
+        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;
-        }
+        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();
+    });
+}
+
+// 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();
+            }
+        };
+
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+    });
+}
 
-        const transaction = window.gltfDB.transaction([storeName], "readwrite");
-        const store = transaction.objectStore(storeName);
-        const request = store.clear();
+// Utilidades opcionales y visibles (por si las quieres usar en consola)
+export function closeDb() {
+    if (PC.db) {
+        try { PC.db.close(); } catch { }
+        PC.db = null;
+    }
+}
 
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => resolve();
+export function deleteDatabase(dbName) {
+    return new Promise((resolve, reject) => {
+        // Close current handle if points to this DB
+        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 root = (global.PrefConfigurator ??= {});
     const storage = {
         initDb,
         saveModel,
@@ -139,10 +216,12 @@ export async function clearAll(storeName) {
         getAllModels,
         deleteModel,
         clearAll,
+        cleanExpiredModels,
         downloadFileFromBytes,
+        // extras
+        closeDb,
+        deleteDatabase,
     };
-
-    // versionado del módulo público
-    root.version = root.version ?? "1.0.0";
-    root.storage = Object.freeze(storage);
+    // free to inspect PC.db in devtools
+    global.PrefConfigurator.storage = Object.freeze(storage);
 })(globalThis);