@preference-sl/pref-viewer 2.13.0-beta.14 → 2.13.0-beta.16

package/package.json

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

package/src/babylonjs-controller.js

@@ -1485,10 +1485,10 @@ export default class BabylonJSController {
      * @returns {void}
      */
     #onKeyUp(event) {
-        // CTRL + ALT + letter
-        if (event.ctrlKey && event.altKey && event.key !== undefined) {
-            switch (event.key.toLowerCase()) {
-                case "d":
+        // CTRL + ALT + letter (uses event.code for physical key, layout-independent — fixes Mac Option+D producing "∂" instead of "d")
+        if (event.ctrlKey && event.altKey && event.code !== undefined) {
+            switch (event.code) {
+                case "KeyD":
                     this.#openDownloadDialog();
                     break;
                 default:
@@ -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/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;