@panoramax/web-viewer 4.3.1-develop-c2822f79 → 4.3.1-develop-f2e27359

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 (9) hide show
  1. package/CHANGELOG.md +1 -0
  2. package/build/index.js +3 -3
  3. package/build/index.js.map +1 -1
  4. package/build/photoviewer.js +3 -3
  5. package/build/photoviewer.js.map +1 -1
  6. package/docs/09_Develop.md +41 -31
  7. package/package.json +1 -1
  8. package/src/components/menus/PictureMetadata.js +1 -1
  9. package/src/components/ui/widgets/CopyCoordinates.js +2 -2
package/docs/09_Develop.md CHANGED
@@ -6,15 +6,15 @@ Here are some inputs about working with Panoramax web client code.
6
6
 
7
7
  !!! note
8
8
 
9
- If something seems missing or incomplete, don't hesitate to contact us by [email](mailto:panoramax@panoramax.fr) or using [an issue](https://gitlab.com/panoramax/clients/web-viewer/-/issues). We really want Panoramax to be a collaborative project, so everyone is welcome (see our [code of conduct](https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/CODE_OF_CONDUCT.md)).
9
+ If something seems missing or incomplete, don't hesitate to contact us by [email](mailto:panoramax@panoramax.fr) or using [an issue](https://gitlab.com/panoramax/clients/web-viewer/-/issues). We really want Panoramax to be a collaborative project, so everyone is welcome (see our [code of conduct](https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/CODE_OF_CONDUCT.md)).
10
10
 
11
11
  ## Architecture
12
12
 
13
13
  The current code is split between various elements:
14
14
 
15
- - __Core components__: a single functional entry, like [Viewer](./reference/components/core/Viewer.md) (map + picture), [Photo Viewer](./reference/components/core/PhotoViewer.md) (picture only), [Coverage Map](./reference/components/core/CoverageMap.md) or [Editor](./reference/components/core/Editor.md). They share parts of code in [Basic](./reference/components/core/Basic.md) class. They specialized the behaviour of components depending on the needs.
16
- - __UI components, menus & widgets__: reusable web components, like [Map](./reference/components/ui/Map.md), [Photo](./reference/components/ui/Photo.md) or [Loader](./reference/components/ui/Loader.md). They are used in some views depending of the context.
17
- - __Utils__: utility functions, split into various files for clarity.
15
+ - **Core components**: a single functional entry, like [Viewer](./reference/components/core/Viewer.md) (map + picture), [Photo Viewer](./reference/components/core/PhotoViewer.md) (picture only), [Coverage Map](./reference/components/core/CoverageMap.md) or [Editor](./reference/components/core/Editor.md). They share parts of code in [Basic](./reference/components/core/Basic.md) class. They specialized the behaviour of components depending on the needs.
16
+ - **UI components, menus & widgets**: reusable web components, like [Map](./reference/components/ui/Map.md), [Photo](./reference/components/ui/Photo.md) or [Loader](./reference/components/ui/Loader.md). They are used in some views depending of the context.
17
+ - **Utils**: utility functions, split into various files for clarity.
18
18
 
19
19
  ![Class diagram of Panoramax web viewer](./images/class_diagram.jpg)
20
20
 
@@ -32,7 +32,7 @@ The library is relies on various other libraries:
32
32
  In order to offer a coherent overlay of widgets, we follow this general `z-index` ordering:
33
33
 
34
34
  | Component type | Z-Index |
35
- |-----------------------------------|:-------:|
35
+ | --------------------------------- | :-----: |
36
36
  | MapLibre GL & Photo Sphere Viewer | <= 110 |
37
37
  | Widgets / Cornered Grid's corners | 120 |
38
38
  | Togglable menus | 130 |
