@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

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 (221) hide show
  1. package/.gitlab-ci.yml +3 -0
  2. package/CHANGELOG.md +19 -0
  3. package/CODE_OF_CONDUCT.md +1 -1
  4. package/README.md +1 -1
  5. package/build/editor.html +10 -1
  6. package/build/index.css +2 -2
  7. package/build/index.css.map +1 -1
  8. package/build/index.html +1 -1
  9. package/build/index.js +1682 -5
  10. package/build/index.js.map +1 -1
  11. package/build/map.html +1 -1
  12. package/build/viewer.html +10 -1
  13. package/build/widgets.html +1 -0
  14. package/config/jest/mocks.js +172 -0
  15. package/config/paths.js +1 -0
  16. package/config/webpack.config.js +26 -0
  17. package/docs/03_URL_settings.md +3 -11
  18. package/docs/05_Compatibility.md +59 -76
  19. package/docs/09_Develop.md +30 -11
  20. package/docs/90_Releases.md +2 -2
  21. package/docs/images/class_diagram.drawio +28 -28
  22. package/docs/images/class_diagram.jpg +0 -0
  23. package/docs/index.md +112 -0
  24. package/docs/reference/components/core/Basic.md +153 -0
  25. package/docs/reference/components/core/CoverageMap.md +160 -0
  26. package/docs/reference/components/core/Editor.md +172 -0
  27. package/docs/reference/components/core/Viewer.md +288 -0
  28. package/docs/reference/components/layout/CorneredGrid.md +29 -0
  29. package/docs/reference/components/layout/Mini.md +45 -0
  30. package/docs/reference/components/menus/MapBackground.md +32 -0
  31. package/docs/reference/components/menus/MapFilters.md +15 -0
  32. package/docs/reference/components/menus/MapLayers.md +15 -0
  33. package/docs/reference/components/menus/MapLegend.md +15 -0
  34. package/docs/reference/components/menus/PictureLegend.md +15 -0
  35. package/docs/reference/components/menus/PictureMetadata.md +15 -0
  36. package/docs/reference/components/menus/PlayerOptions.md +15 -0
  37. package/docs/reference/components/menus/QualityScoreDoc.md +15 -0
  38. package/docs/reference/components/menus/ReportForm.md +15 -0
  39. package/docs/reference/components/menus/ShareMenu.md +15 -0
  40. package/docs/reference/components/ui/Button.md +39 -0
  41. package/docs/reference/components/ui/ButtonGroup.md +36 -0
  42. package/docs/reference/components/ui/CopyButton.md +35 -0
  43. package/docs/reference/components/ui/Grade.md +32 -0
  44. package/docs/reference/components/ui/LinkButton.md +44 -0
  45. package/docs/reference/components/ui/Loader.md +54 -0
  46. package/docs/reference/components/ui/Map.md +214 -0
  47. package/docs/reference/components/ui/MapMore.md +233 -0
  48. package/docs/reference/components/ui/Photo.md +369 -0
  49. package/docs/reference/components/ui/Popup.md +56 -0
  50. package/docs/reference/components/ui/QualityScore.md +45 -0
  51. package/docs/reference/components/ui/SearchBar.md +63 -0
  52. package/docs/reference/components/ui/TogglableGroup.md +39 -0
  53. package/docs/reference/components/ui/widgets/GeoSearch.md +32 -0
  54. package/docs/reference/components/ui/widgets/Legend.md +32 -0
  55. package/docs/reference/components/ui/widgets/MapFiltersButton.md +33 -0
  56. package/docs/reference/components/ui/widgets/MapLayersButton.md +15 -0
  57. package/docs/reference/components/ui/widgets/Player.md +32 -0
  58. package/docs/reference/components/ui/widgets/Share.md +15 -0
  59. package/docs/reference/components/ui/widgets/Zoom.md +15 -0
  60. package/docs/reference/utils/API.md +311 -0
  61. package/docs/reference/utils/InitParameters.md +67 -0
  62. package/docs/reference/utils/URLHandler.md +102 -0
  63. package/docs/reference.md +73 -0
  64. package/docs/shortcuts.md +11 -0
  65. package/docs/tutorials/aerial_imagery.md +19 -0
  66. package/docs/tutorials/authentication.md +10 -0
  67. package/docs/tutorials/custom_widgets.md +64 -0
  68. package/docs/tutorials/map_style.md +27 -0
  69. package/docs/tutorials/migrate_v4.md +122 -0
  70. package/docs/tutorials/synced_coverage.md +42 -0
  71. package/mkdocs.yml +60 -5
  72. package/package.json +10 -7
  73. package/public/editor.html +21 -29
  74. package/public/index.html +3 -3
  75. package/public/map.html +19 -18
  76. package/public/viewer.html +18 -24
  77. package/public/widgets.html +265 -0
  78. package/scripts/doc.js +77 -0
  79. package/src/components/core/Basic.css +44 -0
  80. package/src/components/core/Basic.js +258 -0
  81. package/src/components/core/CoverageMap.css +9 -0
  82. package/src/components/core/CoverageMap.js +105 -0
  83. package/src/components/core/Editor.css +23 -0
  84. package/src/components/core/Editor.js +354 -0
  85. package/src/components/core/Viewer.css +109 -0
  86. package/src/components/core/Viewer.js +707 -0
  87. package/src/components/core/index.js +11 -0
  88. package/src/components/index.js +13 -0
  89. package/src/components/layout/CorneredGrid.js +109 -0
  90. package/src/components/layout/Mini.js +117 -0
  91. package/src/components/layout/index.js +7 -0
  92. package/src/components/menus/MapBackground.js +106 -0
  93. package/src/components/menus/MapFilters.js +386 -0
  94. package/src/components/menus/MapLayers.js +143 -0
  95. package/src/components/menus/MapLegend.js +54 -0
  96. package/src/components/menus/PictureLegend.js +103 -0
  97. package/src/components/menus/PictureMetadata.js +188 -0
  98. package/src/components/menus/PlayerOptions.js +96 -0
  99. package/src/components/menus/QualityScoreDoc.js +36 -0
  100. package/src/components/menus/ReportForm.js +133 -0
  101. package/src/components/menus/Share.js +228 -0
  102. package/src/components/menus/index.js +15 -0
  103. package/src/components/styles.js +365 -0
  104. package/src/components/ui/Button.js +75 -0
  105. package/src/components/ui/ButtonGroup.css +49 -0
  106. package/src/components/ui/ButtonGroup.js +68 -0
  107. package/src/components/ui/CopyButton.js +71 -0
  108. package/src/components/ui/Grade.js +54 -0
  109. package/src/components/ui/LinkButton.js +68 -0
  110. package/src/components/ui/Loader.js +188 -0
  111. package/src/components/{Map.css → ui/Map.css} +5 -17
  112. package/src/components/{Map.js → ui/Map.js} +114 -138
  113. package/src/components/ui/MapMore.js +324 -0
  114. package/src/components/{Photo.css → ui/Photo.css} +6 -6
  115. package/src/components/{Photo.js → ui/Photo.js} +279 -90
  116. package/src/components/ui/Popup.js +145 -0
  117. package/src/components/ui/QualityScore.js +152 -0
  118. package/src/components/ui/SearchBar.js +363 -0
  119. package/src/components/ui/TogglableGroup.js +162 -0
  120. package/src/components/ui/index.js +20 -0
  121. package/src/components/ui/widgets/GeoSearch.css +21 -0
  122. package/src/components/ui/widgets/GeoSearch.js +139 -0
  123. package/src/components/ui/widgets/Legend.js +51 -0
  124. package/src/components/ui/widgets/MapFiltersButton.js +104 -0
  125. package/src/components/ui/widgets/MapLayersButton.js +79 -0
  126. package/src/components/ui/widgets/Player.css +7 -0
  127. package/src/components/ui/widgets/Player.js +148 -0
  128. package/src/components/ui/widgets/Share.js +30 -0
  129. package/src/components/ui/widgets/Zoom.js +82 -0
  130. package/src/components/ui/widgets/index.js +12 -0
  131. package/src/img/panoramax.svg +13 -0
  132. package/src/img/switch_big.svg +20 -10
  133. package/src/index.js +6 -9
  134. package/src/translations/da.json +1 -1
  135. package/src/translations/de.json +1 -1
  136. package/src/translations/en.json +5 -3
  137. package/src/translations/eo.json +1 -1
  138. package/src/translations/es.json +1 -1
  139. package/src/translations/fr.json +5 -3
  140. package/src/translations/hu.json +1 -1
  141. package/src/translations/it.json +1 -1
  142. package/src/translations/ja.json +1 -1
  143. package/src/translations/nl.json +1 -1
  144. package/src/translations/pl.json +1 -1
  145. package/src/translations/sv.json +1 -1
  146. package/src/translations/zh_Hant.json +1 -1
  147. package/src/utils/API.js +74 -42
  148. package/src/utils/InitParameters.js +354 -0
  149. package/src/utils/URLHandler.js +364 -0
  150. package/src/utils/geocoder.js +116 -0
  151. package/src/utils/{I18n.js → i18n.js} +3 -1
  152. package/src/utils/index.js +11 -0
  153. package/src/utils/{Map.js → map.js} +216 -80
  154. package/src/utils/picture.js +433 -0
  155. package/src/utils/utils.js +315 -0
  156. package/src/utils/widgets.js +93 -0
  157. package/tests/components/ui/CopyButton.test.js +52 -0
  158. package/tests/components/ui/Loader.test.js +54 -0
  159. package/tests/components/{Map.test.js → ui/Map.test.js} +19 -61
  160. package/tests/components/{Photo.test.js → ui/Photo.test.js} +89 -57
  161. package/tests/components/ui/Popup.test.js +24 -0
  162. package/tests/components/ui/QualityScore.test.js +17 -0
  163. package/tests/components/ui/SearchBar.test.js +107 -0
  164. package/tests/components/ui/__snapshots__/CopyButton.test.js.snap +34 -0
  165. package/tests/components/ui/__snapshots__/Loader.test.js.snap +56 -0
  166. package/tests/components/{__snapshots__ → ui/__snapshots__}/Map.test.js.snap +11 -38
  167. package/tests/components/{__snapshots__ → ui/__snapshots__}/Photo.test.js.snap +57 -4
  168. package/tests/components/ui/__snapshots__/Popup.test.js.snap +29 -0
  169. package/tests/components/ui/__snapshots__/QualityScore.test.js.snap +11 -0
  170. package/tests/components/ui/__snapshots__/SearchBar.test.js.snap +65 -0
  171. package/tests/utils/API.test.js +1 -14
  172. package/tests/utils/InitParameters.test.js +485 -0
  173. package/tests/utils/URLHandler.test.js +350 -0
  174. package/tests/utils/__snapshots__/URLHandler.test.js.snap +21 -0
  175. package/tests/utils/__snapshots__/picture.test.js.snap +315 -0
  176. package/tests/utils/__snapshots__/widgets.test.js.snap +19 -0
  177. package/tests/utils/geocoder.test.js +37 -0
  178. package/tests/utils/{I18n.test.js → i18n.test.js} +1 -1
  179. package/tests/utils/map.test.js +67 -0
  180. package/tests/utils/picture.test.js +745 -0
  181. package/tests/utils/utils.test.js +288 -0
  182. package/tests/utils/widgets.test.js +90 -0
  183. package/docs/01_Start.md +0 -149
  184. package/docs/02_Usage.md +0 -831
  185. package/docs/04_Advanced_examples.md +0 -216
  186. package/src/Editor.css +0 -37
  187. package/src/Editor.js +0 -361
  188. package/src/StandaloneMap.js +0 -114
  189. package/src/Viewer.css +0 -203
  190. package/src/Viewer.js +0 -1246
  191. package/src/components/CoreView.css +0 -70
  192. package/src/components/CoreView.js +0 -175
  193. package/src/components/Loader.css +0 -74
  194. package/src/components/Loader.js +0 -120
  195. package/src/utils/Exif.js +0 -193
  196. package/src/utils/Utils.js +0 -631
  197. package/src/utils/Widgets.js +0 -562
  198. package/src/viewer/URLHash.js +0 -469
  199. package/src/viewer/Widgets.css +0 -880
  200. package/src/viewer/Widgets.js +0 -1470
  201. package/tests/Editor.test.js +0 -126
  202. package/tests/StandaloneMap.test.js +0 -45
  203. package/tests/Viewer.test.js +0 -366
  204. package/tests/__snapshots__/Editor.test.js.snap +0 -298
  205. package/tests/__snapshots__/StandaloneMap.test.js.snap +0 -30
  206. package/tests/__snapshots__/Viewer.test.js.snap +0 -195
  207. package/tests/components/CoreView.test.js +0 -92
  208. package/tests/components/Loader.test.js +0 -38
  209. package/tests/components/__snapshots__/Loader.test.js.snap +0 -15
  210. package/tests/utils/Exif.test.js +0 -124
  211. package/tests/utils/Map.test.js +0 -113
  212. package/tests/utils/Utils.test.js +0 -300
  213. package/tests/utils/Widgets.test.js +0 -107
  214. package/tests/utils/__snapshots__/Exif.test.js.snap +0 -43
  215. package/tests/utils/__snapshots__/Utils.test.js.snap +0 -41
  216. package/tests/utils/__snapshots__/Widgets.test.js.snap +0 -44
  217. package/tests/viewer/URLHash.test.js +0 -559
  218. package/tests/viewer/Widgets.test.js +0 -127
  219. package/tests/viewer/__snapshots__/URLHash.test.js.snap +0 -108
  220. package/tests/viewer/__snapshots__/Widgets.test.js.snap +0 -403
  221. /package/tests/utils/__snapshots__/{Map.test.js.snap → geocoder.test.js.snap} +0 -0
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 Standalone 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><div id="map" class="fullpage"></div><script>var map;window.onload=()=>{(map=new Panoramax.StandaloneMap("map","https://api.panoramax.xyz/api")).addEventListener("ready",(()=>{map.addEventListener("select",(e=>{console.log("Selected sequence",e.detail.seqId,"picture",e.detail.picId)})),map.addEventListener("map:sequence-hover",(e=>{console.log("Hovered sequence",e.detail.seqId)}))}))}</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>#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>
package/build/viewer.html CHANGED
@@ -1 +1,10 @@
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><div id="viewer" class="fullpage"></div><script>var viewer,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=()=>{viewer=new Panoramax.Viewer("viewer",server,{widgets:{iframeBaseURL:"https://api.panoramax.xyz/"},map:{startWide:!0,raster:{type:"raster",tiles:["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}"],minzoom:0,maxzoom:21,attribution:"&copy; IGN",tileSize:256}}})}</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 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='{"raster": {
2
+ "type": "raster",
3
+ "tiles": [
4
+ "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}"
5
+ ],
6
+ "minzoom": 0,
7
+ "maxzoom": 21,
8
+ "attribution": "&copy; IGN",
9
+ "tileSize": 256
10
+ }}'/><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/build/widgets.html ADDED
@@ -0,0 +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 Widgets</title><style>body{font-family:sans-serif;padding-bottom:100px}h2{text-align:center}.test-bench{display:flex;width:100%;max-width:600px;margin:7px auto;justify-content:space-between;align-items:center}.test-bench h3{margin:0}hr.test-sep{width:100%;max-width:600px}</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><h1>Panoramax widgets</h1><p>Test page for common Panoramax viewer widgets</p><h2>Button</h2><div class="test-bench"><h3>Text + click</h3><pnx-button onclick='alert("Stuff")'>Click to do stuff</pnx-button></div><div class="test-bench"><h3>Icon</h3><pnx-button>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Active</h3><pnx-button active="true">Settings</pnx-button></div><div class="test-bench"><h3>CSS override</h3><div style="width:50%;display:flex;gap:5px;max-width:300px"><pnx-button style="width:50%">⚙️ Settings</pnx-button><pnx-button style="width:50%">🖨️ Print</pnx-button></div></div><hr class="test-sep"/><div class="test-bench"><h3>Full</h3><pnx-button kind="full">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Full active</h3><pnx-button kind="full" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Full L</h3><pnx-button kind="full" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Full XXL</h3><pnx-button kind="full" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Outline</h3><pnx-button kind="outline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Outline active</h3><pnx-button kind="outline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Outline L</h3><pnx-button kind="outline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Outline XXL</h3><pnx-button kind="outline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Flat</h3><pnx-button kind="flat">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Flat active</h3><pnx-button kind="flat" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Flat L</h3><pnx-button kind="flat" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Flat XXL</h3><pnx-button kind="flat" size="xxl">⚙️</pnx-button></div><h2>Link Button</h2><div class="test-bench"><h3>None set</h3><pnx-link-button>Click for nothing</pnx-link-button></div><div class="test-bench"><h3>All set</h3><pnx-link-button target="_blank" href="https://panoramax.fr" title="Do stuff">Click to do stuff</pnx-link-button></div><h2>Copy button</h2><div class="test-bench"><h3>Default + text</h3><pnx-copy-button text="copypasta1"></pnx-copy-button></div><div class="test-bench"><h3>Custom + text</h3><pnx-copy-button text="copypasta2">🌐 Share URL</pnx-copy-button></div><div class="test-bench"><h3>Default + input</h3><div style="display:flex;gap:5px;align-items:center"><input value="copypasta3" id="copy-input-1"/><pnx-copy-button input="copy-input-1"></pnx-copy-button></div></div><h2>Button Group</h2><div class="test-bench"><h3>Full Row x2</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Row x3</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-button>😐</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Row mixed</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-link-button>😐</pnx-link-button><pnx-copy-button>🙂</pnx-copy-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column x2</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column x3</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-button>😐</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column mixed</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-link-button>😐</pnx-link-button><pnx-copy-button>🙂</pnx-copy-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Outline Row x2</h3><div><pnx-button-group dir="row"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Row x3</h3><div><pnx-button-group dir="row"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">😐</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Column x2</h3><div><pnx-button-group dir="column"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Column x3</h3><div><pnx-button-group dir="column"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">😐</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Flat Row x2</h3><div><pnx-button-group dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Row x3</h3><div><pnx-button-group dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Column x2</h3><div><pnx-button-group dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Column x3</h3><div><pnx-button-group dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Row XL</h3><div><pnx-button-group size="xl" dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Column XL</h3><div><pnx-button-group size="xl" dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><h2>5-stars grade</h2><div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5"/></div><div class="test-bench"><h3>Without a grade</h3><pnx-grade/></div><h2>Quality Score</h2><div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score/></div><div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1"/></div><div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2"/></div><div class="test-bench"><h3>Classic 3/5</h3><pnx-quality-score grade="3"/></div><div class="test-bench"><h3>Classic 4/5</h3><pnx-quality-score grade="4"/></div><div class="test-bench"><h3>Classic 5/5</h3><pnx-quality-score grade="5"/></div><hr class="test-sep"/><div class="test-bench"><h3>Input</h3><pnx-quality-score input="qs"/></div><div class="test-bench"><h3>Input 1/5</h3><pnx-quality-score input="qs" grade="1"/></div><div class="test-bench"><h3>Input 2/5</h3><pnx-quality-score input="qs" grade="2"/></div><div class="test-bench"><h3>Input 3/5</h3><pnx-quality-score input="qs" grade="3"/></div><div class="test-bench"><h3>Input 4/5</h3><pnx-quality-score input="qs" grade="4"/></div><div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5"/></div><div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5"/></div><h2>Search bar</h2><div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div><div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Reduced</h3><pnx-search-bar reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><hr class="test-sep"/><div class="test-bench"><h3>Size md full</h3><pnx-search-bar size="md" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Size md reduced</h3><pnx-search-bar size="md" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><div class="test-bench"><h3>Size xxl full</h3><pnx-search-bar size="xxl" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Size xxl reduced</h3><pnx-search-bar size="xxl" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div></body></html>
package/config/jest/mocks.js ADDED
@@ -0,0 +1,172 @@
1
+ /*
2
+ * Common Jest mocks for complex libraries
3
+ */
4
+
5
+ jest.mock("lit", () => {
6
+ class MockLitElement {
7
+ static properties = {};
8
+ static styles = [];
9
+
10
+ constructor() {
11
+ this.shadowRoot = {
12
+ innerHTML: "",
13
+ appendChild: jest.fn(),
14
+ };
15
+ this.requestUpdate = jest.fn();
16
+ this.updateComplete = Promise.resolve();
17
+ this.style = {};
18
+ this.addEventListener = jest.fn();
19
+ this.dispatchEvent = jest.fn();
20
+ this.renderRoot = {
21
+ querySelectorAll: jest.fn(),
22
+ };
23
+ }
24
+
25
+ connectedCallback() {}
26
+ disconnectedCallback() {}
27
+ attributeChangedCallback() {}
28
+ adoptedCallback() {}
29
+ firstUpdated() {}
30
+ updated() {}
31
+ render() {
32
+ return "";
33
+ }
34
+ getAttribute() {}
35
+ }
36
+
37
+ return {
38
+ LitElement: MockLitElement,
39
+ css: jest.fn((styles) => styles),
40
+ html: jest.fn((strings, ...values) => strings.reduce((acc, str, i) => acc + str + (values[i] || ""), "")),
41
+ nothing: Symbol("lit-nothing"),
42
+ unsafeCSS: jest.fn((styles) => styles),
43
+ };
44
+ });
45
+
46
+
47
+ jest.mock("lit/directives/class-map.js", () => ({
48
+ classMap: jest.fn(),
49
+ }));
50
+
51
+
52
+ jest.mock("lit/directives/map.js", () => ({
53
+ map: jest.fn(),
54
+ }));
55
+
56
+
57
+ jest.mock("maplibre-gl", () => ({
58
+ addProtocol: jest.fn(),
59
+ AttributionControl: jest.fn(),
60
+ GeolocateControl: class {
61
+ onAdd() {;}
62
+ },
63
+ Marker: jest.fn(),
64
+ Popup: function() {
65
+ return {
66
+ on: jest.fn(),
67
+ };
68
+ },
69
+ Map: class {
70
+ constructor(opts) {
71
+ this._mapOpts = opts;
72
+ this._handlers = {};
73
+ }
74
+ getContainer() {
75
+ return this._mapOpts.container;
76
+ }
77
+ addControl() {;}
78
+ addSource() {;}
79
+ addLayer() {;}
80
+ getLayer() {;}
81
+ setLayoutProperty() {;}
82
+ getStyle() {
83
+ return {
84
+ layers: [],
85
+ sources: {},
86
+ metadata: {},
87
+ };
88
+ }
89
+ resize() {;}
90
+ on(type, handler) {
91
+ if(!this._handlers[type]) { this._handlers[type] = []; }
92
+ this._handlers[type].push(handler);
93
+ }
94
+ fire(type, opts) {
95
+ this._handlers[type]?.forEach(f => f(opts));
96
+ }
97
+ },
98
+ LngLat: function() {
99
+ return { lng: -1.7, lat: 47.8 };
100
+ },
101
+ LngLatBounds: function() {
102
+ return { sw: { lng: -1.7, lat: 47.8 }, ne: { lng: -1.7, lat: 47.8 } };
103
+ },
104
+ }));
105
+
106
+
107
+ jest.mock("@photo-sphere-viewer/core", () => ({
108
+ Viewer: class {
109
+ constructor(opts) {
110
+ this._psvOpts = opts;
111
+ this.loader = {
112
+ canvas: { setAttribute: jest.fn() },
113
+ __updateContent: jest.fn(),
114
+ show: jest.fn(),
115
+ };
116
+ this.renderer = {
117
+ renderer: {
118
+ toneMapping: null,
119
+ toneMappingExposure: null,
120
+ }
121
+ };
122
+ this.receivedEvents = [];
123
+ }
124
+ addEventListener(t, h) {
125
+ this.receivedEvents.push([t, h]);
126
+ if(t == "ready") { h(); }
127
+ }
128
+ dispatchEvent(e) {
129
+ this.receivedEvents
130
+ .filter(([t,h]) => e.type === t)
131
+ .forEach(([t,h]) => h(e?.detail));
132
+ }
133
+ getPlugin() {
134
+ return {
135
+ addEventListener: jest.fn(),
136
+ datasource: {
137
+ nodeResolver: jest.fn(),
138
+ },
139
+ arrowsRenderer: {
140
+ clear: jest.fn(),
141
+ },
142
+ state: {
143
+ currentNode: null,
144
+ datasource: { nodes: {} },
145
+ },
146
+ config: {
147
+ transitionOptions: jest.fn(),
148
+ },
149
+ getCurrentNode: jest.fn(),
150
+ __onEnterObject: jest.fn(),
151
+ __onLeaveObject: jest.fn(),
152
+ };
153
+ }
154
+ },
155
+ SYSTEM: {},
156
+ DEFAULTS: {},
157
+ }));
158
+
159
+
160
+ jest.mock("@photo-sphere-viewer/equirectangular-tiles-adapter", () => ({
161
+ EquirectangularTilesAdapter: jest.fn(),
162
+ }));
163
+
164
+
165
+ jest.mock("@photo-sphere-viewer/virtual-tour-plugin", () => ({
166
+ VirtualTourPlugin: jest.fn(),
167
+ }));
168
+
169
+
170
+ jest.mock("query-selector-shadow-dom", () => ({
171
+ querySelectorDeep: jest.fn(),
172
+ }));
package/config/paths.js CHANGED
@@ -53,6 +53,7 @@ module.exports = {
53
53
  appHtmlMap: resolveApp('public/map.html'),
54
54
  appHtmlEditor: resolveApp('public/editor.html'),
55
55
  appHtmlViewer: resolveApp('public/viewer.html'),
56
+ appHtmlWidgets: resolveApp('public/widgets.html'),
56
57
  appLibIndexJs: resolveModule(resolveApp, 'src/index'),
57
58
  appPackageJson: resolveApp('package.json'),
58
59
  appSrc: resolveApp('src'),
package/config/webpack.config.js CHANGED
@@ -718,6 +718,32 @@ module.exports = function (webpackEnv) {
718
718
  : undefined
719
719
  )
720
720
  ),
