@panoramax/web-viewer 4.0.3-develop-0b3c99b2 → 4.1.0-develop-e5370cde

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 (18) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/build/index.css +2 -2
  3. package/build/index.css.map +1 -1
  4. package/build/index.js +5 -5
  5. package/build/index.js.map +1 -1
  6. package/build/map.html +1 -1
  7. package/package.json +1 -1
  8. package/public/map.html +3 -3
  9. package/src/components/core/CoverageMap.css +1 -0
  10. package/src/components/core/Editor.css +1 -0
  11. package/src/components/core/Editor.js +3 -5
  12. package/src/components/core/PhotoViewer.css +5 -0
  13. package/src/components/core/PhotoViewer.js +4 -6
  14. package/src/components/core/Viewer.css +5 -0
  15. package/src/components/menus/MapLegend.js +7 -0
  16. package/src/components/ui/AnnotationsSwitch.js +18 -16
  17. package/src/components/ui/widgets/Legend.js +7 -1
  18. package/src/utils/widgets.js +19 -1
package/build/map.html CHANGED
@@ -1 +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 Coverage Map</title><style>#map{position:relative;width:95%;margin:2.5%;height:400px}#map.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-coverage-map id="coverage" class="fullpage" endpoint="https://api.panoramax.xyz/api"/><script>var coverage=document.getElementById("coverage");coverage.addEventListener("ready",(()=>{coverage.map.on("sequence-hover",(e=>{console.log("Hovered sequence",e.seqId)})),coverage.addEventListener("select",(e=>{console.log("Selected sequence",e.detail.seqId,"picture",e.detail.picId)}))}),{once:!0})</script></body></html>
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 Coverage Map</title><style>#coverage{position:relative;width:95%;margin:2.5%;height:400px}#coverage.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-coverage-map id="coverage" class="fullpage" endpoint="https://api.panoramax.xyz/api"></pnx-coverage-map><script>var coverage=document.getElementById("coverage");coverage.addEventListener("ready",(()=>{coverage.map.on("sequence-hover",(e=>{console.log("Hovered sequence",e.seqId)})),coverage.addEventListener("select",(e=>{console.log("Selected sequence",e.detail.seqId,"picture",e.detail.picId)}))}),{once:!0})</script></body></html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panoramax/web-viewer",
3
- "version": "4.0.3-develop-0b3c99b2",
3
+ "version": "4.1.0-develop-e5370cde",
4
4
  "description": "Panoramax web viewer for geolocated pictures",
5
5
  "main": "build/index.js",
6
6
  "author": "Panoramax team",
package/public/map.html CHANGED
@@ -5,13 +5,13 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
6
  <title>Panoramax Coverage Map</title>
7
7
  <style>
8
- #map {
8
+ #coverage {
9
9
  position: relative;
10
10
  width: 95%;
11
11
  margin: 2.5%;
12
12
  height: 400px;
13
13
  }
14
- #map.fullpage {
14
+ #coverage.fullpage {
15
15
  position: fixed;
16
16
  top: 0;
17
17
  bottom: 0;
@@ -32,7 +32,7 @@
32
32
  id="coverage"
33
33
  class="fullpage"
34
34
  endpoint="https://api.panoramax.xyz/api"
35
- />
35
+ ></pnx-coverage-map>
36
36
 
37
37
  <script>
38
38
  // Retrieve component from DOM
package/src/components/core/CoverageMap.css CHANGED
@@ -1,5 +1,6 @@
1
1
  pnx-coverage-map {
2
2
  display: block;
3
+ position: relative;
3
4
  }
4
5
 
5
6
  pnx-coverage-map .maplibregl-map {
package/src/components/core/Editor.css CHANGED
@@ -2,6 +2,7 @@
2
2
  pnx-editor {
3
3
  display: flex;
4
4
  flex-direction: column;
5
+ position: relative;
5
6
  }
6
7
 
7
8
  pnx-editor .pnx-map,
package/src/components/core/Editor.js CHANGED
@@ -130,12 +130,10 @@ export default class Editor extends Basic {
130
130
  this.users = [];
131
131
  }
132
132
  super.connectedCallback();
133
- }
134
133
 
135
- /** @private */
136
- firstUpdated() {
137
- super.firstUpdated();
138
- this._moveChildToGrid();
134
+ window.addEventListener("DOMContentLoaded", () => {
135
+ this._moveChildToGrid();
136
+ }, { once: true });
139
137
  }
140
138
 