@@ -42,13 +42,13 @@ In order to offer a coherent overlay of widgets, we follow this general `z-index
42
42
 
43
43
  !!! note
44
44
 
45
- This concerns only __Viewer__ component. Editor & Coverage Map read input parameters only from Web Components attributes.
45
+ This concerns only __Viewer__ component. Editor & Coverage Map read input parameters only from Web Components attributes.
46
46
 
47
47
  Viewer component can read parameters from 3 different sources:
48
48
 
49
- - Web Component __attributes__, passed through DOM
50
- - Browser __local storage__
51
- - __URL search__ parameters
49
+ - Web Component **attributes**, passed through DOM
50
+ - Browser **local storage**
51
+ - **URL search** parameters
52
52
 
53
53
  This allows a flexible way to interact with viewer for users. Prioritization of parameters is managed by [InitParameters class](./reference/utils/InitParameters.md), URL parameters coming first, then local storage, to fallback with Web component attributes (and eventually some hard-coded defaults).
54
54
 
@@ -60,7 +60,7 @@ All third-party services URL (like geocoding API, OSM iD editor) are grouped int
60
60
 
61
61
  ### Presets for semantics
62
62
 
63
- The semantics system for sequences, pictures and annotations make use of __tagging presets__. These are JSON files hosted at [presets.panoramax.fr](https://presets.panoramax.fr/), they have their [dedicated Gitlab repository](https://gitlab.com/panoramax/server/tagging-presets).
63
+ The semantics system for sequences, pictures and annotations make use of **tagging presets**. These are JSON files hosted at [presets.panoramax.fr](https://presets.panoramax.fr/), they have their [dedicated Gitlab repository](https://gitlab.com/panoramax/server/tagging-presets).
64
64
 
65
65
  In the viewer, they show up through icons and translated labels associated to pictures & annotations. If you want to change them, you have to edit them in Gitlab repository. Viewer automatically loads hosted files at start.
66
66
 
@@ -70,35 +70,45 @@ In order to improve performance, the 3D sphere used for projecting the picture o
70
70
 
71
71
  ![Comparative of mobile vs PC rendering](./images/comparative_3drender.jpg)
72
72
 
73
+ ### Widgets breakpoints
74
+
75
+ To make default display more adaptative, many places in the _Viewer_ code uses breakpoints to have different rendering:
76
+
77
+ - Display height: 400px
78
+ - Display width: 576px
79
+ - Shown in iframe or not
80
+
81
+ These breakpoints are both used in CSS (with media-queries) or in JS (`isWidthSmall, isHeightSmall, isInIframe`).
82
+
73
83
  ## Testing
74
84
 
75
85
  We're trying to make Panoramax as reliable and secure as possible. To ensure this, we rely heavily on code testing. A variety of testing tools is made available:
76
86
 
77
- * `npm start` : launches a dev web server on [localhost:3000](http://localhost:3000)
78
- * `npm run test` : unit testing
79
- * `npm run lint` : syntax checks
80
- * `npm run coverage` : amount of tested code
87
+ - `npm start` : launches a dev web server on [localhost:3000](http://localhost:3000)
88
+ - `npm run test` : unit testing
89
+ - `npm run lint` : syntax checks
90
+ - `npm run coverage` : amount of tested code
81
91
 
82
- If you're working on bug fixes or new features, please __make sure to add appropriate tests__ to keep Panoramax level of quality.
92
+ If you're working on bug fixes or new features, please **make sure to add appropriate tests** to keep Panoramax level of quality.
83
93
 
84
94
  ### Example pictures
85
95
 
86
96
  As Panoramax accepts all kind of picture, we have a large variety of troubles that can come to display them. Here is a list of very different images (various types, orientation, metadata) that can be useful to check if your rendering is working well:
87
97
 
88
- | UUID | Type | Heading | Comment |
89
- |----------------------------------------|----------------|---------|-------------------------------------|
90
- | `5bada38c-7cbc-4c81-a4d1-e39480fbec0b` | flat landscape | SE | |
91
- | `1d86cbbe-2293-4759-a4b6-23a815c49364` | flat portrait | SW | |
92
- | `f21d15a7-7a48-4194-bef2-09f22db03225` | flat square | NW | roll/pitch |
93
- | `b13976d5-fb07-44be-b6b6-2a2356a23cb8` | 360° | W | |
94
- | `03f220b4-28b2-4104-bc64-bb9e41a8aa5d` | 360° | W | picture tags + annotations |
95
- | `5d1800fd-44f6-446f-92b9-250f737c4b14` | 360° | NE | roll/pitch |
96
- | `02b6dac1-6d6a-4568-9db4-f4b0219c03d3` | 360° | E | roll/pitch |
97
- | `0552bbac-6054-41c1-b0d7-f06ffce7a56d` | 360° | SW | roll/pitch |
98
- | `2f842858-2ada-4a25-a462-8d3bf256aca8` | H-cropped 360° | - | annotations |
99
- | `66dbf066-cf13-4fe3-a32a-2210daaeb45d` | H-cropped 360° | ? | |
100
- | `adf47cb2-cddd-4a8b-a5c9-f64248b62f90` | H-cropped 360° | SW | |
101
- | `193245fa-3454-492a-b0fc-aa06feab772e` | 180° | SE | |
98
+ | UUID | Type | Heading | Comment |
99
+ | -------------------------------------- | -------------- | ------- | -------------------------- |
100
+ | `5bada38c-7cbc-4c81-a4d1-e39480fbec0b` | flat landscape | SE | |
101
+ | `1d86cbbe-2293-4759-a4b6-23a815c49364` | flat portrait | SW | |
102
+ | `f21d15a7-7a48-4194-bef2-09f22db03225` | flat square | NW | roll/pitch |
103
+ | `b13976d5-fb07-44be-b6b6-2a2356a23cb8` | 360° | W | |
104
+ | `03f220b4-28b2-4104-bc64-bb9e41a8aa5d` | 360° | W | picture tags + annotations |
105
+ | `5d1800fd-44f6-446f-92b9-250f737c4b14` | 360° | NE | roll/pitch |
106
+ | `02b6dac1-6d6a-4568-9db4-f4b0219c03d3` | 360° | E | roll/pitch |
107
+ | `0552bbac-6054-41c1-b0d7-f06ffce7a56d` | 360° | SW | roll/pitch |
108
+ | `2f842858-2ada-4a25-a462-8d3bf256aca8` | H-cropped 360° | - | annotations |
109
+ | `66dbf066-cf13-4fe3-a32a-2210daaeb45d` | H-cropped 360° | ? | |
110
+ | `adf47cb2-cddd-4a8b-a5c9-f64248b62f90` | H-cropped 360° | SW | |
111
+ | `193245fa-3454-492a-b0fc-aa06feab772e` | 180° | SE | |
102
112
 
103
113
  ## Documentation
104
114
 
@@ -123,8 +133,8 @@ mkdocs build
123
133
 
124
134
  Online versions are available at:
125
135
 
126
- - [docs.panoramax.fr](https://docs.panoramax.fr/web-viewer/) for __stable__ version
127
- - [viewer.geovisio.fr/docs](https://viewer.geovisio.fr/docs/) for __develop__ version
136
+ - [docs.panoramax.fr](https://docs.panoramax.fr/web-viewer/) for **stable** version
137
+ - [viewer.geovisio.fr/docs](https://viewer.geovisio.fr/docs/) for **develop** version
128
138
 
129
139
  ## Make a release
130
140
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panoramax/web-viewer",
3
- "version": "4.3.1-develop-c2822f79",
3
+ "version": "4.3.1-develop-f2e27359",
4
4
  "description": "Panoramax web viewer for geolocated pictures",
5
5
  "main": "build/index.js",
6
6
  "author": "Panoramax team",
package/src/components/menus/PictureMetadata.js CHANGED
@@ -180,7 +180,7 @@ export default class PictureMetadata extends LitElement {
180
180
  {
181
181
  title: this._parent?._t.pnx.metadata_location_coordinates,
182
182
  content: html`
