Editor
Panoramax.components.core.Editor ⇐ Basic
Kind: static class of Panoramax.components.core
Extends: Basic
Emits: select
, ready
, broken
Element: pnx-editor
Properties
Name | Type | Description |
---|---|---|
loader | Loader |
The loader screen |
api | API |
The API manager |
map | Map |
The MapLibre GL map itself |
psv | Photo |
The Photo Sphere Viewer component itself |
- .Editor ⇐
Basic
- new Editor()
- .properties :
Object
- .previewSequenceHeadingChange([relHeading])
- .onceReady() ⇒
Promise
- .onceAPIReady() ⇒
Promise
- .getClassName() ⇒
string
- .select([seqId], [picId], [force])
- .isWidthSmall() ⇒
boolean
- .isHeightSmall() ⇒
boolean
- .getSubComponentsNames() ⇒
Array.<string>
- .addEventListener(type, listener, [options])
- "menu-opened"
- "select"
- "ready"
- "broken"
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
editor.properties : Object
Component properties. All of Basic properties are available as well.
Kind: instance property of Editor
Mixes: properties
Overrides: properties
Properties
Name | Type | Default | Description |
---|---|---|---|
endpoint | string |
URL to API to use (must be a STAC API) | |
[picture] | string |
The picture ID to display | |
[sequence] | string |
The sequence ID of the picture displayed | |
[fetchOptions] | object |
Set custom options for fetch calls made against API (same syntax as fetch options parameter) | |
[users] | Array.<string> |
[geovisio] |
List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
[mapstyle] | string | object |
The map's MapLibre style. This can be an a JSON object conforming to the schema described in the MapLibre Style Specification, or a URL string pointing to one. Defaults to OSM vector tiles. | |
[lang] | string |
To override language used for labels. Defaults to using user's preferred languages. | |
[raster] | object |
The MapLibre raster source for aerial background. This must be a JSON object following MapLibre raster source definition. | |
[background] | string |
"streets" |
Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street. |
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 Editor
Param | Type | Description |
---|---|---|
[relHeading] | number |
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. |
editor.onceReady() ⇒ Promise
Waits for component to have its first loading done.
Each inheriting class must override this method.
Kind: instance method of Editor
Fulfil: null
When initialization is complete.
Reject: string
Error message
editor.onceAPIReady() ⇒ Promise
Waits for initial API setup.
Kind: instance method of Editor
Fulfil: null
When API is ready.
Reject: string
Error message
editor.getClassName() ⇒ string
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 Editor
Returns: string
- The class name (for example "Basic")
editor.select([seqId], [picId], [force])
Change the currently picture and/or sequence. Calling the method without parameters unselects.
Kind: instance method of Editor
Param | Type | Default | Description |
---|---|---|---|
[seqId] | string |
null |
The sequence UUID |
[picId] | string |
null |
The picture UUID |
[force] | boolean |
false |
Force select even if already selected |
editor.isWidthSmall() ⇒ boolean
Is the view running in a small container (small embed or smartphone)
Kind: instance method of Editor
Returns: boolean
- True if container is small
editor.isHeightSmall() ⇒ boolean
Is the view running in a small-height container (small embed or smartphone)
Kind: instance method of Editor
Returns: boolean
- True if container height is small
editor.getSubComponentsNames() ⇒ Array.<string>
List names of sub-components (like loader, api, map, psv) available in this component.
Kind: instance method of Editor
Returns: Array.<string>
- Sub-components names.
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:
.
Kind: instance method of Editor
Param | Type | Description |
---|---|---|
type | string |
The event type to listen for |
listener | function |
The event handler |
[options] | object |
Any original addEventListener available options |
"menu-opened"
Event for overlaying menu opening
Kind: event emitted by Editor
Properties
Name | Type | Description |
---|---|---|
detail.menu | Element |
The opened menu |
"select"
Event for sequence/picture selection
Kind: event emitted by Editor
Properties
Name | Type | Description |
---|---|---|
detail.seqId | string |
The selected sequence ID |
detail.picId | string |
The selected picture ID (or null if not a precise picture clicked) |
[detail.prevSeqId] | string |
The previously selected sequence ID (or null if none) |
[detail.prevPicId] | string |
The previously selected picture ID (or null if none) |
"ready"
Event for component being ready to use (API loaded)
Kind: event emitted by Editor
"broken"
Event for viewer failing to initially load
Kind: event emitted by Editor
Properties
Name | Type | Description |
---|---|---|
detail.error | string |
The user-friendly error message to display |