721
+ new HtmlWebpackPlugin(
722
+ Object.assign(
723
+ {},
724
+ {
725
+ inject: true,
726
+ filename: "widgets.html",
727
+ template: paths.appHtmlWidgets,
728
+ },
729
+ isEnvProduction
730
+ ? {
731
+ minify: {
732
+ removeComments: true,
733
+ collapseWhitespace: true,
734
+ removeRedundantAttributes: true,
735
+ useShortDoctype: true,
736
+ removeEmptyAttributes: true,
737
+ removeStyleLinkTypeAttributes: true,
738
+ keepClosingSlash: true,
739
+ minifyJS: true,
740
+ minifyCSS: true,
741
+ minifyURLs: true,
742
+ },
743
+ }
744
+ : undefined
745
+ )
746
+ ),
721
747
  // Inlines the webpack runtime script. This script is too small to warrant
722
748
  // a network request.
723
749
  // https://github.com/facebook/create-react-app/issues/5358
package/docs/03_URL_settings.md CHANGED
@@ -1,13 +1,13 @@
1
1
  # URL settings
2
2
 
3
- Various settings could be set from URL hash part in order to create permalinks.
3
+ Various settings could be set from URL query part in order to create permalinks.
4
4
 
5
- These are set after the `#` symbol of the URL, following a `key=value` format, each being separated by `&` symbol.
5
+ These are set after the `?` symbol of the URL, following a `key=value` format, each being separated by `&` symbol.
6
6
 
