UNPKG

@photo-sphere-viewer/core

Version:

A JavaScript library to display 360° panoramas

1,693 lines (1,671 loc) 80.4 kB
import { Mesh, Vector3, Euler, WebGLRenderer, Raycaster, Vector2, Intersection, Object3D, Texture, WebGLRendererParameters, SphereGeometry, MeshBasicMaterial } from 'three'; /** * Minimum duration of the animations created with {@link Viewer#animate} */ declare const ANIMATION_MIN_DURATION = 500; /** * Number of pixels below which a mouse move will be considered as a click */ declare const MOVE_THRESHOLD = 4; /** * Delay in milliseconds between two clicks to consider a double click */ declare const DBLCLICK_DELAY = 300; /** * Delay in milliseconds to emulate a long touch */ declare const LONGTOUCH_DELAY = 500; /** * Delay in milliseconds to for the two fingers overlay to appear */ declare const TWOFINGERSOVERLAY_DELAY = 100; /** * Duration in milliseconds of the "ctrl zoom" overlay */ declare const CTRLZOOM_TIMEOUT = 2000; /** * Radius of the SphereGeometry, Half-length of the BoxGeometry */ declare const SPHERE_RADIUS = 10; /** * Property name added to viewer element */ declare const VIEWER_DATA = "photoSphereViewer"; /** * CSS class that must be applied on elements whose mouse events must not bubble to the viewer itself */ declare const CAPTURE_EVENTS_CLASS = "psv--capture-event"; /** * Actions available for {@link ViewerConfig['keyboardActions']} configuration */ declare enum ACTIONS { ROTATE_UP = "ROTATE_UP", ROTATE_DOWN = "ROTATE_DOWN", ROTATE_RIGHT = "ROTATE_RIGHT", ROTATE_LEFT = "ROTATE_LEFT", ZOOM_IN = "ZOOM_IN", ZOOM_OUT = "ZOOM_OUT" } /** * Subset of keyboard codes */ declare const KEY_CODES: { Enter: string; Control: string; Escape: string; Space: string; PageUp: string; PageDown: string; ArrowLeft: string; ArrowUp: string; ArrowRight: string; ArrowDown: string; Delete: string; Plus: string; Minus: string; }; /** * Collection of SVG icons */ declare const ICONS: { arrow: string; close: string; download: string; fullscreenIn: string; fullscreenOut: string; info: string; menu: string; zoomIn: string; zoomOut: string; }; /** * Collection of easing functions * @see https://gist.github.com/frederickk/6165768 */ declare const EASINGS: Record<string, (t: number) => number>; type constants_ACTIONS = ACTIONS; declare const constants_ACTIONS: typeof ACTIONS; declare const constants_ANIMATION_MIN_DURATION: typeof ANIMATION_MIN_DURATION; declare const constants_CAPTURE_EVENTS_CLASS: typeof CAPTURE_EVENTS_CLASS; declare const constants_CTRLZOOM_TIMEOUT: typeof CTRLZOOM_TIMEOUT; declare const constants_DBLCLICK_DELAY: typeof DBLCLICK_DELAY; declare const constants_EASINGS: typeof EASINGS; declare const constants_ICONS: typeof ICONS; declare const constants_KEY_CODES: typeof KEY_CODES; declare const constants_LONGTOUCH_DELAY: typeof LONGTOUCH_DELAY; declare const constants_MOVE_THRESHOLD: typeof MOVE_THRESHOLD; declare const constants_SPHERE_RADIUS: typeof SPHERE_RADIUS; declare const constants_TWOFINGERSOVERLAY_DELAY: typeof TWOFINGERSOVERLAY_DELAY; declare const constants_VIEWER_DATA: typeof VIEWER_DATA; declare namespace constants { export { constants_ACTIONS as ACTIONS, constants_ANIMATION_MIN_DURATION as ANIMATION_MIN_DURATION, constants_CAPTURE_EVENTS_CLASS as CAPTURE_EVENTS_CLASS, constants_CTRLZOOM_TIMEOUT as CTRLZOOM_TIMEOUT, constants_DBLCLICK_DELAY as DBLCLICK_DELAY, constants_EASINGS as EASINGS, constants_ICONS as ICONS, constants_KEY_CODES as KEY_CODES, constants_LONGTOUCH_DELAY as LONGTOUCH_DELAY, constants_MOVE_THRESHOLD as MOVE_THRESHOLD, constants_SPHERE_RADIUS as SPHERE_RADIUS, constants_TWOFINGERSOVERLAY_DELAY as TWOFINGERSOVERLAY_DELAY, constants_VIEWER_DATA as VIEWER_DATA }; } /** * Base class for UI components */ declare abstract class AbstractComponent { protected readonly parent: Viewer | AbstractComponent; /** * Reference to main controller */ protected readonly viewer: Viewer; /** * Container element */ readonly container: HTMLElement; constructor(parent: Viewer | AbstractComponent, config: { className?: string; tagName?: string; }); /** * Destroys the component */ destroy(): void; /** * Displays or hides the component */ toggle(visible?: boolean): void; /** * Hides the component */ hide(options?: any): void; /** * Displays the component */ show(options?: any): void; /** * Checks if the component is visible */ isVisible(): boolean; } /** * Loader component */ declare class Loader extends AbstractComponent { private readonly loader; private readonly canvas; private readonly size; private readonly border; private readonly thickness; private readonly color; private readonly textColor; /** * Sets the loader progression */ setProgress(value: number): void; /** * Animates the loader with an unknown state */ showUndefined(): void; private __updateContent; } /** * Configuration for {@link AbstractButton} */ type ButtonConfig = { id?: string; tagName?: string; className?: string; title?: string; /** * if the button has an mouse hover effect * @default false */ hoverScale?: boolean; /** * if the button can be moved to menu when the navbar is too small * @default false */ collapsable?: boolean; /** * if the button is accessible with the keyboard * @default true */ tabbable?: boolean; /** * icon of the button */ icon?: string; /** * override icon when the button is active */ iconActive?: string; }; /** * Base class for navbar buttons */ declare abstract class AbstractButton extends AbstractComponent { /** * Unique identifier of the button */ static readonly id: string; /** * Identifier to declare a group of buttons */ static readonly groupId?: string; /** * Internal properties */ protected readonly state: { visible: boolean; enabled: boolean; supported: boolean; collapsed: boolean; active: boolean; width: number; }; protected readonly config: ButtonConfig; get id(): string; get title(): string; get content(): string; get width(): number; get collapsable(): boolean; constructor(navbar: Navbar, config: ButtonConfig); /** * Action when the button is clicked */ abstract onClick(): void; show(refresh?: boolean): void; hide(refresh?: boolean): void; /** * Checks if the button can be displayed */ isSupported(): boolean | ResolvableBoolean; /** * Changes the active state of the button */ toggleActive(active?: boolean): void; /** * Disables the button */ disable(): void; /** * Enables the button */ enable(): void; /** * Collapses the button in the navbar menu */ collapse(): void; /** * Uncollapses the button from the navbar menu */ uncollapse(): void; private __setIcon; } type ButtonConstructor = (new (navbar: Navbar) => AbstractButton) & typeof AbstractButton; /** * Register a new button available for all viewers * @param button * @param [defaultPosition] If provided the default configuration of the navbar will be modified. * Possible values are : * - `start` * - `end` * - `[id]:left` * - `[id]:right` * @throws {@link PSVError} if the button constructor has no "id" */ declare function registerButton(button: ButtonConstructor, defaultPosition?: string): void; /** * Navigation bar component */ declare class Navbar extends AbstractComponent { /** * Shows the navbar */ show(): void; /** * Hides the navbar */ hide(): void; /** * Change the buttons visible on the navbar */ setButtons(buttons: ParsedViewerConfig['navbar']): void; /** * Changes the navbar caption */ setCaption(html: string | null): void; /** * Returns a button by its identifier */ getButton(id: string, warnNotFound?: boolean): AbstractButton; /** * Try to focus a button, will focus the first button if the requested button does not exist. */ focusButton(id: string): void; } /** * Configuration for {@link Notification.show} */ type NotificationConfig = { /** * unique identifier to use with {@link Notification.hide} and {@link Notification.isVisible} */ id?: string; /** * notification content */ content: string; /** * automatically hide the notification after X milliseconds */ timeout?: number; }; /** * Notification component */ declare class Notification extends AbstractComponent { private readonly content; /** * Checks if the notification is visible */ isVisible(id?: string): boolean; /** * Displays a notification on the viewer * * @example * viewer.showNotification({ content: 'Hello world', timeout: 5000 }) * @example * viewer.showNotification('Hello world') */ show(config: string | NotificationConfig): void; /** * Hides the notification */ hide(id?: string): void; } /** * Configuration for {@link Overlay.show} */ type OverlayConfig = { /** * unique identifier to use with {@link Overlay.hide} and {@link Overlay.isVisible} */ id?: string; /** * SVG image/icon displayed above the text */ image?: string; /** * main message */ title: string; /** * secondary message */ text?: string; /** * if the user can hide the overlay by clicking * @default true */ dismissible?: boolean; }; /** * Overlay component */ declare class Overlay extends AbstractComponent { private readonly image; private readonly title; private readonly text; /** * Checks if the overlay is visible */ isVisible(id?: string): boolean; /** * Displays an overlay on the viewer */ show(config: string | OverlayConfig): void; /** * Hides the overlay */ hide(id?: string): void; } /** * Configuration for {@link Panel.show} */ type PanelConfig = { /** * unique identifier to use with {@link Panel.hide} and {@link Panel.isVisible} and to store the width */ id?: string; /** * HTML content of the panel */ content: string; /** * remove the default margins * @default false */ noMargin?: boolean; /** * initial width */ width?: string; /** * called when the user clicks inside the panel or presses the Enter key while an element focused */ clickHandler?: (target: HTMLElement) => void; }; /** * Panel component */ declare class Panel extends AbstractComponent { private readonly content; /** * Checks if the panel is visible */ isVisible(id?: string): boolean; /** * Shows the panel */ show(config: string | PanelConfig): void; /** * Hides the panel */ hide(id?: string): void; private __onMouseDown; private __onTouchStart; private __onMouseUp; private __onTouchEnd; private __onMouseMove; private __onTouchMove; private __onKeyPress; private __startResize; private __resize; } /** * Object defining the tooltip position */ type TooltipPosition = { /** * Position of the tip of the arrow of the tooltip, in pixels */ top: number; /** * Position of the tip of the arrow of the tooltip, in pixels */ left: number; /** * Tooltip position toward it's arrow tip. * Accepted values are combinations of `top`, `center`, `bottom` and `left`, `center`, `right`. */ position?: string | [string, string]; }; /** * Configuration for {@link Viewer.createTooltip} */ type TooltipConfig = TooltipPosition & { /** * HTML content of the tooltip */ content: string; /** * Additional CSS class added to the tooltip */ className?: string; /** * CSS properties added to the tooltip */ style?: Record<string, string>; /** * Userdata associated to the tooltip */ data?: any; }; /** * Tooltip component * Never instanciate tooltips directly use {@link Viewer#createTooltip} instead */ declare class Tooltip extends AbstractComponent { private readonly content; private readonly arrow; /** * Updates the content of the tooltip, optionally with a new position * @throws {@link PSVError} if the configuration is invalid */ update(content: string, config?: TooltipPosition): void; /** * Moves the tooltip to a new position * @throws {@link PSVError} if the configuration is invalid */ move(config: TooltipPosition): void; /** * Hides the tooltip */ hide(): void; /** * Finalize transition */ private __onTransitionEnd; /** * Computes the position of the tooltip and its arrow */ private __computeTooltipPosition; /** * If the tooltip contains images, recompute its size once they are loaded */ private __waitImages; } /** * Base class for events dispatched by {@link TypedEventTarget} * @template TTarget type of the event target */ declare abstract class TypedEvent<TTarget extends TypedEventTarget<any>> extends Event { static readonly type: string; target: TTarget; constructor(type: string, cancelable?: boolean); } /** * Decorator for EventTarget allowing to strongly type events and listeners * @see https://rjzaworski.com/2021/06/event-target-with-typescript * @template TEvents union of dispatched events */ declare class TypedEventTarget<TEvents extends TypedEvent<any>> extends EventTarget { dispatchEvent(e: TEvents): boolean; /** * @template T the name of event * @template E the class of the event */ addEventListener<T extends TEvents['type'], E extends TEvents & { type: T; }>(type: T, callback: ((e: E) => void) | EventListenerObject | null, options?: AddEventListenerOptions | boolean): void; /** * @template T the name of event * @template E the class of the event */ removeEventListener<T extends TEvents['type'], E extends TEvents & { type: T; }>(type: TEvents['type'], callback: ((e: E) => void) | EventListenerObject | null, options?: EventListenerOptions | boolean): void; } /** * Base class for all events dispatched by {@link Viewer} */ declare abstract class ViewerEvent extends TypedEvent<Viewer> { } /** * @event Triggered before an animation, can be cancelled */ declare class BeforeAnimateEvent extends ViewerEvent { /** target position, can be modified */ position: Position | undefined; /** target zoom level, can be modified */ zoomLevel: number | undefined; static readonly type = "before-animate"; type: 'before-animate'; } /** * @event Triggered before a render */ declare class BeforeRenderEvent extends ViewerEvent { /** time provided by requestAnimationFrame */ readonly timestamp: number; /** time elapsed since the previous frame */ readonly elapsed: number; static readonly type = "before-render"; type: 'before-render'; } /** * @event Triggered before a rotate operation, can be cancelled */ declare class BeforeRotateEvent extends ViewerEvent { /** target position, can be modified */ position: Position; static readonly type = "before-rotate"; type: 'before-rotate'; } /** * @event Triggered when the user clicks on the viewer (everywhere excluding the navbar and the side panel) */ declare class ClickEvent extends ViewerEvent { readonly data: ClickData; static readonly type = "click"; type: 'click'; } /** * @event Triggered when some options are changed */ declare class ConfigChangedEvent extends ViewerEvent { readonly options: Array<keyof ViewerConfig>; static readonly type = "config-changed"; type: 'config-changed'; /** * Checks if at least one of the `options` has been modified */ containsOptions(...options: Array<keyof ViewerConfig>): boolean; } /** * @event Triggered when the user double clicks on the viewer. The simple `click` event is always fired before `dblclick`. */ declare class DoubleClickEvent extends ViewerEvent { readonly data: ClickData; static readonly type = "dblclick"; type: 'dblclick'; } /** * @event Triggered when the fullscreen is enabled/disabled */ declare class FullscreenEvent extends ViewerEvent { readonly fullscreenEnabled: boolean; static readonly type = "fullscreen"; type: 'fullscreen'; } /** * @event Triggered when the notification is hidden */ declare class HideNotificationEvent extends ViewerEvent { readonly notificationId?: string; static readonly type = "hide-notification"; type: 'hide-notification'; } /** * @event Triggered when the overlay is hidden */ declare class HideOverlayEvent extends ViewerEvent { readonly overlayId?: string; static readonly type = "hide-overlay"; type: 'hide-overlay'; } /** * @event Triggered when the panel is hidden */ declare class HidePanelEvent extends ViewerEvent { readonly panelId?: string; static readonly type = "hide-panel"; type: 'hide-panel'; } /** * @event Triggered when a tooltip is hidden */ declare class HideTooltipEvent extends ViewerEvent { /** Userdata associated to the tooltip */ readonly tooltipData: TooltipConfig['data']; static readonly type = "hide-tooltip"; type: 'hide-tooltip'; } /** * @event Triggered when a key is pressed, can be cancelled */ declare class KeypressEvent extends ViewerEvent { readonly key: string; readonly originalEvent: KeyboardEvent; static readonly type = "key-press"; type: 'key-press'; } /** * @event Triggered when the loader value changes */ declare class LoadProgressEvent extends ViewerEvent { readonly progress: number; static readonly type = "load-progress"; type: 'load-progress'; } /** * @event Triggered when a panorama image starts loading */ declare class PanoramaLoadEvent extends ViewerEvent { readonly panorama: any; static readonly type = "panorama-load"; type: 'panorama-load'; } /** * @event Triggered when a panorama image has been loaded */ declare class PanoramaLoadedEvent extends ViewerEvent { readonly data: TextureData; static readonly type = "panorama-loaded"; type: 'panorama-loaded'; } /** * @event Triggered when an error occured when loading the panorama */ declare class PanoramaErrorEvent extends ViewerEvent { readonly panorama: any; readonly error: Error; static readonly type = "panorama-error"; type: 'panorama-error'; } /** * @event Triggered when the transition to a new panorama is done (complete or not) */ declare class TransitionDoneEvent extends ViewerEvent { readonly completed: boolean; static readonly type = "transition-done"; type: 'transition-done'; } /** * @event Triggered when the view angles change */ declare class PositionUpdatedEvent extends ViewerEvent { readonly position: Position; static readonly type = "position-updated"; type: 'position-updated'; } /** * @event Triggered when camera roll change */ declare class RollUpdatedEvent extends ViewerEvent { readonly roll: number; static readonly type = "roll-updated"; type: 'roll-updated'; } /** * @event Triggered when the panorama image has been loaded and the viewer is ready to perform the first render */ declare class ReadyEvent extends ViewerEvent { static readonly type = "ready"; type: 'ready'; } /** * @event Triggered on each viewer render */ declare class RenderEvent extends ViewerEvent { static readonly type = "render"; type: 'render'; } /** * @event Triggered when the notification is shown */ declare class ShowNotificationEvent extends ViewerEvent { readonly notificationId?: string; static readonly type = "show-notification"; type: 'show-notification'; } /** * @event Triggered when the overlay is shown */ declare class ShowOverlayEvent extends ViewerEvent { readonly overlayId?: string; static readonly type = "show-overlay"; type: 'show-overlay'; } /** * @event Triggered when the panel is shown */ declare class ShowPanelEvent extends ViewerEvent { readonly panelId?: string; static readonly type = "show-panel"; type: 'show-panel'; } /** * @event Triggered when a tooltip is shown */ declare class ShowTooltipEvent extends ViewerEvent { /** Instance of the tooltip */ readonly tooltip: Tooltip; /** Userdata associated to the tooltip */ readonly tooltipData?: TooltipConfig['data']; static readonly type = "show-tooltip"; type: 'show-tooltip'; } /** * @event Triggered when the viewer size changes */ declare class SizeUpdatedEvent extends ViewerEvent { readonly size: Size; static readonly type = "size-updated"; type: 'size-updated'; } /** * @event Triggered when all current animations are stopped */ declare class StopAllEvent extends ViewerEvent { static readonly type = "stop-all"; type: 'stop-all'; } /** * @event Triggered when the viewer zoom changes */ declare class ZoomUpdatedEvent extends ViewerEvent { readonly zoomLevel: number; static readonly type = "zoom-updated"; type: 'zoom-updated'; } /** * Base class for events on three.js objects * * Note: {@link Viewer#observeObjects} must be called for these events to be dispatched */ declare abstract class ObjectEvent extends ViewerEvent { readonly originalEvent: MouseEvent; readonly object: Mesh<any, any>; readonly viewerPoint: Point; readonly userDataKey: string; } /** * @event Triggered when the cursor enters an object in the scene * * Note: {@link Viewer#observeObjects} must be called for this event to be dispatched */ declare class ObjectEnterEvent extends ObjectEvent { static readonly type = "enter-object"; type: 'enter-object'; } /** * @event Triggered when the cursor leaves an object in the scene * * Note: {@link Viewer#observeObjects} must be called for this event to be dispatched */ declare class ObjectLeaveEvent extends ObjectEvent { static readonly type = "leave-object"; type: 'leave-object'; } /** * @event Triggered when the cursor moves over an object in the scene * * Note: {@link Viewer#observeObjects} must be called for this event to be dispatched */ declare class ObjectHoverEvent extends ObjectEvent { static readonly type = "hover-object"; type: 'hover-object'; } type ViewerEvents = BeforeAnimateEvent | BeforeRenderEvent | BeforeRotateEvent | ClickEvent | ConfigChangedEvent | DoubleClickEvent | FullscreenEvent | HideNotificationEvent | HideOverlayEvent | HidePanelEvent | HideTooltipEvent | KeypressEvent | LoadProgressEvent | PanoramaLoadEvent | PanoramaLoadedEvent | PanoramaErrorEvent | TransitionDoneEvent | PositionUpdatedEvent | RollUpdatedEvent | ReadyEvent | RenderEvent | ShowNotificationEvent | ShowOverlayEvent | ShowPanelEvent | ShowTooltipEvent | SizeUpdatedEvent | StopAllEvent | ZoomUpdatedEvent | ObjectEnterEvent | ObjectLeaveEvent | ObjectHoverEvent; type events_BeforeAnimateEvent = BeforeAnimateEvent; declare const events_BeforeAnimateEvent: typeof BeforeAnimateEvent; type events_BeforeRenderEvent = BeforeRenderEvent; declare const events_BeforeRenderEvent: typeof BeforeRenderEvent; type events_BeforeRotateEvent = BeforeRotateEvent; declare const events_BeforeRotateEvent: typeof BeforeRotateEvent; type events_ClickEvent = ClickEvent; declare const events_ClickEvent: typeof ClickEvent; type events_ConfigChangedEvent = ConfigChangedEvent; declare const events_ConfigChangedEvent: typeof ConfigChangedEvent; type events_DoubleClickEvent = DoubleClickEvent; declare const events_DoubleClickEvent: typeof DoubleClickEvent; type events_FullscreenEvent = FullscreenEvent; declare const events_FullscreenEvent: typeof FullscreenEvent; type events_HideNotificationEvent = HideNotificationEvent; declare const events_HideNotificationEvent: typeof HideNotificationEvent; type events_HideOverlayEvent = HideOverlayEvent; declare const events_HideOverlayEvent: typeof HideOverlayEvent; type events_HidePanelEvent = HidePanelEvent; declare const events_HidePanelEvent: typeof HidePanelEvent; type events_HideTooltipEvent = HideTooltipEvent; declare const events_HideTooltipEvent: typeof HideTooltipEvent; type events_KeypressEvent = KeypressEvent; declare const events_KeypressEvent: typeof KeypressEvent; type events_LoadProgressEvent = LoadProgressEvent; declare const events_LoadProgressEvent: typeof LoadProgressEvent; type events_ObjectEnterEvent = ObjectEnterEvent; declare const events_ObjectEnterEvent: typeof ObjectEnterEvent; type events_ObjectEvent = ObjectEvent; declare const events_ObjectEvent: typeof ObjectEvent; type events_ObjectHoverEvent = ObjectHoverEvent; declare const events_ObjectHoverEvent: typeof ObjectHoverEvent; type events_ObjectLeaveEvent = ObjectLeaveEvent; declare const events_ObjectLeaveEvent: typeof ObjectLeaveEvent; type events_PanoramaErrorEvent = PanoramaErrorEvent; declare const events_PanoramaErrorEvent: typeof PanoramaErrorEvent; type events_PanoramaLoadEvent = PanoramaLoadEvent; declare const events_PanoramaLoadEvent: typeof PanoramaLoadEvent; type events_PanoramaLoadedEvent = PanoramaLoadedEvent; declare const events_PanoramaLoadedEvent: typeof PanoramaLoadedEvent; type events_PositionUpdatedEvent = PositionUpdatedEvent; declare const events_PositionUpdatedEvent: typeof PositionUpdatedEvent; type events_ReadyEvent = ReadyEvent; declare const events_ReadyEvent: typeof ReadyEvent; type events_RenderEvent = RenderEvent; declare const events_RenderEvent: typeof RenderEvent; type events_RollUpdatedEvent = RollUpdatedEvent; declare const events_RollUpdatedEvent: typeof RollUpdatedEvent; type events_ShowNotificationEvent = ShowNotificationEvent; declare const events_ShowNotificationEvent: typeof ShowNotificationEvent; type events_ShowOverlayEvent = ShowOverlayEvent; declare const events_ShowOverlayEvent: typeof ShowOverlayEvent; type events_ShowPanelEvent = ShowPanelEvent; declare const events_ShowPanelEvent: typeof ShowPanelEvent; type events_ShowTooltipEvent = ShowTooltipEvent; declare const events_ShowTooltipEvent: typeof ShowTooltipEvent; type events_SizeUpdatedEvent = SizeUpdatedEvent; declare const events_SizeUpdatedEvent: typeof SizeUpdatedEvent; type events_StopAllEvent = StopAllEvent; declare const events_StopAllEvent: typeof StopAllEvent; type events_TransitionDoneEvent = TransitionDoneEvent; declare const events_TransitionDoneEvent: typeof TransitionDoneEvent; type events_ViewerEvent = ViewerEvent; declare const events_ViewerEvent: typeof ViewerEvent; type events_ViewerEvents = ViewerEvents; type events_ZoomUpdatedEvent = ZoomUpdatedEvent; declare const events_ZoomUpdatedEvent: typeof ZoomUpdatedEvent; declare namespace events { export { events_BeforeAnimateEvent as BeforeAnimateEvent, events_BeforeRenderEvent as BeforeRenderEvent, events_BeforeRotateEvent as BeforeRotateEvent, events_ClickEvent as ClickEvent, events_ConfigChangedEvent as ConfigChangedEvent, events_DoubleClickEvent as DoubleClickEvent, events_FullscreenEvent as FullscreenEvent, events_HideNotificationEvent as HideNotificationEvent, events_HideOverlayEvent as HideOverlayEvent, events_HidePanelEvent as HidePanelEvent, events_HideTooltipEvent as HideTooltipEvent, events_KeypressEvent as KeypressEvent, events_LoadProgressEvent as LoadProgressEvent, events_ObjectEnterEvent as ObjectEnterEvent, events_ObjectEvent as ObjectEvent, events_ObjectHoverEvent as ObjectHoverEvent, events_ObjectLeaveEvent as ObjectLeaveEvent, events_PanoramaErrorEvent as PanoramaErrorEvent, events_PanoramaLoadEvent as PanoramaLoadEvent, events_PanoramaLoadedEvent as PanoramaLoadedEvent, events_PositionUpdatedEvent as PositionUpdatedEvent, events_ReadyEvent as ReadyEvent, events_RenderEvent as RenderEvent, events_RollUpdatedEvent as RollUpdatedEvent, events_ShowNotificationEvent as ShowNotificationEvent, events_ShowOverlayEvent as ShowOverlayEvent, events_ShowPanelEvent as ShowPanelEvent, events_ShowTooltipEvent as ShowTooltipEvent, events_SizeUpdatedEvent as SizeUpdatedEvent, events_StopAllEvent as StopAllEvent, events_TransitionDoneEvent as TransitionDoneEvent, events_ViewerEvent as ViewerEvent, type events_ViewerEvents as ViewerEvents, events_ZoomUpdatedEvent as ZoomUpdatedEvent }; } /** * Base class for plugins * @template TEvents union of dispatched events */ declare abstract class AbstractPlugin<TEvents extends TypedEvent<AbstractPlugin> = never> extends TypedEventTarget<TEvents> { protected viewer: Viewer; /** * Unique identifier of the plugin */ static readonly id: string; /** * Expected version of the core * DO NOT USE on custom plugins */ static readonly VERSION: string; constructor(viewer: Viewer); /** * Initializes the plugin */ init(): void; /** * Destroys the plugin */ destroy(): void; } /** * Base class for plugins with updatable configuration * The implementation must have a static `configParser` property which is the result of {@link utils.getConfigParser} * * @template TConfig type of input config * @template TParsedConfig type of config after parsing * @template TUpdatableConfig type of config that can be updated * @template TEvents union of dispatched events */ declare abstract class AbstractConfigurablePlugin<TConfig extends Record<string, any>, TParsedConfig extends TConfig = TConfig, TUpdatableConfig extends TConfig = TConfig, TEvents extends TypedEvent<AbstractPlugin> = never> extends AbstractPlugin<TEvents> { static configParser: ConfigParser<any, any>; static readonlyOptions: string[]; readonly config: TParsedConfig; constructor(viewer: Viewer, config: TConfig); /** * Update options */ setOption<T extends keyof TUpdatableConfig>(option: T, value: TUpdatableConfig[T]): void; /** * Update options */ setOptions(options: Partial<TUpdatableConfig>): void; } type PluginConstructor = new (viewer: Viewer, config?: any) => AbstractPlugin<any>; /** * Internal properties of the viewer */ declare class ViewerState { /** * when all components are loaded */ ready: boolean; /** * if the view needs to be renderer */ needsUpdate: boolean; /** * number of plugins requesting to continuously render the scene */ continuousUpdateCount: number; /** * if the keyboard events are currently listened to */ keyboardEnabled: boolean; /** * direction of the camera */ direction: Vector3; /** * current camera roll */ roll: number; /** * vertical FOV */ vFov: number; /** * horizontal FOV */ hFov: number; /** * renderer aspect ratio */ aspect: number; /** * currently running animation */ animation: Animation; /** * currently running transition */ transitionAnimation: Animation; /** * promise of the last "setPanorama()" call */ loadingPromise: Promise<any>; /** * time of the last user action */ idleTime: number; /** * registered THREE objects observer */ objectsObservers: Record<string, Mesh | null>; /** * size of the container */ size: Size; /** * Current panorama texture displayed */ textureData: TextureData; /** * Current override of the global cursor */ cursorOverride: string; } /** * Base class for services */ declare abstract class AbstractService { protected readonly viewer: Viewer; protected readonly config: ParsedViewerConfig; protected readonly state: ViewerState; } /** * Collections of data converters for the viewer */ declare class DataHelper extends AbstractService { /** * Converts vertical FOV to zoom level */ fovToZoomLevel(fov: number): number; /** * Converts zoom level to vertical FOV */ zoomLevelToFov(level: number): number; /** * Converts vertical FOV to horizontal FOV */ vFovToHFov(vFov: number): number; /** * Converts horizontal FOV to vertical FOV */ hFovToVFov(hFov: number): number; /** * Converts pixel texture coordinates to spherical radians coordinates * @throws {@link PSVError} when the current adapter does not support texture coordinates */ textureCoordsToSphericalCoords(point: PanoramaPosition): Position; /** * Converts spherical radians coordinates to pixel texture coordinates * @throws {@link PSVError} when the current adapter does not support texture coordinates */ sphericalCoordsToTextureCoords(position: Position): PanoramaPosition; /** * Converts spherical radians coordinates to a Vector3 */ sphericalCoordsToVector3(position: Position, vector?: Vector3, distance?: number): Vector3; /** * Converts a Vector3 to spherical radians coordinates */ vector3ToSphericalCoords(vector: Vector3): Position; /** * Converts position on the viewer to a THREE.Vector3 */ viewerCoordsToVector3(viewerPoint: Point): Vector3; /** * Converts position on the viewer to spherical radians coordinates */ viewerCoordsToSphericalCoords(viewerPoint: Point): Position; /** * Converts a Vector3 to position on the viewer */ vector3ToViewerCoords(vector: Vector3): Point; /** * Converts spherical radians coordinates to position on the viewer */ sphericalCoordsToViewerCoords(position: Position): Point; /** * Checks if a point in the 3D scene is currently visible */ isPointVisible(vector: Vector3): boolean; /** * Checks if a point on the sphere is currently visible */ isPointVisible(position: Position): boolean; /** * Converts pixel position to angles if present and ensure boundaries */ cleanPosition(position: ExtendedPosition): Position; /** * Ensure a SphereCorrection object is valid */ cleanSphereCorrection(sphereCorrection: SphereCorrection): SphereCorrection<number>; /** * Parse the pose angles of the pano data */ cleanPanoramaPose(panoData: PanoData): SphereCorrection<number>; /** * Update the panorama options if the panorama files contains "InitialView" metadata */ cleanPanoramaOptions(options: PanoramaOptions, panoData: PanoData): PanoramaOptions; } type CustomRenderer = Pick<WebGLRenderer, 'render'> & { getIntersections?(raycaster: Raycaster, vector: Vector2): Array<Intersection<Mesh>>; }; /** * Controller for the three.js scene */ declare class Renderer extends AbstractService { private readonly renderer; private readonly scene; private meshContainer; private readonly raycaster; private readonly frustum; private readonly container; private timestamp?; private frustumNeedsUpdate; private customRenderer?; get panoramaPose(): Euler; get sphereCorrection(): Euler; /** * Hides the viewer */ hide(): void; /** * Shows the viewer */ show(): void; /** * Resets or replaces the THREE renderer by a custom one */ setCustomRenderer(factory: ((renderer: WebGLRenderer) => CustomRenderer) | null): void; /** * Updates the size of the renderer and the aspect of the camera */ private __onSizeUpdated; /** * Updates the fov of the camera */ private __onZoomUpdated; /** * Updates the position of the camera */ private __onPositionUpdated; /** * Main event loop, performs a render if `state.needsUpdate` is true */ private __renderLoop; /** * Returns intersections with objects in the scene */ getIntersections(viewerPoint: Point): Array<Intersection<Mesh>>; /** * Checks if an object/point is currently visible */ isObjectVisible(value: Object3D | Vector3): boolean; /** * Adds an object to the THREE scene */ addObject(object: Object3D): void; /** * Removes an object from the THREE scene */ removeObject(object: Object3D): void; } /** * Image and texture loading system */ declare class TextureLoader extends AbstractService { private readonly fileLoader; private readonly imageLoader; private abortCtrl; /** * Loads a Blob with FileLoader */ loadFile(url: string, onProgress?: (p: number) => void, cacheKey?: string): Promise<Blob>; /** * Loads an image with ImageLoader or with FileLoader if progress is tracked or if request headers are configured */ loadImage(url: string, onProgress?: (p: number) => void, cacheKey?: string): Promise<HTMLImageElement>; /** * Converts a file loaded with {@link loadFile} into an image */ blobToImage(blob: Blob): Promise<HTMLImageElement>; /** * Preload a panorama file without displaying it */ preloadPanorama(panorama: any): Promise<unknown>; /** * Get an abort signal * the signal is shared accross all requests with the same cache key (for tiles adapters) */ private __getAbortSignal; } /** * Photo Sphere Viewer controller */ declare class Viewer extends TypedEventTarget<ViewerEvents> { readonly state: ViewerState; readonly config: ParsedViewerConfig; readonly parent: HTMLElement; readonly container: HTMLElement; readonly renderer: Renderer; readonly textureLoader: TextureLoader; readonly dataHelper: DataHelper; readonly loader: Loader; readonly navbar: Navbar; readonly notification: Notification; readonly overlay: Overlay; readonly panel: Panel; constructor(config: ViewerConfig); /** * Destroys the viewer */ destroy(): void; private init; /** * 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<any>>(pluginId: string | PluginConstructor): T; /** * Returns the current position of the camera */ getPosition(): Position; /** * Returns the current zoom level */ getZoomLevel(): number; /** * Returns the current viewer size */ getSize(): Size; /** * Checks if the viewer is in fullscreen */ isFullscreenEnabled(): boolean; /** * Request a new render of the scene */ needsUpdate(): void; /** * Request the scene to be continuously renderer (when using videos) */ needsContinuousUpdate(enabled: boolean): void; /** * Resizes the scene if the viewer is resized */ autoSize(): void; /** * Loads a new panorama file * Loads a new panorama file, optionally changing the camera position/zoom and activating the transition animation.<br> * If the "options" parameter is not defined, the camera will not move and the ongoing animation will continue.<br> * If another loading is already in progress it will be aborted. * @returns promise resolved with false if the loading was aborted by another call */ setPanorama(path: any, options?: PanoramaOptions): Promise<boolean>; /** * Update options * @throws {@link PSVError} if the configuration is invalid */ setOptions(options: Partial<UpdatableViewerConfig>): void; /** * Update options * @throws {@link PSVError} if the configuration is invalid */ setOption<T extends keyof UpdatableViewerConfig>(option: T, value: UpdatableViewerConfig[T]): void; /** * Displays an error message over the viewer */ showError(message: string): void; /** * Hides the error message */ hideError(): void; /** * Rotates the view to specific position */ rotate(position: ExtendedPosition): void; /** * Zooms to a specific level between `maxFov` and `minFov` */ zoom(level: number): void; /** * Increases the zoom level */ zoomIn(step?: number): void; /** * Decreases the zoom level */ zoomOut(step?: number): void; /** * Rotates and zooms the view with a smooth animation */ animate(options: AnimateOptions): Animation; /** * Stops the ongoing animation * The return value is a Promise because the is no guaranty the animation can be stopped synchronously. */ stopAnimation(): PromiseLike<any>; /** * Resizes the viewer */ resize(size: CssSize): void; private __setSize; /** * Enters the fullscreen mode */ enterFullscreen(): void; /** * Exits the fullscreen mode */ exitFullscreen(): void; /** * Enters or exits the fullscreen mode */ toggleFullscreen(): void; /** * Enables the keyboard controls */ startKeyboardControl(): void; /** * Disables the keyboard controls */ stopKeyboardControl(): void; /** * Creates a new tooltip * Use {@link Tooltip.move} to update the tooltip without re-create * @throws {@link PSVError} if the configuration is invalid */ createTooltip(config: TooltipConfig): Tooltip; /** * Changes the global mouse cursor */ setCursor(cursor: string | null): void; /** * Subscribes to events on objects in the three.js scene * @param userDataKey - only objects with the following `userData` will be observed */ observeObjects(userDataKey: string): void; /** * Unsubscribes to events on objects */ unobserveObjects(userDataKey: string): void; } /** * Base class for adapters * @template TPanorama type of the panorama object * @template TData type of the panorama metadata * @template TTexture type of the loaded texture * @template TMesh type of the mesh */ declare abstract class AbstractAdapter<TPanorama, TData, TTexture, TMesh extends Object3D> { protected readonly viewer: Viewer; /** * Unique identifier of the adapter */ static readonly id: string; /** * Expected version of the core * DO NOT USE on custom adapters */ static readonly VERSION: string; /** * Indicates if the adapter supports panorama download natively */ static readonly supportsDownload: boolean; constructor(viewer: Viewer); /** * Initializes the adapter */ init(): void; /** * Destroys the adapter */ destroy(): void; /** * Indicates if the adapter supports transitions between panoramas */ supportsTransition(panorama: TPanorama): boolean; /** * Indicates if the adapter supports preload of a panorama */ supportsPreload(panorama: TPanorama): boolean; /** * Converts pixel texture coordinates to spherical radians coordinates * @throws {@link PSVError} when the current adapter does not support texture coordinates */ textureCoordsToSphericalCoords(point: PanoramaPosition, data: TData): Position; /** * Converts spherical radians coordinates to pixel texture coordinates * @throws {@link PSVError} when the current adapter does not support texture coordinates */ sphericalCoordsToTextureCoords(position: Position, data: TData): PanoramaPosition; /** * Loads the panorama texture */ abstract loadTexture(panorama: TPanorama, loader?: boolean, newPanoData?: PanoData | PanoDataProvider, useXmpPanoData?: boolean): Promise<TextureData<TTexture, TPanorama, TData>>; /** * Creates the mesh */ abstract createMesh(panoData: TData): TMesh; /** * Applies the texture to the mesh */ abstract setTexture(mesh: TMesh, textureData: TextureData<TTexture, TPanorama, TData>, transition: boolean): void; /** * Changes the opacity of the mesh */ abstract setTextureOpacity(mesh: TMesh, opacity: number): void; /** * Clear a loaded texture from memory */ abstract disposeTexture(textureData: TextureData<TTexture, TPanorama, TData>): void; /** * Cleanup a mesh from memory */ abstract disposeMesh(mesh: TMesh): void; } type AdapterConstructor = (new (viewer: Viewer, config?: any) => AbstractAdapter<any, any, any, any>); /** * A wrapper around a Promise with an initial value before resolution */ type ResolvableBoolean = { initial: boolean; promise: Promise<boolean>; }; /** * Object defining a point */ type Point = { x: number; y: number; }; /** * Object defining a size */ type Size = { width: number; height: number; }; /** * Object defining a size in CSS */ type CssSize = { width: string; height: string; }; /** * Object defining angular corrections to a sphere */ type SphereCorrection<T = number | string> = { pan?: T; tilt?: T; roll?: T; }; /** * Object defining a spherical position (radians) */ type Position = { yaw: number; pitch: number; }; /** * Object defining a spherical position (radians or degrees) */ type SphericalPosition = { yaw: number | string; pitch: number | string; }; /** * Object defining a position on the panorama image (pixels) */ type PanoramaPosition = { textureX: number; textureY: number; textureFace?: string; }; /** * Object defining a spherical or panorama position */ type ExtendedPosition = SphericalPosition | PanoramaPosition; /** * Object defining options for {@link Viewer.animate} */ type AnimateOptions = Partial<ExtendedPosition> & { /** * Animation speed or duration in milliseconds */ speed: string | number; /** * New zoom level between 0 and 100 */ zoom?: number; /** * Easing function used for the animation * @default 'inOutSine' */ easing?: AnimationOptions<any>['easing']; }; /** * Configuration of an equirectangular panorama */ type EquirectangularPanorama = { path: string; data?: PanoData | PanoDataProvider; }; /** * Crop information of an equirectangular panorama */ type PanoData = { isEquirectangular?: true; fullWidth: number; fullHeight?: number; croppedWidth?: number; croppedHeight?: number; croppedX: number; croppedY: number; poseHeading?: number; posePitch?: number; poseRoll?: number; }; /** * Function to compute panorama data once the image is loaded */ type PanoDataProvider = (image: HTMLImageElement, xmpData?: PanoData) => PanoData; /** * Object defining options for {@link Viewer.setPanorama} */ type PanoramaOptions = { /** * new panorama position */ position?: ExtendedPosition; /** * new navbar caption */ caption?: string; /** * new panorama description */ description?: string; /** * new zoom level between 0 and 100 */ zoom?: number; /** * enable transition (rotation + fading) between old and new panorama * @default true */ transition?: boolean | TransitionOptions; /** * show the loader while loading the new panorama * @default true */ showLoader?: boolean; /** * new sphere correction to apply to the panorama */ sphereCorrection?: SphereCorrection; /** * new data used for this panorama */ panoData?: PanoData | PanoDataProvider; }; type TransitionOptions = { /** @default 1500 */ speed?: string | number; /** @default true */ rotation?: boolean; /** @default 'fade' */ effect?: 'fade' | 'black' | 'white'; }; /** * Result of {@link AbstractAdapter.loadTexture} */ type TextureData<TTexture = Texture | Texture[] | Record<string, Texture>, TPanorama = any, TData = any> = { /** * Actual texture or list of textures */ texture: TTexture; /** * Original panorama definition */ panorama: TPanorama; /** * Panorama metadata */ panoData?: TData; /** * Key used in the loader cache */ cacheKey?: string; }; /** * Data of {@link events.ClickEvent} */ type ClickData = { /** * if it's a right click */ rightclick: boolean; /** * position in the browser window */ clientX: number; /** * position in the browser window */ clientY: number; /** * position in the viewer */ viewerX: number; /** * position in the viewer */ viewerY: number; /** * position in spherical coordinates */ yaw: number; /** * position in spherical coordinates */ pitch: number; /** * position on the texture, if applicable */ textureX?: number; /** * position on the texture, if applicable */ textureY?: number; /** * position on the texture, if applicable */ textureFace?: string; /** * Original element which received the click */ target?: HTMLElement; /** * Original event which triggered the click */ originalEvent?: Event; /** * List of THREE scenes objects under the mouse */ objects: Object3D[]; /** * clicked Marker */ marker?: any; }; /** * Custom Web Component interface for navbar buttons */ interface NavbarButtonElement extends HTMLElement { attachViewer?(viewer: Viewer): void; } /** * Definition of a custom navbar button */ type NavbarCustomBut