X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/32da856c00985bc2ebc7482da2ea4f76cf788832..c55d346d5f7501fd6f5f636e85c8a60ec67d88ee:/vendor/assets/iD/iD/mapillary-js/mapillary.js.flow diff --git a/vendor/assets/iD/iD/mapillary-js/mapillary.js.flow b/vendor/assets/iD/iD/mapillary-js/mapillary.js.flow new file mode 100644 index 000000000..227d3b005 --- /dev/null +++ b/vendor/assets/iD/iD/mapillary-js/mapillary.js.flow @@ -0,0 +1,8098 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +/** + * Convert coordinates from geodetic (WGS84) reference to local topocentric + * (ENU) reference. + * @param {number} lng Longitude in degrees. + * @param {number} lat Latitude in degrees. + * @param {number} alt Altitude in meters. + * @param {number} refLng Reference longitude in degrees. + * @param {number} refLat Reference latitude in degrees. + * @param {number} refAlt Reference altitude in meters. + * @returns {Array} The x, y, z local topocentric ENU coordinates. + */ +declare function geodeticToEnu( + lng: number, + lat: number, + alt: number, + refLng: number, + refLat: number, + refAlt: number +): number[]; + +/** + * Convert coordinates from local topocentric (ENU) reference to + * geodetic (WGS84) reference. + * @param {number} x Topocentric ENU coordinate in East direction. + * @param {number} y Topocentric ENU coordinate in North direction. + * @param {number} z Topocentric ENU coordinate in Up direction. + * @param {number} refLng Reference longitude in degrees. + * @param {number} refLat Reference latitude in degrees. + * @param {number} refAlt Reference altitude in meters. + * @returns {Array} The longitude, latitude in degrees + * and altitude in meters. + */ +declare function enuToGeodetic( + x: number, + y: number, + z: number, + refLng: number, + refLat: number, + refAlt: number +): number[]; + +/** + * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference + * to local topocentric (ENU) reference. + * @param {number} X ECEF X-value. + * @param {number} Y ECEF Y-value. + * @param {number} Z ECEF Z-value. + * @param {number} refLng Reference longitude in degrees. + * @param {number} refLat Reference latitude in degrees. + * @param {number} refAlt Reference altitude in meters. + * @returns {Array} The x, y, z topocentric ENU coordinates in East, North + * and Up directions respectively. + */ +declare function ecefToEnu( + X: number, + Y: number, + Z: number, + refLng: number, + refLat: number, + refAlt: number +): number[]; + +/** + * Convert coordinates from local topocentric (ENU) reference + * to Earth-Centered, Earth-Fixed (ECEF) reference. + * @param {number} x Topocentric ENU coordinate in East direction. + * @param {number} y Topocentric ENU coordinate in North direction. + * @param {number} z Topocentric ENU coordinate in Up direction. + * @param {number} refLng Reference longitude in degrees. + * @param {number} refLat Reference latitude in degrees. + * @param {number} refAlt Reference altitude in meters. + * @returns {Array} The X, Y, Z ECEF coordinates. + */ +declare function enuToEcef( + x: number, + y: number, + z: number, + refLng: number, + refLat: number, + refAlt: number +): number[]; + +/** + * Convert coordinates from geodetic reference (WGS84) to Earth-Centered, + * Earth-Fixed (ECEF) reference. + * @param {number} lng Longitude in degrees. + * @param {number} lat Latitude in degrees. + * @param {number} alt Altitude in meters. + * @returns {Array} The X, Y, Z ECEF coordinates. + */ +declare function geodeticToEcef( + lng: number, + lat: number, + alt: number +): number[]; + +/** + * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference + * to geodetic reference (WGS84). + * @param {number} X ECEF X-value. + * @param {number} Y ECEF Y-value. + * @param {number} Z ECEF Z-value. + * @returns {Array} The longitude, latitude in degrees + * and altitude in meters. + */ +declare function ecefToGeodetic(X: number, Y: number, Z: number): number[]; + +/** + * Contract describing triangulated meshes. + */ +export interface MeshContract { + /** + * Flattened array of faces for the mesh. Each face consist + * three vertex indices. + */ + faces: number[]; + + /** + * Flattened array of vertices for the mesh. Each vertex + * consists of X, Y and Z coordinates in the camera + * reference frame. + */ + vertices: number[]; +} +/** + * Decompress and parse an array buffer containing zipped + * json data and return as a json object. + * @description Handles array buffers continaing zipped json + * data. + * @param {ArrayBuffer} buffer - Array buffer to decompress. + * @returns {Object} Parsed object. + */ +declare function decompress(buffer: ArrayBuffer): T; + +/** + * Retrieves a resource as an array buffer and returns a promise + * to the buffer. + * @description Rejects the promise on request failure. + * @param {string} url - URL for resource to retrieve. + * @param {Promise} [abort] - Optional promise for aborting + * the request through rejection. + * @returns {Promise} Promise to the array buffer + * resource. + */ +declare function fetchArrayBuffer( + url: string, + abort?: Promise +): Promise; + +/** + * Read the fields of a protobuf array buffer into a mesh + * object. + * @param {ArrayBuffer} buffer - Protobuf array buffer + * to read from. + * @returns {MeshContract} Mesh object. + */ +declare function readMeshPbf(buffer: ArrayBuffer): MeshContract; + +/** + * Interface describing event emitter members. + * + * This is a specification for implementers to model: it is + * not an exported method or class. + */ +export interface IEventEmitter { + fire(type: string, event: T): void; + off(type: string, handler: (event: T) => void): void; + on(type: string, handler: (event: T) => void): void; +} + +declare class EventEmitter implements IEventEmitter { + constructor(): this; + + /** + * Subscribe to an event by its name. + * @param {string} type - The name of the event + * to subscribe to. + * @param {(event: T) => void} handler - The + * handler called when the event occurs. + */ + on(type: string, handler: (event: T) => void): void; + + /** + * Unsubscribe from an event by its name. + * @param {string} type - The name of the event + * to unsubscribe from. + * @param {(event: T) => void} handler - The + * handler to remove. + */ + off(type: string, handler: (event: T) => void): void; + + /** + * @ignore + */ + fire(type: string, event: T): void; +} +/** + * Interface that represents a longitude, latitude coordinate, + * measured in degrees. Coordinates are defined in the WGS84 datum. + */ +export interface LngLat { + /** + * Latitude, measured in degrees. + */ + lat: number; + + /** + * Longitude, measured in degrees. + */ + lng: number; +} +/** + * Interface that represents longitude-latitude-altitude + * coordinates. Longitude and latitude are measured in degrees + * and altitude in meters. Coordinates are defined in the WGS84 datum. + * @interface + */ +export interface LngLatAlt extends LngLat { + /** + * Altitude, measured in meters. + */ + alt: number; +} + +/** + * Contract describing a reconstruction point. + */ +export interface PointContract { + /** + * RGB color vector of the point, normalized to floats + * on the interval [0, 1]; + */ + color: number[]; + + /** + * Coordinates in metric scale in topocentric ENU + * reference frame with respect to a geo reference. + */ + coordinates: number[]; +} +/** + * Contract describing cluster reconstruction data. + */ +export interface ClusterContract { + /** + * The unique id of the cluster. + */ + id: string; + + /** + * The points of the reconstruction. + */ + points: { + [pointId: string]: PointContract, + ... + }; + + /** + * The reference longitude, latitude, altitude of + * the reconstruction. Determines the + * position of the reconstruction in world reference + * frame. + */ + reference: LngLatAlt; +} +/** + * Ent representing an entity with a unique ID. + * @interface IDEnt + */ +export interface IDEnt { + /** + * Unique ID. + */ + id: string; +} +/** + * Ent representing core image properties. + */ +export type CoreImageEnt = { + /** + * SfM computed longitude, latitude in WGS84 datum, measured in degrees. + * @description Optional - no 3D interaction available + * if unset. + */ + computed_geometry?: LngLat, + + /** + * Original EXIF longitude, latitude in WGS84 datum, measured in degrees. + */ + geometry: LngLat, + + /** + * Sequence that the image is part of. + */ + sequence: IDEnt, + ... +} & IDEnt; + +/** + * Contract describing core image results. + */ +export interface CoreImagesContract { + /** + * Geometry cell ID. + */ + cell_id: string; + + /** + * Array of core image ents. + */ + images: CoreImageEnt[]; +} +/** + * Ent representing camera properties. + */ +export interface CameraEnt { + /** + * Camera type dependent camera parameters. + * + * For perspective and fisheye camera types, + * the camera parameters array should be + * constructed according to + * + * `[focal, k1, k2]` + * + * where focal is the camera focal length, + * and k1, k2 are radial distortion parameters. + * + * For spherical camera type the camera + * parameters should be an emtpy array. + */ + camera_parameters: number[]; + + /** + * Projection type of the camera. + * @description Supported camera types are: + * + * ```js + * 'spherical' + * 'fisheye' + * 'perspective' + * ``` + * + * Other camera types will be treated as + * perspective images. + */ + camera_type: string; +} +/** + * Ent representing URL properties. + */ +export type URLEnt = { + /** + * URL for fetching ent data. + */ + url: string, + ... +} & IDEnt; + +/** + * Ent representing image creator properties. + */ +export type CreatorEnt = { + /** + * The username of the creator. + */ + username: string, + ... +} & IDEnt; + +/** + * Ent representing spatial image properties. + */ +export type SpatialImageEnt = { + /** + * Original EXIF altitude above sea level, in meters. + */ + altitude: number, + + /** + * Scale of atomic reconstruction. + * @description Optional - no 3D interaction available + * if unset. + */ + atomic_scale?: number, + + /** + * Timestamp representing the capture date and time. + * @description Unix epoch timestamp in milliseconds. + */ + captured_at: number, + + /** + * Original EXIF compass angle, measured in degrees. + */ + compass_angle: number, + + /** + * Computed altitude, in meters. + * @description Optional - no 3D interaction available + * if unset. + */ + computed_altitude?: number, + + /** + * SfM computed compass angle, measured in degrees. + * @description Optional - no 3D interaction available + * if unset. + */ + computed_compass_angle?: number, + + /** + * Rotation vector in angle axis representation. + * @description Optional - no 3D interaction available + * if unset. + */ + computed_rotation?: number[], + + /** + * Cluster reconstruction to which the image belongs. + */ + cluster: URLEnt, + + /** + * Image creator. + */ + creator: CreatorEnt, + + /** + * EXIF orientation of original image. + */ + exif_orientation: number, + + /** + * Height of original image, not adjusted for orientation. + */ + height: number, + + /** + * SfM connected component id to which the image belongs. + * @description Optional - no 3D interaction available + * if unset. + */ + merge_id?: string, + + /** + * 3D mesh resource. + */ + mesh: URLEnt, + + /** + * Owner to which the image belongs. + */ + owner: IDEnt, + + /** + * Value specifying if image is accessible to organization members only + * or to everyone. + */ + private?: boolean, + + /** + * Image quality score on the interval [0, 1]. + */ + quality_score?: number, + + /** + * Image thumbnail resource. + */ + thumb: URLEnt, + + /** + * Width of original image, not adjusted for orientation. + */ + width: number, + ... +} & CameraEnt & + IDEnt; + +/** + * Contract describing ent results. + */ +export interface EntContract { + /** + * Ent node. + */ + node: T; + + /** + * Ent node id. + */ + node_id: string; +} +/** + * Contract describing spatial image results. + */ +export type SpatialImagesContract = EntContract[]; +/** + * Ent representing image properties. + */ +export type ImageEnt = { ... } & CoreImageEnt & SpatialImageEnt; + +/** + * Contract describing image results. + */ +export type ImagesContract = EntContract[]; +/** + * Ent representing sequence properties. + * @interface SequenceEnt + */ +export type SequenceEnt = { + /** + * The image IDs of the sequence sorted in + * acsending order based on capture time. + */ + image_ids: string[], + ... +} & IDEnt; + +/** + * Contract describing sequence results. + */ +export type SequenceContract = SequenceEnt; +/** + * Ent representing image tile properties. + */ +export interface ImageTileEnt { + /** + * URL for fetching image tile pixel data. + */ + url: string; + + /** + * X tile coordinate. + */ + x: number; + + /** + * Y tile coordinate. + */ + y: number; + + /** + * Tile level. + */ + z: number; +} +/** + * Contract describing image tile results. + */ +export type ImageTilesContract = EntContract; +/** + * Contract describing image tile requests. + */ +export interface ImageTilesRequestContract { + /** + * ID of the tile's image. + */ + imageId: string; + + /** + * Tile level. + */ + z: number; +} +/** + * @event + */ +export type ProviderEventType = "datacreate"; +/** + * @interface IGeometryProvider + * + * Interface describing geometry provider members. + * + * This is a specification for implementers to model: it + * is not an exported method or class. + */ +export interface IGeometryProvider { + /** + * Convert a geodetic bounding box to the the minimum set + * of cell ids containing the bounding box. + * @description The bounding box needs + * to be sufficiently small to be contained in an area with the size + * of maximally four tiles. Up to nine adjacent tiles may be returned. + * @param {LngLat} sw - South west corner of bounding box. + * @param {LngLat} ne - North east corner of bounding box. + * @returns {Array} Array of cell ids. + */ + bboxToCellIds(sw: LngLat, ne: LngLat): string[]; + + /** + * Get the cell ids of all adjacent cells. + * @description In the case of approximately rectangular cells + * this is typically the eight orthogonally and diagonally adjacent + * cells. + * @param {string} cellId - Id of cell. + * @returns {Array} Array of cell ids. No specific + * order is guaranteed. + */ + getAdjacent(cellId: string): string[]; + + /** + * Get the vertices of a cell. + * @description The vertices form an unclosed + * clockwise polygon in the 2D longitude, latitude + * space. No assumption on the position of the first + * vertex relative to the others can be made. + * @param {string} cellId - Id of cell. + * @returns {Array} Unclosed clockwise polygon. + */ + getVertices(cellId: string): LngLat[]; + + /** + * Convert geodetic coordinates to a cell id. + * @param {LngLat} lngLat - Longitude, latitude to convert. + * @returns {string} Cell id for the longitude, latitude. + */ + lngLatToCellId(lngLat: LngLat): string; +} +/** + * Interface describing data provider members. + * + * This is a specification for implementers to model: it is + * not an exported method or class. + * @fires datacreate + */ +export interface IDataProvider extends IEventEmitter { + /** + * Get geometry property. + * @returns {IGeometryProvider} Geometry provider instance. + */ + geometry: IGeometryProvider; + + /** + * Get core images in a geometry cell. + * @param {string} cellId - The id of the geometry cell. + * @returns {Promise} Promise to + * the core images of the requested geometry cell id. + * @throws Rejects the promise on errors. + */ + getCoreImages(cellId: string): Promise; + + /** + * Get a cluster reconstruction. + * @param {string} url - URL for the cluster reconstruction + * to retrieve. + * @param {Promise} [abort] - Optional promise for aborting + * the request through rejection. + * @returns {Promise} Promise to the + * cluster reconstruction. + * @throws Rejects the promise on errors. + */ + getCluster(url: string, abort?: Promise): Promise; + + /** + * Get spatial images. + * @param {Array} imageIds - The ids for the + * images to retrieve. + * @returns {Promise} Promise to + * the spatial images of the requested image ids. + * @throws Rejects the promise on errors. + */ + getSpatialImages(imageIds: string[]): Promise; + + /** + * Get complete images. + * @param {Array} imageIds - The ids for the + * images to retrieve. + * @returns {Promise} Promise to the images of the + * requested image ids. + * @throws Rejects the promise on errors. + */ + getImages(imageIds: string[]): Promise; + + /** + * Get an image as an array buffer. + * @param {string} url - URL for image to retrieve. + * @param {Promise} [abort] - Optional promise for aborting + * the request through rejection. + * @returns {Promise} Promise to the array + * buffer containing the image. + * @throws Rejects the promise on errors. + */ + getImageBuffer(url: string, abort?: Promise): Promise; + + /** + * Get image tiles urls for a tile level. + * @param {ImageTilesRequestContract} tiles - Tiles to request + * @returns {Promise} Promise to the + * image tiles response contract + * @throws Rejects the promise on errors. + * @example ```js + * var tileRequest = { imageId: 'image-id', z: 12 }; + * provider.getImageTiles(tileRequest) + * .then((response) => console.log(response)); + * ``` + */ + getImageTiles(tiles: ImageTilesRequestContract): Promise; + + /** + * Get a mesh. + * @param {string} url - URL for mesh to retrieve. + * @param {Promise} [abort] - Optional promise for aborting + * the request through rejection. + * @returns {Promise} Promise to the mesh. + * @throws Rejects the promise on errors. + */ + getMesh(url: string, abort?: Promise): Promise; + + /** + * Get sequence. + * @param {Array} sequenceId - The id for the + * sequence to retrieve. + * @returns {Promise} Promise to the sequences of the + * requested image ids. + * @throws Rejects the promise on errors. + */ + getSequence(sequenceId: string): Promise; + + /** + * Set an access token for authenticated API requests of + * protected resources. + * @param {string} [accessToken] accessToken - User access + * token or client access token. + */ + setAccessToken(accessToken?: string): void; +} + +/** + * Interface for general provider events. + */ +export interface ProviderEvent { + /** + * Data provider target that emitted the event. + */ + target: IDataProvider; + + /** + * Provider event type. + */ + type: ProviderEventType; +} +/** + * + * Interface for data provider cell events. + */ +export type ProviderCellEvent = { + /** + * Cell ids for cells where data have been created. + */ + cellIds: string[], + + /** + * Provider event type. + */ + type: "datacreate", + ... +} & ProviderEvent; + +/** + * @class DataProviderBase + * @classdesc Base class to extend if implementing a data provider + * class. + * @fires datacreate + * @example ```js + * class MyDataProvider extends DataProviderBase { + * constructor() { + * super(new S2GeometryProvider()); + * } + * ... + * } + * ``` + */ +declare class DataProviderBase implements IDataProvider, IEventEmitter { + _geometry: IGeometryProvider; + + /** + * Create a new data provider base instance. + * @param {IGeometryProvider} geometry - Geometry + * provider instance. + */ + constructor(_geometry: IGeometryProvider): this; + + /** + * Get geometry property. + * @returns {IGeometryProvider} Geometry provider instance. + */ + geometry: IGeometryProvider; + + fire(type: string, event: T): void; + + /** + * Get core images in a geometry cell. + * @param {string} cellId - The id of the geometry cell. + * @returns {Promise} Promise to + * the core images of the requested geometry cell id. + * @throws Rejects the promise on errors. + */ + getCoreImages(cellId: string): Promise; + + /** + * Get a cluster reconstruction. + * @param {string} url - URL for the cluster reconstruction + * to retrieve. + * @param {Promise} [abort] - Optional promise for aborting + * the request through rejection. + * @returns {Promise} Promise to the + * cluster reconstruction. + * @throws Rejects the promise on errors. + */ + getCluster(url: string, abort?: Promise): Promise; + + /** + * Get spatial images. + * @param {Array} imageIds - The ids for the + * images to retrieve. + * @returns {Promise} Promise to + * the spatial images of the requested image ids. + * @throws Rejects the promise on errors. + */ + getSpatialImages(imageIds: string[]): Promise; + + /** + * Get complete images. + * @param {Array} imageIds - The ids for the + * images to retrieve. + * @returns {Promise} Promise to the images of the + * requested image ids. + * @throws Rejects the promise on errors. + */ + getImages(imageIds: string[]): Promise; + + /** + * Get an image as an array buffer. + * @param {string} url - URL for image to retrieve. + * @param {Promise} [abort] - Optional promise for aborting + * the request through rejection. + * @returns {Promise} Promise to the array + * buffer containing the image. + * @throws Rejects the promise on errors. + */ + getImageBuffer(url: string, abort?: Promise): Promise; + + /** + * Get image tiles urls for a tile level. + * @param {ImageTilesRequestContract} tiles - Tiles to request + * @returns {Promise} Promise to the + * image tiles response contract + * @throws Rejects the promise on errors. + * @example ```js + * var tileRequest = { imageId: 'image-id', z: 12 }; + * provider.getImageTiles(tileRequest) + * .then((response) => console.log(response)); + * ``` + */ + getImageTiles(tiles: ImageTilesRequestContract): Promise; + + /** + * Get a mesh. + * @param {string} url - URL for mesh to retrieve. + * @param {Promise} [abort] - Optional promise for aborting + * the request through rejection. + * @returns {Promise} Promise to the mesh. + * @throws Rejects the promise on errors. + */ + getMesh(url: string, abort?: Promise): Promise; + + /** + * Get sequence. + * @param {Array} sequenceId - The id for the + * sequence to retrieve. + * @returns {Promise} Promise to the sequences of the + * requested image ids. + * @throws Rejects the promise on errors. + */ + getSequence(sequenceId: string): Promise; + + off(type: string, handler: (event: T) => void): void; + + on(type: string, handler: (event: T) => void): void; + + /** + * Set an access token for authenticated API requests of + * protected resources. + * @param {string} [accessToken] accessToken - User access + * token or client access token. + */ + setAccessToken(accessToken?: string): void; +} +/** + * @class GeometryProviderBase + * @classdesc Base class to extend if implementing a geometry + * provider class. + * @example ```js + * class MyGeometryProvider extends GeometryProviderBase { + * ... + * } + * ``` + */ +declare class GeometryProviderBase implements IGeometryProvider { + /** + * Create a new geometry provider base instance. + */ + constructor(): this; + + /** + * Convert a geodetic bounding box to the the minimum set + * of cell ids containing the bounding box. + * @description The bounding box needs + * to be sufficiently small to be contained in an area with the size + * of maximally four tiles. Up to nine adjacent tiles may be returned. + * @param {LngLat} sw - South west corner of bounding box. + * @param {LngLat} ne - North east corner of bounding box. + * @returns {Array} Array of cell ids. + */ + bboxToCellIds(sw: LngLat, ne: LngLat): string[]; + + /** + * Get the cell ids of all adjacent cells. + * @description In the case of approximately rectangular cells + * this is typically the eight orthogonally and diagonally adjacent + * cells. + * @param {string} cellId - Id of cell. + * @returns {Array} Array of cell ids. No specific + * order is guaranteed. + */ + getAdjacent(cellId: string): string[]; + + /** + * Get the vertices of a cell. + * @description The vertices form an unclosed + * clockwise polygon in the 2D longitude, latitude + * space. No assumption on the position of the first + * vertex relative to the others can be made. + * @param {string} cellId - Id of cell. + * @returns {Array} Unclosed clockwise polygon. + */ + getVertices(cellId: string): LngLat[]; + + /** + * Convert geodetic coordinates to a cell id. + * @param {LngLat} lngLat - Longitude, latitude to convert. + * @returns {string} Cell id for the longitude, latitude. + */ + lngLatToCellId(lngLat: LngLat): string; + + /** + * @ignore + */ + _approxBboxToCellIds(sw: LngLat, ne: LngLat): string[]; +} +declare interface GraphCameraContract { + focal: number; + k1: number; + k2: number; + projection_type: string; +} +declare interface GraphCameraShotContract { + camera: string; + rotation: number[]; + translation: number[]; +} +declare interface GraphReferenceContract { + altitude: number; + latitude: number; + longitude: number; +} +declare interface GraphPointContract { + color: number[]; + coordinates: number[]; +} +declare interface GraphClusterContract { + cameras: { + [cameraId: string]: GraphCameraContract, + ... + }; + points: { + [pointId: string]: GraphPointContract, + ... + }; + reference_lla: GraphReferenceContract; + shots: { + [imageKey: string]: GraphCameraShotContract, + ... + }; +} +declare interface GraphGeometry { + coordinates: [number, number]; +} +declare type GraphCoreImageEnt = { + computed_geometry: GraphGeometry, + geometry: GraphGeometry, + sequence: string, + ... +} & IDEnt; +declare type GraphSpatialImageEnt = { + merge_cc: number, + sfm_cluster: URLEnt, + thumb_1024_url: string, + thumb_2048_url: string, + ... +} & SpatialImageEnt; +declare class GraphConverter { + clusterReconstruction(source: GraphClusterContract): ClusterContract; + coreImage(source: GraphCoreImageEnt): CoreImageEnt; + spatialImage(source: GraphSpatialImageEnt): SpatialImageEnt; +} +declare interface GraphDataProviderOptions { + endpoint?: string; + accessToken?: string; +} +declare class GraphQueryCreator { + +imagesPath: string; + +sequencePath: string; + +coreFields: string[]; + +idFields: string[]; + +spatialFields: string[]; + +imageTileFields: string[]; + constructor(): this; + images(imageIds: string[], fields: string[]): string; + imagesS2(cellId: string, fields: string[]): string; + imageTiles(z: number, fields: string[]): string; + imageTilesPath(imageId: string): string; + sequence(sequenceId: string): string; +} +declare class GraphDataProvider extends DataProviderBase { + constructor( + options?: GraphDataProviderOptions, + geometry?: IGeometryProvider, + converter?: GraphConverter, + queryCreator?: GraphQueryCreator + ): this; + getCluster(url: string, abort?: Promise): Promise; + getCoreImages(cellId: string): Promise; + getImageBuffer(url: string, abort?: Promise): Promise; + getImages(imageIds: string[]): Promise; + getImageTiles( + request: ImageTilesRequestContract + ): Promise; + getMesh(url: string, abort?: Promise): Promise; + getSequence(sequenceId: string): Promise; + getSpatialImages(imageIds: string[]): Promise; + setAccessToken(accessToken?: string): void; +} +/** + * @class S2GeometryProvider + * @classdesc Geometry provider based on S2 cells. + * @example ```js + * class MyDataProvider extends DataProviderBase { + * ... + * } + * + * const geometryProvider = new S2GeometryProvider(); + * const dataProvider = new MyDataProvider(geometryProvider); + * ``` + */ +declare class S2GeometryProvider extends GeometryProviderBase { + /** + * Create a new S2 geometry provider instance. + */ + constructor(_level?: number): this; + + /** + * @inheritdoc + */ + bboxToCellIds(sw: LngLat, ne: LngLat): string[]; + + /** + * @inheritdoc + */ + getAdjacent(cellId: string): string[]; + + /** + * @inheritdoc + */ + getVertices(cellId: string): LngLat[]; + + /** + * @inheritdoc + */ + lngLatToCellId(lngLat: LngLat): string; +} +export interface ComponentConfiguration { + [key: string]: mixed; +} +/** + * Enumeration for render mode + * @enum {number} * + * @readonly + * @description Modes for specifying how rendering is done + * in the viewer. All modes preserves the original aspect + * ratio of the images. + */ + +declare var RenderMode: {| + +Letterbox: 0, // 0 + +Fill: 1, // 1 +|}; +declare interface ViewportSize { + height: number; + width: number; +} +declare type CameraType = "spherical" | "fisheye" | "perspective"; +/** + * @class Transform + * @classdesc Class used for calculating coordinate transformations + * and projections. + */ +declare class Transform { + /** + * Create a new transform instance. + * @param {number} orientation - Image orientation. + * @param {number} width - Image height. + * @param {number} height - Image width. + * @param {number} focal - Focal length. + * @param {number} scale - Atomic scale. + * @param {Array} rotation - Rotation vector in three dimensions. + * @param {Array} translation - Translation vector in three dimensions. + * @param {HTMLImageElement} image - Image for fallback size calculations. + */ + constructor( + orientation: number, + width: number, + height: number, + scale: number, + rotation: number[], + translation: number[], + image: HTMLImageElement, + textureScale?: number[], + cameraParameters?: number[], + cameraType?: CameraType + ): this; + ck1: number; + ck2: number; + cameraType: CameraType; + + /** + * Get basic aspect. + * @returns {number} The orientation adjusted aspect ratio. + */ + basicAspect: number; + + /** + * Get basic height. + * @description Does not fall back to image image height but + * uses original value from API so can be faulty. + * @returns {number} The height of the basic version image + * (adjusted for orientation). + */ + basicHeight: number; + + /** + * Get basic width. + * @description Does not fall back to image image width but + * uses original value from API so can be faulty. + * @returns {number} The width of the basic version image + * (adjusted for orientation). + */ + basicWidth: number; + + /** + * Get focal. + * @returns {number} The image focal length. + */ + focal: number; + + /** + * Get height. + * @description Falls back to the image image height if + * the API data is faulty. + * @returns {number} The orientation adjusted image height. + */ + height: number; + + /** + * Get orientation. + * @returns {number} The image orientation. + */ + orientation: number; + + /** + * Get scale. + * @returns {number} The image atomic reconstruction scale. + */ + scale: number; + + /** + * Get has valid scale. + * @returns {boolean} Value indicating if the scale of the transform is valid. + */ + hasValidScale: boolean; + + /** + * Get radial peak. + * @returns {number} Value indicating the radius where the radial + * undistortion function peaks. + */ + radialPeak: number; + + /** + * Get width. + * @description Falls back to the image image width if + * the API data is faulty. + * @returns {number} The orientation adjusted image width. + */ + width: number; + + /** + * Project 3D world coordinates to basic coordinates. + * @param {Array} point3d - 3D world coordinates. + * @return {Array} 2D basic coordinates. + */ + projectBasic(point3d: number[]): number[]; + + /** + * Unproject basic coordinates to 3D world coordinates. + * @param {Array} basic - 2D basic coordinates. + * @param {Array} distance - Distance to unproject from camera center. + * @param {boolean} [depth] - Treat the distance value as depth from camera center. + * Only applicable for perspective images. Will be + * ignored for spherical. + * @returns {Array} Unprojected 3D world coordinates. + */ + unprojectBasic(basic: number[], distance: number, depth?: boolean): number[]; + + /** + * Project 3D world coordinates to SfM coordinates. + * @param {Array} point3d - 3D world coordinates. + * @return {Array} 2D SfM coordinates. + */ + projectSfM(point3d: number[]): number[]; + + /** + * Unproject SfM coordinates to a 3D world coordinates. + * @param {Array} sfm - 2D SfM coordinates. + * @param {Array} distance - Distance to unproject + * from camera center. + * @param {boolean} [depth] - Treat the distance value as + * depth from camera center. Only applicable for perspective + * images. Will be ignored for spherical. + * @returns {Array} Unprojected 3D world coordinates. + */ + unprojectSfM(sfm: number[], distance: number, depth?: boolean): number[]; +} +/** + * @class Camera + * @classdesc Holds information about a camera. + */ +declare class Camera { + /** + * Create a new camera instance. + * @param {Transform} [transform] - Optional transform instance. + */ + constructor(transform?: Transform): this; + + /** + * Get focal. + * @returns {number} The focal length. + */ + focal: number; + + /** + * Set focal. + */ + -focal: number; + + /** + * Update this camera to the linearly interpolated value of two other cameras. + * @param {Camera} a - First camera. + * @param {Camera} b - Second camera. + * @param {number} alpha - Interpolation value on the interval [0, 1]. + */ + lerpCameras(a: Camera, b: Camera, alpha: number): void; + + /** + * Copy the properties of another camera to this camera. + * @param {Camera} other - Another camera. + */ + copy(other: Camera): void; + + /** + * Clone this camera. + * @returns {Camera} A camera with cloned properties equal to this camera. + */ + clone(): Camera; + + /** + * Determine the distance between this camera and another camera. + * @param {Camera} other - Another camera. + * @returns {number} The distance between the cameras. + */ + diff(other: Camera): number; +} +declare var State: {| + +Custom: 0, // 0 + +Earth: 1, // 1 + +Traversing: 2, // 2 + +Waiting: 3, // 3 + +WaitingInteractively: 4, // 4 +|}; + +/** + * Enumeration for edge directions + * @enum {number} * + * @readonly + * @description Directions for edges in image graph describing + * sequence, spatial and image type relations between nodes. + */ + +declare var NavigationDirection: {| + +Next: 0, // 0 + +Prev: 1, // 1 + +StepLeft: 2, // 2 + +StepRight: 3, // 3 + +StepForward: 4, // 4 + +StepBackward: 5, // 5 + +TurnLeft: 6, // 6 + +TurnRight: 7, // 7 + +TurnU: 8, // 8 + +Spherical: 9, // 9 + +Similar: 10, // 10 +|}; + +/** + * Interface that describes additional properties of an edge. + * @interface NavigationEdgeData + */ +export interface NavigationEdgeData { + /** + * The edge direction. + */ + direction: $Values; + + /** + * The counter clockwise horizontal rotation angle from + * the X-axis in a spherical coordiante system of the + * motion from the source image to the destination node. + */ + worldMotionAzimuth: number; +} +/** + * Interface that describes the properties for a + * navigation edge from a source image to a + * target image. + * @interface NavigationEdge + */ +export interface NavigationEdge { + /** + * The id of the source image. + */ + source: string; + + /** + * The id of the target image. + */ + target: string; + + /** + * Additional data describing properties of the edge. + */ + data: NavigationEdgeData; +} +/** + * Interface that indicates edge status. + * @interface NavigationEdgeStatus + */ +export interface NavigationEdgeStatus { + /** + * Value indicating whether the edges have been cached. + */ + cached: boolean; + + /** + * The edges. + * @description If the cached property is false the edges + * property will always be an empty array. If the cached + * property is true, there will exist edges in the the + * array if the image has edges. + */ + edges: NavigationEdge[]; +} +/** + * @class ImageCache + * @classdesc Represents the cached properties of a image. + */ +declare class ImageCache { + /** + * Create a new image cache instance. + */ + constructor(provider: IDataProvider): this; + + /** + * Get image. + * @description Will not be set when assets have not been cached + * or when the object has been disposed. + * @returns {HTMLImageElement} Cached image element of the image. + */ + image: HTMLImageElement; + + /** + * Get mesh. + * @description Will not be set when assets have not been cached + * or when the object has been disposed. + * @returns {MeshContract} SfM triangulated mesh of reconstructed + * atomic 3D points. + */ + mesh: MeshContract; + + /** + * Get sequenceEdges. + * @returns {NavigationEdgeStatus} Value describing the status of the + * sequence edges. + */ + sequenceEdges: NavigationEdgeStatus; + + /** + * Get spatialEdges. + * @returns {NavigationEdgeStatus} Value describing the status of the + * spatial edges. + */ + spatialEdges: NavigationEdgeStatus; + + /** + * Cache the sequence edges. + * @param {Array} edges - Sequence edges to cache. + */ + cacheSequenceEdges(edges: NavigationEdge[]): void; + + /** + * Cache the spatial edges. + * @param {Array} edges - Spatial edges to cache. + */ + cacheSpatialEdges(edges: NavigationEdge[]): void; + + /** + * Dispose the image cache. + * @description Disposes all cached assets and unsubscribes to + * all streams. + */ + dispose(): void; + + /** + * Reset the sequence edges. + */ + resetSequenceEdges(): void; + + /** + * Reset the spatial edges. + */ + resetSpatialEdges(): void; +} +/** + * @class Image + * @classdesc [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] + */ +declare class Image { + /** + * Create a new image instance. + * @description Images are always created internally by the library. + * Images can not be added to the library through any API method. + * @param {CoreImageEnt} core- Raw core image data. + * @ignore + */ + constructor(core: CoreImageEnt): this; + + /** + * Get assets cached. + * @description The assets that need to be cached for this property + * to report true are the following: fill properties, image and mesh. + * The library ensures that the current image will always have the + * assets cached. + * @returns {boolean} Value indicating whether all assets have been + * cached. + * @ignore + */ + assetsCached: boolean; + + /** + * Get cameraParameters. + * @description Will be undefined if SfM has + * not been run. + * + * Camera type dependent parameters. + * + * For perspective and fisheye camera types, + * the camera parameters array should be + * constructed according to + * + * `[focal, k1, k2]` + * + * where focal is the camera focal length, + * and k1, k2 are radial distortion parameters. + * + * For spherical camera type the camera + * parameters are unset or emtpy array. + * @returns {Array} The parameters + * related to the camera type. + */ + cameraParameters: number[]; + + /** + * Get cameraType. + * @description Will be undefined if SfM has not been run. + * @returns {string} The camera type that captured the image. + */ + cameraType: string; + + /** + * Get capturedAt. + * @description Timestamp of the image capture date + * and time represented as a Unix epoch timestamp in milliseconds. + * @returns {number} Timestamp when the image was captured. + */ + capturedAt: number; + + /** + * Get clusterId. + * @returns {string} Globally unique id of the SfM cluster to which + * the image belongs. + */ + clusterId: string; + + /** + * Get clusterUrl. + * @returns {string} Url to the cluster reconstruction file. + * @ignore + */ + clusterUrl: string; + + /** + * Get compassAngle. + * @description If the SfM computed compass angle exists it will + * be returned, otherwise the original EXIF compass angle. + * @returns {number} Compass angle, measured in degrees + * clockwise with respect to north. + */ + compassAngle: number; + + /** + * Get complete. + * @description The library ensures that the current image will + * always be full. + * @returns {boolean} Value indicating whether the image has all + * properties filled. + * @ignore + */ + complete: boolean; + + /** + * Get computedAltitude. + * @description If SfM has not been run the computed altitude is + * set to a default value of two meters. + * @returns {number} Altitude, in meters. + */ + computedAltitude: number; + + /** + * Get computedCompassAngle. + * @description Will not be set if SfM has not been run. + * @returns {number} SfM computed compass angle, measured + * in degrees clockwise with respect to north. + */ + computedCompassAngle: number; + + /** + * Get computedLngLat. + * @description Will not be set if SfM has not been run. + * @returns {LngLat} SfM computed longitude, latitude in WGS84 datum, + * measured in degrees. + */ + computedLngLat: LngLat; + + /** + * Get creatorId. + * @description Note that the creator ID will not be set when using + * the Mapillary API. + * @returns {string} Globally unique id of the user who uploaded + * the image. + */ + creatorId: string; + + /** + * Get creatorUsername. + * @description Note that the creator username will not be set when + * using the Mapillary API. + * @returns {string} Username of the creator who uploaded + * the image. + */ + creatorUsername: string; + + /** + * Get exifOrientation. + * @returns {number} EXIF orientation of original image. + */ + exifOrientation: number; + + /** + * Get height. + * @returns {number} Height of original image, not adjusted + * for orientation. + */ + height: number; + + /** + * Get image. + * @description The image will always be set on the current image. + * @returns {HTMLImageElement} Cached image element of the image. + */ + image: HTMLImageElement; + + /** + * Get id. + * @returns {string} Globally unique id of the image. + */ + id: string; + + /** + * Get lngLat. + * @description If the SfM computed longitude, latitude exist + * it will be returned, otherwise the original EXIF latitude + * longitude. + * @returns {LngLat} Longitude, latitude in WGS84 datum, + * measured in degrees. + */ + lngLat: LngLat; + + /** + * Get merged. + * @returns {boolean} Value indicating whether SfM has been + * run on the image and the image has been merged into a + * connected component. + */ + merged: boolean; + + /** + * Get mergeId. + * @description Will not be set if SfM has not yet been run on + * image. + * @returns {stirng} Id of connected component to which image + * belongs after the aligning merge. + */ + mergeId: string; + + /** + * Get mesh. + * @description The mesh will always be set on the current image. + * @returns {MeshContract} SfM triangulated mesh of reconstructed + * atomic 3D points. + */ + mesh: MeshContract; + + /** + * Get originalAltitude. + * @returns {number} EXIF altitude, in meters, if available. + */ + originalAltitude: number; + + /** + * Get originalCompassAngle. + * @returns {number} Original EXIF compass angle, measured in + * degrees. + */ + originalCompassAngle: number; + + /** + * Get originalLngLat. + * @returns {LngLat} Original EXIF longitude, latitude in + * WGS84 datum, measured in degrees. + */ + originalLngLat: LngLat; + + /** + * Get ownerId. + * @returns {string} Globally unique id of the owner to which + * the image belongs. If the image does not belong to an + * owner the owner id will be undefined. + */ + ownerId: string; + + /** + * Get private. + * @returns {boolean} Value specifying if image is accessible to + * organization members only or to everyone. + */ + private: boolean; + + /** + * Get qualityScore. + * @returns {number} A number between zero and one + * determining the quality of the image. Blurriness + * (motion blur / out-of-focus), occlusion (camera + * mount, ego vehicle, water-drops), windshield + * reflections, bad illumination (exposure, glare), + * and bad weather condition (fog, rain, snow) + * affect the quality score. + * @description Value should be on the interval [0, 1]. + */ + qualityScore: number; + + /** + * Get rotation. + * @description Will not be set if SfM has not been run. + * @returns {Array} Rotation vector in angle axis representation. + */ + rotation: number[]; + + /** + * Get scale. + * @description Will not be set if SfM has not been run. + * @returns {number} Scale of reconstruction the image + * belongs to. + */ + scale: number; + + /** + * Get sequenceId. + * @returns {string} Globally unique id of the sequence + * to which the image belongs. + */ + sequenceId: string; + + /** + * Get sequenceEdges. + * @returns {NavigationEdgeStatus} Value describing the status of the + * sequence edges. + * @ignore + */ + sequenceEdges: NavigationEdgeStatus; + + /** + * Get spatialEdges. + * @returns {NavigationEdgeStatus} Value describing the status of the + * spatial edges. + * @ignore + */ + spatialEdges: NavigationEdgeStatus; + + /** + * Get width. + * @returns {number} Width of original image, not + * adjusted for orientation. + */ + width: number; + + /** + * Cache the sequence edges. + * @description The sequence edges are cached asynchronously + * internally by the library. + * @param {Array} edges - Sequence edges to cache. + * @ignore + */ + cacheSequenceEdges(edges: NavigationEdge[]): void; + + /** + * Cache the spatial edges. + * @description The spatial edges are cached asynchronously + * internally by the library. + * @param {Array} edges - Spatial edges to cache. + * @ignore + */ + cacheSpatialEdges(edges: NavigationEdge[]): void; + + /** + * Dispose the image. + * @description Disposes all cached assets. + * @ignore + */ + dispose(): void; + + /** + * Initialize the image cache. + * @description The image cache is initialized internally by + * the library. + * @param {ImageCache} cache - The image cache to set as cache. + * @ignore + */ + initializeCache(cache: ImageCache): void; + + /** + * Complete an image with spatial properties. + * @description The image is completed internally by + * the library. + * @param {SpatialImageEnt} fill - The spatial image struct. + * @ignore + */ + makeComplete(fill: SpatialImageEnt): void; + + /** + * Reset the sequence edges. + * @ignore + */ + resetSequenceEdges(): void; + + /** + * Reset the spatial edges. + * @ignore + */ + resetSpatialEdges(): void; + + /** + * Clears the image and mesh assets, aborts + * any outstanding requests and resets edges. + * @ignore + */ + uncache(): void; +} +declare interface IAnimationState { + reference: LngLatAlt; + alpha: number; + camera: Camera; + zoom: number; + currentImage: Image; + currentCamera: Camera; + previousImage: Image; + trajectory: Image[]; + currentIndex: number; + lastImage: Image; + imagesAhead: number; + currentTransform: Transform; + previousTransform: Transform; + motionless: boolean; + state: $Values; +} +declare interface AnimationFrame { + id: number; + fps: number; + state: IAnimationState; +} +declare interface EulerRotation { + phi: number; + theta: number; +} +declare class RenderCamera { + constructor( + elementWidth: number, + elementHeight: number, + renderMode: $Values + ): this; + alpha: number; + camera: Camera; + changed: boolean; + frameId: number; + renderMode: $Values; + rotation: EulerRotation; + zoom: number; + size: ViewportSize; + getTilt(): number; + fovToZoom(fov: number): number; + setFrame(frame: AnimationFrame): void; + setProjectionMatrix(matrix: number[]): void; + setRenderMode(renderMode: $Values): void; + setSize(size: ViewportSize): void; +} +declare class RenderService { + constructor( + element: HTMLElement, + currentFrame$: mixed, + renderMode: $Values, + renderCamera?: RenderCamera + ): this; + element: HTMLElement; + dispose(): void; +} +declare interface VirtualNodeHash { + name: string; +} +declare class DOMRenderer { + constructor(element: HTMLElement, renderService: RenderService): this; + clear(name: string): void; + remove(): void; +} +declare type GLRenderFunction = { + (): void, +}; + +declare var RenderPass$1: {| + +Background: 0, // 0 + +Opaque: 1, // 1 +|}; +declare interface GLFrameRenderer { + frameId: number; + needsRender: boolean; + render: GLRenderFunction; + pass: $Values; +} +declare interface GLRenderHash { + name: string; + renderer: GLFrameRenderer; +} +declare class GLRenderer { + constructor( + canvas: HTMLCanvasElement, + canvasContainer: HTMLElement, + renderService: RenderService + ): this; + clear(name: string): void; + remove(): void; + triggerRerender(): void; +} +/** + * Enumeration for transition mode + * @enum {number} * + * @readonly + * @description Modes for specifying how transitions + * between images are performed. + */ + +declare var TransitionMode: {| + +Default: 0, // 0 + +Instantaneous: 1, // 1 +|}; +declare class StateService { + constructor( + initialState: $Values, + transitionMode?: $Values + ): this; + dispose(): void; + custom(): void; + earth(): void; + traverse(): void; + wait(): void; + waitInteractively(): void; + appendImagess(images: Image[]): void; + prependImages(images: Image[]): void; + removeImages(n: number): void; + clearImages(): void; + clearPriorImages(): void; + cutImages(): void; + setImages(images: Image[]): void; + setViewMatrix(matrix: number[]): void; + rotate(delta: EulerRotation): void; + rotateUnbounded(delta: EulerRotation): void; + rotateWithoutInertia(delta: EulerRotation): void; + rotateBasic(basicRotation: number[]): void; + rotateBasicUnbounded(basicRotation: number[]): void; + rotateBasicWithoutInertia(basicRotation: number[]): void; + rotateToBasic(basic: number[]): void; + move(delta: number): void; + moveTo(position: number): void; + dolly(delta: number): void; + orbit(rotation: EulerRotation): void; + truck(direction: number[]): void; + + /** + * Change zoom level while keeping the reference point position approximately static. + * @parameter {number} delta - Change in zoom level. + * @parameter {Array} reference - Reference point in basic coordinates. + */ + zoomIn(delta: number, reference: number[]): void; + setCenter(center: number[]): void; + setSpeed(speed: number): void; + setTransitionMode(mode: $Values): void; + setZoom(zoom: number): void; + start(): void; + stop(): void; +} +declare class DOM { + constructor(doc?: Node): this; +} +/** + * Enumeration for component size. + * @enum {number} * + * @readonly + * @description May be used by a component to allow for resizing + * of the UI elements rendered by the component. + */ + +declare var ComponentSize: {| + +Automatic: 0, // 0 + +Large: 1, // 1 + +Small: 2, // 2 +|}; +export type BearingConfiguration = { + /** + * The size of the ui elements. + * @default ComponentSize.Automatic + */ + size?: $Values, + ... +} & ComponentConfiguration; + +/** + * Interface for configuration of cache depth. + * @interface + * @example ```js + * var viewer = new Viewer({ + * ... + * component: { + * cache: { + * depth: { + * spherical: 2, + * sequence: 3, + * } + * }, + * }, + * ... + * }); + * ``` + */ +export interface CacheDepthConfiguration { + /** + * Cache depth in the sequence directions. + * @description Max value is 4. Value will be clamped + * to the interval [0, 4]. + * @default 2 + */ + sequence: number; + + /** + * Cache depth in the spherical direction. + * @description Max value is 2. Value will be clamped + * to the interval [0, 2]. + * @default 1 + */ + spherical: number; + + /** + * Cache depth in the step directions. + * @description Max value is 3. Value will be clamped + * to the interval [0, 3]. + * @default 1 + */ + step: number; + + /** + * Cache depth in the turn directions. + * @description Max value is 1. Value will be clamped + * to the interval [0, 1]. + * @default 0 + */ + turn: number; +} +/** + * Interface for configuration of cache component. + * @interface + */ +export type CacheConfiguration = { + /** + * Cache depth struct. + */ + depth?: CacheDepthConfiguration, + ... +} & ComponentConfiguration; + +/** + * Interface for configuration of direction component. + * @interface + * @example ```js + * var viewer = new Viewer({ + * ... + * component: { + * direction: { + * minWidth: 140, + * maxWidth: 340, + * }, + * }, + * ... + * }); + * ``` + */ +export type DirectionConfiguration = { + /** + * Determines if the sequence arrow appearance should be different from + * the non sequence arrows. + * @description Needs to be set to true for the sequence suffixed classes + * to be applied to the navigation elements. Additional calculations will be + * performed resulting in a performance cost. + * @default false + */ + distinguishSequence?: boolean, + + /** + * The image id representing the direction arrow to be highlighted. + * @description The arrow pointing towards the image corresponding to the + * highlight id will be highlighted. + * @default undefined + */ + highlightId?: string, + + /** + * The min width of the non transformed container element holding + * the navigation arrows. + * @description Set min width of the non transformed + * container element holding the navigation arrows. + * If the min width is larger than the max width the + * min width value will be used. + * + * The container element is automatically resized when the resize + * method on the Viewer class is called. + * @default 260 + */ + minWidth?: number, + + /** + * The max width of the non transformed container element holding + * the navigation arrows. + * @description Set max width of the non transformed + * container element holding the navigation arrows. + * If the min width is larger than the max width the + * min width value will be used. + * + * The container element is automatically resized when the resize + * method on the Viewer class is called. + * @default 460 + */ + maxWidth?: number, + ... +} & ComponentConfiguration; + +/** + * Interface for configuration of keyboard component. + * @interface + * @example ```js + * var viewer = new Viewer({ + * ... + * component: { + * keyboard: { + * keyZoom: false, + * keySequenceNavigation: false, + * keySpatialNavigation: false, + * }, + * }, + * ... + * }); + * ``` + */ +export type KeyboardConfiguration = { + /** + * Enable or disable the `KeyPlayHandler`. + * @default true + */ + keyPlay?: boolean, + + /** + * Enable or disable the `KeySequenceNavigationHandler`. + * @default true + */ + keySequenceNavigation?: boolean, + + /** + * Enable or disable the `KeySpatialNavigationHandler`. + * @default true + */ + keySpatialNavigation?: boolean, + + /** + * Enable or disable the `KeyZoomHandler`. + * @default true + */ + keyZoom?: boolean, + ... +} & ComponentConfiguration; + +/** + * Interface for configuration of marker component. + * @interface + * @example ```js + * var viewer = new Viewer({ + * ... + * component: { + * marker: { + * visibleBBoxSize: 80, + * }, + * }, + * ... + * }); + * ``` + */ +export type MarkerConfiguration = { + /** + * The size of the bounding box for which markers will be visible. + * @description Provided values will be clamped to the [1, 200] + * interval. + * @default 100 + */ + visibleBBoxSize?: number, + ... +} & ComponentConfiguration; + +/** + * Interface for configuration of mouse component. + * @interface + * @example ```js + * var viewer = new Viewer({ + * ... + * component: { + * pointer: { + * dragPan: false, + * scrollZoom: false, + * touchZoom: false, + * }, + * }, + * ... + * }); + * ``` + */ +export type PointerConfiguration = { + /** + * Activate or deactivate the `DragPanHandler`. + * @default true + */ + dragPan?: boolean, + + /** + * Activate or deactivate the `EarthControlHandler`. + * @default true + */ + earthControl?: boolean, + + /** + * Activate or deactivate the `ScrollZoomHandler`. + * @default true + */ + scrollZoom?: boolean, + + /** + * Activate or deactivate the `TouchZoomHandler`. + * @default true + */ + touchZoom?: boolean, + ... +} & ComponentConfiguration; + +/** + * Interface for configuration of sequence component. + * @interface + * @example ```js + * const viewer = new Viewer({ + * ... + * component: { + * sequence: { + * minWidth: 40, + * maxWidth: 80, + * visible: false, + * }, + * }, + * ... + * }); + * ``` + */ +export type SequenceConfiguration = { + /** + * Set the direction to follow when playing. + * @default EdgeDirection.Next + */ + direction?: $Values, + + /** + * The node id representing the direction arrow to be highlighted. + * @description When set to null no direction will be highlighted. + * The arrow pointing towards the node corresponding to the + * highlight id will be highlighted. + * @default undefined + * @ignore + */ + highlightId?: string, + + /** + * The max width of the sequence container. + * @description Set max width of the container element holding + * the sequence navigation elements. If the min width is larger than the + * max width the min width value will be used. + * + * The container element is automatically resized when the resize + * method on the Viewer class is called. + * @default 117 + */ + maxWidth?: number, + + /** + * The min width of the sequence container. + * @description Set min width of the container element holding + * the sequence navigation elements. If the min width is larger than the + * max width the min width value will be used. + * + * The container element is automatically resized when the resize + * method on the Viewer class is called. + * @default 70 + */ + minWidth?: number, + + /** + * Indicating whether the component is playing. + * @default false + */ + playing?: boolean, + + /** + * Determine whether the sequence UI elements + * should be visible. + * @default true + */ + visible?: boolean, + ... +} & ComponentConfiguration; + +/** + * Enumeration for slider mode. + * @enum {number} * + * @readonly + * @description Modes for specifying how transitions + * between images are performed in slider mode. Only + * applicable when the slider component determines + * that transitions with motion is possilble. When it + * is not, the stationary mode will be applied. + */ + +declare var SliderConfigurationMode: {| + +Motion: 0, // 0 + +Stationary: 1, // 1 +|}; + +/** + * Interface for configuration of slider ids. + * @interface + */ +export interface SliderConfigurationIds { + /** + * Id for the image plane in the background. + */ + background: string; + + /** + * Id for the image plane in the foreground. + */ + foreground: string; +} +/** + * Interface for configuration of slider component. + * @interface ```js + * var viewer = new Viewer({ + * ... + * component: { + * slider: { + * initialPosition: 0.5, + * ids: { + * background: '', + * foreground: '', + * }, + * sliderVisible: true, + * }, + * }, + * ... + * }); + * ``` + */ +export type SliderConfiguration = { + /** + * Initial position of the slider on the interval [0, 1]. + * @description Configures the initial position of the slider. + * The inital position value will be used when the component + * is activated. + * @default 1 + */ + initialPosition?: number, + + /** + * Slider image ids. + * @description Configures the component to show the image + * planes for the supplied image ids in the foreground + * and the background. + */ + ids?: SliderConfigurationIds, + + /** + * Value indicating whether the slider should be visible. + * @description Set the value controlling if the + * slider is visible. + * @default true + */ + sliderVisible?: boolean, + + /** + * Mode used for image pair transitions. + * @description Configures the mode for transitions between + * image pairs. + */ + mode?: $Values, + ... +} & ComponentConfiguration; + +declare var CameraVisualizationMode: {| + +Hidden: 0, // 0 + +Homogeneous: 1, // 1 + +Cluster: 2, // 2 + +ConnectedComponent: 3, // 3 + +Sequence: 4, // 4 +|}; + +declare var OriginalPositionMode: {| + +Hidden: 0, // 0 + +Altitude: 1, // 1 + +Flat: 2, // 2 +|}; + +declare var PointVisualizationMode: {| + +Hidden: 0, // 0 + +Original: 1, // 1 + +Cluster: 2, // 2 +|}; + +/** + * Interface for configuration of spatial component. + * @interface + * @example ```js + * var viewer = new Viewer({ + * ... + * component: { + * spatial: { + * cameraSize: 0.5, + * cameraVisualizationMode: CameraVisualizationMode.Cluster, + * cellsVisible: true, + * originalPositionMode: OriginalPositionMode.Altitude, + * pointSize: 0.5, + * pointVisualizationMode: PointVisualizationMode.Hidden, + * }, + * }, + * ... + * }); + * ``` + */ +export type SpatialConfiguration = { + /** + * The camera size on the interval [0.01, 1]. + * @default 0.1 + */ + cameraSize?: number, + + /** + * Specify the camera visualization mode. + * @default CameraVisualizationMode.Homogeneous + */ + cameraVisualizationMode?: $Values, + + /** + * Specify if the currently rendered cells should be visualize on + * an approximated ground plane. + * @default false + */ + cellsVisible?: boolean, + + /** + * Cell grid depth from the cell of the currently + * selected camera. + * @description Max value is 3. Value will be clamped + * to the interval [1, 3]. + * @default 1 + */ + cellGridDepth?: number, + + /** + * Specify the original position visualization mode. + * @description The original positions are hidden + * by default. + * @default OriginalPositionMode.Hidden + */ + originalPositionMode?: $Values, + + /** + * The point size on the interval [0.01, 1]. + * @default 0.1 + */ + pointSize?: number, + + /** + * Specify if the points should be visible or not. + * @deprecated `pointsVisible` will be removed in + * v5.x. Use {@link pointVisualizationMode} instead. + * @default true + */ + pointsVisible?: boolean, + + /** + * Specify how point clouds should be visualized. + * @default PointVisualizationMode.Original + */ + pointVisualizationMode?: $Values, + ... +} & ComponentConfiguration; + +/** + * Enumeration for tag modes + * @enum {number} * + * @readonly + * @description Modes for the interaction in the tag component. + */ + +declare var TagMode: {| + +Default: 0, // 0 + +CreatePoint: 1, // 1 + +CreatePoints: 2, // 2 + +CreatePolygon: 3, // 3 + +CreateRect: 4, // 4 + +CreateRectDrag: 5, // 5 +|}; + +/** + * Interface for configuration of tag component. + * @interface + * @example ```js + * var viewer = new Viewer({ + * ... + * component: { + * tag: { + * createColor: 0xFF0000, + * mode: TagMode.CreateRect, + * }, + * }, + * ... + * }); + * ``` + */ +export type TagConfiguration = { + /** + * The color of vertices and edges for tags that + * are being created. + * @default 0xFFFFFF + */ + createColor?: number, + + /** + * Show an indicator at the centroid of the points geometry + * that creates the geometry when clicked. + * @default true + */ + indicatePointsCompleter?: boolean, + + /** + * The interaction mode of the tag component. + * @default TagMode.Default + */ + mode?: $Values, + ... +} & ComponentConfiguration; +export type ZoomConfiguration = { + /** + * The size of the ui elements. + * @default ComponentSize.Automatic + */ + size?: $Values, + ... +} & ComponentConfiguration; + +/** + * Interface for configuration of navigation component. + * @interface + * @example ```js + * var viewer = new Viewer({ + * ... + * component: { + * fallback: { + * navigation: { + * spatial: false, + * }, + * }, + * }, + * ... + * }); + * ``` + */ +export type NavigationFallbackConfiguration = { + /** + * Enable or disable the sequence arrows. + * @default true + */ + sequence?: boolean, + + /** + * Enable or disable the spatial arrows. + * @default true + */ + spatial?: boolean, + ... +} & ComponentConfiguration; + +/** + * Interface for the fallback component options that can be + * provided to the viewer when the browser does not have + * WebGL support. + * @interface + */ +export interface FallbackOptions { + /** + * Show static images without pan, zoom, or transitions. + * @description Fallback for `image` when WebGL is not supported. + * @default false + */ + image?: boolean; + + /** + * Show static navigation arrows in the corners. + * @description Fallback for `direction` and `sequence` when WebGL is not supported. + * @default false + */ + navigation?: boolean | NavigationFallbackConfiguration; +} +/** + * Interface for the component options that can be provided to the viewer. + * @interface + */ +export interface ComponentOptions { + /** + * Show attribution. + * @default true + */ + attribution?: boolean; + + /** + * Show indicator for bearing and field of view. + * @default true + */ + bearing?: boolean | BearingConfiguration; + + /** + * Cache images around the current one. + * @default true + */ + cache?: boolean | CacheConfiguration; + + /** + * Use a cover to avoid loading data until viewer interaction. + * @default true + */ + cover?: boolean; + + /** + * Show spatial direction arrows for navigation. + * @description Default spatial navigation when there is WebGL support. + * Requires WebGL support. + * @default true + */ + direction?: boolean | DirectionConfiguration; + + /** + * Enable fallback component options + * when the browser does not have WebGL support. + * @default undefined + */ + fallback?: FallbackOptions; + + /** + * Show image planes in 3D. + * @description Requires WebGL support. + * @default true + */ + image?: boolean; + + /** + * Enable use of keyboard commands. + * @description Requires WebGL support. + * @default true + */ + keyboard?: boolean | KeyboardConfiguration; + + /** + * Enable an interface for showing 3D markers in the viewer. + * @description Requires WebGL support. + * @default false + */ + marker?: boolean | MarkerConfiguration; + + /** + * Enable mouse, pen, and touch interaction for zoom and pan. + * @description Requires WebGL support. + * @default true + */ + pointer?: boolean | PointerConfiguration; + + /** + * Show HTML popups over images. + * @description Requires WebGL support. + * @default false + */ + popup?: boolean; + + /** + * Show sequence related navigation. + * @description Default sequence navigation when there is WebGL support. + * @default true + */ + sequence?: boolean | SequenceConfiguration; + + /** + * Show a slider for transitioning between image planes. + * @description Requires WebGL support. + * @default false + */ + slider?: boolean | SliderConfiguration; + + /** + * Enable an interface for showing spatial data in the viewer. + * @description Requires WebGL support. + * @default false + */ + spatial?: boolean | SpatialConfiguration; + + /** + * Enable an interface for drawing 2D geometries on top of images. + * @description Requires WebGL support. + * @default false + */ + tag?: boolean | TagConfiguration; + + /** + * Show buttons for zooming in and out. + * @description Requires WebGL support. + * @default true + */ + zoom?: boolean | ZoomConfiguration; +} +/** + * Interface for the URL options that can be provided to the viewer. + * @interface + */ +export interface UrlOptions { + /** + * Explore host. + * @description Host used for links to the full + * mapillary website. + * @default {"www.mapillary.com"} + */ + exploreHost?: string; + + /** + * Scheme. + * @description Used for all hosts. + * @default {"https"} + */ + scheme?: string; +} +/** + * Enumeration for camera controls. + * @description Specifies different modes for how the + * camera is controlled through pointer, keyboard or + * other modes of input. + * @enum {number} * + * @readonly + */ + +declare var CameraControls: {| + +Custom: 0, // 0 + +Earth: 1, // 1 + +Street: 2, // 2 +|}; + +/** + * [object Object],[object Object],[object Object] + */ +export interface ViewerOptions { + /** + * Optional access token for API requests of + * resources. + * @description [object Object],[object Object],[object Object] + */ + accessToken?: string; + + /** + * Value specifying the initial camera controls of + * the viewer. + * @default [object Object],[object Object] + */ + cameraControls?: $Values; + + /** + * Value specifying if combined panning should be activated. + * @default true + */ + combinedPanning?: boolean; + + /** + * Component options. + */ + component?: ComponentOptions; + + /** + * The HTML element in which MapillaryJS will render the + * viewer, or the element's string `id`. The + * specified element must have no children. + */ + container: string | HTMLElement; + + /** + * Optional data provider class instance for API and static + * resource requests. + * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] + */ + dataProvider?: IDataProvider; + + /** + * Optional `image-id` to start from. The id + * can be any Mapillary image. If a id is provided the viewer is + * bound to that id until it has been fully loaded. If null is provided + * no image is loaded at viewer initialization and the viewer is not + * bound to any particular id. Any image can then be navigated to + * with e.g. `viewer.moveTo("")`. + */ + imageId?: string; + + /** + * Value indicating if the viewer should fetch high resolution + * image tiles. + * @description Can be used when extending MapillaryJS with + * a custom data provider. If no image tiling server exists + * the image tiling can be inactivated to avoid error + * messages about non-existing tiles in the console. + * @default true + */ + imageTiling?: boolean; + + /** + * The render mode in the viewer. + * @default [object Object],[object Object] + */ + renderMode?: $Values; + + /** + * A base URL for retrieving a PNG sprite image and json metadata file. + * File name extensions will be automatically appended. + */ + sprite?: string; + + /** + * If `true`, the viewer will automatically resize when the + * browser window resizes. + * @default true + */ + trackResize?: boolean; + + /** + * The transtion mode in the viewer. + * @default [object Object],[object Object] + */ + transitionMode?: $Values; + + /** + * The URL options. + */ + url?: UrlOptions; +} +declare class KeyboardService { + constructor(canvasContainer: HTMLElement): this; +} +declare class MouseService { + constructor( + container: EventTarget, + canvasContainer: EventTarget, + domContainer: EventTarget, + doc: EventTarget + ): this; + dispose(): void; + claimMouse(name: string, zindex: number): void; + unclaimMouse(name: string): void; + deferPixels(name: string, deferPixels: number): void; + undeferPixels(name: string): void; + claimWheel(name: string, zindex: number): void; + unclaimWheel(name: string): void; +} +/** + * Enumeration for alignments + * @enum {number} * + * @readonly + */ + +declare var Alignment: {| + +Bottom: 0, // 0 + +BottomLeft: 1, // 1 + +BottomRight: 2, // 2 + +Center: 3, // 3 + +Left: 4, // 4 + +Right: 5, // 5 + +Top: 6, // 6 + +TopLeft: 7, // 7 + +TopRight: 8, // 8 +|}; +declare interface ISpriteAtlas { + loaded: boolean; +} +declare class SpriteAtlas implements ISpriteAtlas { + -json: mixed; + -image: mixed; + loaded: boolean; +} +declare interface Sprite { + width: number; + height: number; + x: number; + y: number; + pixelRatio: number; +} +declare interface Sprites { + [key: string]: Sprite; +} +declare class SpriteService { + constructor(sprite?: string): this; + dispose(): void; +} +declare interface TouchPinch { + /** + * X client coordinate for center of pinch. + */ + clientX: number; + + /** + * Y client coordinate for center of pinch. + */ + clientY: number; + + /** + * X page coordinate for center of pinch. + */ + pageX: number; + + /** + * Y page coordinate for center of pinch. + */ + pageY: number; + + /** + * X screen coordinate for center of pinch. + */ + screenX: number; + + /** + * Y screen coordinate for center of pinch. + */ + screenY: number; + + /** + * Distance change in X direction between touches + * compared to previous event. + */ + changeX: number; + + /** + * Distance change in Y direction between touches + * compared to previous event. + */ + changeY: number; + + /** + * Pixel distance between touches. + */ + distance: number; + + /** + * Change in pixel distance between touches compared + * to previous event. + */ + distanceChange: number; + + /** + * Distance in X direction between touches. + */ + distanceX: number; + + /** + * Distance in Y direction between touches. + */ + distanceY: number; + + /** + * Original touch event. + */ + originalEvent: TouchEvent; + + /** + * First touch. + */ + touch1: Touch; + + /** + * Second touch. + */ + touch2: Touch; +} +declare class TouchService { + constructor(canvasContainer: HTMLElement, domContainer: HTMLElement): this; + dispose(): void; +} +/** + * Test whether the current browser supports the full + * functionality of MapillaryJS. + * @description The full functionality includes WebGL rendering. + * @return {boolean} + * @example `var supported = isSupported();` + */ +declare function isSupported(): boolean; + +/** + * Test whether the current browser supports the fallback + * functionality of MapillaryJS. + * @description The fallback functionality does not include WebGL + * rendering, only 2D canvas rendering. + * @return {boolean} + * @example `var fallbackSupported = isFallbackSupported();` + */ +declare function isFallbackSupported(): boolean; +export type ComparisonFilterOperator = "==" | "!=" | ">" | ">=" | "<" | "<="; +export type SetMembershipFilterOperator = "in" | "!in"; +export type CombiningFilterOperator = "all"; +export type FilterOperator = + | CombiningFilterOperator + | ComparisonFilterOperator + | SetMembershipFilterOperator; +declare type FilterKey = + | "cameraType" + | "capturedAt" + | "clusterId" + | "creatorId" + | "creatorUsername" + | "exifOrientation" + | "height" + | "id" + | "mergeId" + | "merged" + | "ownerId" + | "private" + | "qualityScore" + | "sequenceId" + | "width"; +export type FilterValue = boolean | number | string; +export type ComparisonFilterExpression = [ + ComparisonFilterOperator, + FilterKey, + FilterValue +]; +export type SetMembershipFilterExpression = ( + | SetMembershipFilterOperator + | FilterKey + | FilterValue +)[]; +export type CombiningFilterExpression = ( + | CombiningFilterOperator + | ComparisonFilterExpression + | SetMembershipFilterExpression +)[]; +export type FilterExpression = + | ComparisonFilterExpression + | SetMembershipFilterExpression + | CombiningFilterExpression; +/** + * @event + */ +export type ViewerEventType = + | "bearing" + | "click" + | "contextmenu" + | "dblclick" + | "fov" + | "dataloading" + | "load" + | "mousedown" + | "mousemove" + | "mouseout" + | "mouseover" + | "mouseup" + | "moveend" + | "movestart" + | "navigable" + | "image" + | "position" + | "pov" + | "reference" + | "remove" + | "sequenceedges" + | "spatialedges"; + +declare var RenderPass: {| + +Opaque: 0, // 0 +|}; + +/** + * @interface + * @description [object Object],[object Object],[object Object],[object Object],[object Object] + */ +export interface ICustomRenderer { + /** + * A unique renderer id. + */ + id: string; + + /** + * The custom renderer's render pass. + * @description [object Object],[object Object],[object Object] + */ + renderPass: $Values; + + /** + * Method called when the renderer has been added to the + * viewer. This gives the + * renderer a chance to initialize gl resources and + * register event listeners. + * @description [object Object],[object Object],[object Object],[object Object],[object Object] + * @param {IViewer} viewer - The viewer this custom renderer + * was just added to. + * @param {LngLatAlt} reference - The viewer's current + * reference position. + * @param {WebGLRenderingContext | WebGL2RenderingContext} context - + * The viewer's gl context. + */ + onAdd( + viewer: IViewer, + reference: LngLatAlt, + context: WebGLRenderingContext + ): void; + + /** + * Method called when the viewer's reference position has changed. + * This gives the renderer a chance to reposition its scene objects. + * @description [object Object],[object Object],[object Object] + * @param {IViewer} viewer - The viewer this custom renderer + * is added to. + * @param {LngLatAlt} reference - The viewer's current + * reference position. + */ + onReference(viewer: IViewer, reference: LngLatAlt): void; + + /** + * Method called when the renderer has been removed from the + * viewer. This gives the + * renderer a chance to clean up gl resources and event + * listeners. + * @description [object Object],[object Object],[object Object] + * @param {IViewer} viewer - The viewer this custom renderer + * was just removed from. + * @param {WebGLRenderingContext | WebGL2RenderingContext} context - + * The viewer's gl context. + */ + onRemove(viewer: IViewer, context: WebGLRenderingContext): void; + + /** + * Called during an animation frame allowing the renderer to draw + * into the GL context. The layer cannot make assumptions + * about the current GL state. + * @description Take a look at the + * [WebGL model view projection article](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection) + * on MDN for an introduction to the view and projection matrices. + * @param {WebGLRenderingContext | WebGL2RenderingContext} context The + * viewer's WebGL context. + * @param {Array} viewMatrix The viewer's view matrix. + * @param {Array} projectionMatrix The viewers's projection + * matrix. + */ + render( + context: WebGLRenderingContext, + viewMatrix: number[], + projectionMatrix: number[] + ): void; +} +/** + * @interface PointOfView + * + * Interface that represents the point of view of the viewer. + */ +export interface PointOfView { + /** + * Value indicating the current bearing of the viewer + * measured in degrees clockwise with respect to north. + * Ranges from 0° to 360°. + */ + bearing: number; + + /** + * The camera tilt in degrees, relative to a horizontal plane. + * Ranges from 90° (directly upwards) to -90° (directly downwards). + */ + tilt: number; +} +export interface IViewer { + +dataProvider: IDataProvider; + +isNavigable: boolean; + activateCombinedPanning(): void; + activateComponent(name: string): void; + activateCover(): void; + addCustomRenderer(renderer: ICustomRenderer): void; + attachCustomCameraControls(controls: ICustomCameraControls): void; + deactivateCombinedPanning(): void; + deactivateComponent(name: string): void; + deactivateCover(): void; + detachCustomCameraControls(): Promise; + fire(type: ViewerEventType, event: T): void; + getBearing(): Promise; + getCameraControls(): Promise<$Values>; + getCanvas(): HTMLCanvasElement; + getCanvasContainer(): HTMLDivElement; + getCenter(): Promise; + getComponent>( + name: string + ): TComponent; + getContainer(): HTMLElement; + getFieldOfView(): Promise; + getImage(): Promise; + getPointOfView(): Promise; + getPosition(): Promise; + getReference(): Promise; + getZoom(): Promise; + hasCustomCameraControls(controls: ICustomCameraControls): boolean; + hasCustomRenderer(rendererId: string): boolean; + moveDir(direction: $Values): Promise; + moveTo(imageId: string): Promise; + off(type: ViewerEventType, handler: (event: T) => void): void; + on(type: ViewerEventType, handler: (event: T) => void): void; + project(lngLat: LngLat): Promise; + projectFromBasic(basicPoint: number[]): Promise; + remove(): void; + removeCustomRenderer(rendererId: string): void; + resize(): void; + setCameraControls(controls: $Values): void; + setCenter(center: number[]): void; + setFieldOfView(fov: number): void; + setFilter(filter?: FilterExpression): Promise; + setRenderMode(renderMode: $Values): void; + setTransitionMode(transitionMode: $Values): void; + setAccessToken(accessToken?: string): Promise; + setZoom(zoom: number): void; + triggerRerender(): void; + unproject(pixelPoint: number[]): Promise; + unprojectToBasic(pixelPoint: number[]): Promise; +} +/** + * @interface + * @description [object Object],[object Object],[object Object] + */ +export interface ICustomCameraControls { + /** + * Method called when the camera controls have been + * activated and is responsible for moving the + * viewer's camera and defining its projection. This + * method gives the camera controls a chance to initialize + * resources, perform any transitions, and determine + * initial state. + * @description [object Object],[object Object],[object Object] + * @param {IViewer} viewer - The viewer this custom + * camera controls instance was just added to. + * @param {Array} viewMatrix - The viewer's view matrix. + * @param {Array} projectionMatrix - The viewers's + * projection matrix. + * @param {LngLatAlt} reference - The viewer's reference. + */ + onActivate( + viewer: IViewer, + viewMatrix: number[], + projectionMatrix: number[], + reference: LngLatAlt + ): void; + + /** + * Method called for each animation frame. + * @desdcription Custom camera controls can choose to + * make updates on each animation frame or only based on + * user input. Invoking updates on each animation frame is + * more resource intensive. + * @param {IViewer} viewer - The viewer this custom + * camera controls instance is attached to. + * @param {number} frameId - The request animation frame's id. + */ + onAnimationFrame(viewer: IViewer, frameId: number): void; + + /** + * Method called when the camera controls have been + * attached to the viewer. + * This gives the camera controls a chance to initialize + * resources. + * @description [object Object],[object Object],[object Object] + * @param {IViewer} viewer - The viewer this custom + * camera controls instance was just added to. + */ + onAttach( + viewer: IViewer, + viewMatrixCallback: (viewMatrix: number[]) => void, + projectionMatrixCallback: (projectionMatrix: number[]) => void + ): void; + + /** + * Method called when the camera controls have been deactivated. + * This gives the camera controls a chance to clean up resources + * and event listeners. + * @param {IViewer} viewer - The viewer this custom camera controls + * instance is attached to. + */ + onDeactivate(viewer: IViewer): void; + + /** + * Method called when the camera controls have been detached from + * the viewer. This gives the camera controls a chance to clean + * up resources and event listeners. + * @description [object Object],[object Object],[object Object] + * @param {IViewer} viewer - The viewer this custom camera + * controls instance was just detached from. + */ + onDetach(viewer: IViewer): void; + + /** + * Method called when the viewer's reference position has changed. + * This gives the custom camera controls a chance to reposition + * the camera. + * @description [object Object],[object Object],[object Object],[object Object],[object Object] + * @param {IViewer} viewer - The viewer this custom renderer + * is added to. + * @param {LngLatAlt} reference - The viewer's current + * reference position. + */ + onReference(viewer: IViewer, reference: LngLatAlt): void; + + /** + * Method called when the viewer has been resized. + * @description Use this method to modify the projection. + */ + onResize(viewer: IViewer): void; +} +/** + * Interface for general viewer events. + */ +export interface ViewerEvent { + /** + * The viewer object that fired the event. + */ + target: IViewer; + + /** + * The event type. + */ + type: ViewerEventType; +} +/** + * Interface for bearing viewer events. + */ +export type ViewerBearingEvent = { + /** + * Bearing is measured in degrees + * clockwise with respect to north. + * @description [object Object],[object Object],[object Object] + */ + bearing: number, + type: "bearing", + ... +} & ViewerEvent; + +/** + * Interface for viewer data loading events. + * @description Fired when any viewer data (image, mesh, metadata, etc) + * begins loading or changing asyncronously as a result of viewer + * navigation. + * + * Also fired when the data has finished loading and the viewer + * is able to perform the navigation. + */ +export type ViewerDataLoadingEvent = { + /** + * Indicates if the viewer navigation is awaiting data load. + */ + loading: boolean, + type: "dataloading", + ... +} & ViewerEvent; + +/** + * Interface for mouse-related viewer events. + * @example ```js + * // The `click` event is an example of a `ViewerMouseEvent`. + * // Set up an event listener on the viewer. + * viewer.on('click', function(e) { + * // The event object contains information like the + * // coordinates of the point in the viewer that was clicked. + * console.log('A click event has occurred at ' + e.lngLat); + * }); + * ``` + */ +export type ViewerMouseEvent = { + /** + * The basic coordinates in the current image of the mouse + * event target. + * @description [object Object],[object Object],[object Object] + */ + basicPoint: number[], + + /** + * The geographic location in the viewer of the mouse event target. + * @description In some situations the viewer can not determine a valid + * geographic location for the mouse event target. In that case the + * geographic coordinates will be `null`. + */ + lngLat: LngLat, + + /** + * The pixel coordinates of the mouse event target, relative to + * the viewer and measured from the top left corner. + */ + pixelPoint: number[], + + /** + * The original event that triggered the viewer event. + */ + originalEvent: MouseEvent, + + /** + * The event type. + */ + type: + | "click" + | "contextmenu" + | "dblclick" + | "mousedown" + | "mousemove" + | "mouseout" + | "mouseover" + | "mouseup", + ... +} & ViewerEvent; + +/** + * Interface for navigable viewer events. + */ +export type ViewerNavigableEvent = { + /** + * The navigable state indicates if the viewer supports + * moving, i.e. calling the `moveTo` and `moveDir` + * methods. The viewer will not be in a navigable state if the cover + * is activated and the viewer has been supplied a id. When the cover + * is deactivated or activated without being supplied a id it will + * be navigable. + */ + navigable: boolean, + type: "navigable", + ... +} & ViewerEvent; + +/** + * Interface for navigation edge viewer events. + */ +export type ViewerNavigationEdgeEvent = { + /** + * The viewer's current navigation edge status. + */ + status: NavigationEdgeStatus, + type: "sequenceedges" | "spatialedges", + ... +} & ViewerEvent; + +/** + * Interface for viewer image events. + */ +export type ViewerImageEvent = { + /** + * The viewer's current image. + */ + image: Image, + type: "image", + ... +} & ViewerEvent; + +/** + * Interface for viewer state events. + * @example ```js + * // The `fov` event is an example of a `ViewerStateEvent`. + * // Set up an event listener on the viewer. + * viewer.on('fov', function(e) { + * console.log('A fov event has occured'); + * }); + * ``` + */ +export type ViewerStateEvent = { + /** + * The event type. + */ + type: "fov" | "moveend" | "movestart" | "position" | "pov" | "remove", + ... +} & ViewerEvent; +export type ComponentName = + | "attribution" + | "bearing" + | "cache" + | "cover" + | "direction" + | "image" + | "keyboard" + | "marker" + | "pointer" + | "popup" + | "sequence" + | "slider" + | "spatial" + | "tag" + | "zoom"; +export type FallbackComponentName = "imagefallback" | "navigationfallback"; +/** + * Interface for viewer load events. + * @description Fired immediately after all necessary resources + * have been downloaded and the first visually complete + * rendering of the viewer has occurred. + * + * The visually complete rendering does not include custom + * renderers. + * + * This event is only fired for viewer configurations where + * the WebGL context is created, i.e. not when using the + * fallback functionality only. + * @example ```js + * // Set up an event listener on the viewer. + * viewer.on('load', function(e) { + * console.log('A load event has occured'); + * }); + * ``` + */ +export type ViewerLoadEvent = { + type: "load", + ... +} & ViewerEvent; + +/** + * Interface for viewer reference events. + */ +export type ViewerReferenceEvent = { + /** + * The viewer's current reference. + */ + reference: LngLatAlt, + type: "reference", + ... +} & ViewerEvent; + +/** + * @class Viewer + * @classdesc The Viewer object represents the navigable image viewer. + * Create a Viewer by specifying a container, client ID, image ID and + * other options. The viewer exposes methods and events for programmatic + * interaction. + * + * In the case of asynchronous methods, MapillaryJS returns promises to + * the results. Notifications are always emitted through JavaScript events. + */ +declare class Viewer implements IEventEmitter, IViewer { + /** + * Create a new viewer instance. + * @description The `Viewer` object represents the street imagery + * viewer on your web page. It exposes methods and properties that + * you can use to programatically change the view, and fires + * events as users interact with it. + * + * It is possible to initialize the viewer with or + * without a ID. + * + * When you want to show a specific image in the viewer from + * the start you should initialize it with a ID. + * + * When you do not know the first image ID at implementation + * time, e.g. in a map-viewer application you should initialize + * the viewer without a ID and call `moveTo` instead. + * + * When initializing with an ID the viewer is bound to that ID + * until the image for that ID has been successfully loaded. + * Also, a cover with the image of the ID will be shown. + * If the data for that ID can not be loaded because the ID is + * faulty or other errors occur it is not possible to navigate + * to another ID because the viewer is not navigable. The viewer + * becomes navigable when the data for the ID has been loaded and + * the image is shown in the viewer. This way of initializing + * the viewer is mostly for embedding in blog posts and similar + * where one wants to show a specific image initially. + * + * If the viewer is initialized without a ID (with null or + * undefined) it is not bound to any particular ID and it is + * possible to move to any ID with `viewer.moveTo("")`. + * If the first move to a ID fails it is possible to move to another + * ID. The viewer will show a black background until a move + * succeeds. This way of intitializing is suited for a map-viewer + * application when the initial ID is not known at implementation + * time. + * @param {ViewerOptions} options - Optional configuration object + * specifying Viewer's and the components' initial setup. + * @example ```js + * var viewer = new Viewer({ + * accessToken: "", + * container: "", + * }); + * ``` + */ + constructor(options: ViewerOptions): this; + + /** + * Returns the data provider used by the viewer to fetch + * all contracts, ents, and buffers. + * @description [object Object],[object Object],[object Object] + * @returns {IDataProvider} The viewer's data provider. + */ + dataProvider: IDataProvider; + + /** + * Return a boolean indicating if the viewer is in a navigable state. + * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] + * @returns {boolean} Boolean indicating whether the viewer is navigable. + */ + isNavigable: boolean; + + /** + * Activate the combined panning functionality. + * @description The combined panning functionality is active by default. + */ + activateCombinedPanning(): void; + + /** + * Activate a component. + * @param {string} name - Name of + * the component which will become active. + * @example ```js + * viewer.activateComponent("marker"); + * ``` + */ + activateComponent(name: string): void; + + /** + * Activate the cover (deactivates all other components). + */ + activateCover(): void; + + /** + * Add a custom renderer to the viewer's rendering pipeline. + * @description During a render pass, custom renderers + * are called in the order they were added. + * @param renderer - The custom renderer implementation. + */ + addCustomRenderer(renderer: ICustomRenderer): void; + + /** + * Attach custom camera controls to control the viewer's + * camera pose and projection. + * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] + * @param controls - The custom camera controls implementation. + * @throws {MapillaryError} When camera controls attached + * are already attached to the viewer. + */ + attachCustomCameraControls(controls: ICustomCameraControls): void; + + /** + * Deactivate the combined panning functionality. + * @description Deactivating the combined panning functionality + * could be needed in scenarios involving sequence only navigation. + */ + deactivateCombinedPanning(): void; + + /** + * Deactivate a component. + * @param {string} name - Name + * of component which become inactive. + * @example ```js + * viewer.deactivateComponent("pointer"); + * ``` + */ + deactivateComponent(name: string): void; + + /** + * Deactivate the cover (activates all components marked as active). + */ + deactivateCover(): void; + + /** + * Detach a previously attached custom camera control + * instance from the viewer. + * @description If no custom camera control instance + * has previously been attached, calling this method + * has no effect. + * + * Already attached custom camera controls need to + * be detached before attaching another custom camera + * control instance. + */ + detachCustomCameraControls(): Promise; + + /** + * Get the bearing of the current viewer camera. + * @description The bearing depends on how the camera + * is currently rotated and does not correspond + * to the compass angle of the current image if the view + * has been panned. + * + * Bearing is measured in degrees clockwise with respect to + * north. + * @returns {Promise} Promise to the bearing + * of the current viewer camera. + * @example ```js + * viewer.getBearing().then(b => { console.log(b); }); + * ``` + */ + getBearing(): Promise; + + /** + * Get the viewer's camera control mode. + * @description The camera control mode determines + * how the camera is controlled when the viewer + * receives pointer and keyboard input. + * @returns {$Values< + typeof + CameraControls>} controls - Camera control mode. + * @example ```js + * viewer.getCameraControls().then(c => { console.log(c); }); + * ``` + */ + getCameraControls(): Promise<$Values>; + + /** + * Returns the viewer's canvas element. + * @description This is the element onto which the viewer renders + * the WebGL content. + * @returns {HTMLCanvasElement} The viewer's canvas element, or + * null or not initialized. + */ + getCanvas(): HTMLCanvasElement; + + /** + * Returns the HTML element containing the viewer's canvas element. + * @description This is the element to which event bindings for viewer + * interactivity (such as panning and zooming) are attached. + * @returns {HTMLDivElement} The container for the viewer's + * canvas element. + */ + getCanvasContainer(): HTMLDivElement; + + /** + * Get the basic coordinates of the current image that is + * at the center of the viewport. + * @description Basic coordinates are 2D coordinates on the [0, 1] interval + * and have the origin point, (0, 0), at the top left corner and the + * maximum value, (1, 1), at the bottom right corner of the original + * image. + * @returns {Promise} Promise to the basic coordinates + * of the current image at the center for the viewport. + * @example ```js + * viewer.getCenter().then(c => { console.log(c); }); + * ``` + */ + getCenter(): Promise; + + /** + * Get a component. + * @param {string} name - Name of component. + * @returns {Component} The requested component. + * @example ```js + * var pointerComponent = viewer.getComponent("pointer"); + * ``` + */ + getComponent>( + name: string + ): TComponent; + + /** + * Returns the viewer's containing HTML element. + * @returns {HTMLElement} The viewer's container. + */ + getContainer(): HTMLElement; + + /** + * Get the viewer's current vertical field of view. + * @description The vertical field of view rendered on the viewer canvas + * measured in degrees. + * @returns {Promise} Promise to the current field of view + * of the viewer camera. + * @example ```js + * viewer.getFieldOfView().then(fov => { console.log(fov); }); + * ``` + */ + getFieldOfView(): Promise; + + /** + * Get the viewer's current image. + * @returns {Promise} Promise to the current image. + * @example ```js + * viewer.getImage().then(image => { console.log(image.id); }); + * ``` + */ + getImage(): Promise; + + /** + * Get the viewer's current point of view. + * @returns {Promise} Promise to the current point of view + * of the viewer camera. + * @example ```js + * viewer.getPointOfView().then(pov => { console.log(pov); }); + * ``` + */ + getPointOfView(): Promise; + + /** + * Get the viewer's current position + * @returns {Promise} Promise to the viewers's current + * position. + * @example ```js + * viewer.getPosition().then(pos => { console.log(pos); }); + * ``` + */ + getPosition(): Promise; + + /** + * Get the viewer's current reference position. + * @description The reference position specifies the origin in + * the viewer's topocentric coordinate system. + * @returns {Promise} Promise to the reference position. + * @example ```js + * viewer.getReference().then(reference => { console.log(reference); }); + * ``` + */ + getReference(): Promise; + + /** + * Get the image's current zoom level. + * @returns {Promise} Promise to the viewers's current + * zoom level. + * @example ```js + * viewer.getZoom().then(z => { console.log(z); }); + * ``` + */ + getZoom(): Promise; + + /** + * Check if a controls instance is the camera controls that are + * currently attached to the viewer. + * @param {ICustomCameraControls} controls - Camera controls instance. + * @returns {boolean} Value indicating whether the controls instance + * is currently attached. + */ + hasCustomCameraControls(controls: ICustomCameraControls): boolean; + + /** + * Check if a custom renderer has been added to the viewer's + * rendering pipeline. + * @param {string} id - Unique ID of the custom renderer. + * @returns {boolean} Value indicating whether the customer + * renderer has been added. + */ + hasCustomRenderer(rendererId: string): boolean; + + /** + * Navigate in a given direction. + * @param {$Values< + typeof + NavigationDirection>} direction - Direction in which which to move. + * @returns {Promise} Promise to the image that was navigated to. + * @throws If the current image does not have the edge direction + * or the edges has not yet been cached. + * @throws Propagates any IO errors to the caller. + * @throws When viewer is not navigable. + * @throws [object Object],[object Object],[object Object] + * @example ```js + * viewer.moveDir(NavigationDirection.Next).then( + * image => { console.log(image); }, + * error => { console.error(error); }); + * ``` + */ + moveDir(direction: $Values): Promise; + + /** + * Navigate to a given image ID. + * @param {string} imageId - Id of the image to move to. + * @returns {Promise} Promise to the image that was navigated to. + * @throws Propagates any IO errors to the caller. + * @throws When viewer is not navigable. + * @throws [object Object],[object Object],[object Object] + * @example ```js + * viewer.moveTo("").then( + * image => { console.log(image); }, + * error => { console.error(error); }); + * ``` + */ + moveTo(imageId: string): Promise; + + /** + * Project geodetic coordinates to canvas pixel coordinates. + * @description The geodetic coordinates may not always correspond to pixel + * coordinates, e.g. if the geodetic coordinates have a position behind the + * viewer camera. In the case of no correspondence the returned value will + * be `null`. + * + * If the distance from the viewer camera position to the provided + * longitude-latitude is more than 1000 meters `null` will be returned. + * + * The projection is performed from the ground plane, i.e. + * the altitude with respect to the ground plane for the geodetic + * point is zero. + * + * Note that whenever the camera moves, the result of the method will be + * different. + * @param {LngLat} lngLat - Geographical coordinates to project. + * @returns {Promise>} Promise to the pixel coordinates corresponding + * to the lngLat. + * @example ```js + * viewer.project({ lat: 0, lng: 0 }) + * .then(pixelPoint => { + * if (!pixelPoint) { + * console.log("no correspondence"); + * } + * + * console.log(pixelPoint); + * }); + * ``` + */ + project(lngLat: LngLat): Promise; + + /** + * Project basic image coordinates for the current image to canvas pixel + * coordinates. + * @description The basic image coordinates may not always correspond to a + * pixel point that lies in the visible area of the viewer container. In the + * case of no correspondence the returned value can be `null`. + * @param {Array} basicPoint - Basic images coordinates to project. + * @returns {Promise>} Promise to the pixel coordinates corresponding + * to the basic image point. + * @example ```js + * viewer.projectFromBasic([0.3, 0.7]) + * .then(pixelPoint => { console.log(pixelPoint); }); + * ``` + */ + projectFromBasic(basicPoint: number[]): Promise; + + /** + * Clean up and release all internal resources associated with + * this viewer. + * @description This includes DOM elements, event bindings, and + * WebGL resources. + * + * Use this method when you are done using the viewer and wish to + * ensure that it no longer consumes browser resources. Afterwards, + * you must not call any other methods on the viewer. + * @fires remove + * @example ```js + * viewer.remove(); + * ``` + */ + remove(): void; + + /** + * Remove a custom renderer from the viewer's rendering pipeline. + * @param id - Unique ID of the custom renderer. + */ + removeCustomRenderer(rendererId: string): void; + + /** + * Detect the viewer's new width and height and resize it + * manually. + * @description [object Object],[object Object],[object Object],[object Object],[object Object] + * @example ```js + * viewer.resize(); + * ``` + */ + resize(): void; + + /** + * Set the viewer's camera control mode. + * @description The camera control mode determines + * how the camera is controlled when the viewer + * receives pointer and keyboard input. + * + * Changing the camera control mode is not possible + * when the slider component is active and attempts + * to do so will be ignored. + * @param {$Values< + typeof + CameraControls>} controls - Camera control mode. + * @example ```js + * viewer.setCameraControls(CameraControls.Street); + * ``` + */ + setCameraControls(controls: $Values): void; + + /** + * Set the basic coordinates of the current image to be in the + * center of the viewport. + * @description Basic coordinates are 2D coordinates on the [0, 1] interval + * and has the origin point, (0, 0), at the top left corner and the + * maximum value, (1, 1), at the bottom right corner of the original + * image. + * @param {number[]} The basic coordinates of the current + * image to be at the center for the viewport. + * @example ```js + * viewer.setCenter([0.5, 0.5]); + * ``` + */ + setCenter(center: number[]): void; + + /** + * Set the viewer's current vertical field of view. + * @description Sets the vertical field of view rendered + * on the viewer canvas measured in degrees. The value + * will be clamped to be able to set a valid zoom level + * based on the projection model of the current image and + * the viewer's current render mode. + * @param {number} fov - Vertical field of view in degrees. + * @example ```js + * viewer.setFieldOfView(45); + * ``` + */ + setFieldOfView(fov: number): void; + + /** + * Set the filter selecting images to use when calculating + * the spatial edges. + * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] + * @param {FilterExpression} [filter] - The filter expression. + * Applied filter is cleared if omitted. + * @returns {Promise} Promise that resolves after filter is applied. + * @example ```js + * // Examples + * viewer.setFilter(["==", "cameraType", "spherical"]); + * viewer.setFilter([">=", "capturedAt", ]); + * viewer.setFilter(["in", "sequenceId", "", ""]); + * ``` + */ + setFilter(filter?: FilterExpression): Promise; + + /** + * Set the viewer's render mode. + * @param {$Values< + typeof + RenderMode>} renderMode - Render mode. + * @example ```js + * viewer.setRenderMode(RenderMode.Letterbox); + * ``` + */ + setRenderMode(renderMode: $Values): void; + + /** + * Set the viewer's transition mode. + * @param {$Values< + typeof + TransitionMode>} transitionMode - Transition mode. + * @example ```js + * viewer.setTransitionMode(TransitionMode.Instantaneous); + * ``` + */ + setTransitionMode(transitionMode: $Values): void; + + /** + * Set an access token for authenticated API requests of protected + * resources. + * + * The token may be a user access token or a client access token. + * @description [object Object],[object Object],[object Object] + * @param {string} [accessToken] accessToken - Optional user + * access token or client access token. + * @returns {Promise} Promise that resolves after token + * is set. + * @throws When viewer is not navigable. + * @example ```js + * viewer.setAccessToken("") + * .then(() => { console.log("user token set"); }); + * ``` + */ + setAccessToken(accessToken?: string): Promise; + + /** + * Set the image's current zoom level. + * @description Possible zoom level values are on the [0, 3] interval. + * Zero means zooming out to fit the image to the view whereas three + * shows the highest level of detail. + * @param {number} The image's current zoom level. + * @example ```js + * viewer.setZoom(2); + * ``` + */ + setZoom(zoom: number): void; + + /** + * Trigger the rendering of a single frame. + * @description Use this method with custom renderers to + * force the viewer to rerender when the custom content + * changes. Calling this multiple times before the next + * frame is rendered will still result in only a single + * frame being rendered. + */ + triggerRerender(): void; + + /** + * Unproject canvas pixel coordinates to geodetic + * coordinates. + * @description The pixel point may not always correspond to geodetic + * coordinates. In the case of no correspondence the returned value will + * be `null`. + * + * The unprojection to a lngLat will be performed towards the ground plane, i.e. + * the altitude with respect to the ground plane for the returned lngLat is zero. + * @param {Array} pixelPoint - Pixel coordinates to unproject. + * @returns {Promise} Promise to the lngLat corresponding to the pixel point. + * @example ```js + * viewer.unproject([100, 100]) + * .then(lngLat => { console.log(lngLat); }); + * ``` + */ + unproject(pixelPoint: number[]): Promise; + + /** + * Unproject canvas pixel coordinates to basic image coordinates for the + * current image. + * @description The pixel point may not always correspond to basic image + * coordinates. In the case of no correspondence the returned value will + * be `null`. + * @param {Array} pixelPoint - Pixel coordinates to unproject. + * @returns {Promise} Promise to the basic coordinates corresponding + * to the pixel point. + * @example ```js + * viewer.unprojectToBasic([100, 100]) + * .then(basicPoint => { console.log(basicPoint); }); + * ``` + */ + unprojectToBasic(pixelPoint: number[]): Promise; + + fire(type: string, event: T): void; + off(type: string, handler: (event: T) => void): void; + on(type: string, handler: (event: T) => void): void; +} +/** + * @class MapillaryError + * @classdesc Generic Mapillary error. + */ +declare class MapillaryError extends Error { + constructor(message?: string): this; +} +/** + * @class CancelMapillaryError + * @classdesc Error thrown when a move to request has been + * cancelled before completing because of a subsequent request. + */ +declare class CancelMapillaryError extends MapillaryError { + constructor(message?: string): this; +} +declare class ArgumentMapillaryError extends MapillaryError { + constructor(message?: string): this; +} +declare class GraphMapillaryError extends MapillaryError { + constructor(message: string): this; +} +declare class ConfigurationService { + constructor(options: ViewerOptions): this; +} +declare class Container { + id: string; + renderService: RenderService; + glRenderer: GLRenderer; + domRenderer: DOMRenderer; + keyboardService: KeyboardService; + mouseService: MouseService; + touchService: TouchService; + spriteService: SpriteService; + +configurationService: ConfigurationService; + constructor( + options: ViewerOptions, + stateService: StateService, + dom?: DOM + ): this; + canvas: HTMLCanvasElement; + canvasContainer: HTMLDivElement; + container: HTMLElement; + domContainer: HTMLDivElement; + remove(): void; +} +declare type Func = (item: T) => TResult; +declare type FilterFunction = Func; +/** + * @class Filter + * @classdesc Represents a class for creating image filters. Implementation and + * definitions based on https://github.com/mapbox/feature-filter. + */ +declare class FilterCreator { + /** + * Create a filter from a filter expression. + * @description The following filters are supported: + * + * Comparison + * `==` + * `!=` + * `<` + * `<=` + * `>` + * `>=` + * + * Set membership + * `in` + * `!in` + * + * Combining + * `all` + * @param {FilterExpression} filter - Comparison, set membership or combinding filter + * expression. + * @returns {FilterFunction} Function taking a image and returning a boolean that + * indicates whether the image passed the test or not. + */ + createFilter(filter: FilterExpression): FilterFunction; +} +/** + * @class GraphCalculator + * @classdesc Represents a calculator for graph entities. + */ +declare class GraphCalculator { + /** + * Get the bounding box corners for a circle with radius of a threshold + * with center in a geodetic position. + * @param {LngLat} lngLat - Longitude, latitude to encode. + * @param {number} threshold - Threshold distance from the position in meters. + * @returns {Array} The south west and north east corners of the + * bounding box. + */ + boundingBoxCorners(lngLat: LngLat, threshold: number): [LngLat, LngLat]; + + /** + * Convert a compass angle to an angle axis rotation vector. + * @param {number} compassAngle - The compass angle in degrees. + * @param {number} orientation - The orientation of the original image. + * @returns {Array} Angle axis rotation vector. + */ + rotationFromCompass(compassAngle: number, orientation: number): number[]; +} +/** + * @class Sequence + * @classdesc Represents a sequence of ordered images. + */ +declare class Sequence { + /** + * Create a new sequene instance. + * @param {SequenceEnt} sequence - Raw sequence data. + */ + constructor(sequence: SequenceEnt): this; + + /** + * Get id. + * @returns {string} Unique sequence id. + */ + id: string; + + /** + * Get ids. + * @returns {Array} Array of ordered image ids in the sequence. + */ + imageIds: string[]; + + /** + * Dispose the sequence. + * @description Disposes all cached assets. + */ + dispose(): void; + + /** + * Find the next image id in the sequence with respect to + * the provided image id. + * @param {string} id - Reference image id. + * @returns {string} Next id in sequence if it exists, null otherwise. + */ + findNext(id: string): string; + + /** + * Find the previous image id in the sequence with respect to + * the provided image id. + * @param {string} id - Reference image id. + * @returns {string} Previous id in sequence if it exists, null otherwise. + */ + findPrev(id: string): string; +} +/** + * Interface for graph configuration. + * @interface GraphConfiguration + */ +export interface GraphConfiguration { + /** + * The maximum number of cached sequences left + * after uncache. + */ + maxSequences: number; + + /** + * The maximum number of unused cached images left + * after uncache. + */ + maxUnusedImages: number; + + /** + * The maximum number of unused pre-stored cached images left + * after uncache. + */ + maxUnusedPreStoredImages: number; + + /** + * The maximum number of unused cached tiles left + * after uncache. + */ + maxUnusedTiles: number; +} +declare class EdgeCalculatorCoefficients { + sphericalPreferredDistance: number; + sphericalMotion: number; + sphericalSequencePenalty: number; + sphericalMergeCCPenalty: number; + stepPreferredDistance: number; + stepMotion: number; + stepRotation: number; + stepSequencePenalty: number; + stepMergeCCPenalty: number; + similarDistance: number; + similarRotation: number; + turnDistance: number; + turnMotion: number; + turnSequencePenalty: number; + turnMergeCCPenalty: number; + constructor(): this; +} +declare interface SphericalDirection { + direction: $Values; + prev: $Values; + next: $Values; + directionChange: number; +} +declare interface StepDirection { + direction: $Values; + motionChange: number; + useFallback: boolean; +} +declare interface TurnDirection { + direction: $Values; + directionChange: number; + motionChange?: number; +} +declare class EdgeCalculatorDirections { + steps: { + [direction: string]: StepDirection, + ... + }; + turns: { + [direction: string]: TurnDirection, + ... + }; + spherical: { + [direction: string]: SphericalDirection, + ... + }; + constructor(): this; +} +declare class EdgeCalculatorSettings { + sphericalMinDistance: number; + sphericalMaxDistance: number; + sphericalPreferredDistance: number; + sphericalMaxItems: number; + sphericalMaxStepTurnChange: number; + rotationMaxDistance: number; + rotationMaxDirectionChange: number; + rotationMaxVerticalDirectionChange: number; + similarMaxDirectionChange: number; + similarMaxDistance: number; + similarMinTimeDifference: number; + stepMaxDistance: number; + stepMaxDirectionChange: number; + stepMaxDrift: number; + stepPreferredDistance: number; + turnMaxDistance: number; + turnMaxDirectionChange: number; + turnMaxRigDistance: number; + turnMinRigDirectionChange: number; + constructor(): this; + maxDistance: number; +} +/** + * Interface that describes the properties for a image that is the destination of a + * potential edge from an origin image. + * @interface PotentialEdge + */ +declare interface PotentialEdge { + /** + * Timestamp when the image was captured. + * @property {number} capturedAt + */ + capturedAt: number; + + /** + * Change in viewing direction with respect to the origin image. + * @property {number} directionChange + */ + directionChange: number; + + /** + * Distance to the origin image. + * @property {number} distance + */ + distance: number; + + /** + * Determines if the destination image is spherical. + * @property {boolean} spherical + */ + spherical: boolean; + + /** + * Unique image id. + * @property {string} id + */ + id: string; + + /** + * Change in motion with respect to the viewing direction + * of the origin image. + * @property {number} motionChange + */ + motionChange: number; + + /** + * General camera rotation with respect to the origin image. + * @property {number} rotation + */ + rotation: number; + + /** + * Determines if the origin and destination image are considered + * to be in the same merge connected component. + * @property {boolean} sameMergeCC + */ + sameMergeCC: boolean; + + /** + * Determines if the origin and destination image are in the + * same sequence. + * @property {boolean} sameSequence + */ + sameSequence: boolean; + + /** + * Determines if the origin and destination image have been captured + * by the same user. + * @property {boolean} sameUser + */ + sameUser: boolean; + + /** + * Determines which sequence the destination image of the potential edge + * belongs to. + * @property {string} sequenceId + */ + sequenceId: string; + + /** + * Change in viewing direction with respect to the XY-plane. + * @property {number} verticalDirectionChange + */ + verticalDirectionChange: number; + + /** + * The angle between motion vector and the XY-plane + * @property {number} verticalMotion + */ + verticalMotion: number; + + /** + * The counter clockwise horizontal rotation angle from + * the X-axis in a spherical coordiante system. + * @property {number} worldMotionAzimuth + */ + worldMotionAzimuth: number; +} +/** + * @class EdgeCalculator + * @classdesc Represents a class for calculating node edges. + */ +declare class EdgeCalculator { + /** + * Create a new edge calculator instance. + * @param {EdgeCalculatorSettings} settings - Settings struct. + * @param {EdgeCalculatorDirections} directions - Directions struct. + * @param {EdgeCalculatorCoefficients} coefficients - Coefficients struct. + */ + constructor( + settings?: EdgeCalculatorSettings, + directions?: EdgeCalculatorDirections, + coefficients?: EdgeCalculatorCoefficients + ): this; + + /** + * Returns the potential edges to destination nodes for a set + * of nodes with respect to a source node. + * @param {Image} node - Source node. + * @param {Array} nodes - Potential destination nodes. + * @param {Array} fallbackIds - Ids for destination nodes + * that should be returned even if they do not meet the + * criteria for a potential edge. + * @throws {ArgumentMapillaryError} If node is not full. + */ + getPotentialEdges( + node: Image, + potentialImages: Image[], + fallbackIds: string[] + ): PotentialEdge[]; + + /** + * Computes the sequence edges for a node. + * @param {Image} node - Source node. + * @throws {ArgumentMapillaryError} If node is not full. + */ + computeSequenceEdges(node: Image, sequence: Sequence): NavigationEdge[]; + + /** + * Computes the similar edges for a node. + * @description Similar edges for perspective images + * look roughly in the same direction and are positioned closed to the node. + * Similar edges for spherical only target other spherical. + * @param {Image} node - Source node. + * @param {Array} potentialEdges - Potential edges. + * @throws {ArgumentMapillaryError} If node is not full. + */ + computeSimilarEdges( + node: Image, + potentialEdges: PotentialEdge[] + ): NavigationEdge[]; + + /** + * Computes the step edges for a perspective node. + * @description Step edge targets can only be other perspective nodes. + * Returns an empty array for spherical. + * @param {Image} node - Source node. + * @param {Array} potentialEdges - Potential edges. + * @param {string} prevId - Id of previous node in sequence. + * @param {string} nextId - Id of next node in sequence. + * @throws {ArgumentMapillaryError} If node is not full. + */ + computeStepEdges( + node: Image, + potentialEdges: PotentialEdge[], + prevId: string, + nextId: string + ): NavigationEdge[]; + + /** + * Computes the turn edges for a perspective node. + * @description Turn edge targets can only be other perspective images. + * Returns an empty array for spherical. + * @param {Image} node - Source node. + * @param {Array} potentialEdges - Potential edges. + * @throws {ArgumentMapillaryError} If node is not full. + */ + computeTurnEdges( + node: Image, + potentialEdges: PotentialEdge[] + ): NavigationEdge[]; + + /** + * Computes the spherical edges for a perspective node. + * @description Perspective to spherical edge targets can only be + * spherical nodes. Returns an empty array for spherical. + * @param {Image} node - Source node. + * @param {Array} potentialEdges - Potential edges. + * @throws {ArgumentMapillaryError} If node is not full. + */ + computePerspectiveToSphericalEdges( + node: Image, + potentialEdges: PotentialEdge[] + ): NavigationEdge[]; + + /** + * Computes the spherical and step edges for a spherical node. + * @description Spherical to spherical edge targets can only be + * spherical nodes. spherical to step edge targets can only be perspective + * nodes. + * @param {Image} node - Source node. + * @param {Array} potentialEdges - Potential edges. + * @throws {ArgumentMapillaryError} If node is not full. + */ + computeSphericalEdges( + node: Image, + potentialEdges: PotentialEdge[] + ): NavigationEdge[]; +} +/** + * @class API + * @classdesc Provides methods for access to the API. + */ +declare class APIWrapper { + constructor(_data: IDataProvider): this; + data: IDataProvider; + setAccessToken(accessToken?: string): void; +} +/** + * @class Graph + * @classdesc Represents a graph of nodes with edges. + */ +declare class Graph { + /** + * Create a new graph instance. + * @param {APIWrapper} [api] - API instance for retrieving data. + * @param {rbush.RBush} [nodeIndex] - Node index for fast spatial retreival. + * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations. + * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations. + * @param {FilterCreator} [filterCreator] - Instance for filter creation. + * @param {GraphConfiguration} [configuration] - Configuration struct. + */ + constructor( + api: APIWrapper, + nodeIndex?: mixed, + graphCalculator?: GraphCalculator, + edgeCalculator?: EdgeCalculator, + filterCreator?: FilterCreator, + configuration?: GraphConfiguration + ): this; + static register(spatialIndex: (...args: mixed[]) => mixed): void; + + /** + * Get api. + * @returns {APIWrapper} The API instance used by + * the graph. + */ + api: APIWrapper; + + /** + * Cache sequence edges for a node. + * @param {string} key - Key of node. + * @throws {GraphMapillaryError} When the operation is not valid on the + * current graph. + */ + cacheSequenceEdges(key: string): void; + + /** + * Cache spatial edges for a node. + * @param {string} key - Key of node. + * @throws {GraphMapillaryError} When the operation is not valid on the + * current graph. + */ + cacheSpatialEdges(key: string): void; + + /** + * Initialize the cache for a node. + * @param {string} key - Key of node. + * @throws {GraphMapillaryError} When the operation is not valid on the + * current graph. + */ + initializeCache(key: string): void; + + /** + * Get a value indicating if the graph is fill caching a node. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if the node is being fill cached. + */ + isCachingFill(key: string): boolean; + + /** + * Get a value indicating if the graph is fully caching a node. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if the node is being fully cached. + */ + isCachingFull(key: string): boolean; + + /** + * Get a value indicating if the graph is caching a sequence of a node. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if the sequence of a node is + * being cached. + */ + isCachingNodeSequence(key: string): boolean; + + /** + * Get a value indicating if the graph is caching a sequence. + * @param {string} sequenceKey - Key of sequence. + * @returns {boolean} Value indicating if the sequence is + * being cached. + */ + isCachingSequence(sequenceKey: string): boolean; + + /** + * Get a value indicating if the graph is caching sequence nodes. + * @param {string} sequenceKey - Key of sequence. + * @returns {boolean} Value indicating if the sequence nodes are + * being cached. + */ + isCachingSequenceNodes(sequenceKey: string): boolean; + + /** + * Get a value indicating if the graph is caching the tiles + * required for calculating spatial edges of a node. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if the tiles of + * a node are being cached. + */ + isCachingTiles(key: string): boolean; + + /** + * Get a value indicating if the cache has been initialized + * for a node. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if the cache has been + * initialized for a node. + */ + hasInitializedCache(key: string): boolean; + + /** + * Get a value indicating if a node exist in the graph. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if a node exist in the graph. + */ + hasNode(key: string): boolean; + + /** + * Get a value indicating if a node sequence exist in the graph. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if a node sequence exist + * in the graph. + */ + hasNodeSequence(key: string): boolean; + + /** + * Get a value indicating if a sequence exist in the graph. + * @param {string} sequenceKey - Key of sequence. + * @returns {boolean} Value indicating if a sequence exist + * in the graph. + */ + hasSequence(sequenceKey: string): boolean; + + /** + * Get a value indicating if sequence nodes has been cached in the graph. + * @param {string} sequenceKey - Key of sequence. + * @returns {boolean} Value indicating if a sequence nodes has been + * cached in the graph. + */ + hasSequenceNodes(sequenceKey: string): boolean; + + /** + * Get a value indicating if the graph has fully cached + * all nodes in the spatial area of a node. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if the spatial area + * of a node has been cached. + */ + hasSpatialArea(key: string): boolean; + + /** + * Get a value indicating if the graph has a tiles required + * for a node. + * @param {string} key - Key of node. + * @returns {boolean} Value indicating if the the tiles required + * by a node has been cached. + */ + hasTiles(key: string): boolean; + + /** + * Get a node. + * @param {string} key - Key of node. + * @returns {Image} Retrieved node. + */ + getNode(key: string): Image; + + /** + * Get a sequence. + * @param {string} sequenceKey - Key of sequence. + * @returns {Image} Retrieved sequence. + */ + getSequence(sequenceKey: string): Sequence; + + /** + * Reset all spatial edges of the graph nodes. + */ + resetSpatialEdges(): void; + + /** + * Reset the complete graph but keep the nodes corresponding + * to the supplied keys. All other nodes will be disposed. + * @param {Array} keepKeys - Keys for nodes to keep + * in graph after reset. + */ + reset(keepKeys: string[]): void; + + /** + * Set the spatial node filter. + * @emits [object Object],[object Object],[object Object] + * @param {FilterExpression} filter - Filter expression to be applied + * when calculating spatial edges. + */ + setFilter(filter: FilterExpression): void; + + /** + * Uncache the graph according to the graph configuration. + * @description Uncaches unused tiles, unused nodes and + * sequences according to the numbers specified in the + * graph configuration. Sequences does not have a direct + * reference to either tiles or nodes and may be uncached + * even if they are related to the nodes that should be kept. + * @param {Array} keepIds - Ids of nodes to keep in + * graph unrelated to last access. Tiles related to those keys + * will also be kept in graph. + * @param {Array} keepCellIds - Ids of cells to keep in + * graph unrelated to last access. The nodes of the cells may + * still be uncached if not specified in the keep ids param + * but are guaranteed to not be disposed. + * @param {string} keepSequenceId - Optional id of sequence + * for which the belonging nodes should not be disposed or + * removed from the graph. These nodes may still be uncached if + * not specified in keep ids param but are guaranteed to not + * be disposed. + */ + uncache( + keepIds: string[], + keepCellIds: string[], + keepSequenceId?: string + ): void; + + /** + * Unsubscribes all subscriptions. + * @description Afterwards, you must not call any other methods + * on the graph instance. + */ + unsubscribe(): void; +} +/** + * Enumeration for graph modes. + * @enum {number} * + * @readonly + * @description Modes for the retrieval and caching performed + * by the graph service on the graph. + */ + +declare var GraphMode: {| + +Sequence: 0, // 0 + +Spatial: 1, // 1 +|}; + +/** + * @class GraphService + * @classdesc Represents a service for graph operations. + */ +declare class GraphService { + /** + * Create a new graph service instance. + * @param {Graph} graph - Graph instance to be operated on. + */ + constructor(graph: Graph): this; + + /** + * Dispose the graph service and its children. + */ + dispose(): void; + + /** + * Set the graph mode. + * @description If graph mode is set to spatial, caching + * is performed with emphasis on spatial edges. If graph + * mode is set to sequence no tile data is requested and + * no spatial edges are computed. + * + * When setting graph mode to sequence all spatial + * subscriptions are aborted. + * @param {$Values< + typeof + GraphMode>} mode - Graph mode to set. + */ + setGraphMode(mode: $Values): void; +} + +declare interface CacheServiceConfiguration { + cellDepth: number; +} +declare class CacheService { + constructor( + _graphService: GraphService, + _stateService: StateService, + _api: APIWrapper + ): this; + started: boolean; + configure(configuration?: CacheServiceConfiguration): void; + start(): void; + stop(): void; +} +declare class LoadingService { + constructor(): this; + startLoading(task: string): void; + stopLoading(task: string): void; +} +/** + * @class Spatial + * @classdesc Provides methods for scalar, vector and matrix calculations. + */ +declare class Spatial { + /** + * Converts azimuthal phi rotation (counter-clockwise with origin on X-axis) to + * bearing (clockwise with origin at north or Y-axis). + * @param {number} phi - Azimuthal phi angle in radians. + * @returns {number} Bearing in radians. + */ + azimuthalToBearing(phi: number): number; + + /** + * Converts degrees to radians. + * @param {number} deg - Degrees. + * @returns {number} Radians. + */ + degToRad(deg: number): number; + + /** + * Converts radians to degrees. + * @param {number} rad - Radians. + * @returns {number} Degrees. + */ + radToDeg(rad: number): number; + + /** + * Wrap a number on the interval [min, max]. + * @param {number} value - Value to wrap. + * @param {number} min - Lower endpoint of interval. + * @param {number} max - Upper endpoint of interval. + * @returns {number} The wrapped number. + */ + wrap(value: number, min: number, max: number): number; + + /** + * Wrap an angle on the interval [-Pi, Pi]. + * @param {number} angle - Value to wrap. + * @returns {number} Wrapped angle. + */ + wrapAngle(angle: number): number; + + /** + * Limit the value to the interval [min, max] by changing the value to + * the nearest available one when it is outside the interval. + * @param {number} value - Value to clamp. + * @param {number} min - Minimum of the interval. + * @param {number} max - Maximum of the interval. + * @returns {number} Clamped value. + */ + clamp(value: number, min: number, max: number): number; + + /** + * Calculates the counter-clockwise angle from the first + * vector (x1, y1)^T to the second (x2, y2)^T. + * @param {number} x1 - X coordinate of first vector. + * @param {number} y1 - Y coordinate of first vector. + * @param {number} x2 - X coordinate of second vector. + * @param {number} y2 - Y coordinate of second vector. + * @returns {number} Counter clockwise angle between the vectors. + */ + angleBetweenVector2(x1: number, y1: number, x2: number, y2: number): number; + + /** + * Calculates the minimum (absolute) angle change for rotation + * from one angle to another on the [-Pi, Pi] interval. + * @param {number} angle1 - Start angle. + * @param {number} angle2 - Destination angle. + * @returns {number} Absolute angle change between angles. + */ + angleDifference(angle1: number, angle2: number): number; + + /** + * Calculates the relative rotation angle between two + * angle-axis vectors. + * @param {number} rotation1 - First angle-axis vector. + * @param {number} rotation2 - Second angle-axis vector. + * @returns {number} Relative rotation angle. + */ + relativeRotationAngle(rotation1: number[], rotation2: number[]): number; + + /** + * Calculates the angle from a vector to a plane. + * @param {Array} vector - The vector. + * @param {Array} planeNormal - Normal of the plane. + * @returns {number} Angle from between plane and vector. + */ + angleToPlane(vector: number[], planeNormal: number[]): number; + azimuthal(direction: number[], up: number[]): number; + + /** + * Calculates the distance between two coordinates + * (longitude, latitude pairs) in meters according to + * the haversine formula. + * @param {number} lat1 - Latitude of the first coordinate in degrees. + * @param {number} lng1 - Longitude of the first coordinate in degrees. + * @param {number} lat2 - Latitude of the second coordinate in degrees. + * @param {number} lng2 - Longitude of the second coordinate in degrees. + * @returns {number} Distance between lat lon positions in meters. + */ + distanceFromLngLat( + lng1: number, + lat1: number, + lng2: number, + lat2: number + ): number; +} +/** + * @class ViewportCoords + * @classdesc Provides methods for calculating 2D coordinate conversions + * as well as 3D projection and unprojection. + * + * Basic coordinates are 2D coordinates on the [0, 1] interval and + * have the origin point, (0, 0), at the top left corner and the + * maximum value, (1, 1), at the bottom right corner of the original + * image. + * + * Viewport coordinates are 2D coordinates on the [-1, 1] interval and + * have the origin point in the center. The bottom left corner point is + * (-1, -1) and the top right corner point is (1, 1). + * + * Canvas coordiantes are 2D pixel coordinates on the [0, canvasWidth] and + * [0, canvasHeight] intervals. The origin point (0, 0) is in the top left + * corner and the maximum value is (canvasWidth, canvasHeight) is in the + * bottom right corner. + * + * 3D coordinates are in the topocentric world reference frame. + */ +declare class ViewportCoords { + /** + * Convert basic coordinates to canvas coordinates. + * @description Transform origin and camera position needs to be the + * equal for reliable return value. + * @param {number} basicX - Basic X coordinate. + * @param {number} basicY - Basic Y coordinate. + * @param {HTMLElement} container - The viewer container. + * @param {Transform} transform - Transform of the image to unproject from. + * @param {THREE.Camera} camera - Camera used in rendering. + * @returns {Array} 2D canvas coordinates. + */ + basicToCanvas( + basicX: number, + basicY: number, + container: { + offsetHeight: number, + offsetWidth: number, + ... + }, + transform: Transform + ): number[]; + + /** + * Convert basic coordinates to canvas coordinates safely. If 3D point is + * behind camera null will be returned. + * @description Transform origin and camera position needs to be the + * equal for reliable return value. + * @param {number} basicX - Basic X coordinate. + * @param {number} basicY - Basic Y coordinate. + * @param {HTMLElement} container - The viewer container. + * @param {Transform} transform - Transform of the image to unproject from. + * @param {THREE.Camera} camera - Camera used in rendering. + * @returns {Array} 2D canvas coordinates if the basic point represents a 3D point + * in front of the camera, otherwise null. + */ + basicToCanvasSafe( + basicX: number, + basicY: number, + container: { + offsetHeight: number, + offsetWidth: number, + ... + }, + transform: Transform + ): number[]; + + /** + * Convert basic coordinates to viewport coordinates. + * @description Transform origin and camera position needs to be the + * equal for reliable return value. + * @param {number} basicX - Basic X coordinate. + * @param {number} basicY - Basic Y coordinate. + * @param {Transform} transform - Transform of the image to unproject from. + * @param {THREE.Camera} camera - Camera used in rendering. + * @returns {Array} 2D viewport coordinates. + */ + basicToViewport( + basicX: number, + basicY: number, + transform: Transform + ): number[]; + + /** + * Convert basic coordinates to viewport coordinates safely. If 3D point is + * behind camera null will be returned. + * @description Transform origin and camera position needs to be the + * equal for reliable return value. + * @param {number} basicX - Basic X coordinate. + * @param {number} basicY - Basic Y coordinate. + * @param {Transform} transform - Transform of the image to unproject from. + * @param {THREE.Camera} camera - Camera used in rendering. + * @returns {Array} 2D viewport coordinates. + */ + basicToViewportSafe( + basicX: number, + basicY: number, + transform: Transform + ): number[]; + + /** + * Get canvas pixel position from event. + * @param {Event} event - Event containing clientX and clientY properties. + * @param {HTMLElement} element - HTML element. + * @returns {Array} 2D canvas coordinates. + */ + canvasPosition( + event: { + clientX: number, + clientY: number, + ... + }, + element: HTMLElement + ): number[]; + + /** + * Convert canvas coordinates to viewport coordinates. + * @param {number} canvasX - Canvas X coordinate. + * @param {number} canvasY - Canvas Y coordinate. + * @param {HTMLElement} container - The viewer container. + * @returns {Array} 2D viewport coordinates. + */ + canvasToViewport( + canvasX: number, + canvasY: number, + container: { + offsetHeight: number, + offsetWidth: number, + ... + } + ): number[]; + + /** + * Determines the width and height of the container in canvas coordinates. + * @param {HTMLElement} container - The viewer container. + * @returns {Array} 2D canvas coordinates. + */ + containerToCanvas(container: { + offsetHeight: number, + offsetWidth: number, + ... + }): number[]; + + /** + * Determine if an event occured inside an element. + * @param {Event} event - Event containing clientX and clientY properties. + * @param {HTMLElement} element - HTML element. + * @returns {boolean} Value indicating if the event occured inside the element or not. + */ + insideElement( + event: { + clientX: number, + clientY: number, + ... + }, + element: HTMLElement + ): boolean; + + /** + * Convert viewport coordinates to canvas coordinates. + * @param {number} viewportX - Viewport X coordinate. + * @param {number} viewportY - Viewport Y coordinate. + * @param {HTMLElement} container - The viewer container. + * @returns {Array} 2D canvas coordinates. + */ + viewportToCanvas( + viewportX: number, + viewportY: number, + container: { + offsetHeight: number, + offsetWidth: number, + ... + } + ): number[]; +} +declare class PanService { + constructor( + graphService: GraphService, + stateService: StateService, + enabled?: boolean, + graphCalculator?: GraphCalculator, + spatial?: Spatial, + viewportCoords?: ViewportCoords + ): this; + dispose(): void; + enable(): void; + disable(): void; + start(): void; + stop(): void; +} +declare class PlayService { + static +sequenceSpeed: number; + constructor(graphService: GraphService, stateService: StateService): this; + playing: boolean; + play(): void; + dispose(): void; + setDirection(direction: $Values): void; + setSpeed(speed: number): void; + stop(): void; +} +declare class Navigator { + constructor( + options: ViewerOptions, + api?: APIWrapper, + graphService?: GraphService, + loadingService?: LoadingService, + stateService?: StateService, + cacheService?: CacheService, + playService?: PlayService, + panService?: PanService + ): this; + api: APIWrapper; + cacheService: CacheService; + graphService: GraphService; + loadingService: LoadingService; + panService: PanService; + playService: PlayService; + stateService: StateService; + dispose(): void; +} +declare class SubscriptionHolder { + unsubscribe(): void; +} +export interface IComponent { + /** + * Value indicating if the component is currently active. + */ + +activated: boolean; + + /** + * Default configuration for the component. + */ + +defaultConfiguration: ComponentConfiguration; + + /** + * The name of the component. Used when interacting with the + * component through the Viewer's API. + */ + +name: string; + + /** + * Configure the component. + */ + configure(configuration: ComponentConfiguration): void; +} +/** + * @event + */ +export type ComponentEventType = + | "geometrycreate" + | "hover" + | "markerdragend" + | "markerdragstart" + | "markerposition" + | "playing" + | "tagcreateend" + | "tagcreatestart" + | "tagmode" + | "tags"; +declare class Component + implements IEventEmitter, IComponent +{ + static componentName: string; + _activated: boolean; + _container: Container; + _name: string; + _navigator: Navigator; + +_subscriptions: SubscriptionHolder; + constructor(name: string, container: Container, navigator: Navigator): this; + + /** + * Get activated. + * @returns {boolean} Value indicating if the component is + * currently active. + */ + activated: boolean; + + /** + * Get default configuration. + * @returns {TConfiguration} Default configuration for component. + */ + defaultConfiguration: TConfiguration; + + /** + * Get name. + * @description The name of the component. Used when interacting with the + * component through the Viewer's API. + */ + name: string; + + /** + * @ignore + */ + activate(conf?: TConfiguration): void; + + /** + * Configure the component. + * @param configuration Component configuration. + */ + configure(configuration: ComponentConfiguration): void; + + /** + * @ignore + */ + deactivate(): void; + + /** + * @inheritdoc + */ + fire(type: string, event: T): void; + + /** + * @inheritdoc + */ + off(type: string, handler: (event: T) => void): void; + + /** + * @inheritdoc + */ + on(type: string, handler: (event: T) => void): void; + + /** + * Detect the viewer's new width and height and resize the component's + * rendered elements accordingly if applicable. + * @ignore + */ + resize(): void; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): TConfiguration; +} +/** + * @class BearingComponent + * @classdesc Component for indicating bearing and field of view. + * @example ```js + * var viewer = new Viewer({ ... }); + * var bearingComponent = viewer.getComponent("bearing"); + * bearingComponent.configure({ size: ComponentSize.Small }); + * ``` + */ +declare class BearingComponent extends Component { + static componentName: string; + + /** + * @ignore + */ + constructor(name: string, container: Container, navigator: Navigator): this; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): BearingConfiguration; +} +declare class CacheComponent extends Component { + static componentName: string; + + /** + * @ignore + */ + constructor(name: string, container: Container, navigator: Navigator): this; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): CacheConfiguration; +} +/** + * Interface for general component events. + */ +export interface ComponentEvent { + /** + * The component object that fired the event. + */ + target: IComponent; + + /** + * The event type. + */ + type: ComponentEventType; +} +/** + * Interface for component hover events. + */ +export type ComponentHoverEvent = { + /** + * The image id corresponding to the element or object that + * is being hovered. When the mouse leaves the element or + * object the id will be null. + */ + id: string, + type: "hover", + ... +} & ComponentEvent; + +/** + * @class Geometry + * @abstract + * @classdesc Represents a geometry. + */ +declare class Geometry { + /** + * Create a geometry. + * @constructor + * @ignore + */ + constructor(): this; + + /** + * Get the 2D basic coordinates for the centroid of the geometry. + * @returns {Array} 2D basic coordinates representing the centroid. + * @ignore + */ + getCentroid2d(): number[]; + + /** + * Get the 3D world coordinates for the centroid of the geometry. + * @param {Transform} transform - The transform of the image related to the geometry. + * @returns {Array} 3D world coordinates representing the centroid. + * @ignore + */ + getCentroid3d(transform: Transform): number[]; + + /** + * Set the 2D centroid of the geometry. + * @param {Array} value - The new value of the centroid in basic coordinates. + * @param {Transform} transform - The transform of the image related to the geometry. + * @ignore + */ + setCentroid2d(value: number[], transform: Transform): void; +} +/** + * Interface for component geometry events. + */ +export type ComponentGeometryEvent = { + /** + * Geometry related to the event. + */ + geometry: Geometry, + type: "geometrycreate", + ... +} & ComponentEvent; + +/** + * @class Marker + * @classdesc Represents an abstract marker class that should be extended + * by marker implementations used in the marker component. + */ +declare class Marker { + constructor(id: string, lngLat: LngLat): this; + + /** + * Get id. + * @returns {string} The id of the marker. + */ + id: string; + + /** + * Get lngLat. + * @returns {LngLat} The geographic coordinates of the marker. + */ + lngLat: LngLat; + + /** + * @ignore + */ + createGeometry(position: number[]): void; + + /** + * @ignore + */ + disposeGeometry(): void; + + /** + * @ignore + */ + lerpAltitude(alt: number, alpha: number): void; + + /** + * @ignore + */ + updatePosition(position: number[], lngLat?: LngLat): void; + _createGeometry(position: number[]): void; + _disposeGeometry(): void; +} +/** + * Interface for component marker events. + */ +export type ComponentMarkerEvent = { + /** + * The marker that was affected by the event. + */ + marker: Marker, + type: "markerdragend" | "markerdragstart" | "markerposition", + ... +} & ComponentEvent; + +/** + * Interface for component play events. + */ +export type ComponentPlayEvent = { + /** + * Value indiciating if the component is playing or not. + */ + playing: boolean, + type: "playing", + ... +} & ComponentEvent; + +/** + * Interface for component state events. + * @example ```js + * // The `hover` event is an example of a `ComponentStateEvent`. + * // Set up an event listener on the direction component. + * var directionComponent = viewer.getComponent('direction'); + * directionComponent.on('hover', function(e) { + * console.log('A hover event has occured'); + * }); + * ``` + */ +export type ComponentStateEvent = { + type: "tagcreateend" | "tagcreatestart" | "tags", + ... +} & ComponentEvent; + +/** + * Interface for component tag mode events. + */ +export type ComponentTagModeEvent = { + /** + * Value indicating the current tag mode of the component. + */ + mode: $Values, + type: "tagmode", + ... +} & ComponentEvent; + +/** + * @class DirectionDOMRenderer + * @classdesc DOM renderer for direction arrows. + */ +declare class DirectionDOMRenderer { + constructor(configuration: DirectionConfiguration, size: ViewportSize): this; + + /** + * Get needs render. + * @returns {boolean} Value indicating whether render should be called. + */ + needsRender: boolean; + + /** + * Renders virtual DOM elements. + * @description Calling render resets the needs render property. + */ + setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void; + + /** + * Set image for which to show edges. + * @param {Image} image + */ + setImage(image: Image): void; + + /** + * Set the render camera to use for calculating rotations. + * @param {RenderCamera} renderCamera + */ + setRenderCamera(renderCamera: RenderCamera): void; + + /** + * Set configuration values. + * @param {DirectionConfiguration} configuration + */ + setConfiguration(configuration: DirectionConfiguration): void; + + /** + * Detect the element's width and height and resize + * elements accordingly. + * @param {ViewportSize} size Size of vßiewer container element. + */ + resize(size: ViewportSize): void; +} +/** + * @class DirectionComponent + * @classdesc Component showing navigation arrows for steps and turns. + */ +declare class DirectionComponent extends Component { + /** + * @inheritdoc + */ + static componentName: string; + + /** + * @ignore + */ + constructor( + name: string, + container: Container, + navigator: Navigator, + directionDOMRenderer?: DirectionDOMRenderer + ): this; + + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): DirectionConfiguration; +} +declare class HandlerBase { + _component: Component; + _container: Container; + _navigator: Navigator; + _enabled: boolean; + + /** + * @ignore + */ + constructor( + component: Component, + container: Container, + navigator: Navigator + ): this; + + /** + * Returns a Boolean indicating whether the interaction is enabled. + * @returns {boolean} `true` if the interaction is enabled. + */ + isEnabled: boolean; + + /** + * Enables the interaction. + * @example ```js + * ..enable(); + * ``` + */ + enable(): void; + + /** + * Disables the interaction. + * @example ```js + * ..disable(); + * ``` + */ + disable(): void; + _enable(): void; + _disable(): void; + _getConfiguration(enable: boolean): TConfiguration; +} +/** + * The `KeySequenceNavigationHandler` allows the user to navigate through a sequence using the + * following key commands: + * + * `ALT` + `Up Arrow`: Navigate to next image in the sequence. + * `ALT` + `Down Arrow`: Navigate to previous image in sequence. + * @example ```js + * var keyboardComponent = viewer.getComponent("keyboard"); + * + * keyboardComponent.keySequenceNavigation.disable(); + * keyboardComponent.keySequenceNavigation.enable(); + * + * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled; + * ``` + */ +declare class KeySequenceNavigationHandler + extends HandlerBase +{ + _enable(): void; + _disable(): void; + _getConfiguration(enable: boolean): KeyboardConfiguration; +} +/** + * The `KeySpatialNavigationHandler` allows the user to navigate through a sequence using the + * following key commands: + * + * `Up Arrow`: Step forward. + * `Down Arrow`: Step backward. + * `Left Arrow`: Step to the left. + * `Rigth Arrow`: Step to the right. + * `SHIFT` + `Down Arrow`: Turn around. + * `SHIFT` + `Left Arrow`: Turn to the left. + * `SHIFT` + `Rigth Arrow`: Turn to the right. + * @example ```js + * var keyboardComponent = viewer.getComponent("keyboard"); + * + * keyboardComponent.keySpatialNavigation.disable(); + * keyboardComponent.keySpatialNavigation.enable(); + * + * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled; + * ``` + */ +declare class KeySpatialNavigationHandler + extends HandlerBase +{ + /** + * @ignore + */ + constructor( + component: Component, + container: Container, + navigator: Navigator, + spatial: Spatial + ): this; + _enable(): void; + _disable(): void; + _getConfiguration(enable: boolean): KeyboardConfiguration; +} +/** + * The `KeyZoomHandler` allows the user to zoom in and out using the + * following key commands: + * + * `+`: Zoom in. + * `-`: Zoom out. + * @example ```js + * var keyboardComponent = viewer.getComponent("keyboard"); + * + * keyboardComponent.keyZoom.disable(); + * keyboardComponent.keyZoom.enable(); + * + * var isEnabled = keyboardComponent.keyZoom.isEnabled; + * ``` + */ +declare class KeyZoomHandler extends HandlerBase { + /** + * @ignore + */ + constructor( + component: Component, + container: Container, + navigator: Navigator, + viewportCoords: ViewportCoords + ): this; + _enable(): void; + _disable(): void; + _getConfiguration(enable: boolean): KeyboardConfiguration; +} +/** + * The `KeyPlayHandler` allows the user to control the play behavior + * using the following key commands: + * + * `Spacebar`: Start or stop playing. + * `SHIFT` + `D`: Switch direction. + * `<`: Decrease speed. + * `>`: Increase speed. + * @example ```js + * var keyboardComponent = viewer.getComponent("keyboard"); + * + * keyboardComponent.keyPlay.disable(); + * keyboardComponent.keyPlay.enable(); + * + * var isEnabled = keyboardComponent.keyPlay.isEnabled; + * ``` + */ +declare class KeyPlayHandler extends HandlerBase { + _enable(): void; + _disable(): void; + _getConfiguration(enable: boolean): KeyboardConfiguration; +} +/** + * @class KeyboardComponent + * @classdesc Component for keyboard event handling. + * + * To retrive and use the keyboard component + * @example ```js + * var viewer = new Viewer({ ... }); + * + * var keyboardComponent = viewer.getComponent("keyboard"); + * ``` + */ +declare class KeyboardComponent extends Component { + static componentName: string; + + /** + * @ignore + */ + constructor(name: string, container: Container, navigator: Navigator): this; + + /** + * Get key play. + * @returns {KeyPlayHandler} The key play handler. + */ + keyPlay: KeyPlayHandler; + + /** + * Get key sequence navigation. + * @returns {KeySequenceNavigationHandler} The key sequence navigation handler. + */ + keySequenceNavigation: KeySequenceNavigationHandler; + + /** + * Get spatial. + * @returns {KeySpatialNavigationHandler} The spatial handler. + */ + keySpatialNavigation: KeySpatialNavigationHandler; + + /** + * Get key zoom. + * @returns {KeyZoomHandler} The key zoom handler. + */ + keyZoom: KeyZoomHandler; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): KeyboardConfiguration; +} +/** + * @interface CircleMarkerOptions + * + * Interface that represents the options for configuring a `CircleMarker`. + */ +export interface CircleMarkerOptions { + /** + * The color of the marker. + * @default "#fff" + */ + color?: number | string; + + /** + * The opacity of the marker. + * @default 0.4 + */ + opacity?: number; + + /** + * The radius of the circle in meters. + * @default 1 + */ + radius?: number; +} +/** + * @class CircleMarker + * @classdesc Non-interactive marker with a flat circle shape. The circle + * marker can not be configured to be interactive. + * + * Circle marker properties can not be updated after creation. + * + * To create and add one `CircleMarker` with default configuration + * and one with configuration use + * @example ```js + * var defaultMarker = new CircleMarker( + * "id-1", + * { lat: 0, lng: 0, }); + * + * var configuredMarker = new CircleMarker( + * "id-2", + * { lat: 0, lng: 0, }, + * { + * color: "#0ff", + * opacity: 0.3, + * radius: 0.7, + * }); + * + * markerComponent.add([defaultMarker, configuredMarker]); + * ``` + */ +declare class CircleMarker extends Marker { + constructor(id: string, lngLat: LngLat, options?: CircleMarkerOptions): this; + _createGeometry(position: number[]): void; + _disposeGeometry(): void; +} +/** + * @class MarkerComponent + * @classdesc Component for showing and editing 3D marker objects. + * + * The `add` method is used for adding new markers or replacing + * markers already in the set. + * + * If a marker already in the set has the same + * id as one of the markers added, the old marker will be removed and + * the added marker will take its place. + * + * It is not possible to update markers in the set by updating any properties + * directly on the marker object. Markers need to be replaced by + * re-adding them for updates to geographic position or configuration + * to be reflected. + * + * Markers added to the marker component can be either interactive + * or non-interactive. Different marker types define their behavior. + * Markers with interaction support can be configured with options + * to respond to dragging inside the viewer and be detected when + * retrieving markers from pixel points with the `getMarkerIdAt` method. + * + * To retrive and use the marker component + * @example ```js + * var viewer = new Viewer({ component: { marker: true }, ... }); + * + * var markerComponent = viewer.getComponent("marker"); + * ``` + */ +declare class MarkerComponent extends Component { + static componentName: string; + + /** + * @ignore + */ + constructor(name: string, container: Container, navigator: Navigator): this; + + /** + * Add markers to the marker set or replace markers in the marker set. + * @description If a marker already in the set has the same + * id as one of the markers added, the old marker will be removed + * the added marker will take its place. + * + * Any marker inside the visible bounding bbox + * will be initialized and placed in the viewer. + * @param {Array} markers - Markers to add. + * @example ```js + * markerComponent.add([marker1, marker2]); + * ``` + */ + add(markers: Marker[]): void; + + /** + * Returns the marker in the marker set with the specified id, or + * undefined if the id matches no marker. + * @param {string} markerId - Id of the marker. + * @example ```js + * var marker = markerComponent.get("markerId"); + * ``` + */ + get(markerId: string): Marker; + + /** + * Returns an array of all markers. + * @example ```js + * var markers = markerComponent.getAll(); + * ``` + */ + getAll(): Marker[]; + + /** + * Returns the id of the interactive marker closest to the current camera + * position at the specified point. + * @description Notice that the pixelPoint argument requires x, y + * coordinates from pixel space. + * + * With this function, you can use the coordinates provided by mouse + * events to get information out of the marker component. + * + * If no interactive geometry of an interactive marker exist at the pixel + * point, `null` will be returned. + * @param {Array} pixelPoint - Pixel coordinates on the viewer element. + * @returns {string} Id of the interactive marker closest to the camera. If no + * interactive marker exist at the pixel point, `null` will be returned. + * @example ```js + * markerComponent.getMarkerIdAt([100, 100]) + * .then((markerId) => { console.log(markerId); }); + * ``` + */ + getMarkerIdAt(pixelPoint: number[]): Promise; + + /** + * Check if a marker exist in the marker set. + * @param {string} markerId - Id of the marker. + * @example ```js + * var markerExists = markerComponent.has("markerId"); + * ``` + */ + has(markerId: string): boolean; + + /** + * Remove markers with the specified ids from the marker set. + * @param {Array} markerIds - Ids for markers to remove. + * @example ```js + * markerComponent.remove(["id-1", "id-2"]); + * ``` + */ + remove(markerIds: string[]): void; + + /** + * Remove all markers from the marker set. + * @example ```js + * markerComponent.removeAll(); + * ``` + */ + removeAll(): void; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): MarkerConfiguration; +} +/** + * @interface SimpleMarkerOptions + * + * Interface that represents the options for configuring a `SimpleMarker`. + */ +export interface SimpleMarkerOptions { + /** + * The color of the ball inside the marker. + * @default "#f00" + */ + ballColor?: number | string; + + /** + * The opacity of the ball inside the marker. + * @default 0.8 + */ + ballOpacity?: number; + + /** + * The color of the ice creame shape. + * @default "#f00" + */ + color?: number | string; + + /** + * Value indicating if the marker should be interactive or not. + * @description If the marker is configured to be interactive + * it will be draggable in the viewer and retrievable with the + * `getMarkerIdAt` method on the `MarkerComponent`. + * @default false + */ + interactive?: boolean; + + /** + * The opacity of the ice creame shape. + * @default 0.4 + */ + opacity?: number; + + /** + * The radius of the ice cream shape in meters. + * @default 1 + */ + radius?: number; +} +/** + * @class SimpleMarker + * @classdesc Interactive marker with ice cream shape. The sphere + * inside the ice cream can be configured to be interactive. + * + * Simple marker properties can not be updated after creation. + * + * To create and add one `SimpleMarker` with default configuration + * (non-interactive) and one interactive with configuration use + * @example ```js + * var defaultMarker = new SimpleMarker( + * "id-1", + * { lat: 0, lng: 0, }); + * + * var interactiveMarker = new SimpleMarker( + * "id-2", + * { lat: 0, lng: 0, }, + * { + * ballColor: "#00f", + * ballOpacity: 0.5, + * color: "#00f", + * interactive: true, + * opacity: 0.3, + * radius: 0.7, + * }); + * + * markerComponent.add([defaultMarker, interactiveMarker]); + * ``` + */ +declare class SimpleMarker extends Marker { + constructor(id: string, lngLat: LngLat, options?: SimpleMarkerOptions): this; + _createGeometry(position: number[]): void; + _disposeGeometry(): void; +} +/** + * The `DragPanHandler` allows the user to pan the viewer image by clicking and dragging the cursor. + * @example ```js + * var pointerComponent = viewer.getComponent("pointer"); + * + * pointerComponent.dragPan.disable(); + * pointerComponent.dragPan.enable(); + * + * var isEnabled = pointerComponent.dragPan.isEnabled; + * ``` + */ +declare class DragPanHandler extends HandlerBase { + /** + * @ignore + */ + constructor( + component: Component, + container: Container, + navigator: Navigator, + viewportCoords: ViewportCoords, + spatial: Spatial + ): this; + _enable(): void; + _disable(): void; + _getConfiguration(enable: boolean): PointerConfiguration; +} +declare class EarthControlHandler extends HandlerBase { + /** + * @ignore + */ + constructor( + component: Component, + container: Container, + navigator: Navigator, + viewportCoords: ViewportCoords, + spatial: Spatial + ): this; + _enable(): void; + _disable(): void; + _getConfiguration(): PointerConfiguration; +} +/** + * The `ScrollZoomHandler` allows the user to zoom the viewer image by scrolling. + * @example ```js + * var pointerComponent = viewer.getComponent("pointer"); + * + * pointerComponent.scrollZoom.disable(); + * pointerComponent.scrollZoom.enable(); + * + * var isEnabled = pointerComponent.scrollZoom.isEnabled; + * ``` + */ +declare class ScrollZoomHandler extends HandlerBase { + /** + * @ignore + */ + constructor( + component: Component, + container: Container, + navigator: Navigator, + viewportCoords: ViewportCoords + ): this; + _enable(): void; + _disable(): void; + _getConfiguration(enable: boolean): PointerConfiguration; +} +/** + * The `TouchZoomHandler` allows the user to zoom the viewer image by pinching on a touchscreen. + * @example ```js + * var pointerComponent = viewer.getComponent("pointer"); + * + * pointerComponent.touchZoom.disable(); + * pointerComponent.touchZoom.enable(); + * + * var isEnabled = pointerComponent.touchZoom.isEnabled; + * ``` + */ +declare class TouchZoomHandler extends HandlerBase { + /** + * @ignore + */ + constructor( + component: Component, + container: Container, + navigator: Navigator, + viewportCoords: ViewportCoords + ): this; + _enable(): void; + _disable(): void; + _getConfiguration(enable: boolean): PointerConfiguration; +} +/** + * @class PointerComponent + * @classdesc Component handling mouse, pen, and touch events for camera movement. + * + * To retrive and use the mouse component + * @example ```js + * var viewer = new Viewer({ ... }); + * + * var pointerComponent = viewer.getComponent("pointer"); + * ``` + */ +declare class PointerComponent extends Component { + /** + * @inheritdoc + */ + static componentName: string; + + /** + * @ignore + */ + constructor(name: string, container: Container, navigator: Navigator): this; + + /** + * Get drag pan. + * @returns {DragPanHandler} The drag pan handler. + */ + dragPan: DragPanHandler; + + /** + * Get earth control. + * @returns {EarthControlHandler} The earth control handler. + */ + earthControl: EarthControlHandler; + + /** + * Get scroll zoom. + * @returns {ScrollZoomHandler} The scroll zoom handler. + */ + scrollZoom: ScrollZoomHandler; + + /** + * Get touch zoom. + * @returns {TouchZoomHandler} The touch zoom handler. + */ + touchZoom: TouchZoomHandler; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): PointerConfiguration; +} +/** + * Interface for the popup offset with respect to its anchor point. + * @description An object of number arrays specifying an offset for + * each float direction. Negative offsets indicate left and up. + * @interface + * @example ```js + * var offset = = { + * bottom: [0, 10], + * bottomLeft: [-10, 10], + * bottomRight: [10, 10], + * center: [0, 0], + * left: [-10, 0], + * right: [10, 0], + * top: [0, -10], + * topLeft: [-10, -10], + * topRight: [10, -10], + * } + * + * var popup = new Popup({ offset: offset }); + * ``` + */ +export interface PopupOffset { + bottom: number[]; + bottomLeft: number[]; + bottomRight: number[]; + center: number[]; + left: number[]; + right: number[]; + top: number[]; + topLeft: number[]; + topRight: number[]; +} +/** + * Interface for the options that define behavior and + * appearance of a popup. + * @interface + */ +export interface PopupOptions { + /** + * Specify if the popup should capture pointer events. + * @description If the popup is specified to not capture + * pointer events the provided content can still override + * this behavior for the individual content HTML elements + * by specifying the appropriate CSS. + * @default true + */ + capturePointer?: boolean; + + /** + * Specify that the popup should not have any tooltip + * like visuals around the provided content. + * @default false + */ + clean?: boolean; + + /** + * The direction in which the popup floats with respect to the + * anchor point or points. If no value is supplied the popup + * will change float automatically based on the its position + * in the viewport so that as much of its area as possible is + * visible. + * @description For automatic floating (undefined) the popup + * will float in eight directions around a point or a position + * in a rect. When a rectangle is set without a position option + * specified, the popup will float outward from the rectangle + * center based on the side it is currently rendered in. The + * default floating direction is to the bottom for both points + * and rectangles. + * @default undefined + */ + float?: $Values; + + /** + * A pixel offset applied to the popup's location specfied as: + * + * - A single number in pixels in the float direction that the popup + * will be translated with respect to the current anchor point. + * + * - An object of number arrays specifying an offset for + * each float direction. Negative offsets indicate left and up. + * @default 0 + */ + offset?: number | PopupOffset; + + /** + * Opacity of the popup visuals. + * @default 1 + */ + opacity?: number; + + /** + * The popup position in a rectangle (does not apply to points). + * When not set the popup will change position automatically + * based on the viewport so that as much of it as possible is + * visible. + * @default undefined + */ + position?: $Values; +} +/** + * @class Popup + * @classdesc [object Object],[object Object],[object Object] + * @example ```js + * var defaultSpan = document.createElement('span'); + * defaultSpan.innerHTML = 'hello default'; + * + * var defaultPopup = new Popup(); + * defaultPopup.setDOMContent(defaultSpan); + * defaultPopup.setBasicPoint([0.3, 0.3]); + * + * var cleanSpan = document.createElement('span'); + * cleanSpan.innerHTML = 'hello clean'; + * + * var cleanPopup = new Popup({ + * clean: true, + * float: Alignment.Top, + * offset: 10, + * opacity: 0.7, + * }); + * + * cleanPopup.setDOMContent(cleanSpan); + * cleanPopup.setBasicPoint([0.6, 0.6]); + * + * popupComponent.add([defaultPopup, cleanPopup]); + * ``` + * @description Implementation of API methods and API documentation inspired + * by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js + */ +declare class Popup { + constructor( + options?: PopupOptions, + viewportCoords?: ViewportCoords, + dom?: DOM + ): this; + + /** + * @description Internal method used by the component to + * remove all references to the popup. + * @ignore + */ + remove(): void; + + /** + * Sets a 2D basic image coordinates point to the popup's anchor, and + * moves the popup to it. + * @description Overwrites any previously set point or rect. + * @param {Array} basicPoint - Point in 2D basic image coordinates. + * @example ```js + * var popup = new Popup(); + * popup.setText('hello image'); + * popup.setBasicPoint([0.3, 0.3]); + * + * popupComponent.add([popup]); + * ``` + */ + setBasicPoint(basicPoint: number[]): void; + + /** + * Sets a 2D basic image coordinates rect to the popup's anchor, and + * moves the popup to it. + * @description Overwrites any previously set point or rect. + * @param {Array} basicRect - Rect in 2D basic image + * coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) . + * @example ```js + * var popup = new Popup(); + * popup.setText('hello image'); + * popup.setBasicRect([0.3, 0.3, 0.5, 0.6]); + * + * popupComponent.add([popup]); + * ``` + */ + setBasicRect(basicRect: number[]): void; + + /** + * Sets the popup's content to the element provided as a DOM node. + * @param {Node} htmlNode - A DOM node to be used as content for the popup. + * @example ```js + * var div = document.createElement('div'); + * div.innerHTML = 'hello image'; + * + * var popup = new Popup(); + * popup.setDOMContent(div); + * popup.setBasicPoint([0.3, 0.3]); + * + * popupComponent.add([popup]); + * ``` + */ + setDOMContent(htmlNode: Node): void; + + /** + * Sets the popup's content to the HTML provided as a string. + * @description [object Object],[object Object],[object Object] + * @param {string} html - A string representing HTML content for the popup. + * @example ```js + * var popup = new Popup(); + * popup.setHTML('
hello image
'); + * popup.setBasicPoint([0.3, 0.3]); + * + * popupComponent.add([popup]); + * ``` + */ + setHTML(html: string): void; + + /** + * Sets the popup's content to a string of text. + * @description This function creates a Text node in the DOM, so it cannot insert raw HTML. + * Use this method for security against XSS if the popup content is user-provided. + * @param {string} text - Textual content for the popup. + * @example ```js + * var popup = new Popup(); + * popup.setText('hello image'); + * popup.setBasicPoint([0.3, 0.3]); + * + * popupComponent.add([popup]); + * ``` + */ + setText(text: string): void; + + /** + * @description Internal method for attaching the popup to + * its parent container so that it is rendered in the DOM tree. + * @ignore + */ + setParentContainer(parentContainer: HTMLElement): void; + + /** + * @description Internal method for updating the rendered + * position of the popup called by the popup component. + * @ignore + */ + update( + renderCamera: RenderCamera, + size: ViewportSize, + transform: Transform + ): void; +} +/** + * @class PopupComponent + * @classdesc Component for showing HTML popup objects. + * + * The `add` method is used for adding new popups. Popups are removed by reference. + * + * It is not possible to update popups in the set by updating any properties + * directly on the popup object. Popups need to be replaced by + * removing them and creating new ones with relevant changed properties and + * adding those instead. + * + * Popups are only relevant to a single image because they are based on + * 2D basic image coordinates. Popups related to a certain image should + * be removed when the viewer is moved to another image. + * + * To retrive and use the popup component + * @example ```js + * var viewer = new Viewer({ component: { popup: true }, ... }); + * + * var popupComponent = viewer.getComponent("popup"); + * ``` + */ +declare class PopupComponent extends Component { + static componentName: string; + + /** + * @ignore + */ + constructor( + name: string, + container: Container, + navigator: Navigator, + dom?: DOM + ): this; + + /** + * Add popups to the popups set. + * @description Adding a new popup never replaces an old one + * because they are stored by reference. Adding an already + * existing popup has no effect. + * @param {Array} popups - Popups to add. + * @example ```js + * popupComponent.add([popup1, popup2]); + * ``` + */ + add(popups: Popup[]): void; + + /** + * Returns an array of all popups. + * @example ```js + * var popups = popupComponent.getAll(); + * ``` + */ + getAll(): Popup[]; + + /** + * Remove popups based on reference from the popup set. + * @param {Array} popups - Popups to remove. + * @example ```js + * popupComponent.remove([popup1, popup2]); + * ``` + */ + remove(popups: Popup[]): void; + + /** + * Remove all popups from the popup set. + * @example ```js + * popupComponent.removeAll(); + * ``` + */ + removeAll(): void; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): ComponentConfiguration; +} +declare class SequenceDOMRenderer { + constructor(container: Container): this; + activate(): void; + deactivate(): void; + getContainerWidth( + size: ViewportSize, + configuration: SequenceConfiguration + ): number; +} +/** + * @class SequenceComponent + * @classdesc Component showing navigation arrows for sequence directions + * as well as playing button. Exposes an API to start and stop play. + */ +declare class SequenceComponent extends Component { + /** + * @inheritdoc + */ + static componentName: string; + constructor( + name: string, + container: Container, + navigator: Navigator, + renderer?: SequenceDOMRenderer + ): this; + + /** + * Start playing. + * @fires playing + */ + play(): void; + + /** + * Stop playing. + * @fires playing + */ + stop(): void; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): SequenceConfiguration; +} +/** + * @class SliderComponent + * @classdesc Component for comparing pairs of images. Renders + * a slider for adjusting the curtain of the first image. + * + * Deactivate the sequence, direction and image plane + * components when activating the slider component to avoid + * interfering UI elements. + * + * To retrive and use the slider component + * @example ```js + * var viewer = new Viewer({ ... }); + * + * viewer.deactivateComponent("image"); + * viewer.deactivateComponent("direction"); + * viewer.deactivateComponent("sequence"); + * + * viewer.activateComponent("slider"); + * + * var sliderComponent = viewer.getComponent("slider"); + * ``` + */ +declare class SliderComponent extends Component { + static componentName: string; + + /** + * @ignore + */ + constructor( + name: string, + container: Container, + navigator: Navigator, + viewportCoords?: ViewportCoords + ): this; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): SliderConfiguration; +} +declare class SpatialComponent extends Component { + static componentName: string; + + /** + * @ignore + */ + constructor(name: string, container: Container, navigator: Navigator): this; + + /** + * Returns the image id of the camera frame closest to the current + * render camera position at the specified point. + * @description Notice that the pixelPoint argument requires x, y + * coordinates from pixel space. + * + * With this function, you can use the coordinates provided by mouse + * events to get information out of the spatial component. + * + * If no camera frame exist at the pixel + * point, `null` will be returned. + * @param {Array} pixelPoint - Pixel coordinates on + * the viewer element. + * @returns {string} Image id of the camera frame closest to + * the camera. If no camera frame is intersected at the + * pixel point, `null` will be returned. + * @example ```js + * spatialComponent.getFrameIdAt([100, 125]) + * .then((imageId) => { console.log(imageId); }); + * ``` + */ + getFrameIdAt(pixelPoint: number[]): Promise; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): SpatialConfiguration; +} +declare class GeometryTagError extends MapillaryError { + constructor(message?: string): this; +} +/** + * @class PointGeometry + * @classdesc Represents a point geometry in the 2D basic image coordinate system. + * @example ```js + * var basicPoint = [0.5, 0.7]; + * var pointGeometry = new PointGeometry(basicPoint); + * ``` + */ +declare class PointGeometry extends Geometry { + /** + * Create a point geometry. + * @constructor + * @param {Array} point - An array representing the basic coordinates of + * the point. + * @throws {GeometryTagError} Point coordinates must be valid basic coordinates. + */ + constructor(point: number[]): this; + + /** + * Get point property. + * @returns {Array} Array representing the basic coordinates of the point. + */ + point: number[]; + + /** + * Get the 2D basic coordinates for the centroid of the point, i.e. the 2D + * basic coordinates of the point itself. + * @returns {Array} 2D basic coordinates representing the centroid. + * @ignore + */ + getCentroid2d(): number[]; + + /** + * Get the 3D world coordinates for the centroid of the point, i.e. the 3D + * world coordinates of the point itself. + * @param {Transform} transform - The transform of the image related to the point. + * @returns {Array} 3D world coordinates representing the centroid. + * @ignore + */ + getCentroid3d(transform: Transform): number[]; + + /** + * Set the centroid of the point, i.e. the point coordinates. + * @param {Array} value - The new value of the centroid. + * @param {Transform} transform - The transform of the image related to the point. + * @ignore + */ + setCentroid2d(value: number[], transform: Transform): void; +} +/** + * @class PointsGeometry + * @classdesc Represents a point set in the 2D basic image coordinate system. + * @example ```js + * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]]; + * var pointsGeometry = new PointsGeometry(points); + * ``` + */ +declare class PointsGeometry extends Geometry { + /** + * Create a points geometry. + * @constructor + * @param {Array>} points - Array of 2D points on the basic coordinate + * system. The number of points must be greater than or equal to two. + * @throws {GeometryTagError} Point coordinates must be valid basic coordinates. + */ + constructor(points: number[][]): this; + + /** + * Get points property. + * @returns {Array>} Array of 2d points. + */ + points: number[][]; + + /** + * Add a point to the point set. + * @param {Array} point - Point to add. + * @ignore + */ + addPoint2d(point: number[]): void; + + /** + * Get the coordinates of a point from the point set representation of the geometry. + * @param {number} index - Point index. + * @returns {Array} Array representing the 2D basic coordinates of the point. + * @ignore + */ + getPoint2d(index: number): number[]; + + /** + * Remove a point from the point set. + * @param {number} index - The index of the point to remove. + * @ignore + */ + removePoint2d(index: number): void; + + /** + * @ignore + */ + setVertex2d(index: number, value: number[], transform: Transform): void; + + /** + * @ignore + */ + setPoint2d(index: number, value: number[], transform: Transform): void; + + /** + * @ignore + */ + getPoints3d(transform: Transform): number[][]; + + /** + * @ignore + */ + getPoint3d(index: number, transform: Transform): number[]; + + /** + * @ignore + */ + getPoints2d(): number[][]; + + /** + * @ignore + */ + getCentroid2d(transform?: Transform): number[]; + + /** + * @ignore + */ + getCentroid3d(transform: Transform): number[]; + + /** + * @ignore + */ + getRect2d(transform: Transform): number[]; + + /** + * @ignore + */ + setCentroid2d(value: number[], transform: Transform): void; +} +/** + * @class VertexGeometry + * @abstract + * @classdesc Represents a vertex geometry. + */ +declare class VertexGeometry extends Geometry { + /** + * Create a vertex geometry. + * @constructor + * @ignore + */ + constructor(): this; + + /** + * Get the 3D coordinates for the vertices of the geometry with possibly + * subsampled points along the lines. + * @param {Transform} transform - The transform of the image related to + * the geometry. + * @returns {Array>} Polygon array of 3D world coordinates + * representing the geometry. + * @ignore + */ + getPoints3d(transform: Transform): number[][]; + + /** + * Get the polygon pole of inaccessibility, the most + * distant internal point from the polygon outline. + * @returns {Array} 2D basic coordinates for the pole of inaccessibility. + * @ignore + */ + getPoleOfInaccessibility2d(): number[]; + + /** + * Get the polygon pole of inaccessibility, the most + * distant internal point from the polygon outline. + * @param transform - The transform of the image related to + * the geometry. + * @returns {Array} 3D world coordinates for the pole of inaccessibility. + * @ignore + */ + getPoleOfInaccessibility3d(transform: Transform): number[]; + + /** + * Get the coordinates of a vertex from the polygon representation of the geometry. + * @param {number} index - Vertex index. + * @returns {Array} Array representing the 2D basic coordinates of the vertex. + * @ignore + */ + getVertex2d(index: number): number[]; + + /** + * Get a vertex from the polygon representation of the 3D coordinates for the + * vertices of the geometry. + * @param {number} index - Vertex index. + * @param {Transform} transform - The transform of the image related to the geometry. + * @returns {Array} Array representing the 3D world coordinates of the vertex. + * @ignore + */ + getVertex3d(index: number, transform: Transform): number[]; + + /** + * Get a polygon representation of the 2D basic coordinates for the vertices of the geometry. + * @returns {Array>} Polygon array of 2D basic coordinates representing + * the vertices of the geometry. + * @ignore + */ + getVertices2d(): number[][]; + + /** + * Get a polygon representation of the 3D world coordinates for the vertices of the geometry. + * @param {Transform} transform - The transform of the image related to the geometry. + * @returns {Array>} Polygon array of 3D world coordinates representing + * the vertices of the geometry. + * @ignore + */ + getVertices3d(transform: Transform): number[][]; + + /** + * Get a flattend array of the 3D world coordinates for the + * triangles filling the geometry. + * @param {Transform} transform - The transform of the image related to the geometry. + * @returns {Array} Flattened array of 3D world coordinates of the triangles. + * @ignore + */ + getTriangles3d(transform: Transform): number[]; + + /** + * Set the value of a vertex in the polygon representation of the geometry. + * @description The polygon is defined to have the first vertex at the + * bottom-left corner with the rest of the vertices following in clockwise order. + * @param {number} index - The index of the vertex to be set. + * @param {Array} value - The new value of the vertex. + * @param {Transform} transform - The transform of the image related to the geometry. + * @ignore + */ + setVertex2d(index: number, value: number[], transform: Transform): void; + + /** + * Finds the polygon pole of inaccessibility, the most distant internal + * point from the polygon outline. + * @param {Array>} points2d - 2d points of outline to triangulate. + * @returns {Array} Point of inaccessibility. + * @ignore + */ + _getPoleOfInaccessibility2d(points2d: number[][]): number[]; + _project(points2d: number[][], transform: Transform): number[][]; + _subsample(points2d: number[][], threshold?: number): number[][]; + + /** + * Triangulates a 2d polygon and returns the triangle + * representation as a flattened array of 3d points. + * @param {Array>} points2d - 2d points of outline to triangulate. + * @param {Array>} points3d - 3d points of outline corresponding to the 2d points. + * @param {Array>>} [holes2d] - 2d points of holes to triangulate. + * @param {Array>>} [holes3d] - 3d points of holes corresponding to the 2d points. + * @returns {Array} Flattened array of 3d points ordered based on the triangles. + * @ignore + */ + _triangulate( + points2d: number[][], + points3d: number[][], + holes2d?: number[][][], + holes3d?: number[][][] + ): number[]; + _triangulateSpherical( + points2d: number[][], + holes2d: number[][][], + transform: Transform + ): number[]; + _unproject( + points2d: number[][], + transform: Transform, + distance?: number + ): number[][]; +} +/** + * @class PolygonGeometry + * @classdesc Represents a polygon geometry in the 2D basic image coordinate system. + * All polygons and holes provided to the constructor needs to be closed. + * @example ```js + * var basicPolygon = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5], [0.5, 0.3]]; + * var polygonGeometry = new PolygonGeometry(basicPolygon); + * ``` + */ +declare class PolygonGeometry extends VertexGeometry { + /** + * Create a polygon geometry. + * @constructor + * @param {Array>} polygon - Array of polygon vertices. Must be closed. + * @param {Array>>} [holes] - Array of arrays of hole vertices. + * Each array of holes vertices must be closed. + * @throws {GeometryTagError} Polygon coordinates must be valid basic coordinates. + */ + constructor(polygon: number[][], holes?: number[][][]): this; + + /** + * Get polygon property. + * @returns {Array>} Closed 2d polygon. + */ + polygon: number[][]; + + /** + * Get holes property. + * @returns {Array>>} Holes of 2d polygon. + */ + holes: number[][][]; + + /** + * Add a vertex to the polygon by appending it after the last vertex. + * @param {Array} vertex - Vertex to add. + * @ignore + */ + addVertex2d(vertex: number[]): void; + + /** + * Get the coordinates of a vertex from the polygon representation of the geometry. + * @param {number} index - Vertex index. + * @returns {Array} Array representing the 2D basic coordinates of the vertex. + * @ignore + */ + getVertex2d(index: number): number[]; + + /** + * Remove a vertex from the polygon. + * @param {number} index - The index of the vertex to remove. + * @ignore + */ + removeVertex2d(index: number): void; + + /** + * @ignore + */ + setVertex2d(index: number, value: number[], transform: Transform): void; + + /** + * @ignore + */ + setCentroid2d(value: number[], transform: Transform): void; + + /** + * @ignore + */ + getPoints3d(transform: Transform): number[][]; + + /** + * @ignore + */ + getVertex3d(index: number, transform: Transform): number[]; + + /** + * @ignore + */ + getVertices2d(): number[][]; + + /** + * @ignore + */ + getVertices3d(transform: Transform): number[][]; + + /** + * Get a polygon representation of the 3D coordinates for the vertices of each hole + * of the geometry. Line segments between vertices will possibly be subsampled + * resulting in a larger number of points than the total number of vertices. + * @param {Transform} transform - The transform of the image related to the geometry. + * @returns {Array>>} Array of hole polygons in 3D world coordinates + * representing the vertices of each hole of the geometry. + * @ignore + */ + getHolePoints3d(transform: Transform): number[][][]; + + /** + * Get a polygon representation of the 3D coordinates for the vertices of each hole + * of the geometry. + * @param {Transform} transform - The transform of the image related to the geometry. + * @returns {Array>>} Array of hole polygons in 3D world coordinates + * representing the vertices of each hole of the geometry. + * @ignore + */ + getHoleVertices3d(transform: Transform): number[][][]; + + /** + * @ignore + */ + getCentroid2d(): number[]; + + /** + * @ignore + */ + getCentroid3d(transform: Transform): number[]; + + /** + * @ignore + */ + get3dDomainTriangles3d(transform: Transform): number[]; + + /** + * @ignore + */ + getTriangles3d(transform: Transform): number[]; + + /** + * @ignore + */ + getPoleOfInaccessibility2d(): number[]; + + /** + * @ignore + */ + getPoleOfInaccessibility3d(transform: Transform): number[]; +} +/** + * @class RectGeometry + * @classdesc Represents a rectangle geometry in the 2D basic image coordinate system. + * @example ```js + * var basicRect = [0.5, 0.3, 0.7, 0.4]; + * var rectGeometry = new RectGeometry(basicRect); + * ``` + */ +declare class RectGeometry extends VertexGeometry { + /** + * Create a rectangle geometry. + * @constructor + * @param {Array} rect - An array representing the top-left and bottom-right + * corners of the rectangle in basic coordinates. Ordered according to [x0, y0, x1, y1]. + * @throws {GeometryTagError} Rectangle coordinates must be valid basic coordinates. + */ + constructor(rect: number[]): this; + + /** + * Get anchor index property. + * @returns {number} Index representing the current anchor property if + * achoring indexing has been initialized. If anchor indexing has not been + * initialized or has been terminated undefined will be returned. + * @ignore + */ + anchorIndex: number; + + /** + * Get inverted property. + * @returns {boolean} Boolean determining whether the rect geometry is + * inverted. For spherical the rect geometrye may be inverted. + * @ignore + */ + inverted: boolean; + + /** + * Get rect property. + * @returns {Array} Array representing the top-left and bottom-right + * corners of the rectangle in basic coordinates. + */ + rect: number[]; + + /** + * Initialize anchor indexing to enable setting opposite vertex. + * @param {number} [index] - The index of the vertex to use as anchor. + * @throws {GeometryTagError} If anchor indexing has already been initialized. + * @throws {GeometryTagError} If index is not valid (0 to 3). + * @ignore + */ + initializeAnchorIndexing(index?: number): void; + + /** + * Terminate anchor indexing to disable setting pposite vertex. + * @ignore + */ + terminateAnchorIndexing(): void; + + /** + * Set the value of the vertex opposite to the anchor in the polygon + * representation of the rectangle. + * @description Setting the opposite vertex may change the anchor index. + * @param {Array} opposite - The new value of the vertex opposite to the anchor. + * @param {Transform} transform - The transform of the image related to the rectangle. + * @throws {GeometryTagError} When anchor indexing has not been initialized. + * @ignore + */ + setOppositeVertex2d(opposite: number[], transform: Transform): void; + + /** + * Set the value of a vertex in the polygon representation of the rectangle. + * @description The polygon is defined to have the first vertex at the + * bottom-left corner with the rest of the vertices following in clockwise order. + * @param {number} index - The index of the vertex to be set. + * @param {Array} value - The new value of the vertex. + * @param {Transform} transform - The transform of the image related to the rectangle. + * @ignore + */ + setVertex2d(index: number, value: number[], transform: Transform): void; + + /** + * @ignore + */ + setCentroid2d(value: number[], transform: Transform): void; + + /** + * Get the 3D coordinates for the vertices of the rectangle with + * interpolated points along the lines. + * @param {Transform} transform - The transform of the image related to + * the rectangle. + * @returns {Array>} Polygon array of 3D world coordinates + * representing the rectangle. + * @ignore + */ + getPoints3d(transform: Transform): number[][]; + + /** + * Get the coordinates of a vertex from the polygon representation of the geometry. + * @description The first vertex represents the bottom-left corner with the rest of + * the vertices following in clockwise order. The method shifts the right side + * coordinates of the rectangle by one unit to ensure that the vertices are ordered + * clockwise. + * @param {number} index - Vertex index. + * @returns {Array} Array representing the 2D basic coordinates of the vertex. + * @ignore + */ + getVertex2d(index: number): number[]; + + /** + * Get the coordinates of a vertex from the polygon representation of the geometry. + * @description The first vertex represents the bottom-left corner with the rest of + * the vertices following in clockwise order. The coordinates will not be shifted + * so they may not appear in clockwise order when layed out on the plane. + * @param {number} index - Vertex index. + * @returns {Array} Array representing the 2D basic coordinates of the vertex. + * @ignore + */ + getNonAdjustedVertex2d(index: number): number[]; + + /** + * Get a vertex from the polygon representation of the 3D coordinates for the + * vertices of the geometry. + * @description The first vertex represents the bottom-left corner with the rest of + * the vertices following in clockwise order. + * @param {number} index - Vertex index. + * @param {Transform} transform - The transform of the image related to the geometry. + * @returns {Array>} Polygon array of 3D world coordinates representing + * the vertices of the geometry. + * @ignore + */ + getVertex3d(index: number, transform: Transform): number[]; + + /** + * Get a polygon representation of the 2D basic coordinates for the vertices of the rectangle. + * @description The first vertex represents the bottom-left corner with the rest of + * the vertices following in clockwise order. + * @returns {Array>} Polygon array of 2D basic coordinates representing + * the rectangle vertices. + * @ignore + */ + getVertices2d(): number[][]; + + /** + * Get a polygon representation of the 3D coordinates for the vertices of the rectangle. + * @description The first vertex represents the bottom-left corner with the rest of + * the vertices following in clockwise order. + * @param {Transform} transform - The transform of the image related to the rectangle. + * @returns {Array>} Polygon array of 3D world coordinates representing + * the rectangle vertices. + * @ignore + */ + getVertices3d(transform: Transform): number[][]; + + /** + * @ignore + */ + getCentroid2d(): number[]; + + /** + * @ignore + */ + getCentroid3d(transform: Transform): number[]; + + /** + * @ignore + */ + getPoleOfInaccessibility2d(): number[]; + + /** + * @ignore + */ + getPoleOfInaccessibility3d(transform: Transform): number[]; + + /** + * @ignore + */ + getTriangles3d(transform: Transform): number[]; + + /** + * Check if a particular bottom-right value is valid according to the current + * rectangle coordinates. + * @param {Array} bottomRight - The bottom-right coordinates to validate + * @returns {boolean} Value indicating whether the provided bottom-right coordinates + * are valid. + * @ignore + */ + validate(bottomRight: number[]): boolean; +} +/** + * @event + */ +export type TagEventType = "click" | "geometry" | "tag"; +/** + * Interface for tag state events. + * @example ```js + * var tag = new OutlineTag({ // tag options }); + * // Set an event listener + * tag.on('tag', function() { + * console.log("A tag event has occurred."); + * }); + * ``` + */ +export interface TagStateEvent { + /** + * The component object that fired the event. + */ + target: Tag; + + /** + * The event type. + */ + type: TagEventType; +} +/** + * @class Tag + * @abstract + * @classdesc Abstract class representing the basic functionality of for a tag. + */ +declare class Tag extends EventEmitter { + _id: string; + _geometry: Geometry; + + /** + * Create a tag. + * @constructor + * @param {string} id + * @param {Geometry} geometry + */ + constructor(id: string, geometry: Geometry): this; + + /** + * Get id property. + * @returns {string} + */ + id: string; + + /** + * Get geometry property. + * @returns {Geometry} The geometry of the tag. + */ + geometry: Geometry; +} +/** + * Interface for the options that define the behavior and + * appearance of the outline tag. + * @interface + */ +export interface ExtremePointTagOptions { + /** + * Indicate whether the tag geometry should be editable. + * @description Polygon tags with two dimensional domain + * are never editable. + * @default false + */ + editable?: boolean; + + /** + * Color for the interior fill as a hexadecimal number. + * @default 0xFFFFFF + */ + fillColor?: number; + + /** + * Opacity of the interior fill between 0 and 1. + * @default 0.3 + */ + fillOpacity?: number; + + /** + * Determines whether vertices should be indicated by points + * when tag is editable. + * @default true + */ + indicateVertices?: boolean; + + /** + * Color for the edge lines as a hexadecimal number. + * @default 0xFFFFFF + */ + lineColor?: number; + + /** + * Opacity of the edge lines on [0, 1]. + * @default 1 + */ + lineOpacity?: number; + + /** + * Line width in pixels. + * @default 1 + */ + lineWidth?: number; +} +/** + * @class ExtremePointTag + * @classdesc Tag holding properties for visualizing a extreme points + * and their outline. + * @example ```js + * var geometry = new PointsGeometry([[0.3, 0.3], [0.5, 0.4]]); + * var tag = new ExtremePointTag( + * "id-1", + * geometry + * { editable: true, lineColor: 0xff0000 }); + * + * tagComponent.add([tag]); + * ``` + */ +declare class ExtremePointTag extends Tag { + /** + * Create an extreme point tag. + * @override + * @constructor + * @param {string} id - Unique identifier of the tag. + * @param {PointsGeometry} geometry - Geometry defining points of tag. + * @param {ExtremePointTagOptions} options - Options defining the visual appearance and + * behavior of the extreme point tag. + */ + constructor( + id: string, + geometry: PointsGeometry, + options?: ExtremePointTagOptions + ): this; + + /** + * Get editable property. + * @returns {boolean} Value indicating if tag is editable. + */ + editable: boolean; + + /** + * Set editable property. + * @param {boolean} + * @fires changed + */ + -editable: boolean; + + /** + * Get fill color property. + * @returns {number} + */ + fillColor: number; + + /** + * Set fill color property. + * @param {number} + * @fires changed + */ + -fillColor: number; + + /** + * Get fill opacity property. + * @returns {number} + */ + fillOpacity: number; + + /** + * Set fill opacity property. + * @param {number} + * @fires changed + */ + -fillOpacity: number; + + /** + * @inheritdoc + */ + geometry: Geometry; + + /** + * Get indicate vertices property. + * @returns {boolean} Value indicating if vertices should be indicated + * when tag is editable. + */ + indicateVertices: boolean; + + /** + * Get line color property. + * @returns {number} + */ + lineColor: number; + + /** + * Get line opacity property. + * @returns {number} + */ + lineOpacity: number; + + /** + * Get line width property. + * @returns {number} + */ + lineWidth: number; + + /** + * Set options for tag. + * @description Sets all the option properties provided and keeps + * the rest of the values as is. + * @param {ExtremePointTagOptions} options - Extreme point tag options + * @fires changed + */ + setOptions(options: ExtremePointTagOptions): void; +} +/** + * Enumeration for tag domains. + * @enum {number} * + * @readonly + * @description Defines where lines between two vertices are treated + * as straight. + * + * Only applicable for polygons. For rectangles lines between + * vertices are always treated as straight in the distorted 2D + * projection and bended in the undistorted 3D space. + */ + +declare var TagDomain: {| + +TwoDimensional: 0, // 0 + +ThreeDimensional: 1, // 1 +|}; + +/** + * Interface for the options that define the behavior and + * appearance of the outline tag. + * @interface + */ +export interface OutlineTagOptions { + /** + * The domain where lines between vertices are treated as straight. + * @description Only applicable for tags that renders polygons. + * + * If the domain is specified as two dimensional, editing of the + * polygon will be disabled. + * @default {TagDomain.TwoDimensional} + */ + domain?: $Values; + + /** + * Indicate whether the tag geometry should be editable. + * @description Polygon tags with two dimensional domain + * are never editable. + * @default false + */ + editable?: boolean; + + /** + * Color for the interior fill as a hexadecimal number. + * @default 0xFFFFFF + */ + fillColor?: number; + + /** + * Opacity of the interior fill between 0 and 1. + * @default 0.3 + */ + fillOpacity?: number; + + /** + * A string referencing the sprite data property to pull from. + * @description Icon is not shown for tags with polygon + * geometries in spherical. + */ + icon?: string; + + /** + * Value determining how the icon will float with respect to its anchor + * position when rendering. + * @default {Alignment.Center} + */ + iconFloat?: $Values; + + /** + * Number representing the index for where to show the icon or + * text for a rectangle geometry. + * @description The default index corresponds to the bottom right corner. + * @default 3 + */ + iconIndex?: number; + + /** + * Determines whether vertices should be indicated by points + * when tag is editable. + * @default true + */ + indicateVertices?: boolean; + + /** + * Color for the edge lines as a hexadecimal number. + * @default 0xFFFFFF + */ + lineColor?: number; + + /** + * Opacity of the edge lines on [0, 1]. + * @default 1 + */ + lineOpacity?: number; + + /** + * Line width in pixels. + * @default 1 + */ + lineWidth?: number; + + /** + * Text shown as label if no icon is provided. + * @description Text is not shown for tags with + * polygon geometries in spherical. + */ + text?: string; + + /** + * Text color as hexadecimal number. + * @default 0xFFFFFF + */ + textColor?: number; +} +/** + * Interface for the options that define the behavior and + * appearance of the spot tag. + * @interface + */ +export interface SpotTagOptions { + /** + * Color for the spot specified as a hexadecimal number. + * @default 0xFFFFFF + */ + color?: number; + + /** + * Indicate whether the tag geometry should be editable. + * @default false + */ + editable?: boolean; + + /** + * A string referencing the sprite data property to pull from. + */ + icon?: string; + + /** + * Text shown as label if no icon is provided. + */ + text?: string; + + /** + * Text color as hexadecimal number. + * @default 0xFFFFFF + */ + textColor?: number; +} +/** + * @class OutlineTag + * @classdesc Tag holding properties for visualizing a geometry outline. + * @example ```js + * var geometry = new RectGeometry([0.3, 0.3, 0.5, 0.4]); + * var tag = new OutlineTag( + * "id-1", + * geometry + * { editable: true, lineColor: 0xff0000 }); + * + * tagComponent.add([tag]); + * ``` + */ +declare class OutlineTag extends Tag { + /** + * Create an outline tag. + * @override + * @constructor + * @param {string} id - Unique identifier of the tag. + * @param {VertexGeometry} geometry - Geometry defining vertices of tag. + * @param {OutlineTagOptions} options - Options defining the visual appearance and + * behavior of the outline tag. + */ + constructor( + id: string, + geometry: VertexGeometry, + options?: OutlineTagOptions + ): this; + + /** + * Get domain property. + * @description Readonly property that can only be set in constructor. + * @returns Value indicating the domain of the tag. + */ + domain: $Values; + + /** + * Get editable property. + * @returns {boolean} Value indicating if tag is editable. + */ + editable: boolean; + + /** + * Set editable property. + * @param {boolean} + * @fires changed + */ + -editable: boolean; + + /** + * Get fill color property. + * @returns {number} + */ + fillColor: number; + + /** + * Set fill color property. + * @param {number} + * @fires changed + */ + -fillColor: number; + + /** + * Get fill opacity property. + * @returns {number} + */ + fillOpacity: number; + + /** + * Set fill opacity property. + * @param {number} + * @fires changed + */ + -fillOpacity: number; + + /** + * @inheritdoc + */ + geometry: Geometry; + + /** + * Get icon property. + * @returns {string} + */ + icon: string; + + /** + * Set icon property. + * @param {string} + * @fires changed + */ + -icon: string; + + /** + * Get icon float property. + * @returns {$Values< + typeof + Alignment>} + */ + iconFloat: $Values; + + /** + * Set icon float property. + * @param {$Values< + typeof + Alignment>} + * @fires changed + */ + -iconFloat: $Values; + + /** + * Get icon index property. + * @returns {number} + */ + iconIndex: number; + + /** + * Set icon index property. + * @param {number} + * @fires changed + */ + -iconIndex: number; + + /** + * Get indicate vertices property. + * @returns {boolean} Value indicating if vertices should be indicated + * when tag is editable. + */ + indicateVertices: boolean; + + /** + * Set indicate vertices property. + * @param {boolean} + * @fires changed + */ + -indicateVertices: boolean; + + /** + * Get line color property. + * @returns {number} + */ + lineColor: number; + + /** + * Set line color property. + * @param {number} + * @fires changed + */ + -lineColor: number; + + /** + * Get line opacity property. + * @returns {number} + */ + lineOpacity: number; + + /** + * Set line opacity property. + * @param {number} + * @fires changed + */ + -lineOpacity: number; + + /** + * Get line width property. + * @returns {number} + */ + lineWidth: number; + + /** + * Set line width property. + * @param {number} + * @fires changed + */ + -lineWidth: number; + + /** + * Get text property. + * @returns {string} + */ + text: string; + + /** + * Set text property. + * @param {string} + * @fires changed + */ + -text: string; + + /** + * Get text color property. + * @returns {number} + */ + textColor: number; + + /** + * Set text color property. + * @param {number} + * @fires changed + */ + -textColor: number; + + /** + * Set options for tag. + * @description Sets all the option properties provided and keeps + * the rest of the values as is. + * @param {OutlineTagOptions} options - Outline tag options + * @fires changed + */ + setOptions(options: OutlineTagOptions): void; +} +/** + * @class SpotTag + * @classdesc Tag holding properties for visualizing the centroid of a geometry. + * @example ```js + * var geometry = new PointGeometry([0.3, 0.3]); + * var tag = new SpotTag( + * "id-1", + * geometry + * { editable: true, color: 0xff0000 }); + * + * tagComponent.add([tag]); + * ``` + */ +declare class SpotTag extends Tag { + _geometry: Geometry; + + /** + * Create a spot tag. + * @override + * @constructor + * @param {string} id + * @param {Geometry} geometry + * @param {IOutlineTagOptions} options - Options defining the visual appearance and + * behavior of the spot tag. + */ + constructor(id: string, geometry: Geometry, options?: SpotTagOptions): this; + + /** + * Get color property. + * @returns {number} The color of the spot as a hexagonal number; + */ + color: number; + + /** + * Set color property. + * @param {number} + * @fires changed + */ + -color: number; + + /** + * Get editable property. + * @returns {boolean} Value indicating if tag is editable. + */ + editable: boolean; + + /** + * Set editable property. + * @param {boolean} + * @fires changed + */ + -editable: number; + + /** + * Get icon property. + * @returns {string} + */ + icon: string; + + /** + * Set icon property. + * @param {string} + * @fires changed + */ + -icon: string; + + /** + * Get text property. + * @returns {string} + */ + text: string; + + /** + * Set text property. + * @param {string} + * @fires changed + */ + -text: string; + + /** + * Get text color property. + * @returns {number} + */ + textColor: number; + + /** + * Set text color property. + * @param {number} + * @fires changed + */ + -textColor: number; + + /** + * Set options for tag. + * @description Sets all the option properties provided and keps + * the rest of the values as is. + * @param {SpotTagOptions} options - Spot tag options + * @fires changed + */ + setOptions(options: SpotTagOptions): void; +} +/** + * @class TagComponent + * @classdesc [object Object],[object Object],[object Object] + * @example ```js + * var viewer = new Viewer({ component: { tag: true } }, ...); + * + * var tagComponent = viewer.getComponent("tag"); + * ``` + */ +declare class TagComponent extends Component { + /** + * @inheritdoc + */ + static componentName: string; + + /** + * @ignore + */ + constructor(name: string, container: Container, navigator: Navigator): this; + + /** + * Add tags to the tag set or replace tags in the tag set. + * @description If a tag already in the set has the same + * id as one of the tags added, the old tag will be removed + * the added tag will take its place. + * @param {Array} tags - Tags to add. + * @example ```js + * tagComponent.add([tag1, tag2]); + * ``` + */ + add(tags: Tag[]): void; + + /** + * Calculate the smallest rectangle containing all the points + * in the points geometry. + * @description The result may be different depending on if the + * current image is an spherical or not. If the + * current image is an spherical the rectangle may + * wrap the horizontal border of the image. + * @returns {Promise>} [object Object],[object Object],[object Object] + */ + calculateRect(geometry: PointsGeometry): Promise; + + /** + * Force the creation of a geometry programatically using its + * current vertices. + * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] + * @fires geometrycreate + * @example ```js + * tagComponent.on("geometrycreate", function(geometry) { + * console.log(geometry); + * }); + * + * tagComponent.create(); + * ``` + */ + create(): void; + + /** + * Change the current tag mode. + * @description Change the tag mode to one of the create modes for creating new geometries. + * @param {$Values< + typeof + TagMode>} mode - New tag mode. + * @fires tagmode + * @example ```js + * tagComponent.changeMode(TagMode.CreateRect); + * ``` + */ + changeMode(mode: $Values): void; + + /** + * Returns the tag in the tag set with the specified id, or + * undefined if the id matches no tag. + * @param {string} tagId - Id of the tag. + * @example ```js + * var tag = tagComponent.get("tagId"); + * ``` + */ + get(tagId: string): Tag; + + /** + * Returns an array of all tags. + * @example ```js + * var tags = tagComponent.getAll(); + * ``` + */ + getAll(): Tag[]; + + /** + * Returns an array of tag ids for tags that contain the specified point. + * @description The pixel point must lie inside the polygon or rectangle + * of an added tag for the tag id to be returned. Tag ids for + * tags that do not have a fill will also be returned if the point is inside + * the geometry of the tag. Tags with point geometries can not be retrieved. + * + * No tag ids will be returned for polygons rendered in cropped spherical or + * rectangles rendered in spherical. + * + * Notice that the pixelPoint argument requires x, y coordinates from pixel space. + * + * With this function, you can use the coordinates provided by mouse + * events to get information out of the tag component. + * + * If no tag at exist the pixel point, an empty array will be returned. + * @param {Array} pixelPoint - Pixel coordinates on the viewer element. + * @returns {Promise>} Promise to the ids of the tags that + * contain the specified pixel point. + * @example ```js + * tagComponent.getTagIdsAt([100, 100]) + * .then((tagIds) => { console.log(tagIds); }); + * ``` + */ + getTagIdsAt(pixelPoint: number[]): Promise; + + /** + * Check if a tag exist in the tag set. + * @param {string} tagId - Id of the tag. + * @example ```js + * var tagExists = tagComponent.has("tagId"); + * ``` + */ + has(tagId: string): boolean; + + /** + * Remove tags with the specified ids from the tag set. + * @param {Array} tagIds - Ids for tags to remove. + * @example ```js + * tagComponent.remove(["id-1", "id-2"]); + * ``` + */ + remove(tagIds: string[]): void; + + /** + * Remove all tags from the tag set. + * @example ```js + * tagComponent.removeAll(); + * ``` + */ + removeAll(): void; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): TagConfiguration; +} +/** + * @class ZoomComponent + * @classdesc Component rendering UI elements used for zooming. + * @example ```js + * var viewer = new Viewer({ ... }); + * + * var zoomComponent = viewer.getComponent("zoom"); + * zoomComponent.configure({ size: ComponentSize.Small }); + * ``` + */ +declare class ZoomComponent extends Component { + static componentName: string; + constructor(name: string, container: Container, navigator: Navigator): this; + _activate(): void; + _deactivate(): void; + _getDefaultConfiguration(): ZoomConfiguration; +} +declare export { + Alignment, + ArgumentMapillaryError, + BearingComponent, + CacheComponent, + CameraControls, + CameraVisualizationMode, + CancelMapillaryError, + CircleMarker, + Component, + ComponentSize, + DataProviderBase, + DirectionComponent, + DragPanHandler, + EventEmitter, + ExtremePointTag, + Geometry, + GeometryProviderBase, + GeometryTagError, + GraphDataProvider, + GraphMapillaryError, + Image, + KeyPlayHandler, + KeySequenceNavigationHandler, + KeySpatialNavigationHandler, + KeyZoomHandler, + KeyboardComponent, + MapillaryError, + Marker, + MarkerComponent, + NavigationDirection, + OriginalPositionMode, + OutlineTag, + PointGeometry, + PointerComponent, + PointsGeometry, + PointVisualizationMode, + PolygonGeometry, + Popup, + PopupComponent, + RectGeometry, + RenderMode, + RenderPass, + S2GeometryProvider, + ScrollZoomHandler, + SequenceComponent, + SimpleMarker, + SliderComponent, + SliderConfigurationMode, + SpatialComponent, + SpotTag, + Tag, + TagComponent, + TagDomain, + TagMode, + TouchZoomHandler, + TransitionMode, + VertexGeometry, + Viewer, + ZoomComponent, + decompress, + ecefToEnu, + ecefToGeodetic, + enuToEcef, + enuToGeodetic, + fetchArrayBuffer, + geodeticToEcef, + geodeticToEnu, + isFallbackSupported, + isSupported, + readMeshPbf, +};