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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.10.0-beta.26",
+  "version": "2.10.0-beta.28",
   "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
@@ -55,61 +55,61 @@ class PrefViewer extends HTMLElement {
         containers: {
             model: {
                 name: "model",
-                container: null,
+                assetContainer: null,
                 show: true,
                 storage: null,
                 visible: false,
                 size: null,
                 timeStamp: null,
-                changed: false,
+                changed: { pending: false, success: false },
             },
             environment: {
                 name: "environment",
-                container: null,
+                assetContainer: null,
                 show: true,
                 storage: null,
                 visible: false,
                 size: null,
                 timeStamp: null,
-                changed: false,
+                changed: { pending: false, success: false },
             },
             materials: {
                 name: "materials",
-                container: null,
+                assetContainer: null,
                 storage: null,
                 show: true,
                 visible: false,
                 size: null,
                 timeStamp: null,
-                changed: false,
+                changed: { pending: false, success: false },
             },
         },
         options: {
             camera: {
                 value: null,
                 locked: true,
-                changed: false,
+                changed: { pending: false, success: false },
             },
             materials: {
                 innerWall: {
                     value: null,
                     prefix: "innerWall",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 outerWall: {
                     value: null,
                     prefix: "outerWall",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 innerFloor: {
                     value: null,
                     prefix: "innerFloor",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 outerFloor: {
                     value: null,
                     prefix: "outerFloor",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
             },
         },
@@ -249,24 +249,24 @@ class PrefViewer extends HTMLElement {
         this.loading = false;
 
         const toLoadDetail = {
-            container_model: !!this.#data.containers.model.changed,
-            container_environment: !!this.#data.containers.environment.changed,
-            container_materials: !!this.#data.containers.materials.changed,
-            options_camera: !!this.#data.options.camera.changed,
-            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed,
-            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed,
-            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed,
-            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed,
+            container_model: !!this.#data.containers.model.changed.pending,
+            container_environment: !!this.#data.containers.environment.changed.pending,
+            container_materials: !!this.#data.containers.materials.changed.pending,
+            options_camera: !!this.#data.options.camera.changed.pending,
+            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
+            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
+            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
+            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
         };
         const loadedDetail = {
-            container_model: !!this.#data.containers.model.changed?.success,
-            container_environment: !!this.#data.containers.environment.changed?.success,
-            container_materials: !!this.#data.containers.materials.changed?.success,
-            options_camera: !!this.#data.options.camera.changed?.success,
-            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed?.success,
-            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed?.success,
-            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed?.success,
-            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed?.success,
+            container_model: !!this.#data.containers.model.changed.success,
+            container_environment: !!this.#data.containers.environment.changed.success,
+            container_materials: !!this.#data.containers.materials.changed.success,
+            options_camera: !!this.#data.options.camera.changed.success,
+            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.success,
+            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.success,
+            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.success,
+            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.success,
         };
 
         const detail = {
@@ -301,18 +301,18 @@ class PrefViewer extends HTMLElement {
 
     #setStatusOptionsLoaded() {
         const toLoadDetail = {
-            camera: !!this.#data.options.camera.changed,
-            innerWallMaterial: !!this.#data.options.materials.innerWall.changed,
-            outerWallMaterial: !!this.#data.options.materials.outerWall.changed,
-            innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed,
-            outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed,
+            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,
+            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,
         };
 
         const detail = {
@@ -336,10 +336,17 @@ class PrefViewer extends HTMLElement {
         if (!options || !options.camera) {
             return false;
         }
-        const cameraChanged = options.camera && options.camera !== this.#data.options.camera.value ? true : false;
-        this.#data.options.camera.changed = cameraChanged ? { oldValue: this.#data.options.camera.value, success: false } : false;
-        this.#data.options.camera.value = cameraChanged ? options.camera : this.#data.options.camera.value;
-        return cameraChanged;
+        const prev = this.#data.options.camera.value;
+        const changed = options.camera !== prev;
+
+        this.#data.options.camera.changed.pending = changed;
+        this.#data.options.camera.changed.success = false;
+        if (changed) {
+            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;
     }
 
     #checkMaterialsChanged(options) {
@@ -349,10 +356,18 @@ class PrefViewer extends HTMLElement {
         let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
-            const materialChanged = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
-            this.#data.options.materials[material].changed = materialChanged ? { oldValue: this.#data.options.materials[material].value, success: false } : false;
-            this.#data.options.materials[material].value = materialChanged ? options[key] : this.#data.options.materials[material].value;
-            someChanged = someChanged || this.#data.options.materials[material].changed;
+            const state = this.#data.options.materials[material];
+            const prev = state.value;
+            const incoming = options[key];
+            const changed = !!incoming && incoming !== prev;
+
+            state.changed.pending = changed;
+            state.changed.success = false;
+            if (changed) {
+                state.changed.value = prev;
+                state.value = incoming;
+            }
+            someChanged = someChanged || changed;
         });
         return someChanged;
     }
@@ -361,19 +376,19 @@ class PrefViewer extends HTMLElement {
         if (success) {
             container.timeStamp = container.changed.timeStamp;
             container.size = container.changed.size;
-            container.changed.success = success;
-        } else if (container.changed) {
-            container.source = container.changed.source;
-            container.changed = false;
+            container.changed.success = true;
         } else {
-            container.changed = false;
+            container.changed.success = false;
         }
     }
 
     #resetChangedFlags() {
-        Object.values(this.#data.containers).forEach((container) => (container.changed = false));
-        Object.values(this.#data.options.materials).forEach((material) => (material.changed = false));
-        this.#data.options.camera.changed = false;
+        const reset = (node) => {
+            node.changed = { pending: false, success: false };
+        };
+        Object.values(this.#data.containers).forEach(reset);
+        Object.values(this.#data.options.materials).forEach(reset);
+        reset(this.#data.options.camera);
     }
 
     // Babylon.js
@@ -646,7 +661,7 @@ class PrefViewer extends HTMLElement {
         try {
             JSON.parse(decoded);
             isJson = true;
-        } catch {}
+        } catch { }
         extension = isJson ? ".gltf" : ".glb";
         const type = isJson ? "model/gltf+json" : "model/gltf-binary";
         const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
@@ -675,17 +690,17 @@ class PrefViewer extends HTMLElement {
         if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
             return false;
         }
-        
+
         const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
         if (!material) {
             return false;
         }
-        
+
         const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed || this.#data.containers.materials.changed || optionMaterial.changed)) {
+        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
             containers.push(this.#data.containers.model.assetContainer);
         }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed || this.#data.containers.materials.changed || optionMaterial.changed)) {
+        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
             containers.push(this.#data.containers.environment.assetContainer);
         }
         if (containers.length === 0) {
@@ -704,8 +719,9 @@ class PrefViewer extends HTMLElement {
 
         if (someSetted) {
             optionMaterial.changed.success = true;
-        } else {
-            optionMaterial.value = optionMaterial.changed.oldValue;
+        } else if (optionMaterial.changed.pending) {
+            optionMaterial.value = optionMaterial.changed.value;
+            optionMaterial.changed.success = false;
         }
 
         return someSetted;
@@ -721,27 +737,31 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsCamera() {
-        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.changed && !this.#data.containers.environment.changed)) {
+        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 === his.#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;
             } 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.success = false;
         } else {
             camera.metadata = { locked: this.#data.options.camera.locked };
+            if (this.#data.options.camera.changed.pending) {
+                this.#data.options.camera.changed.success = true;
+            }
         }
         if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
             camera.attachControl(this.#canvas, true);
@@ -766,6 +786,7 @@ class PrefViewer extends HTMLElement {
 
     #replaceContainer(container, newAssetContainer) {
         if (container.assetContainer) {
+            this.#removeContainer(container);
             container.assetContainer.dispose();
             container.assetContainer = null;
         }
@@ -788,10 +809,10 @@ class PrefViewer extends HTMLElement {
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
             if (object.timeStamp === container.timeStamp) {
-                container.changed = false;
+                container.changed = { pending: false, success: false };
                 return false;
             } else {
-                Object.assign(container.changed, { timeStamp: object.timeStamp, size: object.size, success: false });
+                container.changed = { pending: true, size: object.size, success: false, timeStamp: object.timeStamp };
             }
         }
 
@@ -806,12 +827,12 @@ class PrefViewer extends HTMLElement {
             file = new File([blob], `${container.name}${extension}`, {
                 type: blob.type,
             });
-            if (!container.changed) {
+            if (!container.changed.pending) {
                 if (container.timeStamp === null && container.size === size) {
-                    container.changed = false;
+                    container.changed = { pending: false, success: false };
                     return false;
                 } else {
-                    Object.assign(container.changed, { timeStamp: null, size: size, success: false });
+                    container.changed = { pending: true, size: size, success: false, timeStamp: null };
                 }
             }
         } else {
@@ -819,10 +840,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 = false;
+                container.changed = { pending: false, success: false };
                 return false;
             } else {
-                Object.assign(container.changed, { timeStamp: fileTimeStamp, size: fileSize, success: false });
+                container.changed = { pending: true, size: fileSize, success: false, timeStamp: fileTimeStamp };
             }
         }
 
@@ -831,7 +852,9 @@ class PrefViewer extends HTMLElement {
             pluginExtension: extension,
             pluginOptions: {
                 gltf: {
+                    compileMaterials: true,
                     loadAllMaterials: true,
+                    loadOnlyMaterials: container.name === "materials",
                     preprocessUrlAsync: this.#transformUrl,
                 },
             },
@@ -855,16 +878,14 @@ class PrefViewer extends HTMLElement {
                 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);
                 }
 
@@ -872,7 +893,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);
                 }
 
@@ -880,10 +903,10 @@ 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);
                 }
 
+                await this.#scene.whenReadyAsync();
                 this.#setOptionsMaterials();
                 this.#setOptionsCamera();
                 this.#setVisibilityOfWallAndFloorInModel();
@@ -917,17 +940,24 @@ class PrefViewer extends HTMLElement {
 
         // Containers
         const loadModel = !!config.model?.storage;
-        this.#data.containers.model.changed = loadModel ? { storage: this.#data.containers.model.storage } : false;
+        // 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;
         this.#data.containers.model.storage = loadModel ? config.model.storage : this.#data.containers.model.storage;
         this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
 
         const loadEnvironment = !!config.scene?.storage;
-        this.#data.containers.environment.changed = loadEnvironment ? { storage: this.#data.containers.environment.storage } : false;
+        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 ? config.scene.storage : this.#data.containers.environment.storage;
         this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
 
         const loadMaterials = !!config.materials?.storage;
-        this.#data.containers.materials.changed = loadMaterials ? { storage: this.#data.containers.materials.storage } : false;
+        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 ? config.materials.storage : this.#data.containers.materials.storage;
 
         // Options
@@ -965,7 +995,9 @@ class PrefViewer extends HTMLElement {
             return false;
         }
         const loadModel = !!model.storage;
-        this.#data.containers.model.changed = loadModel ? { storage: this.#data.containers.model.storage } : false;
+        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);
@@ -977,7 +1009,9 @@ class PrefViewer extends HTMLElement {
             return false;
         }
         const loadEnvironment = !!scene.storage;
-        this.#data.containers.environment.changed = loadEnvironment ? { storage: this.#data.containers.environment.storage } : false;
+        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);
@@ -989,7 +1023,9 @@ class PrefViewer extends HTMLElement {
             return false;
         }
         const loadMaterials = !!materials.storage;
-        this.#data.containers.materials.changed = loadMaterials ? { storage: this.#data.containers.materials.storage } : false;
+        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);
     }