@preference-sl/pref-viewer 2.10.0-beta.17 → 2.10.0-beta.19

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/gltf-storage.js +41 -8
  3. package/src/index.js +18 -42
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@preference-sl/pref-viewer",
3
- "version": "2.10.0-beta.17",
3
+ "version": "2.10.0-beta.19",
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/gltf-storage.js CHANGED
@@ -12,19 +12,52 @@ function _getDbOrThrow() {
12
12
  }
13
13
 
14
14
  // --- internal helpers -------------------------------------------------------
15
+
16
+ function _createStoreIfMissing(db, storeName) {
17
+ if (!db.objectStoreNames.contains(storeName)) {
18
+ const store = db.createObjectStore(storeName, { keyPath: "id" });
19
+ store.createIndex("expirationTimeStamp", "expirationTimeStamp", { unique: false });
20
+ }
21
+ }
22
+
23
+ /**
24
+ * Opens a DB without specifying a version. If the required object store doesn't
25
+ * exist, it re-opens with (currentVersion + 1) to create it.
26
+ */
15
27
  function _openEnsuringStore(dbName, storeName) {
16
28
  return new Promise((resolve, reject) => {
17
- const open = indexedDB.open(dbName, 5);
29
+ const open = indexedDB.open(dbName);
18
30
 
19
31
  open.onblocked = () => reject(new Error("Open blocked by another tab or worker"));
20
32
  open.onerror = () => reject(open.error);
33
+
34
+ open.onupgradeneeded = (e) => {
35
+ // First creation path (brand-new DB)
36
+ const db = e.target.result;
37
+ _createStoreIfMissing(db, storeName);
38
+ };
39
+
21
40
  open.onsuccess = (e) => {
22
- resolve(e.target.result);
23
- }
24
- open.onupgradeneeded = (ev) => {
25
- const upgradeDb = ev.target.result;
26
- const store = upgradeDb.createObjectStore(storeName, { keyPath: 'id' });
27
- store.createIndex('expirationTimeStamp', 'expirationTimeStamp', { unique: false });
41
+ const db = e.target.result;
42
+
43
+ // If the store exists, we're done.
44
+ if (db.objectStoreNames.contains(storeName)) {
45
+ resolve(db);
46
+ return;
47
+ }
48
+
49
+ // Otherwise bump version just enough to add the store.
50
+ const nextVersion = db.version + 1;
51
+ db.close();
52
+
53
+ const upgrade = indexedDB.open(dbName, nextVersion);
54
+ upgrade.onblocked = () => reject(new Error("Upgrade blocked by another tab or worker"));
55
+ upgrade.onerror = () => reject(upgrade.error);
56
+ upgrade.onupgradeneeded = (ev) => {
57
+ const upDb = ev.target.result;
58
+ _createStoreIfMissing(upDb, storeName);
59
+ };
60
+ upgrade.onsuccess = (ev) => resolve(ev.target.result);
28
61
  };
29
62
  });
30
63
  }
@@ -218,4 +251,4 @@ export function deleteDatabase(dbName) {
218
251
  };
219
252
  // free to inspect PC.db in devtools
220
253
  global.PrefConfigurator.storage = Object.freeze(storage);
