Skip to content

Editor

Panoramax.components.core.Editor ⇐ Basic

Kind: static class of Panoramax.components.core
Extends: Basic
Emits: select, ready, broken
Element: pnx-editor
Slot: top-left The top-left corner
Slot: top The top middle corner
Slot: top-right The top-right corner
Slot: bottom-left The bottom-left corner
Slot: bottom The bottom middle corner
Slot: bottom-right The bottom-right corner
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
grid CorneredGrid The grid layout manager

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.

This component has a CorneredGrid layout, you can use directly any slot element to pass custom widgets.

Example

<!-- Basic example -->
<pnx-editor
  endpoint="https://panoramax.openstreetmap.fr/"
  style="width: 300px; height: 250px"
/>

<!-- With slotted widgets -->
<pnx-editor
  endpoint="https://panoramax.openstreetmap.fr/"
  style="width: 300px; height: 250px"
>
  <p slot="top-right">My custom text</p>
</pnx-editor>

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
[fetch-options] object Set custom options for fetch calls made against API (same syntax as fetch options parameter)
[map-style] 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:.

me.addEventListener("map:move", doSomething);

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

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 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. 

// Watch API-readiness
viewer.addEventListener("api:ready", ...); // From parent
viewer.api.addEventListener("ready", ...); // Or on sub-component

Kind: event emitted by Editor

"broken"

Event for viewer failing to initially load.

To follow more precisely loading failures, you can also watch for sub-components broken events. 

// Watch API breaks
viewer.addEventListener("api:broken", ...); // From parent
viewer.api.addEventListener("broken", ...); // Or on sub-component

Kind: event emitted by Editor
Properties

Name Type Description
detail.error string The user-friendly error message to display