react-photo-sphere-viewer/dist/index.d.ts

A React wrapper for Photo Sphere Viewer, to display 360° panoramas with ease.

import React from "react";
import { Viewer, ViewerConfig, AnimateOptions, CssSize, ExtendedPosition, UpdatableViewerConfig, events, PluginConstructor, NavbarCustomButton, TooltipConfig, Tooltip, Position, Size, PanoramaOptions, utils, AbstractPlugin } from "@photo-sphere-viewer/core";
import "./styles.css";
import "@photo-sphere-viewer/core/index.css";
type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
export interface CubeMapSrc {
    left: string;
    front: string;
    right: string;
    back: string;
    top: string;
    bottom: string;
}
export interface TilesAdapterSrc {
    width: number;
    cols: number;
    rows: number;
    baseUrl: string;
    tileUrl: (col: number, row: number) => string;
}
type PluginEntry = PluginConstructor | [PluginConstructor, Record<string, unknown>];
export type PluginConfig = PluginEntry;
/**
 * Props interface for the Viewer component.
 *
 * @interface
 * @property {string} src - The source of the image to be viewed.
 * @property {boolean | string | Array<string | NavbarCustomButton>} [navbar] - Configuration for the navbar. Can be a boolean, string, or an array of strings or NavbarCustomButton.
 * @property {string} height - The height of the viewer.
 * @property {string} [width] - The width of the viewer.
 * @property {string} [containerClass] - The CSS class for the viewer container.
 * @property {boolean} [littlePlanet] - Enable or disable the little planet effect.
 * @property {boolean | number} [fishEye] - Enable or disable the fisheye effect, or set the fisheye level.
 * @property {boolean} [hideNavbarButton] - Show/hide the button that hides the navbar.
 * @property {Object} [lang] - Language configuration for the viewer. Each property is a string that represents the text for a specific action.
 * @property {Function} [onPositionChange] - Event handler for when the position changes. Receives the latitude, longitude, and the Viewer instance.
 * @property {Function} [onZoomChange] - Event handler for when the zoom level changes. Receives the ZoomUpdatedEvent and the Viewer instance.
 * @property {Function} [onClick] - Event handler for when the viewer is clicked. Receives the ClickEvent and the Viewer instance.
 * @property {Function} [onDblclick] - Event handler for when the viewer is double clicked. Receives the ClickEvent and the Viewer instance.
 * @property {Function} [onReady] - Event handler for when the viewer is ready. Receives the Viewer instance.
 */
export interface Props extends MakeOptional<ViewerConfig, "container"> {
    src: string | CubeMapSrc | TilesAdapterSrc;
    navbar?: boolean | string | Array<string | NavbarCustomButton>;
    height: string;
    width?: string;
    containerClass?: string;
    littlePlanet?: boolean;
    fishEye?: boolean | number;
    hideNavbarButton?: boolean;
    lang?: Record<string, string>;
    plugins?: PluginEntry[];
    onPositionChange?(lat: number, lng: number, instance: Viewer): void;
    onZoomChange?(data: events.ZoomUpdatedEvent & {
        type: "zoom-updated";
    }, instance: Viewer): void;
    onClick?(data: events.ClickEvent & {
        type: "click";
    }, instance: Viewer): void;
    onDblclick?(data: events.ClickEvent & {
        type: "dblclick";
    }, instance: Viewer): void;
    onReady?(instance: Viewer): void;
}
/**
 * Interface for the Viewer API.
 *
 * @interface
 * @property {Function} animate - Starts an animation. Receives an object of AnimateOptions.
 * @property {Function} destroy - Destroys the viewer.
 * @property {Function} createTooltip - Creates a tooltip. Receives a TooltipConfig object.
 * @property {Function} needsContinuousUpdate - Enables or disables continuous updates. Receives a boolean.
 * @property {Function} observeObjects - Starts observing objects. Receives a string key.
 * @property {Function} unobserveObjects - Stops observing objects. Receives a string key.
 * @property {Function} setCursor - Sets the cursor. Receives a string.
 * @property {Function} stopAnimation - Stops the current animation. Returns a Promise.
 * @property {Function} rotate - Rotates the viewer. Receives an ExtendedPosition object.
 * @property {Function} setOption - Sets a single option. Receives an option key and a value.
 * @property {Function} setOptions - Sets multiple options. Receives an object of options.
 * @property {Function} getCurrentNavbar - Returns the current navbar.
 * @property {Function} zoom - Sets the zoom level. Receives a number.
 * @property {Function} zoomIn - Increases the zoom level. Receives a number.
 * @property {Function} zoomOut - Decreases the zoom level. Receives a number.
 * @property {Function} resize - Resizes the viewer. Receives a CssSize object.
 * @property {Function} enterFullscreen - Enters fullscreen mode.
 * @property {Function} exitFullscreen - Exits fullscreen mode.
 * @property {Function} toggleFullscreen - Toggles fullscreen mode.
 * @property {Function} isFullscreenEnabled - Returns whether fullscreen is enabled.
 * @property {Function} getPlugin - Returns a plugin. Receives a plugin ID or a PluginConstructor.
 * @property {Function} getPosition - Returns the current position.
 * @property {Function} getZoomLevel - Returns the current zoom level.
 * @property {Function} getSize - Returns the current size.
 * @property {Function} needsUpdate - Updates the viewer.
 * @property {Function} autoSize - Sets the size to auto.
 * @property {Function} setPanorama - Sets the panorama. Receives a path and an optional PanoramaOptions object. Returns a Promise.
 * @property {Function} showError - Shows an error message. Receives a string.
 * @property {Function} hideError - Hides the error message.
 * @property {Function} startKeyboardControl - Starts keyboard control.
 * @property {Function} stopKeyboardControl - Stops keyboard control.
 */
export interface ViewerAPI {
    animate(options: AnimateOptions): utils.Animation<any>;
    destroy(): void;
    createTooltip(config: TooltipConfig): Tooltip;
    needsContinuousUpdate(enabled: boolean): void;
    observeObjects(userDataKey: string): void;
    unobserveObjects(userDataKey: string): void;
    setCursor(cursor: string): void;
    stopAnimation(): PromiseLike<any>;
    rotate(position: ExtendedPosition): void;
    setOption<T extends keyof UpdatableViewerConfig>(option: T, value: UpdatableViewerConfig[T]): void;
    setOptions(options: Partial<UpdatableViewerConfig>): void;
    getCurrentNavbar(): (string | object)[] | void;
    zoom(value: number): void;
    zoomIn(step: number): void;
    zoomOut(step: number): void;
    resize(size: CssSize): void;
    enterFullscreen(): void;
    exitFullscreen(): void;
    toggleFullscreen(): void;
    isFullscreenEnabled(): boolean | void;
    /**
     * Returns the instance of a plugin if it exists
     * @example By plugin identifier
     * ```js
     * viewer.getPlugin('markers')
     * ```
     * @example By plugin class with TypeScript support
     * ```ts
     * viewer.getPlugin<MarkersPlugin>(MarkersPlugin)
     * ```
     */
    getPlugin<T extends AbstractPlugin<never>>(pluginId: string | PluginConstructor): T;
    getPosition(): Position;
    getZoomLevel(): number;
    getSize(): Size;
    needsUpdate(): void;
    autoSize(): void;
    setPanorama(path: any, options?: PanoramaOptions): Promise<boolean>;
    showError(message: string): void;
    hideError(): void;
    startKeyboardControl(): void;
    stopKeyboardControl(): void;
}
declare const ReactPhotoSphereViewer: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<ViewerAPI>>;
export { ReactPhotoSphereViewer };