@preference-sl/pref-viewer 2.10.0-beta.28 → 2.10.0-beta.29

package/package.json

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

package/src/index.js

@@ -46,10 +46,40 @@ import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
 import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
 import { initDb, loadModel } from "./gltf-storage.js";
 
+class PrefViewerTask {
+    static Types = Object.freeze({
+        Config: "config",
+        Environment: "environment",
+        Materials: "materials",
+        Model: "model",
+        Options: "options",
+    });
+
+    /**
+     * value: any payload for the task
+     * type: must match one of PrefViewerTask.Types values (case-insensitive)
+     */
+    constructor(value, type) {
+        this.value = value;
+
+        const t = typeof type === "string" ? type.toLowerCase() : String(type).toLowerCase();
+        const allowed = Object.values(PrefViewerTask.Types);
+        if (!allowed.includes(t)) {
+            throw new TypeError(
+                `PrefViewerTask: invalid type "${type}". Allowed types: ${allowed.join(", ")}`
+            );
+        }
+        this.type = t;
+
+        Object.freeze(this);
+    }
+}
+
 class PrefViewer extends HTMLElement {
     initialized = false;
     loaded = false;
     loading = false;
+    #taskQueue = [];
 
     #data = {
         containers: {
@@ -162,6 +192,12 @@ class PrefViewer extends HTMLElement {
             case "scene":
                 this.loadScene(value);
                 break;
+            case "materials":
+                this.loadMaterials(value);
+                break;
+            case "options":
+                this.setOptions(value);
+                break;
             case "show-model":
                 data = value.toLowerCase?.() === "true";
                 if (this.initialized) {
@@ -198,7 +234,7 @@ class PrefViewer extends HTMLElement {
 
         this.#initializeBabylon();
         this.initialized = true;
-        this.#loadContainers(true, true, true);
+        this.#processNextTask();
     }
 
     disconnectedCallback() {
@@ -228,7 +264,7 @@ class PrefViewer extends HTMLElement {
         this.shadowRoot.append(this.#wrapper);
     }
 
-    #setStatusSceneLoading() {
+    #setStatusLoading() {
         this.loaded = false;
         this.loading = true;
         if (this.hasAttribute("loaded")) {
@@ -242,12 +278,10 @@ class PrefViewer extends HTMLElement {
                 composed: true,
             })
         );
+        this.#engine.stopRenderLoop(this.#renderLoop);
     }
 
-    #setStatusSceneLoaded() {
-        this.loaded = true;
-        this.loading = false;
-
+    async #setStatusLoaded() {
         const toLoadDetail = {
             container_model: !!this.#data.containers.model.changed.pending,
             container_environment: !!this.#data.containers.environment.changed.pending,
@@ -268,16 +302,11 @@ class PrefViewer extends HTMLElement {
             options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.success,
             options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.success,
         };
-
         const detail = {
             tried: toLoadDetail,
             success: loadedDetail,
         };
-
-        if (this.hasAttribute("loading")) {
-            this.removeAttribute("loading");
-        }
-        this.setAttribute("loaded", "");
+        
         this.dispatchEvent(
             new CustomEvent("scene-loaded", {
                 bubbles: true,
@@ -286,49 +315,21 @@ class PrefViewer extends HTMLElement {
                 detail: detail,
             })
         );
-        this.#resetChangedFlags();
-    }
 
-    #setStatusOptionsLoading() {
-        this.dispatchEvent(
-            new CustomEvent("options-loading", {
-                bubbles: true,
-                cancelable: false,
-                composed: true,
-            })
-        );
-    }
+        await this.#scene.whenReadyAsync();
+        this.#engine.runRenderLoop(this.#renderLoop);
+        
+        this.#resetChangedFlags();
 
-    #setStatusOptionsLoaded() {
-        const toLoadDetail = {
-            camera: !!this.#data.options.camera.changed.pending,
-            innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
-            outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
-            innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
-            outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
-        };
-        const loadedDetail = {
-            camera: !!this.#data.options.camera.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,
-        };
+        if (this.hasAttribute("loading")) {
+            this.removeAttribute("loading");
+        }
+        this.setAttribute("loaded", "");
 
-        const detail = {
-            tried: toLoadDetail,
-            success: loadedDetail,
-        };
+        this.loaded = true;
+        this.loading = false;
 
-        this.dispatchEvent(
-            new CustomEvent("options-loaded", {
-                bubbles: true,
-                cancelable: false,
-                composed: true,
-                detail: detail,
-            })
-        );
-        this.#resetChangedFlags();
+        this.#processNextTask();
     }
 
     // Data
@@ -771,17 +772,23 @@ class PrefViewer extends HTMLElement {
     }
 
     #addContainer(container) {
-        if (container.assetContainer && !container.visible && container.show) {
-            container.assetContainer.addAllToScene();
-            container.visible = true;
+        if (!container.assetContainer || container.visible || !container.show) {
+            return false;
         }
+
+        container.assetContainer.addAllToScene();
+        container.visible = true;
+        return true;
     }
 
     #removeContainer(container) {
-        if (container.assetContainer && container.visible) {
-            container.assetContainer.removeAllFromScene();
-            container.visible = false;
+        if (!container.assetContainer || !container.visible) {
+            return false;
         }
+
+        container.assetContainer.removeAllFromScene();
+        container.visible = false;
+        return true;
     }
 
     #replaceContainer(container, newAssetContainer) {
@@ -793,6 +800,7 @@ class PrefViewer extends HTMLElement {
         this.#scene.getEngine().releaseEffects();
         container.assetContainer = newAssetContainer;
         this.#addContainer(container);
+        return true;
     }
 
     async #loadAssetContainer(container) {
@@ -864,7 +872,6 @@ class PrefViewer extends HTMLElement {
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
-        this.#setStatusSceneLoading();
         this.#engine.stopRenderLoop(this.#renderLoop);
 
         const promiseArray = [];
@@ -873,7 +880,7 @@ class PrefViewer extends HTMLElement {
         promiseArray.push(loadMaterials ? this.#loadAssetContainer(this.#data.containers.materials) : false);
 
         Promise.allSettled(promiseArray)
-            .then(async (values) => {
+            .then((values) => {
                 const modelContainer = values[0];
                 const environmentContainer = values[1];
                 const materialsContainer = values[2];
@@ -906,7 +913,6 @@ class PrefViewer extends HTMLElement {
                     this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
                 }
 
-                await this.#scene.whenReadyAsync();
                 this.#setOptionsMaterials();
                 this.#setOptionsCamera();
                 this.#setVisibilityOfWallAndFloorInModel();
@@ -923,24 +929,51 @@ class PrefViewer extends HTMLElement {
                     })
                 );
             })
-            .finally(() => {
+            .finally(async () => {
                 this.#setMaxSimultaneousLights();
                 this.#initShadows();
-                this.#setStatusSceneLoaded();
-                this.#engine.runRenderLoop(this.#renderLoop);
+                await this.#setStatusLoaded();
             });
     }
 
-    // Public Methods
-    loadConfig(config) {
-        config = typeof config === "string" ? JSON.parse(config) : config;
-        if (!config) {
+    // Tasks
+    #addTaskToQueue(value, type) {
+        this.#taskQueue.push(new PrefViewerTask(value, type));
+        if (this.initialized && !this.loading) {
+            this.#processNextTask();
+        }
+    }
+
+    #processNextTask() {
+        if (!this.#taskQueue.length) {
             return false;
         }
+        const task = this.#taskQueue[0];
+        this.#taskQueue.shift();
+        switch (task.type) {
+            case PrefViewerTask.Types.Config:
+                this.#processConfig(task.value);
+                break;
+            case PrefViewerTask.Types.Model:
+                this.#processModel(task.value);
+                break;
+            case PrefViewerTask.Types.Environment:
+                this.#processEnvironment(task.value);
+                break;
+            case PrefViewerTask.Types.Materials:
+                this.#processMaterials(task.value);
+                break;
+            case PrefViewerTask.Types.Options:
+                this.#processOptions(task.value);
+                break;
+        }
+    }
+
+    #processConfig(config) {
+        this.#setStatusLoading();
 
         // Containers
         const loadModel = !!config.model?.storage;
-        // CHANGED: marcar pending, no boolean
         this.#data.containers.model.changed.pending = loadModel;
         this.#data.containers.model.changed.success = false;
         this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
@@ -966,15 +999,49 @@ class PrefViewer extends HTMLElement {
             this.#checkMaterialsChanged(config.options);
         }
 
-        this.initialized && this.#loadContainers(loadModel, loadEnvironment, loadMaterials);
+        this.#loadContainers(loadModel, loadEnvironment, loadMaterials);
     }
 
-    setOptions(options) {
-        if (!options) {
-            return false;
-        }
+    #processModel(model) {
+        this.#setStatusLoading();
+
+        const loadModel = !!model.storage;
+        this.#data.containers.model.changed.pending = loadModel;
+        this.#data.containers.model.changed.success = false;
+        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
+        this.#data.containers.model.storage = loadModel ? model.storage : this.#data.containers.model.storage;
+        this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
+
+        this.initialized && this.#loadContainers(loadModel, false, false);
+    }
+
+    #processEnvironment(environment) {
+        this.#setStatusLoading();
+
+        const loadEnvironment = !!environment.storage;
+        this.#data.containers.environment.changed.pending = loadEnvironment;
+        this.#data.containers.environment.changed.success = false;
+        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
+        this.#data.containers.environment.storage = loadEnvironment ? environment.storage : this.#data.containers.environment.storage;
+        this.#data.containers.environment.show = environment.visible !== undefined ? environment.visible : this.#data.containers.environment.show;
+
+        this.#loadContainers(false, loadEnvironment, false);
+    }
+
+    #processMaterials(materials) {
+        this.#setStatusLoading();
+
+        const loadMaterials = !!materials.storage;
+        this.#data.containers.materials.changed.pending = loadMaterials;
+        this.#data.containers.materials.changed.success = false;
+        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
+        this.#data.containers.materials.storage = loadMaterials ? materials.storage : this.#data.containers.materials.storage;
+
+        this.#loadContainers(false, false, loadMaterials);
+    }
 
-        this.#setStatusOptionsLoading();
+    async #processOptions(options) {
+        this.#setStatusLoading();
 
         let someSetted = false;
         if (this.#checkCameraChanged(options)) {
@@ -983,24 +1050,27 @@ class PrefViewer extends HTMLElement {
         if (this.#checkMaterialsChanged(options)) {
             someSetted = someSetted || this.#setOptionsMaterials();
         }
-
-        this.#setStatusOptionsLoaded();
+        
+        await this.#setStatusLoaded();
 
         return someSetted;
     }
 
+    // Public Methods
+    loadConfig(config) {
+        config = typeof config === "string" ? JSON.parse(config) : config;
+        if (!config) {
+            return false;
+        }
+        this.#addTaskToQueue(config, "config");
+    }
+
     loadModel(model) {
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
             return false;
         }
-        const loadModel = !!model.storage;
-        this.#data.containers.model.changed.pending = loadModel;
-        this.#data.containers.model.changed.success = false;
-        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
-        this.#data.containers.model.storage = loadModel ? model.storage : this.#data.containers.model.storage;
-        this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
-        this.initialized && this.#loadContainers(loadModel, false, false);
+        this.#addTaskToQueue(model, "model");
     }
 
     loadScene(scene) {
@@ -1008,13 +1078,7 @@ class PrefViewer extends HTMLElement {
         if (!scene) {
             return false;
         }
-        const loadEnvironment = !!scene.storage;
-        this.#data.containers.environment.changed.pending = loadEnvironment;
-        this.#data.containers.environment.changed.success = false;
-        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
-        this.#data.containers.environment.storage = loadEnvironment ? scene.storage : this.#data.containers.environment.storage;
-        this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
-        this.initialized && this.#loadContainers(false, loadEnvironment, false);
+        this.#addTaskToQueue(scene, "environment");
     }
 
     loadMaterials(materials) {
@@ -1022,12 +1086,15 @@ class PrefViewer extends HTMLElement {
         if (!materials) {
             return false;
         }
-        const loadMaterials = !!materials.storage;
-        this.#data.containers.materials.changed.pending = loadMaterials;
-        this.#data.containers.materials.changed.success = false;
-        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
-        this.#data.containers.materials.storage = loadMaterials ? materials.storage : this.#data.containers.materials.storage;
-        this.initialized && this.#loadContainers(false, false, loadMaterials);
+        this.#addTaskToQueue(materials, "materials");
+    }
+
+    setOptions(options) {
+        options = typeof options === "string" ? JSON.parse(options) : options;
+        if (!options) {
+            return false;
+        }
+        this.#addTaskToQueue(options, "options");
     }
 
     showModel() {