@preference-sl/pref-viewer 2.13.0-beta.13 → 2.13.0-beta.15

package/package.json

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

package/src/babylonjs-controller.js

@@ -2087,7 +2087,7 @@ export default class BabylonJSController {
      * Applies material and camera options, sets wall/floor visibility, and initializes lights and shadows.
      * Returns an object with success status and error details.
      */
-    async #loadContainers() {
+    async #loadContainers(force = false) {
         this.#detachAnimationChangedListener();
         await this.#stopRender();
 
@@ -2096,7 +2096,7 @@ export default class BabylonJSController {
 
         const promiseArray = [];
         Object.values(this.#containers).forEach((container) => {
-            promiseArray.push(this.#loadAssetContainer(container));
+            promiseArray.push(this.#loadAssetContainer(container, force));
         });
 
         let detail = {
@@ -2594,8 +2594,8 @@ export default class BabylonJSController {
      * @public
      * @returns {Promise<boolean>} Resolves to true if loading succeeds, false otherwise.
      */
-    async load() {
-        return await this.#loadContainers();
+    async load(force = false) {
+        return await this.#loadContainers(force);
     }
 
     /**
@@ -2630,11 +2630,13 @@ export default class BabylonJSController {
      * @public
      * @returns {boolean} True if IBL options were set successfully, false otherwise.
      */
-    setIBLOptions() {
-        this.#stopRender();
-        const IBLOptionsSetted = this.#setOptions_IBL();
-        this.#startRender();
-        return IBLOptionsSetted;
+    async setIBLOptions() {
+        await this.#stopRender();
+        try {
+            return await this.#setOptions_IBL();
+        } finally {
+            await this.#startRender();
+        }
     }
 
     /**

package/src/gltf-storage.js

@@ -4,6 +4,8 @@
 const PC = (globalThis.PrefConfigurator ??= {});
 PC.version = PC.version ?? "1.0.1"; // bump if your schema changes!!
 PC.db = PC.db ?? null;
+PC.dbName = PC.dbName ?? null;
+PC.storeName = PC.storeName ?? null;
 
 function _getDbOrThrow() {
     const db = PC.db;
@@ -23,22 +25,50 @@ function _openEnsuringStore(dbName, storeName) {
         }
         open.onupgradeneeded = (ev) => {
             const upgradeDb = ev.target.result;
+            const tx = ev.target.transaction;
 
-            // Eliminar la object store si ya existe
-            if (upgradeDb.objectStoreNames.contains(storeName)) {
-                upgradeDb.deleteObjectStore(storeName);
+            let store;
+            if (!upgradeDb.objectStoreNames.contains(storeName)) {
+                store = upgradeDb.createObjectStore(storeName, { keyPath: 'id' });
+            } else if (tx) {
+                store = tx.objectStore(storeName);
             }
 
-            const store = upgradeDb.createObjectStore(storeName, { keyPath: 'id' });
-            store.createIndex('expirationTimeStamp', 'expirationTimeStamp', { unique: false });
+            if (store && !store.indexNames.contains('expirationTimeStamp')) {
+                store.createIndex('expirationTimeStamp', 'expirationTimeStamp', { unique: false });
+            }
         };
     });
 }
 
+function _isRecoverableDbError(err) {
+    const msg = String(err?.message ?? err ?? "");
+    if (!msg) return false;
+    return msg.includes("Database not initialized") ||
+        msg.includes("The database connection is closing") ||
+        msg.includes("InvalidStateError") ||
+        msg.includes("NotFoundError");
+}
+
+async function _withDbRetry(work) {
+    try {
+        return await work(_getDbOrThrow());
+    } catch (e) {
+        if (!_isRecoverableDbError(e) || !PC.dbName || !PC.storeName) {
+            throw e;
+        }
+        await initDb(PC.dbName, PC.storeName);
+        return await work(_getDbOrThrow());
+    }
+}
+
 // --- public API -------------------------------------------------------------
 
 // Inicializar IndexedDB y dejar el handle en PrefConfigurator.db (público)
 export async function initDb(dbName, storeName) {
+    PC.dbName = dbName;
+    PC.storeName = storeName;
+
     const db = await _openEnsuringStore(dbName, storeName);
     // Close any previous handle to avoid versionchange blocking
     try { PC.db?.close?.(); } catch { }
@@ -54,10 +84,7 @@ export async function initDb(dbName, storeName) {
 
 // Guardar modelo
 export async function saveModel(modelDataStr, storeName) {
-    return new Promise((resolve, reject) => {
-        let db;
-        try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
-
+    return _withDbRetry((db) => new Promise((resolve, reject) => {
         let modelData;
         try { modelData = JSON.parse(modelDataStr); }
         catch (e) { reject(new Error("saveModel: modelDataStr is not valid JSON")); return; }
@@ -74,59 +101,34 @@ export async function saveModel(modelDataStr, storeName) {
 
         req.onerror = () => reject(req.error);
         req.onsuccess = () => resolve();
-    });
+    }));
 }
 
 // Cargar modelo
 export function loadModel(modelId, storeName) {
-    return new Promise((resolve, reject) => {
-        let db;
-        try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
-
+    return _withDbRetry((db) => new Promise((resolve, reject) => {
         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) {
-    let objectURL = null;
     const link = document.createElement("a");
     link.download = fileName;
-    try {
-        const decoded = atob(bytesBase64);
-        const bytes = new Uint8Array(decoded.length);
-        for (let i = 0; i < decoded.length; i++) {
-            bytes[i] = decoded.charCodeAt(i);
-        }
-        const blob = new Blob([bytes], { type: mimeType || "application/octet-stream" });
-        objectURL = URL.createObjectURL(blob);
-        link.href = objectURL;
-    } catch {
-        // Fallback if base64 decoding fails for any reason.
-        link.href = `data:${mimeType};base64,${bytesBase64}`;
-    }
+    link.href = `data:${mimeType};base64,${bytesBase64}`;
     document.body.appendChild(link);
     link.click();
-    link.href = "";
     link.remove();
-    if (objectURL) {
-        setTimeout(() => {
-            URL.revokeObjectURL(objectURL);
-        }, 0);
-    }
 }
 
 // Obtener todos los modelos (solo metadata)
 export async function getAllModels(storeName) {
-    return new Promise((resolve, reject) => {
-        let db;
-        try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
-
+    return _withDbRetry((db) => new Promise((resolve, reject) => {
         const tx = db.transaction([storeName], "readonly");
         const store = tx.objectStore(storeName);
         const req = store.getAll();
@@ -143,45 +145,36 @@ export async function getAllModels(storeName) {
             // keep old behavior: return JSON string
             resolve(JSON.stringify(results));
         };
-    });
+    }));
 }
 
 // Eliminar modelo por id
 export async function deleteModel(modelId, storeName) {
-    return new Promise((resolve, reject) => {
-        let db;
-        try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
-
+    return _withDbRetry((db) => new Promise((resolve, reject) => {
         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 store
 export async function clearAll(storeName) {
-    return new Promise((resolve, reject) => {
-        let db;
-        try { db = _getDbOrThrow(); } catch (e) { reject(e); return; }
-
+    return _withDbRetry((db) => new Promise((resolve, reject) => {
         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; }
-
+    return _withDbRetry((db) => new Promise((resolve, reject) => {
         const tx = db.transaction([storeName], "readwrite");
         const store = tx.objectStore(storeName);
 
@@ -201,7 +194,7 @@ export async function cleanExpiredModels(storeName) {
 
         tx.oncomplete = () => resolve();
         tx.onerror = () => reject(tx.error);
-    });
+    }));
 }
 
 // Utilidades opcionales y visibles (por si las quieres usar en consola)

package/src/pref-viewer-3d.js

@@ -75,6 +75,7 @@ export default class PrefViewer3D extends HTMLElement {
     #isInitialized = false;
     #isLoaded = false;
     #isVisible = false;
+    #lastLoadTimestamp = undefined;
 
     #wrapper = null;
     #canvas = null;
@@ -230,6 +231,27 @@ export default class PrefViewer3D extends HTMLElement {
         this.#babylonJSController.enable();
     }
 
+    /**
+     * Determines whether the next 3D load should bypass cache checks.
+     * @private
+     * @param {object} config - Incoming config payload.
+     * @returns {boolean} True when force reload should be enabled.
+     */
+    #shouldForceReload(config) {
+        if (!config || typeof config !== "object") {
+            return false;
+        }
+        if (config.forceReload === true) {
+            return true;
+        }
+        if (config.timestamp === undefined || config.timestamp === null) {
+            return false;
+        }
+        const changed = config.timestamp !== this.#lastLoadTimestamp;
+        this.#lastLoadTimestamp = config.timestamp;
+        return changed;
+    }
+
     /**
      * Resets update flags for all containers and material/camera options after loading or setting options.
      * @private
@@ -558,6 +580,7 @@ export default class PrefViewer3D extends HTMLElement {
         }
 
         this.#onLoading();
+        const forceReload = this.#shouldForceReload(config);
 
         // Containers
         this.#checkNeedToUpdateContainers(config);
@@ -566,10 +589,10 @@ export default class PrefViewer3D extends HTMLElement {
         if (config.options) {
             this.#checkNeedToUpdateCamera(config.options);
             this.#checkNeedToUpdateMaterials(config.options);
-            this.#checkNeedToUpdateIBL(config.options);
+            await this.#checkNeedToUpdateIBL(config.options);
         }
 
-        const loadDetail = await this.#babylonJSController.load();
+        const loadDetail = await this.#babylonJSController.load(forceReload);
 
         return { ...loadDetail, load: this.#onLoaded() };
     }
@@ -579,9 +602,9 @@ export default class PrefViewer3D extends HTMLElement {
      * Updates internal states, triggers option setting events, and returns the result.
      * @public
      * @param {object} options - Options object containing camera and material settings.
-     * @returns {object} Object containing success status and details of set options.
+     * @returns {Promise<object>} Object containing success status and details of set options.
      */
-    setOptions(options) {
+    async setOptions(options) {
         if (!this.#babylonJSController) {
             return;
         }
@@ -595,8 +618,9 @@ export default class PrefViewer3D extends HTMLElement {
         if (this.#checkNeedToUpdateMaterials(options)) {
             someSetted = someSetted || this.#babylonJSController.setMaterialOptions();
         }
-        if (this.#checkNeedToUpdateIBL(options)) {
-            someSetted = someSetted || this.#babylonJSController.setIBLOptions();
+        const needUpdateIBL = await this.#checkNeedToUpdateIBL(options);
+        if (needUpdateIBL) {
+            someSetted = someSetted || (await this.#babylonJSController.setIBLOptions());
         }
         const detail = this.#onSetOptions();
         return { success: someSetted, detail: detail };

package/src/pref-viewer.js

@@ -81,6 +81,7 @@ export default class PrefViewer extends HTMLElement {
         onViewerHoverStart: null,
         onViewerHoverEnd: null,
         on3DSceneLoaded: null,
+        on3DSceneError: null,
     };
 
     /**
@@ -136,6 +137,9 @@ export default class PrefViewer extends HTMLElement {
                 this.loadMaterials(value);
                 break;
             case "mode":
+                if (typeof value !== "string") {
+                    return;
+                }
                 if (_old === value || value.toLowerCase() === this.#mode) {
                     return;
                 }
@@ -151,6 +155,9 @@ export default class PrefViewer extends HTMLElement {
                 this.setOptions(value);
                 break;
             case "show-model":
+                if (typeof value !== "string") {
+                    return;
+                }
                 if (_old === value) {
                     return;
                 }
@@ -158,6 +165,9 @@ export default class PrefViewer extends HTMLElement {
                 showModel ? this.showModel() : this.hideModel();
                 break;
             case "show-scene":
+                if (typeof value !== "string") {
+                    return;
+                }
                 if (_old === value) {
                     return;
                 }
@@ -213,6 +223,7 @@ export default class PrefViewer extends HTMLElement {
         }
         if (this.#component3D) {
             this.#component3D.removeEventListener("scene-loaded", this.#handlers.on3DSceneLoaded);
+            this.#component3D.removeEventListener("scene-error", this.#handlers.on3DSceneError);
             this.#component3D.remove();
         }
         if (this.#menu3D) {
@@ -249,7 +260,11 @@ export default class PrefViewer extends HTMLElement {
             this.#menu3DSyncSettings();
             this.#menu3D?.setApplying(false);
         };
+        this.#handlers.on3DSceneError = () => {
+            this.#menu3D?.setApplying(false, true);
+        };
         this.#component3D.addEventListener("scene-loaded", this.#handlers.on3DSceneLoaded);
+        this.#component3D.addEventListener("scene-error", this.#handlers.on3DSceneError);
         this.#wrapper.appendChild(this.#component3D);
     }
 
@@ -454,7 +469,14 @@ export default class PrefViewer extends HTMLElement {
      * @returns {void}
      */
     #addTaskToQueue(value, type) {
-        this.#taskQueue.push(new PrefViewerTask(value, type));
+        const task = new PrefViewerTask(value, type);
+        if (
+            task.type === PrefViewerTask.Types.Options ||
+            task.type === PrefViewerTask.Types.Drawing
+        ) {
+            this.#taskQueue = this.#taskQueue.filter((queuedTask) => queuedTask.type !== task.type);
+        }
+        this.#taskQueue.push(task);
         if (this.#isInitialized && !this.#isLoading) {
             this.#processNextTask();
         }
@@ -552,6 +574,32 @@ export default class PrefViewer extends HTMLElement {
         this.dispatchEvent(new CustomEvent("scene-loaded", customEventOptions));
     }
 
+    /**
+     * Handles 3D load errors.
+     * Clears loading state and dispatches a "scene-error" event.
+     * @private
+     * @param {object} [detail] - Optional details about the failure.
+     * @returns {void}
+     */
+    #on3DError(detail) {
+        this.#isLoaded = false;
+        this.#isLoading = false;
+        this.#menu3D?.setApplying(false, true);
+
+        this.removeAttribute("loading-3d");
+        this.removeAttribute("loaded-3d");
+
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        };
+        if (detail) {
+            customEventOptions.detail = detail;
+        }
+        this.dispatchEvent(new CustomEvent("scene-error", customEventOptions));
+    }
+
     /**
      * Handles the start of a 2D loading operation.
      * Updates loading state, sets attributes, and dispatches a "drawing-loading" event.
@@ -598,6 +646,31 @@ export default class PrefViewer extends HTMLElement {
         this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions));
     }
 
+    /**
+     * Handles 2D load errors.
+     * Clears loading state and dispatches a "drawing-error" event.
+     * @private
+     * @param {object} [detail] - Optional details about the failure.
+     * @returns {void}
+     */
+    #on2DError(detail) {
+        this.#isLoaded = false;
+        this.#isLoading = false;
+
+        this.removeAttribute("loading-2d");
+        this.removeAttribute("loaded-2d");
+
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        };
+        if (detail) {
+            customEventOptions.detail = detail;
+        }
+        this.dispatchEvent(new CustomEvent("drawing-error", customEventOptions));
+    }
+
     /**
      * Handles the "drawing-zoom-changed" event from the 2D viewer component.
      * Dispatches a custom "drawing-zoom-changed" event from the PrefViewer element, forwarding the event detail to external listeners.
@@ -640,16 +713,27 @@ export default class PrefViewer extends HTMLElement {
      * @param {object} config - The configuration object to process.
      * @returns {void}
      */
-    #processConfig(config) {
+    async #processConfig(config) {
         if (!this.#component3D) {
+            this.#processNextTask();
             return;
         }
 
         this.#on3DLoading();
-        this.#component3D.load(config).then((detail) => {
-            this.#on3DLoaded(detail);
+        try {
+            const detail = await this.#component3D.load(config);
+            if (detail?.success === false) {
+                this.#on3DError(detail);
+            } else {
+                this.#on3DLoaded(detail);
+            }
+        } catch (error) {
+            this.#on3DError({
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        } finally {
             this.#processNextTask();
-        });
+        }
     }
 
     /**
@@ -670,16 +754,23 @@ export default class PrefViewer extends HTMLElement {
      * @param {object} drawing - The drawing object to process.
      * @returns {void}
      */
-    #processDrawing(drawing) {
+    async #processDrawing(drawing) {
         if (!this.#component2D) {
+            this.#processNextTask();
             return;
         }
 
         this.#on2DLoading();
-        this.#component2D.load(drawing).then((detail) => {
+        try {
+            const detail = await this.#component2D.load(drawing);
             this.#on2DLoaded(detail);
+        } catch (error) {
+            this.#on2DError({
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        } finally {
             this.#processNextTask();
-        });
+        }
     }
 
     /**
@@ -725,15 +816,23 @@ export default class PrefViewer extends HTMLElement {
      * @param {object} options - The options object to process.
      * @returns {void}
      */
-    #processOptions(options) {
+    async #processOptions(options) {
         if (!this.#component3D) {
+            this.#processNextTask();
             return;
         }
 
         this.#on3DLoading();
-        const detail = this.#component3D.setOptions(options);
-        this.#on3DLoaded(detail);
-        this.#processNextTask();
+        try {
+            const detail = await this.#component3D.setOptions(options);
+            this.#on3DLoaded(detail);
+        } catch (error) {
+            this.#on3DError({
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        } finally {
+            this.#processNextTask();
+        }
     }
 
     /**
@@ -745,6 +844,7 @@ export default class PrefViewer extends HTMLElement {
      */
     #processVisibility(config) {
         if (!this.#component3D) {
+            this.#processNextTask();
             return;
         }
         const showModel = config.model?.visible;
@@ -974,7 +1074,7 @@ export default class PrefViewer extends HTMLElement {
      * @returns {void}
      */
     setMode(mode = this.#mode) {
-        mode = mode.toLowerCase();
+        mode = typeof mode === "string" ? mode.toLowerCase() : this.#mode;
         if (mode !== "2d" && mode !== "3d") {
             console.warn(`PrefViewer: invalid mode "${mode}". Allowed modes are "2d" and "3d".`);
             mode = this.#mode;