@egjs/view360/declaration/PanoViewer/PanoViewer.d.ts

360 integrated viewing solution from inside-out view to outside-in view. It provides user-friendly service by rotating 360 degrees through various user interaction such as motion sensor and touch.

import Component from "@egjs/component";
import { CubemapConfig, ValueOf } from "../types/internal";
import { AnimationEndEvent, ReadyEvent, ViewChangeEvent, ErrorEvent } from "../types/event";
import { GYRO_MODE, PROJECTION_TYPE, STEREO_FORMAT } from "./consts";
export interface PanoViewerOptions {
    image: string | HTMLElement;
    video: string | HTMLElement;
    projectionType: ValueOf<typeof PROJECTION_TYPE>;
    cubemapConfig: Partial<CubemapConfig>;
    stereoFormat: ValueOf<typeof STEREO_FORMAT>;
    width: number;
    height: number;
    yaw: number;
    pitch: number;
    fov: number;
    showPolePoint: boolean;
    useZoom: boolean;
    useKeyboard: boolean;
    gyroMode: ValueOf<typeof GYRO_MODE>;
    yawRange: number[];
    pitchRange: number[];
    fovRange: number[];
    touchDirection: ValueOf<typeof PanoViewer.TOUCH_DIRECTION>;
    canvasClass: string;
}
export interface PanoViewerEvent {
    ready: ReadyEvent;
    viewChange: ViewChangeEvent;
    animationEnd: AnimationEndEvent<PanoViewer>;
    error: ErrorEvent;
}
declare class PanoViewer extends Component<PanoViewerEvent> {
    static isSupported(): boolean;
    static isWebGLAvailable(): boolean;
    static isGyroSensorAvailable(callback: (isAvailable: boolean) => any): void;
    private static _isValidTouchDirection;
    static VERSION: string;
    static ERROR_TYPE: {
        INVALID_DEVICE: number;
        NO_WEBGL: number;
        FAIL_IMAGE_LOAD: number;
        FAIL_BIND_TEXTURE: number;
        INVALID_RESOURCE: number;
        RENDERING_CONTEXT_LOST: number;
    };
    static EVENTS: {
        READY: "ready";
        VIEW_CHANGE: "viewChange";
        ANIMATION_END: "animationEnd";
        ERROR: "error";
    };
    static PROJECTION_TYPE: {
        EQUIRECTANGULAR: "equirectangular";
        CUBEMAP: "cubemap";
        CUBESTRIP: "cubestrip";
        PANORAMA: "panorama";
        STEREOSCOPIC_EQUI: "stereoequi";
    };
    static GYRO_MODE: {
        NONE: "none";
        YAWPITCH: "yawPitch";
        VR: "VR";
    };
    static ProjectionType: {
        EQUIRECTANGULAR: "equirectangular";
        CUBEMAP: "cubemap";
        CUBESTRIP: "cubestrip";
        PANORAMA: "panorama";
        STEREOSCOPIC_EQUI: "stereoequi";
    };
    static STEREO_FORMAT: {
        TOP_BOTTOM: "3dv";
        LEFT_RIGHT: "3dh";
        NONE: "";
    };
    static TOUCH_DIRECTION: {
        NONE: number;
        YAW: number;
        PITCH: number;
        ALL: number;
    };
    private _container;
    private _image;
    private _isVideo;
    private _projectionType;
    private _cubemapConfig;
    private _stereoFormat;
    private _width;
    private _height;
    private _yaw;
    private _pitch;
    private _fov;
    private _gyroMode;
    private _quaternion;
    private _aspectRatio;
    private _isReady;
    private _canvasClass;
    private _photoSphereRenderer;
    private _yawPitchControl;
    constructor(container: HTMLElement, options?: Partial<PanoViewerOptions>);
    getVideo(): HTMLVideoElement;
    setVideo(video: string | HTMLElement | {
        type: string;
        src: string;
    }, param?: Partial<{
        projectionType: PanoViewer["_projectionType"];
        cubemapConfig: PanoViewer["_cubemapConfig"];
        stereoFormat: PanoViewer["_stereoFormat"];
    }>): this;
    getImage(): HTMLImageElement | HTMLVideoElement | HTMLImageElement[];
    setImage(image: string | HTMLElement | {
        src: string;
        type: string;
    }, param?: Partial<{
        projectionType: PanoViewer["_projectionType"];
        cubemapConfig: PanoViewer["_cubemapConfig"];
        stereoFormat: PanoViewer["_stereoFormat"];
        isVideo: boolean;
    }>): this;
    keepUpdate(doUpdate: boolean): this;
    getProjectionType(): ValueOf<{
        EQUIRECTANGULAR: "equirectangular";
        CUBEMAP: "cubemap";
        CUBESTRIP: "cubestrip";
        PANORAMA: "panorama";
        STEREOSCOPIC_EQUI: "stereoequi";
    }>;
    enableSensor(): any;
    disableSensor(): this;
    enterVR(options?: {
        requiredFeatures?: any[];
        optionalFeatures?: any[];
        [key: string]: any;
    }): globalThis.Promise<string>;
    exitVR(): this;
    setUseZoom(useZoom: boolean): this;
    setUseKeyboard(useKeyboard: boolean): this;
    setGyroMode(gyroMode: PanoViewer["_gyroMode"]): this;
    setFovRange(range: number[]): this;
    getFovRange(): [number, number];
    updateViewportDimensions(size?: Partial<{
        width: number;
        height: number;
    }>): this;
    getFov(): number;
    getYaw(): number;
    getPitch(): number;
    getYawRange(): [number, number];
    getPitchRange(): [number, number];
    setYawRange(yawRange: number[]): this;
    setPitchRange(pitchRange: number[]): this;
    setShowPolePoint(showPolePoint: boolean): this;
    lookAt(orientation: Partial<{
        yaw: number;
        pitch: number;
        fov: number;
    }>, duration?: number): this;
    setTouchDirection(direction: number): this;
    getTouchDirection(): number;
    destroy(): this;
    private _initRenderer;
    private _updateYawPitchIfNeeded;
    private _bindRendererHandler;
    private _initYawPitchControl;
    private _activate;
    private _deactivate;
}
export default PanoViewer;