@panoramax/web-viewer 4.0.3 → 4.1.0

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 (103) hide show
  1. package/CHANGELOG.md +40 -1
  2. package/build/index.css +9 -9
  3. package/build/index.css.map +1 -1
  4. package/build/index.js +640 -456
  5. package/build/index.js.map +1 -1
  6. package/build/photo.html +1 -1
  7. package/build/viewer.html +3 -3
  8. package/build/widgets.html +1 -1
  9. package/config/jest/mocks.js +9 -1
  10. package/docs/03_URL_settings.md +21 -0
  11. package/docs/09_Develop.md +6 -0
  12. package/docs/images/comparative_3drender.jpg +0 -0
  13. package/docs/index.md +13 -0
  14. package/docs/reference/components/core/Editor.md +18 -0
  15. package/docs/reference/components/core/PhotoViewer.md +1 -0
  16. package/docs/reference/components/core/Viewer.md +1 -0
  17. package/docs/reference/components/menus/MapLegend.md +17 -0
  18. package/docs/reference/components/menus/MiniPictureLegend.md +15 -0
  19. package/docs/reference/components/menus/PictureLegend.md +17 -0
  20. package/docs/reference/components/ui/AnnotationsSwitch.md +15 -0
  21. package/docs/reference/components/ui/Button.md +1 -1
  22. package/docs/reference/components/ui/CopyButton.md +1 -1
  23. package/docs/reference/components/ui/LinkButton.md +1 -1
  24. package/docs/reference/components/ui/Map.md +18 -2
  25. package/docs/reference/components/ui/MapMore.md +6 -2
  26. package/docs/reference/components/ui/SemanticsEditor.md +87 -0
  27. package/docs/reference/components/ui/widgets/Legend.md +5 -4
  28. package/docs/reference/utils/URLHandler.md +7 -0
  29. package/docs/reference.md +3 -1
  30. package/docs/tutorials/aerial_imagery.md +13 -11
  31. package/mkdocs.yml +3 -1
  32. package/package.json +7 -7
  33. package/public/photo.html +1 -1
  34. package/public/viewer.html +3 -3
  35. package/public/widgets.html +32 -0
  36. package/src/components/core/Basic.css +2 -0
  37. package/src/components/core/Basic.js +3 -1
  38. package/src/components/core/CoverageMap.js +6 -0
  39. package/src/components/core/Editor.css +1 -0
  40. package/src/components/core/Editor.js +58 -7
  41. package/src/components/core/PhotoViewer.css +5 -10
  42. package/src/components/core/PhotoViewer.js +55 -20
  43. package/src/components/core/Viewer.css +9 -2
  44. package/src/components/core/Viewer.js +62 -33
  45. package/src/components/layout/BottomDrawer.js +2 -1
  46. package/src/components/layout/Tabs.js +4 -0
  47. package/src/components/menus/AnnotationsList.js +13 -9
  48. package/src/components/menus/MapBackground.js +8 -3
  49. package/src/components/menus/MapFilters.js +11 -2
  50. package/src/components/menus/MapLayers.js +3 -2
  51. package/src/components/menus/MapLegend.js +28 -4
  52. package/src/components/menus/MiniPictureLegend.js +74 -0
  53. package/src/components/menus/PictureLegend.js +88 -33
  54. package/src/components/menus/PictureMetadata.js +49 -17
  55. package/src/components/menus/PlayerOptions.js +3 -3
  56. package/src/components/menus/Share.js +3 -3
  57. package/src/components/menus/index.js +5 -4
  58. package/src/components/styles.js +11 -0
  59. package/src/components/ui/AnnotationsSwitch.js +169 -0
  60. package/src/components/ui/Button.js +1 -1
  61. package/src/components/ui/CopyButton.js +1 -1
  62. package/src/components/ui/LinkButton.js +1 -1
  63. package/src/components/ui/Map.css +4 -0
  64. package/src/components/ui/Map.js +17 -5
  65. package/src/components/ui/MapMore.js +61 -25
  66. package/src/components/ui/Photo.css +11 -2
  67. package/src/components/ui/Photo.js +6 -3
  68. package/src/components/ui/SemanticsEditor.js +157 -0
  69. package/src/components/ui/index.js +2 -1
  70. package/src/components/ui/widgets/GeoSearch.js +3 -2
  71. package/src/components/ui/widgets/Legend.js +69 -14
  72. package/src/components/ui/widgets/MapFiltersButton.js +3 -3
  73. package/src/components/ui/widgets/MapLayersButton.js +3 -3
  74. package/src/components/ui/widgets/OSMEditors.js +2 -2
  75. package/src/components/ui/widgets/PictureLegendActions.js +24 -42
  76. package/src/components/ui/widgets/Player.js +3 -3
  77. package/src/components/ui/widgets/Zoom.js +4 -2
  78. package/src/translations/ar.json +1 -0
  79. package/src/translations/da.json +3 -2
  80. package/src/translations/de.json +64 -13
  81. package/src/translations/en.json +5 -1
  82. package/src/translations/eo.json +32 -2
  83. package/src/translations/fr.json +7 -1
  84. package/src/translations/it.json +33 -2
  85. package/src/translations/nl.json +53 -11
  86. package/src/translations/zh_Hant.json +29 -2
  87. package/src/utils/API.js +17 -1
  88. package/src/utils/InitParameters.js +46 -4
  89. package/src/utils/URLHandler.js +9 -1
  90. package/src/utils/map.js +24 -1
  91. package/src/utils/semantics.js +53 -1
  92. package/src/utils/services.js +16 -0
  93. package/src/utils/widgets.js +20 -0
  94. package/tests/components/core/Editor.test.js +1 -1
  95. package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap +18 -6
  96. package/tests/components/core/__snapshots__/Viewer.test.js.snap +15 -3
  97. package/tests/components/ui/Photo.test.js +1 -0
  98. package/tests/components/ui/__snapshots__/Map.test.js.snap +164 -0
  99. package/tests/utils/InitParameters.test.js +27 -0
  100. package/tests/utils/map.test.js +12 -0
  101. package/tests/utils/semantics.test.js +34 -5
  102. package/docs/reference/components/ui/HashTags.md +0 -15
  103. package/src/components/ui/HashTags.js +0 -98
