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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.10.0-beta.27",
+  "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

@@ -22,7 +22,7 @@
  *     style="width:800px; height:600px;">
  * </pref-viewer>
  * ```
- * 
+ *
  * Load scene a URL:
  * ```html
  * <pref-viewer
@@ -46,16 +46,46 @@ 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: {
             model: {
                 name: "model",
-                container: null,
+                assetContainer: null,
                 show: true,
                 storage: null,
                 visible: false,
@@ -65,7 +95,7 @@ class PrefViewer extends HTMLElement {
             },
             environment: {
                 name: "environment",
-                container: null,
+                assetContainer: null,
                 show: true,
                 storage: null,
                 visible: false,
@@ -75,7 +105,7 @@ class PrefViewer extends HTMLElement {
             },
             materials: {
                 name: "materials",
-                container: null,
+                assetContainer: null,
                 storage: null,
                 show: true,
                 visible: false,
@@ -88,28 +118,28 @@ class PrefViewer extends HTMLElement {
             camera: {
                 value: null,
                 locked: true,
-                changed: { pending: false, success: false, oldValue: null, oldLocked: true },
+                changed: { pending: false, success: false },
             },
             materials: {
                 innerWall: {
                     value: null,
                     prefix: "innerWall",
-                    changed: { pending: false, success: false, oldValue: null },
+                    changed: { pending: false, success: false },
                 },
                 outerWall: {
                     value: null,
                     prefix: "outerWall",
-                    changed: { pending: false, success: false, oldValue: null },
+                    changed: { pending: false, success: false },
                 },
                 innerFloor: {
                     value: null,
                     prefix: "innerFloor",
-                    changed: { pending: false, success: false, oldValue: null },
+                    changed: { pending: false, success: false },
                 },
                 outerFloor: {
                     value: null,
                     prefix: "outerFloor",
-                    changed: { pending: false, success: false, oldValue: null },
+                    changed: { pending: false, success: false },
                 },
             },
         },
@@ -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
@@ -342,8 +343,8 @@ class PrefViewer extends HTMLElement {
         this.#data.options.camera.changed.pending = changed;
         this.#data.options.camera.changed.success = false;
         if (changed) {
-            this.#data.options.camera.changed.oldValue = prev;
-            this.#data.options.camera.changed.oldLocked = this.#data.options.camera.locked;
+            this.#data.options.camera.changed.value = prev;
+            this.#data.options.camera.changed.locked = this.#data.options.camera.locked;
             this.#data.options.camera.value = options.camera;
         }
         return changed;
@@ -359,15 +360,15 @@ class PrefViewer extends HTMLElement {
             const state = this.#data.options.materials[material];
             const prev = state.value;
             const incoming = options[key];
-            const materialChanged = !!incoming && incoming !== prev;
+            const changed = !!incoming && incoming !== prev;
 
-            state.changed.pending = materialChanged;
+            state.changed.pending = changed;
             state.changed.success = false;
-            if (materialChanged) {
-                state.changed.oldValue = prev;
+            if (changed) {
+                state.changed.value = prev;
                 state.value = incoming;
             }
-            someChanged = someChanged || materialChanged;
+            someChanged = someChanged || changed;
         });
         return someChanged;
     }
@@ -377,18 +378,14 @@ class PrefViewer extends HTMLElement {
             container.timeStamp = container.changed.timeStamp;
             container.size = container.changed.size;
             container.changed.success = true;
-            container.changed.pending = false;
         } else {
             container.changed.success = false;
-            container.changed.pending = false;
         }
     }
 
     #resetChangedFlags() {
         const reset = (node) => {
-            if (!node.changed) node.changed = {};
-            node.changed.pending = false;
-            node.changed.success = false;
+            node.changed = { pending: false, success: false };
         };
         Object.values(this.#data.containers).forEach(reset);
         Object.values(this.#data.options.materials).forEach(reset);
@@ -723,11 +720,9 @@ class PrefViewer extends HTMLElement {
 
         if (someSetted) {
             optionMaterial.changed.success = true;
-            optionMaterial.changed.pending = false;
         } else if (optionMaterial.changed.pending) {
-            optionMaterial.value = optionMaterial.changed.oldValue;
+            optionMaterial.value = optionMaterial.changed.value;
             optionMaterial.changed.success = false;
-            optionMaterial.changed.pending = false;
         }
 
         return someSetted;
@@ -743,38 +738,30 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsCamera() {
-        if (
-            !this.#data.options.camera.value &&
-            !this.#data.options.camera.changed.pending &&
-            !this.#data.containers.model.changed.pending &&
-            !this.#data.containers.environment.changed.pending
-        ) {
+        if (!this.#data.options.camera.value && !this.#data.options.camera.changed.pending && !this.#data.containers.model.changed.pending && !this.#data.containers.environment.changed.pending) {
             return false;
         }
 
         let camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || null;
         if (!camera) {
-            if (this.#data.options.camera.changed?.oldValue && this.#data.options.camera.changed?.oldValue !== this.#data.options.camera.value) {
-                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.oldValue) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.oldValue) || null;
+            if (this.#data.options.camera.changed.value && this.#data.options.camera.changed.value !== this.#data.options.camera.value) {
+                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || null;
             }
             if (camera) {
-                camera.metadata = { locked: this.#data.options.camera.changed.oldLocked };
-                this.#data.options.camera.value = this.#data.options.camera.changed.oldValue;
-                this.#data.options.camera.locked = this.#data.options.camera.changed.oldLocked;
+                camera.metadata = { locked: this.#data.options.camera.changed.locked };
+                this.#data.options.camera.value = this.#data.options.camera.changed.value;
+                this.#data.options.camera.locked = this.#data.options.camera.changed.locked;
                 this.#data.options.camera.changed.success = false;
-                this.#data.options.camera.changed.pending = false;
             } else {
                 camera = this.#camera;
                 this.#data.options.camera.value = null;
                 this.#data.options.camera.locked = this.#camera.metadata.locked;
                 this.#data.options.camera.changed.success = false;
-                this.#data.options.camera.changed.pending = false;
             }
         } else {
             camera.metadata = { locked: this.#data.options.camera.locked };
             if (this.#data.options.camera.changed.pending) {
                 this.#data.options.camera.changed.success = true;
-                this.#data.options.camera.changed.pending = false;
             }
         }
         if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
@@ -785,27 +772,35 @@ 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) {
         if (container.assetContainer) {
+            this.#removeContainer(container);
             container.assetContainer.dispose();
             container.assetContainer = null;
         }
         this.#scene.getEngine().releaseEffects();
         container.assetContainer = newAssetContainer;
         this.#addContainer(container);
+        return true;
     }
 
     async #loadAssetContainer(container) {
@@ -822,11 +817,10 @@ class PrefViewer extends HTMLElement {
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
             if (object.timeStamp === container.timeStamp) {
-                container.changed.pending = false;
-                container.changed.success = false;
+                container.changed = { pending: false, success: false };
                 return false;
             } else {
-                Object.assign(container.changed, { timeStamp: object.timeStamp, size: object.size, success: false, pending: true });
+                container.changed = { pending: true, size: object.size, success: false, timeStamp: object.timeStamp };
             }
         }
 
@@ -843,11 +837,10 @@ class PrefViewer extends HTMLElement {
             });
             if (!container.changed.pending) {
                 if (container.timeStamp === null && container.size === size) {
-                    container.changed.pending = false;
-                    container.changed.success = false;
+                    container.changed = { pending: false, success: false };
                     return false;
                 } else {
-                    Object.assign(container.changed, { timeStamp: null, size: size, success: false, pending: true });
+                    container.changed = { pending: true, size: size, success: false, timeStamp: null };
                 }
             }
         } else {
@@ -855,11 +848,10 @@ class PrefViewer extends HTMLElement {
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
             const [fileSize, fileTimeStamp] = await this.#getServerFileDataHeader(source);
             if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
-                container.changed.pending = false;
-                container.changed.success = false;
+                container.changed = { pending: false, success: false };
                 return false;
             } else {
-                Object.assign(container.changed, { timeStamp: fileTimeStamp, size: fileSize, success: false, pending: true });
+                container.changed = { pending: true, size: fileSize, success: false, timeStamp: fileTimeStamp };
             }
         }
 
@@ -868,7 +860,9 @@ class PrefViewer extends HTMLElement {
             pluginExtension: extension,
             pluginOptions: {
                 gltf: {
+                    compileMaterials: true,
                     loadAllMaterials: true,
+                    loadOnlyMaterials: container.name === "materials",
                     preprocessUrlAsync: this.#transformUrl,
                 },
             },
@@ -878,7 +872,6 @@ class PrefViewer extends HTMLElement {
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
-        this.#setStatusSceneLoading();
         this.#engine.stopRenderLoop(this.#renderLoop);
 
         const promiseArray = [];
@@ -887,21 +880,19 @@ 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];
 
-                this.#removeContainer(this.#data.containers.model);
-                this.#removeContainer(this.#data.containers.environment);
-                this.#removeContainer(this.#data.containers.materials);
-
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
                     modelContainer.value.lights = [];
                     this.#replaceContainer(this.#data.containers.model, modelContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.model, true);
                 } else {
-                    this.#addContainer(this.#data.containers.model);
+                    if (this.#data.containers.model.assetContainer && this.#data.containers.model.show !== this.#data.containers.model.visible) {
+                        this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
+                    }
                     this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
                 }
 
@@ -909,7 +900,9 @@ class PrefViewer extends HTMLElement {
                     this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
                 } else {
-                    this.#addContainer(this.#data.containers.environment);
+                    if (this.#data.containers.environment.assetContainer && this.#data.containers.environment.show !== this.#data.containers.environment.visible) {
+                        this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
+                    }
                     this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
                 }
 
@@ -917,7 +910,6 @@ class PrefViewer extends HTMLElement {
                     this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.materials, true);
                 } else {
-                    this.#addContainer(this.#data.containers.materials);
                     this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
                 }
 
@@ -937,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;
@@ -980,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.#setStatusOptionsLoading();
+        this.#loadContainers(false, false, loadMaterials);
+    }
+
+    async #processOptions(options) {
+        this.#setStatusLoading();
 
         let someSetted = false;
         if (this.#checkCameraChanged(options)) {
@@ -997,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) {
@@ -1022,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) {
@@ -1036,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() {