7
7
  Example:
8
8
 
9
9
  ```urlencoded
10
- https://panoramax.xyz/#map=19.51/48.1204522/-1.7199004&pic=890b6268-7716-4e34-ada9-69985e6c1657
10
+ https://api.panoramax.xyz/?map=19.51/48.1204522/-1.7199004&pic=890b6268-7716-4e34-ada9-69985e6c1657
11
11
  ```
12
12
 
13
13
  ## :fontawesome-solid-computer: Interface settings
@@ -38,10 +38,6 @@ Choose the allowed navigation between pictures, to eventually restrict what is v
38
38
  - `nav=seq`: can only see pictures in same sequence
39
39
  - `nav=none`: can only see current picture, no navigation to other picture allowed
40
40
 
41
- !!! note
42
-
43
- This parameter is intended to work on page first load. If used after page load, you may switch to another picture or fully reload pictures metadata cache in order to have expected behaviour.
44
-
45
41
  ## :material-image: Picture settings
46
42
 
47
43
  ### :material-barcode: `pic`: picture ID
@@ -88,10 +84,6 @@ Example:
88
84
  map=19.51/48.1204522/-1.7199004
89
85
  ```
90
86
 
91
- !!! note
92
-
93
- The `map=none` is intended to work __on page first load only__. Changing it dynamically will not hide the map, and will be reset on next map movement.
94
-
95
87
  ### :date: `date_from` and `date_to`: filter map data by date
96
88
 
97
89
  Minimum and maximum capture date for pictures and sequences to show on map (if map is enabled), in ISO format:
package/docs/05_Compatibility.md CHANGED
@@ -1,91 +1,74 @@
1
1
  # Compatibility with STAC API
2
2
 
3
- Panoramax viewer works best with a [Panoramax API](https://gitlab.com/panoramax/server/api), but is designed to be compatible with a wide range of [STAC API](https://github.com/radiantearth/stac-api-spec). Although, third-party STAC API needs the following requirements to work with our viewer:
3
+ Panoramax viewer works best with a [Panoramax API](https://gitlab.com/panoramax/server/api), but is designed to be compatible with a wide range of [STAC API](https://github.com/radiantearth/stac-api-spec). Although, third-party STAC API needs the following requirements to work with our viewer.
4
4
 
5
- - Collections corresponding to pictures sequences, and items corresponding to individual pictures
6
- - Offer a `/search` endpoint ([documentation](https://github.com/radiantearth/stac-api-spec/tree/main/item-search))
7
- - Picture items should have required metadata documented below.
8
- - Offer a vector tiles endpoint for map display, either with:
9
- - A [MapLibre Style JSON](https://maplibre.org/maplibre-style-spec/) file, advertised through landing page (`/api`) with a `xyz-style` link.
10
- - A direct tiles URL, pointing to tiles in [MVT format](https://mapbox.github.io/vector-tile-spec/) and following layer structure described below. It must be advertised in landing page (`/api`) using [Web Map Links](https://github.com/stac-extensions/web-map-links) STAC extension (as `xyz` link).
5
+ ## :octicons-search-16: Search endpoint
11
6
 
12
- Optional metadata could also be supplied by third-party STAC API to improve viewer usability:
7
+ Your STAC API should offer a `/search` endpoint ([documentation](https://github.com/radiantearth/stac-api-spec/tree/main/item-search)).
13
8
 
14
- - In landing page (`/api` route, corresponding to main STAC Catalog):
15
- - An `extent` property ([following this format](https://github.com/radiantearth/stac-spec/blob/master/collection-spec/collection-spec.md#extent-object)) could be provided to make map zoom in available data area by default.
16
- - A `collection-preview` link pointing to a formatted URL (like `https://yourserver.fr/api/collections/{id}/thumb.jpg`) which is a direct link to a thumbnail image to represent a specific sequence.
17
- - A `item-preview` link pointing to a formatted URL (like `http://localhost:5000/api/pictures/{id}/thumb.jpg`) which is a direct link to a thumbnail image for a given picture.
18
- - A `data` link with `application/rss+xml` media type pointing to a RSS feed of recently uploaded collections. Given link may also support a `bbox` query string parameter to filter collections by their location.
19
- - Links `user-xyz` (MVT media type) and `user-search` (JSON media type) to allow filtering by user.
20
- - A `report` link with `application/json` media type to allow posting pictures reports.
21
- - A `title` property for showing proper API name in viewer debug.
9
+ ## :fontawesome-regular-images: Collections and items
22
10
 
