@panoramax/web-viewer 4.0.2 → 4.0.3-develop-d59993ce

package/config/jest/mocks.js

@@ -197,6 +197,11 @@ jest.mock("@photo-sphere-viewer/virtual-tour-plugin", () => ({
 }));
 
 
+jest.mock("@photo-sphere-viewer/markers-plugin", () => ({
+	MarkersPlugin: jest.fn(),
+}));
+
+
 jest.mock("query-selector-shadow-dom", () => ({
 	querySelectorDeep: jest.fn(),
 }));

package/docs/09_Develop.md

@@ -58,6 +58,12 @@ This means that, when developing, if you want to check if your attributes are we
 
 All third-party services URL (like geocoding API, OSM iD editor) are grouped into a dedicated `src/utils/services.js` file. You can easily change them to deploy a custom version of the viewer.
 
+### Presets for semantics
+
+The semantics system for sequences, pictures and annotations make use of __tagging presets__. These are JSON files hosted at [presets.panoramax.fr](https://presets.panoramax.fr/), they have their [dedicated Gitlab repository](https://gitlab.com/panoramax/server/tagging-presets).
+
+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.
+
 ## Testing
 
 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/reference/components/core/PhotoViewer.md

@@ -22,6 +22,7 @@
 | grid | [<code>CorneredGrid</code>](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) | The grid layout manager |
 | popup | [<code>Popup</code>](../ui/Popup.md/#Panoramax.components.ui.Popup) | The popup container |
 | urlHandler | [<code>URLHandler</code>](../../utils/URLHandler.md/#Panoramax.utils.URLHandler) | The URL query parameters manager |
+| presetsManager | [<code>PresetsManager</code>](../../utils/PresetsManager.md/#Panoramax.utils.PresetsManager) | The semantics presets manager |
 
 
 * [.PhotoViewer](#Panoramax.components.core.PhotoViewer) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)

package/docs/reference/components/core/Viewer.md

@@ -24,6 +24,7 @@
 | mini | [<code>Mini</code>](../layout/Mini.md/#Panoramax.components.layout.Mini) | The reduced/collapsed map/photo component |
 | popup | [<code>Popup</code>](../ui/Popup.md/#Panoramax.components.ui.Popup) | The popup container |
 | urlHandler | [<code>URLHandler</code>](../../utils/URLHandler.md/#Panoramax.utils.URLHandler) | The URL query parameters manager |
+| presetsManager | [<code>PresetsManager</code>](../../utils/PresetsManager.md/#Panoramax.utils.PresetsManager) | The semantics presets manager |
 
 
 * [.Viewer](#Panoramax.components.core.Viewer) ⇐ [<code>PhotoViewer</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer)
@@ -114,7 +115,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [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'}"` |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
 | [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
-| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
+| [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) |
 | [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. |
 | [picture] | <code>string</code> |  | The picture ID to display |
 | [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |

package/docs/reference/components/menus/AnnotationsList.md

@@ -0,0 +1,16 @@
+<a name="Panoramax.components.menus.AnnotationsList"></a>
+
+## Panoramax.components.menus.AnnotationsList ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.menus</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-annotations-list  
+<a name="new_Panoramax.components.menus.AnnotationsList_new"></a>
+
+### new AnnotationsList()
+Annotations list shows listing of tagged picture areas.
+It uses the parent component currently selected picture.
+
+**Example**  
+```html
+<pnx-annotations-list _parent=${viewer} />
+```

package/docs/reference/components/ui/HashTags.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.ui.HashTags"></a>
+
+## Panoramax.components.ui.HashTags ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-hashtags  
+<a name="new_Panoramax.components.ui.HashTags_new"></a>
+
+### new HashTags()
+HashTags component shows the list of hashtags associated to a picture.
+
+**Example**  
+```html
+<pnx-hashtags ._parent=${viewer} />
+```

package/docs/reference/components/ui/ListItem.md

@@ -0,0 +1,38 @@
+<a name="Panoramax.components.ui.ListItem"></a>
+
+## Panoramax.components.ui.ListItem ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-list-item  
+**Slot**: `icon` The left icon (symbol for this item)  
+**Slot**: `action` The right icon (symbol for an interactive action)  
+
+* [.ListItem](#Panoramax.components.ui.ListItem) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new ListItem()](#new_Panoramax.components.ui.ListItem_new)
+    * [.properties](#Panoramax.components.ui.ListItem+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.ListItem_new"></a>
+
+### new ListItem()
+ListItem is a list entry, in a Material Design fashion.
+
+**Example**  
+```html
+<pnx-list-item title="My feature" subtitle="It is very cool">
+  <img src="..." slot="icon" />
+  <img src="..." slot="action" />
+</pnx-list-item>
+```
+<a name="Panoramax.components.ui.ListItem+properties"></a>
+
+### listItem.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>ListItem</code>](#Panoramax.components.ui.ListItem)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| title | <code>string</code> | The item title |
+| [subtitle] | <code>string</code> | The item subtitle |
+

package/docs/reference/components/ui/Photo.md

@@ -3,7 +3,7 @@
 ## Panoramax.components.ui.Photo ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
 **Kind**: static class of <code>Panoramax.components.ui</code>  
 **Extends**: <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>  
-**Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed), [<code>ready</code>](#Panoramax.components.ui.Photo+event_ready)  
+**Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed), [<code>ready</code>](#Panoramax.components.ui.Photo+event_ready), [<code>annotations-toggled</code>](#Panoramax.components.ui.Photo+event_annotations-toggled), [<code>annotation-click</code>](#Panoramax.components.ui.Photo+event_annotation-click), [<code>annotations-unfocused</code>](#Panoramax.components.ui.Photo+event_annotations-unfocused)  
 
 * [.Photo](#Panoramax.components.ui.Photo) ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
     * [new Photo(parent, container, [options])](#new_Panoramax.components.ui.Photo_new)
@@ -28,6 +28,10 @@
     * [.toggleSequencePlaying()](#Panoramax.components.ui.Photo+toggleSequencePlaying)
     * [.getPicturesNavigation()](#Panoramax.components.ui.Photo+getPicturesNavigation) ⇒ <code>string</code>
     * [.setPicturesNavigation(pn)](#Panoramax.components.ui.Photo+setPicturesNavigation)
+    * [.areAnnotationsVisible()](#Panoramax.components.ui.Photo+areAnnotationsVisible) ⇒ <code>boolean</code>
+    * [.toggleAllAnnotations(visible)](#Panoramax.components.ui.Photo+toggleAllAnnotations)
+    * [.focusOnAnnotation(id)](#Panoramax.components.ui.Photo+focusOnAnnotation)
+    * [.unfocusAnnotation([skipEvent])](#Panoramax.components.ui.Photo+unfocusAnnotation)
     * [.forceRefresh()](#Panoramax.components.ui.Photo+forceRefresh)
     * ["ready"](#Panoramax.components.ui.Photo+event_ready)
     * ["picture-loading"](#Panoramax.components.ui.Photo+event_picture-loading)
@@ -35,11 +39,14 @@
     * ["picture-preview-stopped"](#Panoramax.components.ui.Photo+event_picture-preview-stopped)
     * ["view-rotated"](#Panoramax.components.ui.Photo+event_view-rotated)
     * ["picture-loaded"](#Panoramax.components.ui.Photo+event_picture-loaded)
+    * ["annotation-click"](#Panoramax.components.ui.Photo+event_annotation-click)
     * ["picture-tiles-loaded"](#Panoramax.components.ui.Photo+event_picture-tiles-loaded)
     * ["transition-duration-changed"](#Panoramax.components.ui.Photo+event_transition-duration-changed)
     * ["sequence-playing"](#Panoramax.components.ui.Photo+event_sequence-playing)
     * ["sequence-stopped"](#Panoramax.components.ui.Photo+event_sequence-stopped)
     * ["pictures-navigation-changed"](#Panoramax.components.ui.Photo+event_pictures-navigation-changed)
+    * ["annotations-toggled"](#Panoramax.components.ui.Photo+event_annotations-toggled)
+    * ["annotations-unfocused"](#Panoramax.components.ui.Photo+event_annotations-unfocused)
 
 <a name="new_Panoramax.components.ui.Photo_new"></a>
 
@@ -246,6 +253,46 @@ Switch the allowed navigation between pictures.
 | --- | --- | --- |
 | pn | <code>string</code> | The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) |
 
+<a name="Panoramax.components.ui.Photo+areAnnotationsVisible"></a>
+
+### photo.areAnnotationsVisible() ⇒ <code>boolean</code>
+Are there any picture annotations shown ?
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>boolean</code> - True if annotations are visible  
+<a name="Panoramax.components.ui.Photo+toggleAllAnnotations"></a>
+
+### photo.toggleAllAnnotations(visible)
+Toggle visibility of picture annotations
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| visible | <code>boolean</code> | True to make visible, false to hide |
+
+<a name="Panoramax.components.ui.Photo+focusOnAnnotation"></a>
+
+### photo.focusOnAnnotation(id)
+Make view centered and zoomed on given annotation.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| id | <code>string</code> | The annotation UUID |
+
+<a name="Panoramax.components.ui.Photo+unfocusAnnotation"></a>
+
+### photo.unfocusAnnotation([skipEvent])
+Remove focus styling on annotations.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [skipEvent] | <code>boolean</code> | <code>false</code> | Set to true to avoid launching annotations-unfocused event |
+
 <a name="Panoramax.components.ui.Photo+forceRefresh"></a>
 
 ### photo.forceRefresh()
@@ -335,6 +382,18 @@ Event for picture load (low-resolution image is loaded)
 | detail.z | <code>number</code> | New z position (0-100) |
 | detail.first | <code>boolean</code> | True if first picture loaded |
 
+<a name="Panoramax.components.ui.Photo+event_annotation-click"></a>
+
+### "annotation-click"
+Event launched on annotation click over picture
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.annotationId | <code>string</code> | The annotation UUID |
+
 <a name="Panoramax.components.ui.Photo+event_picture-tiles-loaded"></a>
 
 ### "picture-tiles-loaded"
@@ -383,3 +442,21 @@ Event for pictures navigation mode change
 | --- | --- | --- |
 | detail.value | <code>string</code> | New mode (any, pic, seq) |
 
+<a name="Panoramax.components.ui.Photo+event_annotations-toggled"></a>
+
+### "annotations-toggled"
+Event for pictures annotation visibility change
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.visible | <code>boolean</code> | True if they are visible |
+
+<a name="Panoramax.components.ui.Photo+event_annotations-unfocused"></a>
+
+### "annotations-unfocused"
+Event for pictures annotation unfocus
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  

package/docs/reference/components/ui/SemanticsTable.md

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.ui.SemanticsTable"></a>
+
+## Panoramax.components.ui.SemanticsTable ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-semantics-table  
+
+* [.SemanticsTable](#Panoramax.components.ui.SemanticsTable) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new SemanticsTable()](#new_Panoramax.components.ui.SemanticsTable_new)
+    * [.properties](#Panoramax.components.ui.SemanticsTable+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.SemanticsTable_new"></a>
+
+### new SemanticsTable()
+Semantics Tables display all semantics tags from either a picture or an annotation.
+
+**Example**  
+```html
+<pnx-semantics-table source=${picture.properties} ._t=${viewer._t} />
+```
+<a name="Panoramax.components.ui.SemanticsTable+properties"></a>
+
+### semanticsTable.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>SemanticsTable</code>](#Panoramax.components.ui.SemanticsTable)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [source] | <code>object</code> | The picture or annotation feature (having a `semantics` property) |
+

package/docs/reference/components/ui/widgets/GeoSearch.md

@@ -16,7 +16,11 @@ Ready-to-use geocoder search bar.
 
 **Example**  
 ```html
+<!-- Default geocoder -->
 <pnx-widget-geosearch _parent=${viewer} />
+
+<!-- Custom-URL geocoder -->
+<pnx-widget-geosearch geocoder="https://photon.komoot.io/api" _parent=${viewer} />
 ```
 <a name="Panoramax.components.ui.widgets.GeoSearch+properties"></a>
 
@@ -28,5 +32,5 @@ Component properties.
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
+| [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) |
 

package/docs/reference/utils/PresetsManager.md

@@ -0,0 +1,35 @@
+<a name="Panoramax.utils.PresetsManager"></a>
+
+## Panoramax.utils.PresetsManager
+**Kind**: static class of <code>Panoramax.utils</code>  
+
+* [.PresetsManager](#Panoramax.utils.PresetsManager)
+    * [new PresetsManager([lang], [skipLoad])](#new_Panoramax.utils.PresetsManager_new)
+    * [.onceReady()](#Panoramax.utils.PresetsManager+onceReady) ⇒ <code>Promise</code>
+    * [.getPreset()](#Panoramax.utils.PresetsManager+getPreset) ⇒ <code>Promise</code>
+
+<a name="new_Panoramax.utils.PresetsManager_new"></a>
+
+### new PresetsManager([lang], [skipLoad])
+Presets Manager handle retrieval of presets against dedicated endpoint.
+It allows an easily search between all presets, and handles translations.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [lang] | <code>string</code> |  | The user prefered language. Defaults to web browser preferences. |
+| [skipLoad] | <code>boolean</code> | <code>false</code> | Set to true to disable automatic load of API data |
+
+<a name="Panoramax.utils.PresetsManager+onceReady"></a>
+
+### presetsManager.onceReady() ⇒ <code>Promise</code>
+Resolves when the all necessary data was downloaded.
+
+**Kind**: instance method of [<code>PresetsManager</code>](#Panoramax.utils.PresetsManager)  
+<a name="Panoramax.utils.PresetsManager+getPreset"></a>
+
+### presetsManager.getPreset() ⇒ <code>Promise</code>
+Find the best matching preset for a given STAC feature.
+
+**Kind**: instance method of [<code>PresetsManager</code>](#Panoramax.utils.PresetsManager)  
+**Fulfil**: <code>object\|null</code> The preset JSON that best matches, or null if no matches  

package/docs/reference.md

@@ -25,6 +25,7 @@ Layout helpers:
 
 All-in-one, ready-to-use menus for complex operations. Note that they don't embed a container (like popup or panel) to be reusable in any situation.
 
+- [AnnotationsList](./reference/components/menus/AnnotationsList.md) : selected picture list of annotations (areas with tags).
 - [MapBackground](./reference/components/menus/MapBackground.md) : change map background.
 - [MapFilters](./reference/components/menus/MapFilters.md) : set map filters.
 - [MapLayers](./reference/components/menus/MapLayers.md) : change map theme and background.
@@ -44,8 +45,10 @@ Basic UI components:
 - [ButtonGroup](./reference/components/ui/ButtonGroup.md) : button bar.
 - [CopyButton](./reference/components/ui/CopyButton.md) : a copy-to-clipboard button.
 - [Grade](./reference/components/ui/Grade.md) : a 5-star rating display.
+- [HashTags](./reference/components/ui/HashTags.md) : a list of hashtags associated to a picture.
 - [LinkButton](./reference/components/ui/LinkButton.md) : a link button.
 - [ListGroup](./reference/components/ui/ListGroup.md) : a menu-like list of buttons and links.
+- [ListItem](./reference/components/ui/ListItem.md) : a Material Design-like list entry.
 - [Loader](./reference/components/ui/Loader.md) : the fullscreen initial loader.
 - [Map](./reference/components/ui/Map.md) : the browseable map (MapLibre GL).
 - [MapMore](./reference/components/ui/MapMore.md) : advanced version of the browseable map.
@@ -54,6 +57,7 @@ Basic UI components:
 - [ProgressBar](./reference/components/ui/ProgressBar.md) : a progress bar.
 - [QualityScore](./reference/components/ui/QualityScore.md) : a A/B/C/D/E grade display and input.
 - [SearchBar](./reference/components/ui/SearchBar.md) : a search bar.
+- [SemanticsTable](./reference/components/ui/SemanticsTable.md) : table for showing complete semantic tags of a picture/annotation.
 - [TogglableGroup](./reference/components/ui/TogglableGroup.md) : an helper for showing a menu on button click.
 
 

package/mkdocs.yml

@@ -65,6 +65,7 @@ nav:
         - Mini: 'reference/components/layout/Mini.md'
         - Tabs: 'reference/components/layout/Tabs.md'
       - menus:
+        - AnnotationsList: 'reference/components/menus/AnnotationsList.md'
         - MapBackground: 'reference/components/menus/MapBackground.md'
         - MapFilters: 'reference/components/menus/MapFilters.md'
         - MapLayers: 'reference/components/menus/MapLayers.md'
@@ -90,8 +91,10 @@ nav:
         - ButtonGroup: 'reference/components/ui/ButtonGroup.md'
         - CopyButton: 'reference/components/ui/CopyButton.md'
         - Grade: 'reference/components/ui/Grade.md'
+        - HashTags: 'reference/components/ui/HashTags.md'
         - LinkButton: 'reference/components/ui/LinkButton.md'
         - ListGroup: 'reference/components/ui/ListGroup.md'
+        - ListItem: 'reference/components/ui/ListItem.md'
         - Loader: 'reference/components/ui/Loader.md'
         - Map: 'reference/components/ui/Map.md'
         - MapMore: 'reference/components/ui/MapMore.md'
@@ -100,6 +103,7 @@ nav:
         - ProgressBar: 'reference/components/ui/ProgressBar.md'
         - QualityScore: 'reference/components/ui/QualityScore.md'
         - SearchBar: 'reference/components/ui/SearchBar.md'
+        - SemanticsTable: 'reference/components/ui/SemanticsTable.md'
         - TogglableGroup: 'reference/components/ui/TogglableGroup.md'
     - utils:
       - API: 'reference/utils/API.md'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.2",
+  "version": "4.0.3-develop-d59993ce",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -98,6 +98,7 @@
     "@photo-sphere-viewer/gallery-plugin": "5.12.1",
     "@photo-sphere-viewer/markers-plugin": "5.12.1",
     "@photo-sphere-viewer/virtual-tour-plugin": "5.12.1",
+    "iconify-icon": "^3.0.0",
     "json5": "^2.2.3",
     "lit": "^3.2.1",
     "maplibre-gl": "^5.3.0",

package/src/components/core/Basic.css

@@ -4,6 +4,7 @@
 	--black: #181818;
 	--black-pale: #1b1a17;
 	--red: #f70000;
+	--red-transparent: rgba(247, 0, 0, 0.3);
 	--red-pale: #ff726f;
 	--grey: #f5f5f5;
 	--grey-pale: #cfd2cf;
@@ -17,6 +18,7 @@
 	--beige: #f5f3ec;
 	--yellow: #fec868;
 	--orange: #ff6f00;
+	--orange-transparent: rgba(255,111,0,0.3);
 	--orange-pale: #fffafa;
 	--green: #7ec636;
 	--green-pale: #f0ffee;

package/src/components/core/PhotoViewer.js

@@ -9,6 +9,7 @@ import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
 import { createWebComp } from "../../utils/widgets";
 import { isNullId } from "../../utils/utils";
 import { default as InitParameters, alterPSVState, alterMapState, alterPhotoViewerState } from "../../utils/InitParameters";
+import PresetManager from "../../utils/PresetsManager";
 
 
 export const PSV_ZOOM_DELTA = 20;
@@ -32,6 +33,7 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * @property {Panoramax.components.layout.CorneredGrid} grid The grid layout manager
  * @property {Panoramax.components.ui.Popup} popup The popup container
  * @property {Panoramax.utils.URLHandler} urlHandler The URL query parameters manager
+ * @property {Panoramax.utils.PresetsManager} presetsManager The semantics presets manager
  * @fires Panoramax.components.core.Basic#select
  * @fires Panoramax.components.core.Basic#ready
  * @fires Panoramax.components.core.Basic#broken
@@ -133,12 +135,19 @@ export default class PhotoViewer extends Basic {
 					focus: this._initParams.getParentPostInit().focus,
 					picture: this._initParams.getParentPostInit().picture,
 				});
+				
 				this.grid.appendChild(createWebComp("pnx-widget-zoom", {
 					slot: "bottom-right",
 					class: "pnx-print-hidden",
 					_parent: this
 				}));
 				this.grid.appendChild(this.legend);
+
+				this.grid.appendChild(createWebComp("pnx-hashtags", {
+					slot: "top-right",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+				}));
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
@@ -161,6 +170,8 @@ export default class PhotoViewer extends Basic {
 	connectedCallback() {
 		super.connectedCallback();
 
+		this.presetsManager = new PresetManager(this.lang);
+
 		if(this["url-parameters"] && this["url-parameters"] !== "false") {
 			this.urlHandler = new URLHandler(this);
 			this.onceReady().then(() => {

package/src/components/core/Viewer.js

@@ -39,6 +39,7 @@ const MAP_MOVE_DELTA = 100;
  * @property {Panoramax.components.layout.Mini} mini The reduced/collapsed map/photo component
  * @property {Panoramax.components.ui.Popup} popup The popup container
  * @property {Panoramax.utils.URLHandler} urlHandler The URL query parameters manager
+ * @property {Panoramax.utils.PresetsManager} presetsManager The semantics presets manager
  * @fires Panoramax.components.core.Basic#select
  * @fires Panoramax.components.core.Basic#ready
  * @fires Panoramax.components.core.Basic#broken
@@ -95,7 +96,7 @@ export default class Viewer extends PhotoViewer {
 	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
-	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
+	 * @property {string} [geocoder=nominatim] 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)
 	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
 	 * @property {string} [picture] The picture ID to display
 	 * @property {string} [sequence] The sequence ID of the picture displayed
@@ -156,6 +157,12 @@ export default class Viewer extends PhotoViewer {
 					picture: this._initParams.getParentPostInit().picture,
 				});
 				this.grid.appendChild(this.legend);
+
+				this.grid.appendChild(createWebComp("pnx-hashtags", {
+					slot: "top-right",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+				}));
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });

package/src/components/layout/Tabs.js

@@ -121,7 +121,7 @@ export default class Tabs extends LitElement {
 	render() {
 		return html`
 			<nav @click="${this._handleTabClick}">
-				<slot name="title"></slot>
+				<slot name="title" @slotchange=${() => this.activeTabIndex = 0}></slot>
 			</nav>
 			<div class="contents">
 				<slot name="content"></slot>