package/build/photo.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 Photo 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-photo-viewer id="viewer" class="fullpage" sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8" picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"/><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>
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 Photo 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-photo-viewer id="viewer" class="fullpage" sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8" picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"></pnx-photo-viewer><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/viewer.html CHANGED
@@ -2,11 +2,11 @@
2
2
  raster: {
3
3
  type: "raster",
4
4
  tiles: [
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}"
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_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
6
6
  ],
7
7
  minzoom: 0,
8
- maxzoom: 21,
8
+ maxzoom: 19,
9
9
  attribution: "&copy; IGN",
10
10
  tileSize: 256
11
11
  }
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>
12
+ }'></pnx-viewer><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 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 Widgets</title><style>body{font-family:sans-serif;padding-bottom:100px}h1,h2,nav,p{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><nav><a href="#button">Button</a> <a href="#link-button">Link Button</a> <a href="#copy-button">Copy button</a> <a href="#button-group">Button Group</a> <a href="#5stars">5-stars grade</a> <a href="#quality-score">Quality Score</a> <a href="#search-bar">Search bar</a> <a href="#progress-bar">Progress bar</a> <a href="#tabs">Tabs</a></nav><h2 id="button">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>Inline</h3><pnx-button kind="inline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Inline active</h3><pnx-button kind="inline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Inline L</h3><pnx-button kind="inline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Inline XXL</h3><pnx-button kind="inline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Superinline</h3><pnx-button kind="superinline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superinline active</h3><pnx-button kind="superinline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superinline L</h3><pnx-button kind="superinline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Superinline XXL</h3><pnx-button kind="superinline" 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><div class="test-bench"><h3>Superflat</h3><pnx-button kind="superflat">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superflat active</h3><pnx-button kind="superflat" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superflat L</h3><pnx-button kind="superflat" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Superflat XXL</h3><pnx-button kind="superflat" size="xxl">⚙️</pnx-button></div><h2 id="link-button">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 id="copy-button">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 id="button-group">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 id="5stars">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 id="quality-score">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 id="search-bar">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><h2 id="progress-bar">Progress bar</h2><div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div><div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div><div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div><h2 id="tabs">Tabs</h2><div class="test-bench"><h3>Many</h3><pnx-tabs><h4 slot="title">Tab 1</h4><div slot="content">Tab 1 content</div><h4 slot="title">Tab 2</h4><div slot="content">Tab 2 content</div><h4 slot="title">Tab 3</h4><div slot="content">Tab 3 content</div></pnx-tabs></div></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 Widgets</title><style>body{font-family:sans-serif;padding-bottom:100px}h1,h2,nav,p{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><nav><a href="#button">Button</a> <a href="#link-button">Link Button</a> <a href="#copy-button">Copy button</a> <a href="#button-group">Button Group</a> <a href="#5stars">5-stars grade</a> <a href="#quality-score">Quality Score</a> <a href="#search-bar">Search bar</a> <a href="#progress-bar">Progress bar</a> <a href="#tabs">Tabs</a> <a href="#semantics-editor">Semantics Editor</a></nav><h2 id="button">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>Inline</h3><pnx-button kind="inline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Inline active</h3><pnx-button kind="inline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Inline L</h3><pnx-button kind="inline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Inline XXL</h3><pnx-button kind="inline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Superinline</h3><pnx-button kind="superinline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superinline active</h3><pnx-button kind="superinline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superinline L</h3><pnx-button kind="superinline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Superinline XXL</h3><pnx-button kind="superinline" 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><div class="test-bench"><h3>Superflat</h3><pnx-button kind="superflat">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superflat active</h3><pnx-button kind="superflat" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superflat L</h3><pnx-button kind="superflat" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Superflat XXL</h3><pnx-button kind="superflat" size="xxl">⚙️</pnx-button></div><h2 id="link-button">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 id="copy-button">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 id="button-group">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 id="5stars">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 id="quality-score">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 id="search-bar">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><h2 id="progress-bar">Progress bar</h2><div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div><div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div><div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div><h2 id="tabs">Tabs</h2><div class="test-bench"><h3>Many</h3><pnx-tabs><h4 slot="title">Tab 1</h4><div slot="content">Tab 1 content</div><h4 slot="title">Tab 2</h4><div slot="content">Tab 2 content</div><h4 slot="title">Tab 3</h4><div slot="content">Tab 3 content</div></pnx-tabs></div><h2 id="semantics-editor">Semantics editor</h2><script>window.addEventListener("load",(()=>{const e=document.getElementsByTagName("pnx-semantics-editor");for(let t=0;t<e.length;t++){const n=e[t];n.nextSibling;n.addEventListener("change",(e=>{console.log("Semantics change > evt =",e.detail,"| attr =",n.getAttribute("semantics"))}))}}))</script><div class="test-bench"><h3>Empty</h3><pnx-semantics-editor _t='{"pnx": {"semantics_editor_error": "The syntax is invalid. Your tags may look like:\nkey=value\nprefix|key=value\nprefix|key[qualif_key=qualif_val]=value"}}'></pnx-semantics-editor></div><div class="test-bench"><h3>Filled</h3><pnx-semantics-editor semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor></div><div class="test-bench"><h3>Many rows</h3><pnx-semantics-editor rows="5" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor></div><div class="test-bench"><h3>Custom style</h3><style>#pnx-sem-ed3::part(text){color:#00f}</style><pnx-semantics-editor id="pnx-sem-ed3" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor></div></body></html>
package/config/jest/mocks.js CHANGED
@@ -79,7 +79,9 @@ jest.mock("maplibre-gl", () => ({
79
79
  GeolocateControl: class {
80
80
  onAdd() {;}
81
81
  },
82
- Marker: jest.fn(),
82
+ Marker: class {
83
+ setDraggable() {;}
84
+ },
83
85
  Popup: function() {
84
86
  return {
85
87
  on: jest.fn(),
@@ -150,6 +152,12 @@ jest.mock("@photo-sphere-viewer/core", () => ({
150
152
  }
151
153
  };
152
154
  this.receivedEvents = [];
155
+ this.container = {
156
+ classList: {
157
+ add: jest.fn(),
158
+ remove: jest.fn(),
159
+ },
160
+ };
153
161
  }
154
162
  addEventListener(t, h) {
155
163
  this.receivedEvents.push([t, h]);
package/docs/03_URL_settings.md CHANGED
@@ -75,6 +75,27 @@ Example:
75
75
  xyz=10/25/50
76
76
  ```
77
77
 
78
+ ### :material-tag-arrow-right: `xywh`: picture position (annotation format)
79
+
80
+ The position to show on picture at first load, in common annotation format.
81
+
82
+ ```
83
+ x,y,w,h
84
+ ```
85
+
86
+ With:
87
+
88
+ - `x`: the horizontal offset compared to original picture left border (in pixels)
89
+ - `y`: the vertical offset compared to original picture top border (in pixels)
90
+ - `w`: the area width (in pixels)
91
+ - `h`: the area height (in pixels)
92
+
93
+ Example:
94
+
95
+ ```urlencoded
96
+ xywh=3520,1264,96,112
97
+ ```
98
+
78
99
  ## :map: Map settings
79
100
 
80
101
  ### :fontawesome-solid-location-dot: `map`: map position and visibility
package/docs/09_Develop.md CHANGED
@@ -64,6 +64,12 @@ The semantics system for sequences, pictures and annotations make use of __taggi
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
 
67
+ ### Rendering on mobile
68
+
69
+ In order to improve performance, the 3D sphere used for projecting the picture on mobile has a lower amount of polygons, meaning a bit of distortions can appear on-screen. This is directly linked to [PSV Equirectangular adapter's resolution parameter](https://photo-sphere-viewer.js.org/guide/adapters/equirectangular.html#resolution).
70
+
71
+ ![Comparative of mobile vs PC rendering](./images/comparative_3drender.jpg)
72
+
67
73
  ## Testing
68
74
 
69
75
  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:
package/docs/index.md CHANGED
@@ -118,6 +118,19 @@ A photo-only viewer, showing one picture at a time, and offering navigation thro
118
118
  />
119
119
  ```
120
120
 
121
+ If you'd like a photo viewer that looks like an iframe embed (with only a small legend widget), you may use this code:
122
+
123
+ ```html
124
+ <pnx-photo-viewer
125
+ endpoint="https://api.panoramax.xyz/api"
126
+ sequence="id-to-an-existing-sequence"
127
+ picture="id-to-a-picture-in-this-sequence"
128
+ widgets="false"
129
+ >
130
+ <pnx-widget-legend light slot="bottom-right"></pnx-widget-legend>
131
+ </pnx-photo-viewer>
132
+ ```
133
+
121
134
  [Many options are available as well](./reference/components/core/PhotoViewer.md).
122
135
 
123
136
  __Editor__
package/docs/reference/components/core/Editor.md CHANGED
@@ -5,6 +5,12 @@
5
5
  **Extends**: [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
6
6
  **Emits**: [<code>select</code>](Basic.md/#Panoramax.components.core.Basic+event_select), [<code>ready</code>](Basic.md/#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](Basic.md/#Panoramax.components.core.Basic+event_broken)
7
7
  **Element**: pnx-editor
8
+ **Slot**: `top-left` The top-left corner
9
+ **Slot**: `top` The top middle corner
10
+ **Slot**: `top-right` The top-right corner
11
+ **Slot**: `bottom-left` The bottom-left corner
12
+ **Slot**: `bottom` The bottom middle corner
13
+ **Slot**: `bottom-right` The bottom-right corner
8
14
  **Properties**
9
15
 
10
16
  | Name | Type | Description |
@@ -13,6 +19,7 @@
13
19
  | api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
14
20
  | map | [<code>Map</code>](../ui/Map.md/#Panoramax.components.ui.Map) | The MapLibre GL map itself |
15
21
  | psv | [<code>Photo</code>](../ui/Photo.md/#Panoramax.components.ui.Photo) | The Photo Sphere Viewer component itself |
22
+ | grid | [<code>CorneredGrid</code>](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) | The grid layout manager |
16
23
 
17
24
 
18
25
  * [.Editor](#Panoramax.components.core.Editor) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
@@ -40,12 +47,23 @@ It shows both picture and map.
40
47
 
41
48
  Make sure to set width/height through CSS for proper display.
42
49
 
50
+ This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
51
+
43
52
  **Example**
44
53
  ```html
54
+ <!-- Basic example -->
45
55
  <pnx-editor
46
56
  endpoint="https://panoramax.openstreetmap.fr/"
47
57
  style="width: 300px; height: 250px"
48
58
  />
59
+
60
+ <!-- With slotted widgets -->
61
+ <pnx-editor
62
+ endpoint="https://panoramax.openstreetmap.fr/"
63
+ style="width: 300px; height: 250px"
64
+ >
65
+ <p slot="top-right">My custom text</p>
66
+ </pnx-editor>
49
67
  ```
50
68
  <a name="Panoramax.components.core.Editor+properties"></a>
51
69
 
package/docs/reference/components/core/PhotoViewer.md CHANGED
@@ -106,6 +106,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
106
106
  | [fetchOptions] | <code>object</code> | | Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters)) |
107
107
  | [lang] | <code>string</code> | | To override language used for labels. Defaults to using user's preferred languages. |
108
108
  | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
109
+ | [keyboard-shortcuts] | <code>string</code> | <code>true</code> | Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts. |
109
110
 
110
111
  <a name="Panoramax.components.core.PhotoViewer+onceReady"></a>
111
112
 
package/docs/reference/components/core/Viewer.md CHANGED
@@ -114,6 +114,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
114
114
  | [map] | <code>object</code> | | An object with [any map option available in Map or MapMore class](../ui/MapMore.md/#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"` |
115
115
  | [psv] | <code>object</code> | | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"` |
116
116
  | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
117
+ | [keyboard-shortcuts] | <code>string</code> | <code>true</code> | Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts. |
117
118
  | [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
118
119
  | [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API) |
119
120
  | [widgets] | <code>string</code> | <code>true</code> | Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. |
package/docs/reference/components/menus/MapLegend.md CHANGED
@@ -4,6 +4,11 @@
4
4
  **Kind**: static class of <code>Panoramax.components.menus</code>
5
5
  **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
6
  **Element**: pnx-map-legend
7
+
8
+ * [.MapLegend](#Panoramax.components.menus.MapLegend) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
9
+ * [new MapLegend()](#new_Panoramax.components.menus.MapLegend_new)
10
+ * [.properties](#Panoramax.components.menus.MapLegend+properties) : <code>Object</code>
11
+
7
12
  <a name="new_Panoramax.components.menus.MapLegend_new"></a>
8
13
 
9
14
  ### new MapLegend()
@@ -13,3 +18,15 @@ Map legend displays information about map sources.
13
18
  ```html
14
19
  <pnx-map-legend ._parent=${viewer} />
15
20
  ```
21
+ <a name="Panoramax.components.menus.MapLegend+properties"></a>
22
+
23
+ ### mapLegend.properties : <code>Object</code>
24
+ Component properties.
25
+
26
+ **Kind**: instance property of [<code>MapLegend</code>](#Panoramax.components.menus.MapLegend)
27
+ **Properties**
28
+
29
+ | Name | Type | Default | Description |
30
+ | --- | --- | --- | --- |
31
+ | [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
32
+
package/docs/reference/components/menus/MiniPictureLegend.md ADDED
@@ -0,0 +1,15 @@
1
+ <a name="Panoramax.components.menus.MiniPictureLegend"></a>
2
+
3
+ ## Panoramax.components.menus.MiniPictureLegend ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.menus</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-mini-picture-legend
7
+ <a name="new_Panoramax.components.menus.MiniPictureLegend_new"></a>
8
+
9
+ ### new MiniPictureLegend()
10
+ Mini picture legend shows info about picture capture date, when seen in mini component of viewer.
11
+
12
+ **Example**
13
+ ```html
14
+ <pnx-mini-picture-legend ._parent=${viewer} />
15
+ ```
package/docs/reference/components/menus/PictureLegend.md CHANGED
@@ -5,6 +5,11 @@
5
5
  **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
6
  **Element**: pnx-picture-legend
7
7
  **Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
8
+
9
+ * [.PictureLegend](#Panoramax.components.menus.PictureLegend) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
10
+ * [new PictureLegend()](#new_Panoramax.components.menus.PictureLegend_new)
11
+ * [.properties](#Panoramax.components.menus.PictureLegend+properties) : <code>Object</code>
12
+
8
13
  <a name="new_Panoramax.components.menus.PictureLegend_new"></a>
9
14
 
10
15
  ### new PictureLegend()
@@ -14,3 +19,15 @@ Picture legend shows info about picture author, capture date, address, and acces
14
19
  ```html
15
20
  <pnx-picture-legend ._parent=${viewer} />
16
21
  ```
22
+ <a name="Panoramax.components.menus.PictureLegend+properties"></a>
23
+
24
+ ### pictureLegend.properties : <code>Object</code>
25
+ Component properties.
26
+
27
+ **Kind**: instance property of [<code>PictureLegend</code>](#Panoramax.components.menus.PictureLegend)
28
+ **Properties**
29
+
30
+ | Name | Type | Default | Description |
31
+ | --- | --- | --- | --- |
32
+ | [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
33
+
package/docs/reference/components/ui/AnnotationsSwitch.md ADDED
@@ -0,0 +1,15 @@
1
+ <a name="Panoramax.components.ui.AnnotationsSwitch"></a>
2
+
3
+ ## Panoramax.components.ui.AnnotationsSwitch ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.ui</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-annotations-switch
7
+ <a name="new_Panoramax.components.ui.AnnotationsSwitch_new"></a>
8
+
9
+ ### new AnnotationsSwitch()
10
+ AnnotationsSwitch component allows to switch on/off pictures annotations.
11
+
12
+ **Example**
13
+ ```html
14
+ <pnx-annotations-switch ._parent=${viewer} />
15
+ ```
package/docs/reference/components/ui/Button.md CHANGED
@@ -32,7 +32,7 @@ Component properties.
32
32
  | Name | Type | Default | Description |
33
33
  | --- | --- | --- | --- |
34
34
  | [active] | <code>boolean</code> | <code>false</code> | Whether the button is in an active state. |
35
- | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
35
+ | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline) |
36
36
  | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
37
37
  | [disabled] | <code>boolean</code> | <code>false</code> | Whether the button is disabled. |
38
38
  | [type] | <code>string</code> | | The button type (e.g., 'submit'). |
package/docs/reference/components/ui/CopyButton.md CHANGED
@@ -32,7 +32,7 @@ Component properties.
32
32
  | --- | --- | --- | --- |
33
33
  | [text] | <code>string</code> | | Text to copy in clipboard on click (use either this parameter or input, not both) |
34
34
  | [input] | <code>input</code> | | ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both) |
35
- | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
35
+ | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline) |
36
36
  | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
37
37
  | [unstyled] | <code>boolean</code> | <code>false</code> | Disable all styling (for list group integration) |
38
38
  | [title] | <code>string</code> | | Tooltip text displayed when hovering over the button |
package/docs/reference/components/ui/LinkButton.md CHANGED
@@ -40,6 +40,6 @@ Component properties.
40
40
  | [title] | <code>string</code> | | Tooltip text displayed when hovering over the button |
41
41
  | [download] | <code>string</code> | | Indicates if the linked resource should be downloaded |
42
42
  | [class] | <code>string</code> | | Custom CSS class for additional styling |
43
- | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat) |
43
+ | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat) |
44
44
  | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
45
45
 
package/docs/reference/components/ui/Map.md CHANGED
@@ -17,9 +17,10 @@
17
17
  * [.onceLayerReady(layerId)](#Panoramax.components.ui.Map+onceLayerReady) ⇒ <code>Promise</code>
18
18
  * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers)
19
19
  * [.filterUserLayersContent(dataType, filter)](#Panoramax.components.ui.Map+filterUserLayersContent)
20
- * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
20
+ * [.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])](#Panoramax.components.ui.Map+displayPictureMarker)
21
21
  * [.reloadLayersStyles()](#Panoramax.components.ui.Map+reloadLayersStyles)
22
22
  * [.addEventListener(type, listener)](#Panoramax.components.ui.Map+addEventListener)
23
+ * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers)
23
24
  * ["ready"](#Panoramax.components.ui.Map+event_ready)
24
25
  * ["background-changed"](#Panoramax.components.ui.Map+event_background-changed)
25
26
  * ["users-changed"](#Panoramax.components.ui.Map+event_users-changed)
@@ -50,6 +51,7 @@ A shorthand `addEventListener` function is added for simpler usage.
50
51
  | [options.raster] | <code>object</code> | | The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster). |
51
52
  | [options.background] | <code>string</code> | <code>&quot;streets&quot;</code> | Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street. |
52
53
  | [options.attributionControl.customAttribution] | <code>string</code> | | To override default map attribution. |
54
+ | [options.picMarkerDraggable] | <code>boolean</code> | | To make the picture marker draggable, default to false. |
53
55
 
54
56
  **Example**
55
57
  ```js
@@ -147,9 +149,11 @@ Filter the visible data content in all visible map layers
147
149
 
148
150
  <a name="Panoramax.components.ui.Map+displayPictureMarker"></a>
149
151
 
150
- ### map.displayPictureMarker(lon, lat, heading, [skipCenter])
152
+ ### map.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])
151
153
  Shows on map a picture position and heading.
152
154
 
155
+ If no longitude & latitude are set, marker is removed from map.
156
+
153
157
  **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map)
154
158
 
155
159
  | Param | Type | Default | Description |
@@ -158,6 +162,7 @@ Shows on map a picture position and heading.
158
162
  | lat | <code>number</code> | | The latitude |
159
163
  | heading | <code>number</code> | | The heading |
160
164
  | [skipCenter] | <code>boolean</code> | <code>false</code> | Set to true to avoid map centering on marker |
165
+ | [picId] | <code>string</code> | <code>null</code> | The picture Id |
161
166
 
162
167
  <a name="Panoramax.components.ui.Map+reloadLayersStyles"></a>
163
168
 
@@ -180,6 +185,17 @@ This is a binder to [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/
180
185
  | listener | <code>function</code> | | The event handler |
181
186
  | [options.once] | <code>boolean</code> | <code>false</code> | Set to true to only listen to first event. |
182
187
 
188
+ <a name="Panoramax.components.ui.Map+setVisibleUsers"></a>
189
+
190
+ ### map.setVisibleUsers(visibleIds)
191
+ Make given user layers visible on map, and hide all others (if any)
192
+
193
+ **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map)
194
+
195
+ | Param | Type | Description |
196
+ | --- | --- | --- |
197
+ | visibleIds | <code>string</code> \| <code>Array.&lt;string&gt;</code> | The user layers IDs to display |
198
+
183
199
  <a name="Panoramax.components.ui.Map+event_ready"></a>
184
200
 
185
201
  ### "ready"
package/docs/reference/components/ui/MapMore.md CHANGED
@@ -17,7 +17,7 @@
17
17
  * [.onceLayerReady(layerId)](Map.md/#Panoramax.components.ui.Map+onceLayerReady) ⇒ <code>Promise</code>
18
18
  * [.setVisibleUsers(visibleIds)](Map.md/#Panoramax.components.ui.Map+setVisibleUsers)
19
19
  * [.filterUserLayersContent(dataType, filter)](Map.md/#Panoramax.components.ui.Map+filterUserLayersContent)
20
- * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
20
+ * [.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])](#Panoramax.components.ui.Map+displayPictureMarker)
21
21
  * [.reloadLayersStyles()](Map.md/#Panoramax.components.ui.Map+reloadLayersStyles)
22
22
  * [.addEventListener(type, listener)](Map.md/#Panoramax.components.ui.Map+addEventListener)
23
23
  * ["filters-changed"](#Panoramax.components.ui.MapMore+event_filters-changed)
@@ -128,6 +128,7 @@ Wait for a given map layer to be really available.
128
128
  Make given user layers visible on map, and hide all others (if any)
129
129
 
130
130
  **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)
131
+ **Overrides**: [<code>setVisibleUsers</code>](Map.md/#Panoramax.components.ui.Map+setVisibleUsers)
131
132
 
132
133
  | Param | Type | Description |
133
134
  | --- | --- | --- |
@@ -147,9 +148,11 @@ Filter the visible data content in all visible map layers
147
148
 
148
149
  <a name="Panoramax.components.ui.Map+displayPictureMarker"></a>
149
150
 
150
- ### mapMore.displayPictureMarker(lon, lat, heading, [skipCenter])
151
+ ### mapMore.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])
151
152
  Shows on map a picture position and heading.
152
153
 
154
+ If no longitude & latitude are set, marker is removed from map.
155
+
153
156
  **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)
154
157
 
155
158
  | Param | Type | Default | Description |
@@ -158,6 +161,7 @@ Shows on map a picture position and heading.
158
161
  | lat | <code>number</code> | | The latitude |
159
162
  | heading | <code>number</code> | | The heading |
160
163
  | [skipCenter] | <code>boolean</code> | <code>false</code> | Set to true to avoid map centering on marker |
164
+ | [picId] | <code>string</code> | <code>null</code> | The picture Id |
161
165
 
162
166
  <a name="Panoramax.components.ui.Map+reloadLayersStyles"></a>
163
167
 
package/docs/reference/components/ui/SemanticsEditor.md ADDED
@@ -0,0 +1,87 @@
1
+ <a name="Panoramax.components.ui.SemanticsEditor"></a>
2
+
3
+ ## Panoramax.components.ui.SemanticsEditor ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.ui</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Emits**: [<code>change</code>](#Panoramax.components.ui.SemanticsEditor+event_change)
7
+ **Element**: pnx-semantics-editor
8
+
9
+ * [.SemanticsEditor](#Panoramax.components.ui.SemanticsEditor) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
10
+ * [new SemanticsEditor()](#new_Panoramax.components.ui.SemanticsEditor_new)
11
+ * [.properties](#Panoramax.components.ui.SemanticsEditor+properties) : <code>Object</code>
12
+ * [.getDiff()](#Panoramax.components.ui.SemanticsEditor+getDiff) ⇒ <code>Array.&lt;object&gt;</code>
13
+ * [.checkValidity()](#Panoramax.components.ui.SemanticsEditor+checkValidity) ⇒ <code>boolean</code>
14
+ * ["change"](#Panoramax.components.ui.SemanticsEditor+event_change)
15
+
16
+ <a name="new_Panoramax.components.ui.SemanticsEditor_new"></a>
17
+
18
+ ### new SemanticsEditor()
19
+ Semantics Editor offer an easy-to-use input for adding or editing semantics tags.
20
+
21
+ It manipulates list of `{key: "mypanokey", value: "myvalue"}` entries through `semantics` attribute.
22
+
23
+ **Example**
24
+ ```html
25
+ <!-- Basic example -->
26
+ <pnx-semantics-editor
27
+ id="editor"
28
+ semantics=${mypic.semantics}
29
+ ._t=${viewer._t}
30
+ onchange=${e => console.log(e.detail.semantics)}
31
+ />
32
+
33
+ <!-- You can access editor and check its validity through native web browser functions -->
34
+ <script>
35
+ const editor = document.getElementById("editor");
36
+ console.log(editor.checkValidity()); // True if input is valid
37
+ </script>
38
+
39
+ <!-- You can change specifically style of textarea -->
40
+ <style>
41
+ pnx-semantics-editor::part(text) {
42
+ color: blue;
43
+ }
44
+ </style>
45
+ ```
46
+ <a name="Panoramax.components.ui.SemanticsEditor+properties"></a>
47
+
48
+ ### semanticsEditor.properties : <code>Object</code>
49
+ Component properties.
50
+
51
+ **Kind**: instance property of [<code>SemanticsEditor</code>](#Panoramax.components.ui.SemanticsEditor)
52
+ **Properties**
53
+
54
+ | Name | Type | Default | Description |
55
+ | --- | --- | --- | --- |
56
+ | [semantics] | <code>object</code> | | The `semantics` field of a picture or annotation feature. It is updated when field changes, but reflect the whole list of new tags (not delta needed by API). If you want delta, please use getDiff function. |
57
+ | [rows] | <code>number</code> | <code>3</code> | The amount of rows shown for textarea |
58
+
59
+ <a name="Panoramax.components.ui.SemanticsEditor+getDiff"></a>
60
+
61
+ ### semanticsEditor.getDiff() ⇒ <code>Array.&lt;object&gt;</code>
62
+ Get current delta between initial tags and user changes.
63
+
64
+ **Kind**: instance method of [<code>SemanticsEditor</code>](#Panoramax.components.ui.SemanticsEditor)
65
+ **Returns**: <code>Array.&lt;object&gt;</code> - The list of tag changes (in API format)
66
+ <a name="Panoramax.components.ui.SemanticsEditor+checkValidity"></a>
67
+
68
+ ### semanticsEditor.checkValidity() ⇒ <code>boolean</code>
69
+ Check if input is having a valid value.
70
+
71
+ **Kind**: instance method of [<code>SemanticsEditor</code>](#Panoramax.components.ui.SemanticsEditor)
72
+ **Returns**: <code>boolean</code> - True if it's valid
73
+ <a name="Panoramax.components.ui.SemanticsEditor+event_change"></a>
74
+
75
+ ### "change"
76
+ Event for value change.
77
+
78
+ Note that this event is launched only on valid input.
79
+
80
+ **Kind**: event emitted by [<code>SemanticsEditor</code>](#Panoramax.components.ui.SemanticsEditor)
81
+ **Properties**
82
+
83
+ | Name | Type | Description |
84
+ | --- | --- | --- |
85
+ | detail.semantics | <code>Array.&lt;object&gt;</code> | The new tags list (in API semantics property format) |
86
+ | detail.delta | <code>Array.&lt;object&gt;</code> | The delta between old and current tags (expected by API) |
87
+
package/docs/reference/components/ui/widgets/Legend.md CHANGED
@@ -42,8 +42,9 @@ Component properties.
42
42
  **Kind**: instance property of [<code>Legend</code>](#Panoramax.components.ui.widgets.Legend)
43
43
  **Properties**
44
44
 
45
- | Name | Type | Description |
46
- | --- | --- | --- |
47
- | [focus] | <code>string</code> | The focused main component (map, pic) |
48
- | [picture] | <code>string</code> | The picture ID |
45
+ | Name | Type | Default | Description |
46
+ | --- | --- | --- | --- |
47
+ | [focus] | <code>string</code> | | The focused main component (map, pic) |
48
+ | [picture] | <code>string</code> | | The picture ID |
49
+ | [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
49
50
 
package/docs/reference/utils/URLHandler.md CHANGED
@@ -7,6 +7,7 @@
7
7
  * [.URLHandler](#Panoramax.utils.URLHandler)
8
8
  * [new URLHandler(parent)](#new_Panoramax.utils.URLHandler_new)
9
9
  * [.listenToChanges()](#Panoramax.utils.URLHandler+listenToChanges)
10
+ * [.destroy()](#Panoramax.utils.URLHandler+destroy)
10
11
  * [.nextURLParams()](#Panoramax.utils.URLHandler+nextURLParams) ⇒ <code>object</code>
11
12
  * [.nextURLString()](#Panoramax.utils.URLHandler+nextURLString) ⇒ <code>string</code>
12
13
  * [.currentURLParams([readFromHash])](#Panoramax.utils.URLHandler+currentURLParams) ⇒ <code>object</code>
@@ -34,6 +35,12 @@ Note that you may call `listenToChanges()` for this class to be effective once p
34
35
  Start listening to URL & parent changes through events.
35
36
  This leads to parent & URL updates.
36
37
 
38
+ **Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)
39
+ <a name="Panoramax.utils.URLHandler+destroy"></a>
40
+
41
+ ### urlHandler.destroy()
42
+ Call this function to stop listening to global events.
43
+
37
44
  **Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)
38
45
  <a name="Panoramax.utils.URLHandler+nextURLParams"></a>
39
46