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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/index.js +40 -54
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@preference-sl/pref-viewer",
3
- "version": "2.10.0-beta.27",
3
+ "version": "2.10.0-beta.28",
4
4
  "description": "Web Component to preview GLTF models with Babylon.js",
5
5
  "author": "Alex Moreno Palacio <amoreno@preference.es>",
6
6
  "scripts": {
package/src/index.js CHANGED
@@ -22,7 +22,7 @@
22
22
  * style="width:800px; height:600px;">
23
23
  * </pref-viewer>
24
24
  * ```
25
- *
25
+ *
26
26
  * Load scene a URL:
27
27
  * ```html
28
28
  * <pref-viewer
@@ -55,7 +55,7 @@ class PrefViewer extends HTMLElement {
55
55
  containers: {
56
56
  model: {
57
57
  name: "model",
58
- container: null,
58
+ assetContainer: null,
59
59
  show: true,
60
60
  storage: null,
61
61
  visible: false,
@@ -65,7 +65,7 @@ class PrefViewer extends HTMLElement {
65
65
  },
66
66
  environment: {
67
67
  name: "environment",
68
- container: null,
68
+ assetContainer: null,
69
69
  show: true,
70
70
  storage: null,
71
71
  visible: false,
@@ -75,7 +75,7 @@ class PrefViewer extends HTMLElement {
75
75
  },
76
76
  materials: {
77
77
  name: "materials",
78
- container: null,
78
+ assetContainer: null,
79
79
  storage: null,
80
80
  show: true,
81
81
  visible: false,
@@ -88,28 +88,28 @@ class PrefViewer extends HTMLElement {
88
88
  camera: {
89
89
  value: null,
90
90
  locked: true,
91
- changed: { pending: false, success: false, oldValue: null, oldLocked: true },
91
+ changed: { pending: false, success: false },
92
92
  },
93
93
  materials: {
94
94
  innerWall: {
95
95
  value: null,
96
96
  prefix: "innerWall",
97
- changed: { pending: false, success: false, oldValue: null },
97
+ changed: { pending: false, success: false },
98
98
  },
99
99
  outerWall: {
100
100
  value: null,
101
101
  prefix: "outerWall",
102
- changed: { pending: false, success: false, oldValue: null },
102
+ changed: { pending: false, success: false },
103
103
  },
104
104
  innerFloor: {
105
105
  value: null,
106
106
  prefix: "innerFloor",
107
- changed: { pending: false, success: false, oldValue: null },
107
+ changed: { pending: false, success: false },
108
108
  },
109
109
  outerFloor: {
110
110
  value: null,
111
111
  prefix: "outerFloor",
112
- changed: { pending: false, success: false, oldValue: null },
112
+ changed: { pending: false, success: false },
113
113
  },
114
114
  },
115
115
  },
@@ -342,8 +342,8 @@ class PrefViewer extends HTMLElement {
342
342
  this.#data.options.camera.changed.pending = changed;
343
343
  this.#data.options.camera.changed.success = false;
344
344
  if (changed) {
345
- this.#data.options.camera.changed.oldValue = prev;
346
- this.#data.options.camera.changed.oldLocked = this.#data.options.camera.locked;
345
+ this.#data.options.camera.changed.value = prev;
346
+ this.#data.options.camera.changed.locked = this.#data.options.camera.locked;
347
347
  this.#data.options.camera.value = options.camera;
348
348
  }
349
349
  return changed;
@@ -359,15 +359,15 @@ class PrefViewer extends HTMLElement {
359
359
  const state = this.#data.options.materials[material];
360
360
  const prev = state.value;
361
361
  const incoming = options[key];
362
- const materialChanged = !!incoming && incoming !== prev;
362
+ const changed = !!incoming && incoming !== prev;
363
363
 
364
- state.changed.pending = materialChanged;
364
+ state.changed.pending = changed;
365
365
  state.changed.success = false;
366
- if (materialChanged) {
367
- state.changed.oldValue = prev;
366
+ if (changed) {
367
+ state.changed.value = prev;
368
368
  state.value = incoming;
369
369
  }
370
- someChanged = someChanged || materialChanged;
370
+ someChanged = someChanged || changed;
371
371
  });
372
372
  return someChanged;
373
373
  }
@@ -377,18 +377,14 @@ class PrefViewer extends HTMLElement {
377
377
  container.timeStamp = container.changed.timeStamp;
378
378
  container.size = container.changed.size;
379
379
  container.changed.success = true;
380
- container.changed.pending = false;
381
380
  } else {
382
381
  container.changed.success = false;
383
- container.changed.pending = false;
384
382
  }
385
383
  }
386
384
 
387
385
  #resetChangedFlags() {
388
386
  const reset = (node) => {
389
- if (!node.changed) node.changed = {};
390
- node.changed.pending = false;
391
- node.changed.success = false;
387
+ node.changed = { pending: false, success: false };
392
388
  };
393
389
  Object.values(this.#data.containers).forEach(reset);
394
390
  Object.values(this.#data.options.materials).forEach(reset);
@@ -723,11 +719,9 @@ class PrefViewer extends HTMLElement {
723
719
 
724
720
  if (someSetted) {
725
721
  optionMaterial.changed.success = true;
726
- optionMaterial.changed.pending = false;
727
722
  } else if (optionMaterial.changed.pending) {
728
- optionMaterial.value = optionMaterial.changed.oldValue;
723
+ optionMaterial.value = optionMaterial.changed.value;
729
724
  optionMaterial.changed.success = false;
730
- optionMaterial.changed.pending = false;
731
725
  }
732
726
 
733
727
  return someSetted;
@@ -743,38 +737,30 @@ class PrefViewer extends HTMLElement {
743
737
  }
744
738
 
745
739
  #setOptionsCamera() {
746
- if (
747
- !this.#data.options.camera.value &&
748
- !this.#data.options.camera.changed.pending &&
749
- !this.#data.containers.model.changed.pending &&
750
- !this.#data.containers.environment.changed.pending
751
- ) {
740
+ if (!this.#data.options.camera.value && !this.#data.options.camera.changed.pending && !this.#data.containers.model.changed.pending && !this.#data.containers.environment.changed.pending) {
752
741
  return false;
753
742
  }
754
743
 
755
744
  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;
756
745
  if (!camera) {
757
- if (this.#data.options.camera.changed?.oldValue && this.#data.options.camera.changed?.oldValue !== this.#data.options.camera.value) {
758
- 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;
746
+ if (this.#data.options.camera.changed.value && this.#data.options.camera.changed.value !== this.#data.options.camera.value) {
747
+ 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;
759
748
  }
760
749
  if (camera) {
761
- camera.metadata = { locked: this.#data.options.camera.changed.oldLocked };
762
- this.#data.options.camera.value = this.#data.options.camera.changed.oldValue;
763
- this.#data.options.camera.locked = this.#data.options.camera.changed.oldLocked;
750
+ camera.metadata = { locked: this.#data.options.camera.changed.locked };
751
+ this.#data.options.camera.value = this.#data.options.camera.changed.value;
752
+ this.#data.options.camera.locked = this.#data.options.camera.changed.locked;
764
753
  this.#data.options.camera.changed.success = false;
765
- this.#data.options.camera.changed.pending = false;
766
754
  } else {
767
755
  camera = this.#camera;
768
756
  this.#data.options.camera.value = null;
769
757
  this.#data.options.camera.locked = this.#camera.metadata.locked;
770
758
  this.#data.options.camera.changed.success = false;
771
- this.#data.options.camera.changed.pending = false;
772
759
  }
773
760
  } else {
774
761
  camera.metadata = { locked: this.#data.options.camera.locked };
775
762
  if (this.#data.options.camera.changed.pending) {
776
763
  this.#data.options.camera.changed.success = true;
777
- this.#data.options.camera.changed.pending = false;
778
764
  }
779
765
  }
780
766
  if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
@@ -800,6 +786,7 @@ class PrefViewer extends HTMLElement {
800
786
 
801
787
  #replaceContainer(container, newAssetContainer) {
802
788
  if (container.assetContainer) {
789
+ this.#removeContainer(container);
803
790
  container.assetContainer.dispose();
804
791
  container.assetContainer = null;
805
792
  }
@@ -822,11 +809,10 @@ class PrefViewer extends HTMLElement {
822
809
  const object = await loadModel(storage.id, storage.table);
823
810
  source = object.data;
824
811
  if (object.timeStamp === container.timeStamp) {
825
- container.changed.pending = false;
826
- container.changed.success = false;
812
+ container.changed = { pending: false, success: false };
827
813
  return false;
828
814
  } else {
829
- Object.assign(container.changed, { timeStamp: object.timeStamp, size: object.size, success: false, pending: true });
815
+ container.changed = { pending: true, size: object.size, success: false, timeStamp: object.timeStamp };
830
816
  }
831
817
  }
832
818
 
@@ -843,11 +829,10 @@ class PrefViewer extends HTMLElement {
843
829
  });
844
830
  if (!container.changed.pending) {
845
831
  if (container.timeStamp === null && container.size === size) {
846
- container.changed.pending = false;
847
- container.changed.success = false;
832
+ container.changed = { pending: false, success: false };
848
833
  return false;
849
834
  } else {
850
- Object.assign(container.changed, { timeStamp: null, size: size, success: false, pending: true });
835
+ container.changed = { pending: true, size: size, success: false, timeStamp: null };
851
836
  }
852
837
  }
853
838
  } else {
@@ -855,11 +840,10 @@ class PrefViewer extends HTMLElement {
855
840
  extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
856
841
  const [fileSize, fileTimeStamp] = await this.#getServerFileDataHeader(source);
857
842
  if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
858
- container.changed.pending = false;
859
- container.changed.success = false;
843
+ container.changed = { pending: false, success: false };
860
844
  return false;
861
845
  } else {
862
- Object.assign(container.changed, { timeStamp: fileTimeStamp, size: fileSize, success: false, pending: true });
846
+ container.changed = { pending: true, size: fileSize, success: false, timeStamp: fileTimeStamp };
863
847
  }
864
848
  }
865
849
 
@@ -868,7 +852,9 @@ class PrefViewer extends HTMLElement {
868
852
  pluginExtension: extension,
869
853
  pluginOptions: {
870
854
  gltf: {
855
+ compileMaterials: true,
871
856
  loadAllMaterials: true,
857
+ loadOnlyMaterials: container.name === "materials",
872
858
  preprocessUrlAsync: this.#transformUrl,
873
859
  },
874
860
  },
@@ -892,16 +878,14 @@ class PrefViewer extends HTMLElement {
892
878
  const environmentContainer = values[1];
893
879
  const materialsContainer = values[2];
894
880
 
895
- this.#removeContainer(this.#data.containers.model);
896
- this.#removeContainer(this.#data.containers.environment);
897
- this.#removeContainer(this.#data.containers.materials);
898
-
899
881
  if (modelContainer.status === "fulfilled" && modelContainer.value) {
900
882
  modelContainer.value.lights = [];
901
883
  this.#replaceContainer(this.#data.containers.model, modelContainer.value);
902
884
  this.#storeChangedFlagsForContainer(this.#data.containers.model, true);
903
885
  } else {
904
- this.#addContainer(this.#data.containers.model);
886
+ if (this.#data.containers.model.assetContainer && this.#data.containers.model.show !== this.#data.containers.model.visible) {
887
+ this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
888
+ }
905
889
  this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
906
890
  }
907
891
 
@@ -909,7 +893,9 @@ class PrefViewer extends HTMLElement {
909
893
  this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
910
894
  this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
911
895
  } else {
912
- this.#addContainer(this.#data.containers.environment);
896
+ if (this.#data.containers.environment.assetContainer && this.#data.containers.environment.show !== this.#data.containers.environment.visible) {
897
+ this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
898
+ }
913
899
  this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
914
900
  }
915
901
 
@@ -917,10 +903,10 @@ class PrefViewer extends HTMLElement {
917
903
  this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
918
904
  this.#storeChangedFlagsForContainer(this.#data.containers.materials, true);
919
905
  } else {
920
- this.#addContainer(this.#data.containers.materials);
921
906
  this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
922
907
  }
923
908
 
909
+ await this.#scene.whenReadyAsync();
924
910
  this.#setOptionsMaterials();
925
911
  this.#setOptionsCamera();
926
912
  this.#setVisibilityOfWallAndFloorInModel();