183
- ${this._meta.gps[0]}, ${this._meta.gps[1]}
183
+ ${this._meta.gps[0].toFixed(5)}, ${this._meta.gps[1].toFixed(5)}
184
184
  <pnx-copy-coordinates
185
185
  ._parent=${this._parent}
186
186
  .gps=${this._meta.gps}
package/src/components/ui/widgets/CopyCoordinates.js CHANGED
@@ -41,8 +41,8 @@ export default class CopyCoordinates extends LitElement {
41
41
  const dmslat = dmslatval.d < 0 ? `${Math.abs(dmslatval.d)}°${dmslatval.m}'${dmslatval.s}"S` : `${dmslatval.d}°${dmslatval.m}'${dmslatval.s}"N`;
42
42
 
43
43
  const values = {
44
- ddeclatlon: `${this.gps[1].toFixed(7)}, ${this.gps[0].toFixed(7)}`,
45
- ddeclonlat: `${this.gps[0].toFixed(7)}, ${this.gps[1].toFixed(7)}`,
44
+ ddeclatlon: `${this.gps[1].toFixed(5)}, ${this.gps[0].toFixed(5)}`,
45
+ ddeclonlat: `${this.gps[0].toFixed(5)}, ${this.gps[1].toFixed(5)}`,
46
46
  ddmslonlat: `${dmslon}, ${dmslat}`,
47
47
  ddmslatlon: `${dmslat}, ${dmslon}`,
48
48
  };