11
+ Collections should correspond to :fontawesome-regular-images: __pictures sequences__, and items corresponding to :fontawesome-regular-image: __individual pictures__.
23
12
 
24
- ## Perspective imagery metadata
25
-
26
- Pictures metadata follow [STAC item specification](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md), plus some extensions:
13
+ Individual pictures should follow [STAC item specification](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md), plus some extensions:
27
14
 
28
15
  - _Perspective imagery specification_ for its pictures and sequences metadata ([documentation](https://github.com/stac-extensions/perspective-imagery))
29
16
  - _Tiled assets specification_ for smooth display of high-resolution pictures ([documentation](https://github.com/stac-extensions/tiled-assets))
30
17
 
31
- Viewer relies on following item metadata for display:
32
-
33
- - `assets`
34
- - [`roles`](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md#asset-roles): `data`, `visual` and `thumbnail`
35
- - `type`: `image/jpeg` or `image/webp`
36
- - `href`
37
- - `assets_templates`
38
- - `tiles`
39
- - `role`: `data`
40
- - `href`
41
- - `geometry`
42
- - `collection`
43
- - `id`
44
- - `links`
45
- - [`rel`](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md#link-object): `prev`, `next`, `related`
46
- - `type`: `application/geo+json`
47
- - `id`
48
- - `geometry`
49
- - `datetime`
50
- - `properties`
51
- - `pers:interior_orientation`
52
- - `field_of_view`
53
- - `focal_length`
54
- - `view:azimuth`
55
- - `pers:roll`
56
- - `pers:pitch`
57
- - `datetime` or `datetimetz`
58
- - `tiles:tile_matrix_sets`
59
- - `geovisio`
60
- - `type`: `TileMatrixSetType`
61
- - `tileMatrix`
62
- - `matrixHeight`
63
- - `matrixWidth`
64
- - `tileHeight`
65
- - `tileWidth`
66
-
67
-
68
- ## Vector tiles format
69
-
70
- MVT Vector tiles must contain at least two layers : sequences and pictures.
71
-
72
- Layer _sequences_:
18
+ ??? info "List of support item metadata"
73
19
 
74
- - Available on all zoom levels
75
- - Available properties: `id` (sequence ID)
76
-
77
- Layer _pictures_:
78
-
79
- - Available on zoom levels >= 15
80
- - Available properties: `id` (picture ID), `ts` (picture date/time), `heading` (picture heading in degrees)
81
-
82
- A supplementary layer _grid_ can be made available for low-zoom overview:
83
-
84
- - Available on zoom levels < 6
85
- - Available properties: `id` (grid cell ID), `nb_pictures` (amount of pictures), `coef` (value from 0 to 1, relative quantity of available pictures)
86
- - Optional properties: `nb_360_pictures`, `coef_360_pictures`, `nb_flat_pictures`, `coef_flat_pictures` (similar to `nb_pictures` and `coef` but separated by picture type)
87
-
88
- ### Labels translation
20
+ - `assets`
21
+ - [`roles`](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md#asset-roles): `data`, `visual` and `thumbnail`
22
+ - `type`: `image/jpeg` or `image/webp`
23
+ - `href`
24
+ - `assets_templates`
25
+ - `tiles`
26
+ - `role`: `data`
27
+ - `href`
28
+ - `geometry`
29
+ - `collection`
30
+ - `id`
31
+ - `links`
32
+ - [`rel`](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md#link-object): `prev`, `next`, `related`
33
+ - `type`: `application/geo+json`
34
+ - `id`
35
+ - `geometry`
36
+ - `datetime`
37
+ - `properties`
38
+ - `pers:interior_orientation`
39
+ - `field_of_view`
40
+ - `focal_length`
41
+ - `view:azimuth`
42
+ - `pers:roll`
43
+ - `pers:pitch`
44
+ - `datetime` or `datetimetz`
45
+ - `tiles:tile_matrix_sets`
46
+ - `geovisio`
47
+ - `type`: `TileMatrixSetType`
48
+ - `tileMatrix`
49
+ - `matrixHeight`
50
+ - `matrixWidth`
51
+ - `tileHeight`
52
+ - `tileWidth`
53
+
54
+ ## :map: Vector tiles
55
+
56
+ If you want to use map in viewer, your STAC API should offer :map: vector tiles, through one of these ways:
57
+
58
+ - A [MapLibre Style JSON](https://maplibre.org/maplibre-style-spec/) file, advertised through landing page (`/api`) with a `xyz-style` link.
59
+ - A direct tiles URL, pointing to tiles in [MVT format](https://mapbox.github.io/vector-tile-spec/) and following layer structure described below. It must be advertised in landing page (`/api`) using [Web Map Links](https://github.com/stac-extensions/web-map-links) STAC extension (as `xyz` link).
60
+
61
+ ### Layers
62
+
63
+ MVT Vector tiles must have the following layers:
64
+
65
+ | Name | Zooms | Mandatory | Properties |
66
+ |------|-------|:---------:|------------|
67
+ | `sequences` | All | ✅ | - `id`: sequence ID |
68
+ | `pictures` | >= 15 | ✅ | - `id`: picture ID<br />- `ts`: picture date/time<br />- `heading`: picture heading in degrees |
69
+ | `grid` | < 6 | ❌ | __Mandatory:__<br />- `id`: grid cell ID<br />- `nb_pictures`: amount of pictures<br />- `coef`: value from 0 to 1, relative quantity of available pictures<br />__Optional:__<br />- `nb_360_pictures`<br />- `coef_360_pictures`<br />- `nb_flat_pictures`<br />- `coef_flat_pictures`<br />(similar to `nb_pictures` and `coef` but separated by picture type) |
70
+
71
+ ### Translation
89
72
 
90
73
  If your vector tiles support multiple languages, you can set in your `style.json` the list of supported languages :
91
74
 
package/docs/09_Develop.md CHANGED
@@ -4,24 +4,39 @@ You want to work on our library and offer bug fixes or new features ? That's awe
4
4
 
5
5
  Here are some inputs about working with Panoramax web client code.
6
6
 
7
- If something seems missing or incomplete, don't hesitate to contact us by [email](mailto:panieravide@riseup.net) 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)).
7
+ !!! note
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)).
8
10
 
9
11
  ## Architecture
10
12
 
11
13
  The current code is split between various elements:
12
14
 
13
- - __Views__: a single functional entry, like _Viewer_ (map + picture), _StandaloneMap_ or _Editor_. They share parts of code in _CoreView_ class. They specialized the behaviour of components depending on the needs.
14
- - __Components__: reusable elements, like _Map_, _Photo_ or _Loader_. They are used in some views depending of the context.
15
- - __Utils__: utility functions, splitted in various files for clarity (_API, I18n, Map, Utils, Widgets_).
15
+ - __Core components__: a single functional entry, like [Viewer](./reference/components/core/Viewer.md) (map + picture), [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, splitted in various files for clarity.
16
18
 
17
19
  ![Class diagram of Panoramax web viewer](./images/class_diagram.jpg)
18
20
 
19
21
  The library is relies on various other libraries:
20
22
 
23
+ - [Lit](https://lit.dev/), for web components management
21
24
  - [Photo Sphere Viewer](https://github.com/mistic100/Photo-Sphere-Viewer), for displaying classic and 360° pictures
22
25
  - [Maplibre GL JS](https://github.com/maplibre/maplibre-gl-js), for displaying the map which shows sequences and pictures location
23
26
  - [JS Library Boilerplate](https://github.com/hodgef/js-library-boilerplate), for having a ready-to-use development toolbox
24
27
 
28
+ ## Good to know
29
+
30
+ ### Components `z-index`
31
+
32
+ In order to offer a coherent overlay of widgets, we follow this general `z-index` ordering:
33
+
34
+ | Component type | Z-Index |
35
+ |-----------------------------------|:-------:|
36
+ | MapLibre GL & Photo Sphere Viewer | <= 110 |
37
+ | Widgets / Cornered Grid's corners | 120 |
38
+ | Togglable menus | 130 |
39
+ | Fullscreen loaders & popups | 200 |
25
40
 
26
41
  ## Testing
27
42
 
@@ -37,26 +52,30 @@ If you're working on bug fixes or new features, please __make sure to add approp
37
52
 
38
53
  ## Documentation
39
54
 
40
- Documentation is offered through two means in this repository:
55
+ The documentation is a mix of:
41
56
 
42
- - Code itself is documented with [JSDoc comments](https://jsdoc.app/about-getting-started)
43
- - A broader doc is available in `docs` folder
57
+ - [JSDoc comments](https://jsdoc.app/about-getting-started) embed directly in source files, and exported in `docs/reference/` folder
58
+ - Higher-level docs as Markdown files, in `docs/` folder.
44
59
 
45
- The code documentation can be generated using the following command:
60
+ The JSDoc can be exported as Markdown using this command:
46
61
 
47
62
  ```bash
48
63
  npm run doc
49
64
  ```
50
65
 
51
- That will update the `docs/02_Usage.md` file with all functions and parameters.
52
-
53
- The broader doc can be served and viewed using [Mkdocs](https://www.mkdocs.org/):
66
+ And all documentation can be previewed or built using [Mkdocs](https://www.mkdocs.org/):
54
67
 
55
68
  ```bash
56
69
  pip install mkdocs mkdocs-material
57
70
  mkdocs serve
71
+ mkdocs build
58
72
  ```
59
73
 
74
+ Online versions are available at:
75
+
76
+ - [docs.panoramax.fr](https://docs.panoramax.fr/web-viewer/) for __stable__ version
77
+ - [viewer.geovisio.fr/docs](https://viewer.geovisio.fr/docs/) for __develop__ version
78
+
60
79
  ## Make a release
61
80
 
62
81
  See [dedicated documentation](./90_Releases.md).
package/docs/90_Releases.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # Make a release
2
2
 
3
- Panoramax Web Viewer uses [semantic versioning](https://semver.org/) for its release numbers.
3
+ Panoramax JS uses [semantic versioning](https://semver.org/) for its release numbers.
4
4
 
5
5
  !!! note
6
6
 
7
- On Viewer versions < 3.0, a strong constraint was put to keep versions in sync between API and Viewer. Each component could have different `PATCH` versions, but compatibility __had to be__ ensured between `MAJOR.MINOR` versions. Since Viewer version >= 3.0, any STAC-compliant API should be supported by Viewer.
7
+ On versions < 3.0, a strong constraint was put to keep versions in sync between API and Viewer. Each component could have different `PATCH` versions, but compatibility __had to be__ ensured between `MAJOR.MINOR` versions. Since Viewer version >= 3.0, any STAC-compliant API should be supported by Viewer.
8
8
 
9
9
  Run these commands in order to issue a new release:
10
10