221
- })(globalThis);
254
+ })(globalThis);
package/src/index.js CHANGED
@@ -253,7 +253,7 @@ class PrefViewer extends HTMLElement {
253
253
  container_environment: !!this.#data.containers.environment.changed,
254
254
  container_materials: !!this.#data.containers.materials.changed,
255
255
  options_camera: !!this.#data.options.camera.changed,
256
- options_inneWallMaterial: !!this.#data.options.materials.innerWall.changed,
256
+ options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed,
257
257
  options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed,
258
258
  options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed,
259
259
  options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed,
@@ -263,7 +263,7 @@ class PrefViewer extends HTMLElement {
263
263
  container_environment: !!this.#data.containers.environment.changed?.success,
264
264
  container_materials: !!this.#data.containers.materials.changed?.success,
265
265
  options_camera: !!this.#data.options.camera.changed?.success,
266
- options_inneWallMaterial: !!this.#data.options.materials.innerWall.changed?.success,
266
+ options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed?.success,
267
267
  options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed?.success,
268
268
  options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed?.success,
269
269
  options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed?.success,
@@ -299,18 +299,17 @@ class PrefViewer extends HTMLElement {
299
299
  }
300
300
 
301
301
  #setStatusOptionsLoaded() {
302
-
303
302
  const toLoadDetail = {
304
- inneWallMaterial: !!this.#data.options.materials.innerWall.changed,
303
+ innerWallMaterial: !!this.#data.options.materials.innerWall.changed,
305
304
  outerWallMaterial: !!this.#data.options.materials.outerWall.changed,
306
305
  innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed,
307
306
  outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed,
308
307
  };
309
308
  const loadedDetail = {
310
- inneWallMaterial: !!this.#data.options.materials.innerWall.changed?.success,
309
+ innerWallMaterial: !!this.#data.options.materials.innerWall.changed?.success,
311
310
  outerWallMaterial: !!this.#data.options.materials.outerWall.changed?.success,
312
311
  innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed?.success,
313
- _outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed?.success,
312
+ outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed?.success,
314
313
  };
315
314
 
316
315
  const detail = {
@@ -354,14 +353,10 @@ class PrefViewer extends HTMLElement {
354
353
  return someChanged;
355
354
  }
356
355
 
357
- #storeChangedFlagsForContainer(container, success) {
358
- if (success) {
359
- container.timeStamp = container.changed.timeStamp;
360
- container.size = container.changed.size;
361
- } else {
362
- container.source = container.changed.source;
363
- }
364
- container.changed.success = success;
356
+ #storeChangedFlagsForContainer(container) {
357
+ container.timeStamp = container.changed.timeStamp;
358
+ container.size = container.changed.size;
359
+ container.changed.success = true;
365
360
  }
366
361
 
367
362
  #resetChangedFlags() {
@@ -686,7 +681,7 @@ class PrefViewer extends HTMLElement {
686
681
  if (object.timeStamp === container.timeStamp) {
687
682
  return false;
688
683
  } else {
689
- Object.assign(container.changed, { timeStamp: object.timeStamp, size: object.size, success: false });
684
+ container.changed = { timeStamp: object.timeStamp, size: object.size, success: false };
690
685
  }
691
686
  }
692
687
 
@@ -705,17 +700,17 @@ class PrefViewer extends HTMLElement {
705
700
  if (container.timeStamp === null && container.size === size) {
706
701
  return false;
707
702
  } else {
708
- Object.assign(container.changed, { timeStamp: null, size: size, success: false });
703
+ container.changed = { timeStamp: null, size: size, success: false };
709
704
  }
710
705
  }
711
706
  } else {
712
707
  const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
713
708
  extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
714
- const [fileSize, fileTimestamp ] = await this.#getServerFileDataHeader(source);
715
- if (container.size === fileSize && container.timeStamp === fileTimestamp) {
709
+ const [fileSize, fileTimeStamp ] = await this.#getServerFileDataHeader(source);
710
+ if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
716
711
  return false;
717
712
  } else {
718
- Object.assign(container.changed, { timeStamp: fileTimestamp, size: fileSize, success: false });
713
+ container.changed = { timeStamp: fileTimeStamp, size: fileSize, success: false };
719
714
  }
720
715
  }
721
716
 
@@ -738,19 +733,7 @@ class PrefViewer extends HTMLElement {
738
733
  promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
739
734
  promiseArray.push(loadMaterials ? this.#loadAssetContainer(this.#data.containers.materials) : false);
740
735
 
741
- const loadingDetail = {
742
- model: !!this.#data.containers.model.changed,
743
- environment: !!this.#data.containers.environment.changed,
744
- materials: !!this.#data.containers.materials.changed,
745
- options: {
746
- camera: !!this.#data.options.camera.changed,
747
- inneWallMaterial: !!this.#data.options.materials.innerWall.changed,
748
- outerWallMaterial: !!this.#data.options.materials.outerWall.changed,
749
- innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed,
750
- outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed,
751
- },
752
- };
753
- this.#setStatusSceneLoading(loadingDetail);
736
+ this.#setStatusSceneLoading();
754
737
 
755
738
  Promise.allSettled(promiseArray)
756
739
  .then(async (values) => {
@@ -760,25 +743,21 @@ class PrefViewer extends HTMLElement {
760
743
 
761
744
  if (modelContainer.status === "fulfilled" && modelContainer.value) {
762
745
  this.#replaceContainer(this.#data.containers.model, modelContainer.value);
763
- this.#storeChangedFlagsForContainer(this.#data.containers.model, true);
746
+ this.#storeChangedFlagsForContainer(this.#data.containers.model);
764
747
  } else {
765
748
  this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
766
- this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
767
749
  }
768
750
 
769
751
  if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
770
752
  this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
771
- this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
753
+ this.#storeChangedFlagsForContainer(this.#data.containers.environment);
772
754
  } else {
773
755
  this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
774
- this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
775
756
  }
776
757
 
777
758
  if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
778
759
  this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
779
- this.#storeChangedFlagsForContainer(this.#data.containers.materials, true);
780
- } else {
781
- this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
760
+ this.#storeChangedFlagsForContainer(this.#data.containers.materials);
782
761
  }
783
762
 
784
763
  this.#setOptionsMaterials();
@@ -809,13 +788,10 @@ class PrefViewer extends HTMLElement {
809
788
  }
810
789
 
811
790
  // Containers
812
- this.#data.containers.model.changed = { storage: this.#data.containers.model.storage || null };
813
791
  this.#data.containers.model.storage = config.model?.storage || null;
814
792
  this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
815
- this.#data.containers.environment.changed = { storage: this.#data.containers.environment.storage || null };
816
793
  this.#data.containers.environment.storage = config.scene?.storage || null;
817
794
  this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
818
- this.#data.containers.materials.changed = { storage: this.#data.containers.materials.storage || null };
819
795
  this.#data.containers.materials.storage = config.materials?.storage || null;
820
796
 
821
797
  // Options