141
139
  attributeChangedCallback(name, old, value) {
package/src/components/core/PhotoViewer.css CHANGED
@@ -1,3 +1,8 @@
1
+ pnx-photo-viewer {
2
+ position: relative;
3
+ display: block;
4
+ }
5
+
1
6
  /* Maximized components */
2
7
  pnx-photo-viewer .pnx-psv {
3
8
  position: absolute;
package/src/components/core/PhotoViewer.js CHANGED
@@ -198,6 +198,10 @@ export default class PhotoViewer extends Basic {
198
198
  }
199
199
 
200
200
  this.onceAPIReady().then(this._postAPIInit.bind(this));
201
+
202
+ window.addEventListener("DOMContentLoaded", () => {
203
+ this._moveChildToGrid();
204
+ }, { once: true });
201
205
  }
202
206
 
203
207
  /** @private */
@@ -207,12 +211,6 @@ export default class PhotoViewer extends Basic {
207
211
  this.psv?.destroy();
208
212
  }
209
213
 
210
- /** @private */
211
- firstUpdated() {
212
- super.firstUpdated();
213
- this._moveChildToGrid();
214
- }
215
-
216
214
  getClassName() {
217
215
  return "PhotoViewer";
218
216
  }
package/src/components/core/Viewer.css CHANGED
@@ -1,3 +1,8 @@
1
+ pnx-viewer {
2
+ position: relative;
3
+ display: block;
4
+ }
5
+
1
6
  /* Maximized components */
2
7
  pnx-viewer .pnx-map.maplibregl-map,
3
8
  pnx-viewer .pnx-psv {
package/src/components/menus/MapLegend.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import {LitElement, html, nothing, css} from "lit";
2
+ import {onceParentAvailable} from "../../utils/widgets";
2
3
 
3
4
  /**
4
5
  * Map legend displays information about map sources.
@@ -39,6 +40,12 @@ export default class MapLegend extends LitElement {
39
40
  this.light = false;
40
41
  }
41
42
 
43
+ /** @private */
44
+ connectedCallback() {
45
+ super.connectedCallback();
46
+ onceParentAvailable(this).then(() => this.requestUpdate());
47
+ }
48
+
42
49
  /** @private */
43
50
  render() {
44
51
  /* eslint-disable indent */
package/src/components/ui/AnnotationsSwitch.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LitElement, html, css, nothing } from "lit";
2
- import { fa } from "../../utils/widgets";
2
+ import { fa, onceParentAvailable } from "../../utils/widgets";
3
3
  import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
4
4
  import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
5
5
  import { hasAnnotations } from "../../utils/picture";
@@ -97,26 +97,28 @@ export default class AnnotationsSwitch extends LitElement {
97
97
  // Check if annotations have been explicitly disabled
98
98
  const annotsDisabled = localStorage.getItem(DISABLE_ANNOTATIONS_PARAM) === "true";
99
99
 
100
- this._parent.onceReady().then(() => {
101
- this._parent.psv.addEventListener("annotations-toggled", e => {
102
- this._annotationsToggled = e.detail.visible;
103
- this._persistAnnotationsLocalStorage(this._annotationsToggled);
104
- });
100
+ onceParentAvailable(this).then(() => {
101
+ this._parent.onceReady().then(() => {
102
+ this._parent.psv.addEventListener("annotations-toggled", e => {
103
+ this._annotationsToggled = e.detail.visible;
104
+ this._persistAnnotationsLocalStorage(this._annotationsToggled);
105
+ });
105
106
 
106
- this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
107
- this._parent.psv.addEventListener("picture-loaded", () => {
108
107
  this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
108
+ this._parent.psv.addEventListener("picture-loaded", () => {
109
+ this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
110
+ });
109
111
  });
110
- });
111
112
 
112
- this._parent.onceFirstPicLoaded().then(() => {
113
- this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
113
+ this._parent.onceFirstPicLoaded().then(() => {
114
+ this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
114
115
 
115
- if(!this._annotationsToggled && !annotsDisabled) {
116
- this._parent.psv.toggleAllAnnotations(true);
117
- this._annotationsToggled = true;
118
- }
119
- this._persistAnnotationsLocalStorage(this._annotationsToggled);
116
+ if(!this._annotationsToggled && !annotsDisabled) {
117
+ this._parent.psv.toggleAllAnnotations(true);
118
+ this._annotationsToggled = true;
119
+ }
120
+ this._persistAnnotationsLocalStorage(this._annotationsToggled);
121
+ });
120
122
  });
121
123
  }
122
124
 
package/src/components/ui/widgets/Legend.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { LitElement, html, css, nothing } from "lit";
2
2
  import { panel } from "../../styles";
3
- import { fa } from "../../../utils/widgets";
3
+ import { fa, onceParentAvailable } from "../../../utils/widgets";
4
4
  import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
5
5
  import PanoramaxImg from "../../../img/panoramax.svg";
6
6
  import { classMap } from "lit/directives/class-map.js";
@@ -111,6 +111,12 @@ export default class Legend extends LitElement {
111
111
  this.light = false;
112
112
  }
113
113
 
114
+ /** @private */
115
+ connectedCallback() {
116
+ super.connectedCallback();
117
+ onceParentAvailable(this).then(() => this.requestUpdate());
118
+ }
119
+
114
120
  render() {
115
121
  const classes = {
116
122
  "pnx-panel": true,
package/src/utils/widgets.js CHANGED
@@ -71,6 +71,22 @@ export function listenForMenuClosure(me, callback) {
71
71
  });
72
72
  }
73
73
 
74
+ /** @private */
75
+ function lookForParent(comp) {
76
+ if(comp._parent) {
77
+ return comp._parent;
78
+ }
79
+ else if(comp === document.body) {
80
+ return null;
81
+ }
82
+ else if(comp.parentNode) {
83
+ return lookForParent(comp.parentNode);
84
+ }
85
+ else if(comp.host) {
86
+ return lookForParent(comp.host);
87
+ }
88
+ }
89
+
74
90
  /**
75
91
  * Wait for parent availability
76
92
  * @private
@@ -82,7 +98,9 @@ export function onceParentAvailable(comp) {
82
98
  else {
83
99
  return new Promise(resolve => {
84
100
  const itv = setInterval(() => {
85
- if(comp._parent) {
101
+ const p = lookForParent(comp);
102
+ if(p) {
103
+ comp._parent = p;
86
104
  clearInterval(itv);
87
105
  resolve(comp._parent);
88
106
  }