@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

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

@@ -0,0 +1,196 @@
+<a name="Panoramax.components.core.Basic"></a>
+
+## Panoramax.components.core.Basic ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.core</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Emits**: [<code>select</code>](#Panoramax.components.core.Basic+event_select), [<code>ready</code>](#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](#Panoramax.components.core.Basic+event_broken), [<code>menu-opened</code>](#Panoramax.components.core.Basic+event_menu-opened)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen |
+| api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
+
+
+* [.Basic](#Panoramax.components.core.Basic) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Basic()](#new_Panoramax.components.core.Basic_new)
+    * [.properties](#Panoramax.components.core.Basic+properties) : <code>Object</code>
+    * [.onceReady()](#Panoramax.components.core.Basic+onceReady) ⇒ <code>Promise</code>
+    * [.onceAPIReady()](#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
+    * [.getClassName()](#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
+    * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
+    * [.isWidthSmall()](#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
+    * [.isHeightSmall()](#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * [.getSubComponentsNames()](#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.Basic+addEventListener)
+    * ["menu-opened"](#Panoramax.components.core.Basic+event_menu-opened)
+    * ["select"](#Panoramax.components.core.Basic+event_select)
+    * ["ready"](#Panoramax.components.core.Basic+event_ready)
+    * ["broken"](#Panoramax.components.core.Basic+event_broken)
+
+<a name="new_Panoramax.components.core.Basic_new"></a>
+
+### new Basic()
+Basic core component is a basic container for common functions through all core components.
+It is not intended to be used directly, it's only to be extended by other core components.
+
+<a name="Panoramax.components.core.Basic+properties"></a>
+
+### basic.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance mixin of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
+| [picture] | <code>string</code> |  | The picture ID to display |
+| [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |
+| [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)) |
+| [users] | <code>Array.&lt;string&gt;</code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
+| [mapstyle] | <code>string</code> \| <code>object</code> |  | The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
+| [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
+
+<a name="Panoramax.components.core.Basic+onceReady"></a>
+
+### basic.onceReady() ⇒ <code>Promise</code>
+Waits for component to have its first loading done.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Fulfil**: <code>null</code> When initialization is complete.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
+
+### basic.onceAPIReady() ⇒ <code>Promise</code>
+Waits for initial API setup.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Fulfil**: <code>null</code> When API is ready.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+getClassName"></a>
+
+### basic.getClassName() ⇒ <code>string</code>
+This allows to retrieve an always correct class name.
+This is crap, but avoids issues with Webpack & so on.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Returns**: <code>string</code> - The class name (for example "Basic")  
+<a name="Panoramax.components.core.Basic+select"></a>
+
+### basic.select([seqId], [picId], [force])
+Change the currently picture and/or sequence.
+Calling the method without parameters unselects.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [seqId] | <code>string</code> | <code>null</code> | The sequence UUID |
+| [picId] | <code>string</code> | <code>null</code> | The picture UUID |
+| [force] | <code>boolean</code> | <code>false</code> | Force select even if already selected |
+
+<a name="Panoramax.components.core.Basic+isWidthSmall"></a>
+
+### basic.isWidthSmall() ⇒ <code>boolean</code>
+Is the view running in a small container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Returns**: <code>boolean</code> - True if container is small  
+<a name="Panoramax.components.core.Basic+isHeightSmall"></a>
+
+### basic.isHeightSmall() ⇒ <code>boolean</code>
+Is the view running in a small-height container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
+
+### basic.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
+List names of sub-components (like loader, api, map, psv) available in this component.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
+<a name="Panoramax.components.core.Basic+addEventListener"></a>
+
+### basic.addEventListener(type, listener, [options])
+Listen to events from this components or one of its sub-components.
+
+For example, you can listen to `map` events using prefix `map:`.
+
+```js
+me.addEventListener("map:move", doSomething);
+```
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event type to listen for |
+| listener | <code>function</code> | The event handler |
+| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
+
+<a name="Panoramax.components.core.Basic+event_menu-opened"></a>
+
+### "menu-opened"
+Event for overlaying menu opening
+
+**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.menu | <code>Element</code> | The opened menu |
+
+<a name="Panoramax.components.core.Basic+event_select"></a>
+
+### "select"
+Event for sequence/picture selection
+
+**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.seqId | <code>string</code> | The selected sequence ID |
+| detail.picId | <code>string</code> | The selected picture ID (or null if not a precise picture clicked) |
+| [detail.prevSeqId] | <code>string</code> | The previously selected sequence ID (or null if none) |
+| [detail.prevPicId] | <code>string</code> | The previously selected picture ID (or null if none) |
+
+<a name="Panoramax.components.core.Basic+event_ready"></a>
+
+### "ready"
+Event when component is ready to use.
+This happens when loader screen disappear, with picture and map loaded.
+
+To follow more precisely loading steps, you can also watch for sub-components `ready` events.
+```js
+// Watch API-readiness
+viewer.addEventListener("api:ready", ...); // From parent
+viewer.api.addEventListener("ready", ...); // Or on sub-component
+```
+
+**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
+<a name="Panoramax.components.core.Basic+event_broken"></a>
+
+### "broken"
+Event for viewer failing to initially load.
+
+To follow more precisely loading failures, you can also watch for sub-components `broken` events.
+```js
+// Watch API breaks
+viewer.addEventListener("api:broken", ...); // From parent
+viewer.api.addEventListener("broken", ...); // Or on sub-component
+```
+
+**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.error | <code>string</code> | The user-friendly error message to display |
+

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

@@ -0,0 +1,210 @@
+<a name="Panoramax.components.core.CoverageMap"></a>
+
+## Panoramax.components.core.CoverageMap ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+**Kind**: static class of <code>Panoramax.components.core</code>  
+**Extends**: [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)  
+**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)  
+**Element**: pnx-coverage-map  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen |
+| api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
+| map | [<code>Map</code>](../ui/Map.md/#Panoramax.components.ui.Map) | The MapLibre GL map itself |
+
+
+* [.CoverageMap](#Panoramax.components.core.CoverageMap) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+    * [new CoverageMap()](#new_Panoramax.components.core.CoverageMap_new)
+    * [.properties](#Panoramax.components.core.CoverageMap+properties) : <code>Object</code>
+    * [.onceReady()](Basic.md/#Panoramax.components.core.Basic+onceReady) ⇒ <code>Promise</code>
+    * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
+    * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
+    * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
+    * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
+    * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * [.getSubComponentsNames()](Basic.md/#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.Basic+addEventListener)
+    * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
+    * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
+    * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready)
+    * ["broken"](Basic.md/#Panoramax.components.core.Basic+event_broken)
+
+<a name="new_Panoramax.components.core.CoverageMap_new"></a>
+
+### new CoverageMap()
+Coverage Map is a basic map showing Panoramax coverage.
+
+Make sure to set width/height through CSS for proper display.
+
+**Example**  
+```html
+<pnx-coverage-map
+  endpoint="https://panoramax.openstreetmap.fr/"
+  map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'
+  style="width: 300px; height: 250px"
+/>
+```
+<a name="Panoramax.components.core.CoverageMap+properties"></a>
+
+### coverageMap.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Mixes**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Overrides**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
+| [picture] | <code>string</code> |  | The picture ID to display |
+| [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |
+| [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)) |
+| [users] | <code>Array.&lt;string&gt;</code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
+| [mapstyle] | <code>string</code> \| <code>object</code> |  | The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
+| [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
+| [map] | <code>object</code> |  | [Any map option available in Map class](../ui/Map.md/#Panoramax.components.ui.Map).<br />Example: `map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'` |
+
+<a name="Panoramax.components.core.Basic+onceReady"></a>
+
+### coverageMap.onceReady() ⇒ <code>Promise</code>
+Waits for component to have its first loading done.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Fulfil**: <code>null</code> When initialization is complete.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
+
+### coverageMap.onceAPIReady() ⇒ <code>Promise</code>
+Waits for initial API setup.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Fulfil**: <code>null</code> When API is ready.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+getClassName"></a>
+
+### coverageMap.getClassName() ⇒ <code>string</code>
+This allows to retrieve an always correct class name.
+This is crap, but avoids issues with Webpack & so on.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Returns**: <code>string</code> - The class name (for example "Basic")  
+<a name="Panoramax.components.core.Basic+select"></a>
+
+### coverageMap.select([seqId], [picId], [force])
+Change the currently picture and/or sequence.
+Calling the method without parameters unselects.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [seqId] | <code>string</code> | <code>null</code> | The sequence UUID |
+| [picId] | <code>string</code> | <code>null</code> | The picture UUID |
+| [force] | <code>boolean</code> | <code>false</code> | Force select even if already selected |
+
+<a name="Panoramax.components.core.Basic+isWidthSmall"></a>
+
+### coverageMap.isWidthSmall() ⇒ <code>boolean</code>
+Is the view running in a small container (small embed or smartphone)
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Returns**: <code>boolean</code> - True if container is small  
+<a name="Panoramax.components.core.Basic+isHeightSmall"></a>
+
+### coverageMap.isHeightSmall() ⇒ <code>boolean</code>
+Is the view running in a small-height container (small embed or smartphone)
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
+
+### coverageMap.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
+List names of sub-components (like loader, api, map, psv) available in this component.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
+<a name="Panoramax.components.core.Basic+addEventListener"></a>
+
+### coverageMap.addEventListener(type, listener, [options])
+Listen to events from this components or one of its sub-components.
+
+For example, you can listen to `map` events using prefix `map:`.
+
+```js
+me.addEventListener("map:move", doSomething);
+```
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event type to listen for |
+| listener | <code>function</code> | The event handler |
+| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
+
+<a name="Panoramax.components.core.Basic+event_menu-opened"></a>
+
+### "menu-opened"
+Event for overlaying menu opening
+
+**Kind**: event emitted by [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.menu | <code>Element</code> | The opened menu |
+
+<a name="Panoramax.components.core.Basic+event_select"></a>
+
+### "select"
+Event for sequence/picture selection
+
+**Kind**: event emitted by [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.seqId | <code>string</code> | The selected sequence ID |
+| detail.picId | <code>string</code> | The selected picture ID (or null if not a precise picture clicked) |
+| [detail.prevSeqId] | <code>string</code> | The previously selected sequence ID (or null if none) |
+| [detail.prevPicId] | <code>string</code> | The previously selected picture ID (or null if none) |
+
+<a name="Panoramax.components.core.Basic+event_ready"></a>
+
+### "ready"
+Event when component is ready to use.
+This happens when loader screen disappear, with picture and map loaded.
+
+To follow more precisely loading steps, you can also watch for sub-components `ready` events.
+```js
+// Watch API-readiness
+viewer.addEventListener("api:ready", ...); // From parent
+viewer.api.addEventListener("ready", ...); // Or on sub-component
+```
+
+**Kind**: event emitted by [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+<a name="Panoramax.components.core.Basic+event_broken"></a>
+
+### "broken"
+Event for viewer failing to initially load.
+
+To follow more precisely loading failures, you can also watch for sub-components `broken` events.
+```js
+// Watch API breaks
+viewer.addEventListener("api:broken", ...); // From parent
+viewer.api.addEventListener("broken", ...); // Or on sub-component
+```
+
+**Kind**: event emitted by [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.error | <code>string</code> | The user-friendly error message to display |
+

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

@@ -0,0 +1,224 @@
+<a name="Panoramax.components.core.Editor"></a>
+
+## Panoramax.components.core.Editor ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+**Kind**: static class of <code>Panoramax.components.core</code>  
+**Extends**: [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)  
+**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)  
+**Element**: pnx-editor  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen |
+| api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
+| map | [<code>Map</code>](../ui/Map.md/#Panoramax.components.ui.Map) | The MapLibre GL map itself |
+| psv | [<code>Photo</code>](../ui/Photo.md/#Panoramax.components.ui.Photo) | The Photo Sphere Viewer component itself |
+
+
+* [.Editor](#Panoramax.components.core.Editor) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+    * [new Editor()](#new_Panoramax.components.core.Editor_new)
+    * [.properties](#Panoramax.components.core.Editor+properties) : <code>Object</code>
+    * [.previewSequenceHeadingChange([relHeading])](#Panoramax.components.core.Editor+previewSequenceHeadingChange)
+    * [.onceReady()](Basic.md/#Panoramax.components.core.Basic+onceReady) ⇒ <code>Promise</code>
+    * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
+    * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
+    * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
+    * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
+    * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * [.getSubComponentsNames()](Basic.md/#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.Basic+addEventListener)
+    * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
+    * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
+    * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready)
+    * ["broken"](Basic.md/#Panoramax.components.core.Basic+event_broken)
+
+<a name="new_Panoramax.components.core.Editor_new"></a>
+
+### new Editor()
+Editor allows to focus on a single sequence, and preview what you edits would look like.
+It shows both picture and map.
+
+Make sure to set width/height through CSS for proper display.
+
+**Example**  
+```html
+<pnx-editor
+  endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
+/>
+```
+<a name="Panoramax.components.core.Editor+properties"></a>
+
+### editor.properties : <code>Object</code>
+Component properties. All of [Basic properties](Basic.md/#Panoramax.components.core.Basic+properties) are available as well.
+
+**Kind**: instance property of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Mixes**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Overrides**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
+| [picture] | <code>string</code> |  | The picture ID to display |
+| [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |
+| [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)) |
+| [mapstyle] | <code>string</code> \| <code>object</code> |  | The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
+| [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
+| [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). |
+| [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. |
+
+<a name="Panoramax.components.core.Editor+previewSequenceHeadingChange"></a>
+
+### editor.previewSequenceHeadingChange([relHeading])
+Preview on map how the new relative heading would reflect on all pictures.
+This doesn't change anything on API-side, it's just a preview.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [relHeading] | <code>number</code> | The new relative heading compared to sequence path. In degrees, between -180 and 180 (0 = front, -90 = left, 90 = right). Set to null to remove preview. |
+
+<a name="Panoramax.components.core.Basic+onceReady"></a>
+
+### editor.onceReady() ⇒ <code>Promise</code>
+Waits for component to have its first loading done.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Fulfil**: <code>null</code> When initialization is complete.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
+
+### editor.onceAPIReady() ⇒ <code>Promise</code>
+Waits for initial API setup.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Fulfil**: <code>null</code> When API is ready.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+getClassName"></a>
+
+### editor.getClassName() ⇒ <code>string</code>
+This allows to retrieve an always correct class name.
+This is crap, but avoids issues with Webpack & so on.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Returns**: <code>string</code> - The class name (for example "Basic")  
+<a name="Panoramax.components.core.Basic+select"></a>
+
+### editor.select([seqId], [picId], [force])
+Change the currently picture and/or sequence.
+Calling the method without parameters unselects.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [seqId] | <code>string</code> | <code>null</code> | The sequence UUID |
+| [picId] | <code>string</code> | <code>null</code> | The picture UUID |
+| [force] | <code>boolean</code> | <code>false</code> | Force select even if already selected |
+
+<a name="Panoramax.components.core.Basic+isWidthSmall"></a>
+
+### editor.isWidthSmall() ⇒ <code>boolean</code>
+Is the view running in a small container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Returns**: <code>boolean</code> - True if container is small  
+<a name="Panoramax.components.core.Basic+isHeightSmall"></a>
+
+### editor.isHeightSmall() ⇒ <code>boolean</code>
+Is the view running in a small-height container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
+
+### editor.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
+List names of sub-components (like loader, api, map, psv) available in this component.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
+<a name="Panoramax.components.core.Basic+addEventListener"></a>
+
+### editor.addEventListener(type, listener, [options])
+Listen to events from this components or one of its sub-components.
+
+For example, you can listen to `map` events using prefix `map:`.
+
+```js
+me.addEventListener("map:move", doSomething);
+```
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event type to listen for |
+| listener | <code>function</code> | The event handler |
+| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
+
+<a name="Panoramax.components.core.Basic+event_menu-opened"></a>
+
+### "menu-opened"
+Event for overlaying menu opening
+
+**Kind**: event emitted by [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.menu | <code>Element</code> | The opened menu |
+
+<a name="Panoramax.components.core.Basic+event_select"></a>
+
+### "select"
+Event for sequence/picture selection
+
+**Kind**: event emitted by [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.seqId | <code>string</code> | The selected sequence ID |
+| detail.picId | <code>string</code> | The selected picture ID (or null if not a precise picture clicked) |
+| [detail.prevSeqId] | <code>string</code> | The previously selected sequence ID (or null if none) |
+| [detail.prevPicId] | <code>string</code> | The previously selected picture ID (or null if none) |
+
+<a name="Panoramax.components.core.Basic+event_ready"></a>
+
+### "ready"
+Event when component is ready to use.
+This happens when loader screen disappear, with picture and map loaded.
+
+To follow more precisely loading steps, you can also watch for sub-components `ready` events.
+```js
+// Watch API-readiness
+viewer.addEventListener("api:ready", ...); // From parent
+viewer.api.addEventListener("ready", ...); // Or on sub-component
+```
+
+**Kind**: event emitted by [<code>Editor</code>](#Panoramax.components.core.Editor)  
+<a name="Panoramax.components.core.Basic+event_broken"></a>
+
+### "broken"
+Event for viewer failing to initially load.
+
+To follow more precisely loading failures, you can also watch for sub-components `broken` events.
+```js
+// Watch API breaks
+viewer.addEventListener("api:broken", ...); // From parent
+viewer.api.addEventListener("broken", ...); // Or on sub-component
+```
+
+**Kind**: event emitted by [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.error | <code>string</code> | The user-friendly error message to display |
+