@panoramax/web-viewer 3.2.3-develop-64f445f0 → 3.2.3-develop-fbf5d630

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 (15) hide show
  1. package/build/editor.html +6 -6
  2. package/build/index.js +83 -83
  3. package/build/index.js.map +1 -1
  4. package/build/viewer.html +7 -7
  5. package/package.json +2 -1
  6. package/public/editor.html +6 -6
  7. package/public/viewer.html +7 -7
  8. package/src/components/core/Basic.js +43 -4
  9. package/src/components/core/CoverageMap.js +1 -1
  10. package/src/components/core/Editor.js +1 -1
  11. package/src/components/core/PhotoViewer.js +2 -2
  12. package/src/components/core/Viewer.js +1 -1
  13. package/tests/components/core/Basic.test.js +1 -1
  14. package/tests/components/core/BasicMock.js +3 -0
  15. package/tests/components/core/Viewer.test.js +3 -0
package/build/viewer.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Panoramax Web Viewer</title><style>#viewer{position:relative;width:95%;margin:2.5%;height:400px}#viewer.fullpage{position:fixed;top:0;bottom:0;left:0;right:0;height:unset;width:unset;margin:0}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><pnx-viewer id="viewer" class="fullpage" map='{
2
- "raster": {
3
- "type": "raster",
4
- "tiles": [
2
+ raster: {
3
+ type: "raster",
4
+ tiles: [
5
5
  "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
6
6
  ],
7
- "minzoom": 0,
8
- "maxzoom": 21,
9
- "attribution": "&copy; IGN",
10
- "tileSize": 256
7
+ minzoom: 0,
8
+ maxzoom: 21,
9
+ attribution: "&copy; IGN",
10
+ tileSize: 256
11
11
  }
12
12
  }'/><script>var servers={meta:"https://api.panoramax.xyz/api",ign:"https://panoramax.ign.fr/api",osm:"https://panoramax.openstreetmap.fr/api",local:"http://localhost:5000/api",dev:"https://panoramax.codeureusesenliberte.fr/api"},urlParams=new URLSearchParams(window.location.search),server=servers[urlParams.get("server")||"meta"];window.onload=()=>{document.getElementById("viewer").setAttribute("endpoint",server)}</script></body></html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panoramax/web-viewer",
3
- "version": "3.2.3-develop-64f445f0",
3
+ "version": "3.2.3-develop-fbf5d630",
4
4
  "description": "Panoramax web viewer for geolocated pictures",
5
5
  "main": "build/index.js",
6
6
  "author": "Panoramax team",
@@ -98,6 +98,7 @@
98
98
  "@photo-sphere-viewer/gallery-plugin": "5.12.1",
99
99
  "@photo-sphere-viewer/markers-plugin": "5.12.1",
100
100
  "@photo-sphere-viewer/virtual-tour-plugin": "5.12.1",
101
+ "json5": "^2.2.3",
101
102
  "lit": "^3.2.1",
102
103
  "maplibre-gl": "^5.2.0",
103
104
  "pmtiles": "^4.3.0",
package/public/editor.html CHANGED
@@ -33,14 +33,14 @@
33
33
  picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"
34
34
  background="aerial"
35
35
  raster='{
36
- "type": "raster",
37
- "tiles": [
36
+ type: "raster",
37
+ tiles: [
38
38
  "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
39
39
  ],
40
- "minzoom": 0,
41
- "maxzoom": 21,
42
- "attribution": "&copy; IGN",
43
- "tileSize": 256
40
+ minzoom: 0,
41
+ maxzoom: 21,
42
+ attribution: "&copy; IGN",
43
+ tileSize: 256
44
44
  }'
45
45
  ></pnx-editor>
46
46
 
package/public/viewer.html CHANGED
@@ -32,15 +32,15 @@
32
32
  id="viewer"
33
33
  class="fullpage"
34
34
  map='{
35
- "raster": {
36
- "type": "raster",
37
- "tiles": [
35
+ raster: {
36
+ type: "raster",
37
+ tiles: [
38
38
  "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
39
39
  ],
40
- "minzoom": 0,
41
- "maxzoom": 21,
42
- "attribution": "&copy; IGN",
43
- "tileSize": 256
40
+ minzoom: 0,
41
+ maxzoom: 21,
42
+ attribution: "&copy; IGN",
43
+ tileSize: 256
44
44
  }
45
45
  }'
46
46
  />
package/src/components/core/Basic.js CHANGED
@@ -4,6 +4,7 @@ import { getTranslations } from "../../utils/i18n";
4
4
  import { DEFAULT_TILES } from "../../utils/map";
5
5
  import { createWebComp } from "../../utils/widgets";
6
6
  import { isInIframe, isInternetFast } from "../../utils/utils";
7
+ import JSON5 from "json5";
7
8
  import PACKAGE_JSON from "../../../package.json";
8
9
  import "@fontsource/atkinson-hyperlegible-next";
9
10
  import "./Basic.css";
@@ -44,7 +45,7 @@ export default class Basic extends LitElement {
44
45
  static properties = {
45
46
  picture: {type: String, reflect: true},
46
47
  sequence: {type: String, reflect: true},
47
- fetchOptions: {type: Object, attribute: false},
48
+ fetchOptions: {converter: Basic.GetJSONConverter()},
48
49
  users: {type: Array, reflect: true},
49
50
  mapstyle: {type: String},
50
51
  lang: {type: String},
@@ -82,7 +83,18 @@ export default class Basic extends LitElement {
82
83
 
83
84
  connectedCallback() {
84
85
  super.connectedCallback();
85
- if(this.endpoint) { this._setupAPI(); }
86
+
87
+ if(
88
+ !(this._loadsAPI && this.endpoint && this._loadsAPI === this.endpoint)
89
+ && !(this.api && this.api._endpoint === this.endpoint)
90
+ && this.endpoint
91
+ ) {
92
+ if(this._loadsAPI || this.api) {
93
+ delete this.api;
94
+ delete this._loadsAPI;
95
+ }
96
+ this._setupAPI();
97
+ }
86
98
  }
87
99
 
88
100
  /**
@@ -98,6 +110,9 @@ export default class Basic extends LitElement {
98
110
  return;
99
111
  }
100
112
 
113
+ this._loadsAPI = this.endpoint;
114
+ let myLoadAPI = this.endpoint;
115
+
101
116
  // Check if mapstyle is not a unparsed JSON
102
117
  try {
103
118
  this.mapstyle = JSON.parse(this.mapstyle);
@@ -112,6 +127,8 @@ export default class Basic extends LitElement {
112
127
  });
113
128
  this.api.onceReady()
114
129
  .then(() => {
130
+ if(myLoadAPI != this._loadsAPI || !this.api) { return; }
131
+
115
132
  let unavailable = this.api.getUnavailableFeatures();
116
133
  let available = this.api.getAvailableFeatures();
117
134
  available = unavailable.length === 0 ? "✅ All features available" : "✅ Available features: "+available.join(", ");
@@ -122,9 +139,11 @@ export default class Basic extends LitElement {
122
139
  ${unavailable}
123
140
  `.trim());
124
141
  })
125
- .catch(e => this.loader.dismiss(e, this._t.pnx.error_api));
142
+ .catch(e => this.loader.dismiss(e, this._t.pnx.error_api))
143
+ .finally(() => delete this._loadsAPI);
126
144
  }
127
145
  catch(e) {
146
+ delete this._loadsAPI;
128
147
  if(this.loader?.dismiss) {
129
148
  this.loader.dismiss(e, this._t.pnx.error_api);
130
149
  }
@@ -173,7 +192,17 @@ export default class Basic extends LitElement {
173
192
  super.attributeChangedCallback(name, _old, value);
174
193
 
175
194
  if(name === "endpoint") {
176
- if(!this.api || this.api._endpoint !== value) { this._setupAPI(); }
195
+ if(
196
+ !(this._loadsAPI && value && this._loadsAPI === value)
197
+ && !(this.api && this.api._endpoint === value)
198
+ && value
199
+ ) {
200
+ if(this._loadsAPI || this.api) {
201
+ delete this.api;
202
+ delete this._loadsAPI;
203
+ }
204
+ this._setupAPI();
205
+ }
177
206
  }
178
207
  if(["picture", "sequence"].includes(name)) {
179
208
  let seqId, picId, prevSeqId, prevPicId;
@@ -319,4 +348,14 @@ export default class Basic extends LitElement {
319
348
  super.addEventListener(type, listener, options);
320
349
  }
321
350
  }
351
+
352
+ /** @private */
353
+ static GetJSONConverter() {
354
+ return {
355
+ fromAttribute: (value) => {
356
+ return typeof value === "object" ? value : JSON5.parse(value);
357
+ },
358
+ toAttribute: (value) => JSON.stringify(value)
359
+ };
360
+ }
322
361
  }
package/src/components/core/CoverageMap.js CHANGED
@@ -44,7 +44,7 @@ export default class CoverageMap extends Basic {
44
44
  * @property {object} [map] [Any map option available in Map class](#Panoramax.components.ui.Map).<br />Example: `map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'`
45
45
  */
46
46
  static properties = {
47
- map: {type: Object},
47
+ map: {converter: Basic.GetJSONConverter()},
48
48
  ...Basic.properties
49
49
  };
50
50
 
package/src/components/core/Editor.js CHANGED
@@ -54,7 +54,7 @@ export default class Editor extends Basic {
54
54
  * @property {string} [background=streets] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
55
55
  */
56
56
  static properties = {
57
- raster: {type: Object},
57
+ raster: {converter: Basic.GetJSONConverter()},
58
58
  background: {type: String},
59
59
  ...Basic.properties
60
60
  };
package/src/components/core/PhotoViewer.js CHANGED
@@ -82,7 +82,7 @@ export default class PhotoViewer extends Basic {
82
82
  * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
83
83
  */
84
84
  static properties = {
85
- psv: {type: Object},
85
+ psv: {converter: Basic.GetJSONConverter()},
86
86
  widgets: {type: String},
87
87
  "url-parameters": {type: String},
88
88
  ...Basic.properties
@@ -204,7 +204,7 @@ export default class PhotoViewer extends Basic {
204
204
  let waiter;
205
205
  return new Promise(resolve => {
206
206
  waiter = setInterval(() => {
207
- if(typeof this.psv === "object") {
207
+ if(this.psv && typeof this.psv === "object") {
208
208
  if(this.psv.container) {
209
209
  clearInterval(waiter);
210
210
  resolve();
package/src/components/core/Viewer.js CHANGED
@@ -103,7 +103,7 @@ export default class Viewer extends PhotoViewer {
103
103
  * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
104
104
  */
105
105
  static properties = {
106
- map: {type: Object},
106
+ map: {converter: PhotoViewer.GetJSONConverter()},
107
107
  focus: {type: String, reflect: true},
108
108
  geocoder: {type: String},
109
109
  ...PhotoViewer.properties
package/tests/components/core/Basic.test.js CHANGED
@@ -35,7 +35,7 @@ describe("constructor", () => {
35
35
 
36
36
  it("should set up API when endpoint is provided", async () => {
37
37
  basic.endpoint = "https://api.example.com";
38
- basic.connectedCallback();
38
+ basic.attributeChangedCallback("endpoint", null, "https://api.example.com");
39
39
  expect(API).toHaveBeenCalledWith("https://api.example.com", expect.any(Object));
40
40
  });
41
41
  });
package/tests/components/core/BasicMock.js CHANGED
@@ -17,5 +17,8 @@ jest.mock("../../../src/components/core/Basic", () => (
17
17
  onceAPIReady() {
18
18
  return Promise.resolve();
19
19
  }
20
+ static GetJSONConverter() {
21
+ return {};
22
+ }
20
23
  }
21
24
  ));
package/tests/components/core/Viewer.test.js CHANGED
@@ -22,6 +22,9 @@ jest.mock("../../../src/components/core/PhotoViewer", () => (
22
22
  onceAPIReady() {
23
23
  return Promise.resolve();
24
24
  }
25
+ static GetJSONConverter() {
26
+ return {};
27
+ }
25
28
  }
26
29
  ));
27
30