# mistic100/photo-sphere-viewer architecture

> Architecture diagram of the GitHub repository mistic100/photo-sphere-viewer, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mistic100/photo-sphere-viewer
- Repository: https://github.com/mistic100/photo-sphere-viewer

## Overview

Photo Sphere Viewer is a JavaScript library for displaying 360° panoramas. A user creates a Viewer, which loads panorama data through a chosen adapter and renders it; input handling and viewer services support navigation and presentation. Separate packages add tiled and video formats, annotations, maps, tours, and interactive controls. The tree and source index establish these package boundaries and selected dependencies, but most runtime wiring was not sampled, so uncertain connections are omitted.

Main entry points: [`packages/core/src/Viewer.ts`](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/Viewer.ts) (Viewer), [`packages/autorotate-plugin/src/AutorotatePlugin.ts`](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/autorotate-plugin/src/AutorotatePlugin.ts) (Auto Rotation), [`packages/markers-plugin/src/MarkersPlugin.ts`](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/markers-plugin/src/MarkersPlugin.ts) (Markers), [`packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts`](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts) (Cubemap Tiles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Viewer Core"]
  node_viewer["Viewer<br/>[Viewer.ts]"]
  node_input["Input Handling<br/>[EventsHandler.ts]"]
  node_renderer["Rendering<br/>[Renderer.ts]"]
  node_texture["Texture Loading<br/>[TextureLoader.ts]"]
  node_adapter["Adapter Base<br/>[AbstractAdapter.ts]"]
  node_press["Press Handling<br/>[PressHandler.ts]"]
end

subgraph group_adapters["Panorama Adapters"]
  node_equirect["Equirectangular"]
  node_cubemap["Cubemap<br/>[CubemapAdapter.ts]"]
  node_dual["Dual Fisheye"]
  node_eqtiles["Equirectangular Tiles"]
  node_cubetiles["Cubemap Tiles"]
  node_sharedqueue["Tile Queue<br/>[Queue.ts]"]
end

subgraph group_navigation["Navigation Extensions"]
  node_markers["Markers<br/>[MarkersPlugin.ts]"]
  node_map["Map View<br/>[MapComponent.ts]"]
  node_tour["Virtual Tour"]
  node_autorotate["Auto Rotation"]
end

subgraph group_presentation["Presentation Extensions"]
  node_video["Video Playback<br/>[VideoPlugin.ts]"]
  node_gallery["Panorama Gallery"]
  node_plan["Plan View<br/>[PlanPlugin.ts]"]
  node_settings["Settings<br/>[SettingsPlugin.ts]"]
  node_overlays["Panorama Overlays<br/>[OverlaysPlugin.ts]"]
  node_resolution["Resolution Control"]
  node_gyro["Gyroscope<br/>[GyroscopePlugin.ts]"]
  node_stereo["Stereo View<br/>[StereoPlugin.ts]"]
end

node_user(("Application User"))

node_user -.->|"creates and loads"| node_viewer
node_viewer -->|"initializes"| node_renderer
node_viewer -->|"initializes"| node_texture
node_viewer -->|"initializes"| node_input
node_viewer -->|"uses adapter"| node_adapter
node_input -->|"uses"| node_press
node_cubetiles -->|"uses"| node_cubemap
node_eqtiles -->|"queues tile loads"| node_sharedqueue
node_cubetiles -->|"queues tile loads"| node_sharedqueue
node_autorotate -->|"uses markers"| node_markers
node_autorotate -->|"uses video"| node_video
node_map -->|"navigates to marker"| node_markers
node_map -->|"uses gallery types"| node_gallery
node_plan -->|"uses markers"| node_markers
node_video -->|"requires for keypoints"| node_autorotate

click node_viewer "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/Viewer.ts"
click node_input "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/services/EventsHandler.ts"
click node_renderer "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/services/Renderer.ts"
click node_texture "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/services/TextureLoader.ts"
click node_adapter "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/adapters/AbstractAdapter.ts"
click node_press "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/utils/PressHandler.ts"
click node_equirect "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/adapters/EquirectangularAdapter.ts"
click node_cubemap "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/cubemap-adapter/src/CubemapAdapter.ts"
click node_dual "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/dual-fisheye-adapter/src/DualFisheyeAdapter.ts"
click node_eqtiles "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/equirectangular-tiles-adapter/src/EquirectangularTilesAdapter.ts"
click node_cubetiles "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts"
click node_sharedqueue "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/shared/Queue.ts"
click node_markers "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/markers-plugin/src/MarkersPlugin.ts"
click node_map "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/map-plugin/src/components/MapComponent.ts"
click node_tour "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts"
click node_autorotate "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/autorotate-plugin/src/AutorotatePlugin.ts"
click node_video "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/video-plugin/src/VideoPlugin.ts"
click node_gallery "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/gallery-plugin/src/GalleryComponent.ts"
click node_plan "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/plan-plugin/src/PlanPlugin.ts"
click node_settings "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/settings-plugin/src/SettingsPlugin.ts"
click node_overlays "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/overlays-plugin/src/OverlaysPlugin.ts"
click node_resolution "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/resolution-plugin/src/ResolutionPlugin.ts"
click node_gyro "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/gyroscope-plugin/src/GyroscopePlugin.ts"
click node_stereo "https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/stereo-plugin/src/StereoPlugin.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_viewer,node_input,node_renderer,node_texture,node_adapter,node_press,node_user toneBlue
class node_equirect,node_cubemap,node_dual,node_eqtiles,node_cubetiles,node_sharedqueue toneAmber
class node_markers,node_map,node_tour,node_autorotate toneMint
class node_video,node_gallery,node_plan,node_settings,node_overlays,node_resolution,node_gyro,node_stereo toneRose
```

## Components

### Viewer Core

- [Viewer](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/Viewer.ts): `packages/core/src/Viewer.ts`
- [Input Handling](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/services/EventsHandler.ts): `packages/core/src/services/EventsHandler.ts`
- [Rendering](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/services/Renderer.ts): `packages/core/src/services/Renderer.ts`
- [Texture Loading](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/services/TextureLoader.ts): `packages/core/src/services/TextureLoader.ts`
- [Adapter Base](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/adapters/AbstractAdapter.ts): `packages/core/src/adapters/AbstractAdapter.ts`
- [Press Handling](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/utils/PressHandler.ts): `packages/core/src/utils/PressHandler.ts`

### Panorama Adapters

- [Equirectangular](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/core/src/adapters/EquirectangularAdapter.ts): `packages/core/src/adapters/EquirectangularAdapter.ts`
- [Cubemap](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/cubemap-adapter/src/CubemapAdapter.ts): `packages/cubemap-adapter/src/CubemapAdapter.ts`
- [Dual Fisheye](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/dual-fisheye-adapter/src/DualFisheyeAdapter.ts): `packages/dual-fisheye-adapter/src/DualFisheyeAdapter.ts`
- [Equirectangular Tiles](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/equirectangular-tiles-adapter/src/EquirectangularTilesAdapter.ts): `packages/equirectangular-tiles-adapter/src/EquirectangularTilesAdapter.ts`
- [Cubemap Tiles](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts): `packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts`
- [Tile Queue](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/shared/Queue.ts): `packages/shared/Queue.ts`

### Navigation Extensions

- [Markers](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/markers-plugin/src/MarkersPlugin.ts): `packages/markers-plugin/src/MarkersPlugin.ts`
- [Map View](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/map-plugin/src/components/MapComponent.ts): `packages/map-plugin/src/components/MapComponent.ts`
- [Virtual Tour](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts): `packages/virtual-tour-plugin/src/VirtualTourPlugin.ts`
- [Auto Rotation](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/autorotate-plugin/src/AutorotatePlugin.ts): `packages/autorotate-plugin/src/AutorotatePlugin.ts`

### Presentation Extensions

- [Video Playback](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/video-plugin/src/VideoPlugin.ts): `packages/video-plugin/src/VideoPlugin.ts`
- [Panorama Gallery](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/gallery-plugin/src/GalleryComponent.ts): `packages/gallery-plugin/src/GalleryComponent.ts`
- [Plan View](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/plan-plugin/src/PlanPlugin.ts): `packages/plan-plugin/src/PlanPlugin.ts`
- [Settings](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/settings-plugin/src/SettingsPlugin.ts): `packages/settings-plugin/src/SettingsPlugin.ts`
- [Panorama Overlays](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/overlays-plugin/src/OverlaysPlugin.ts): `packages/overlays-plugin/src/OverlaysPlugin.ts`
- [Resolution Control](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/resolution-plugin/src/ResolutionPlugin.ts): `packages/resolution-plugin/src/ResolutionPlugin.ts`
- [Gyroscope](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/gyroscope-plugin/src/GyroscopePlugin.ts): `packages/gyroscope-plugin/src/GyroscopePlugin.ts`
- [Stereo View](https://github.com/mistic100/photo-sphere-viewer/blob/main/packages/stereo-plugin/src/StereoPlugin.ts): `packages/stereo-plugin/src/StereoPlugin.ts`

### Other components

- **Application User**

## Connections

- Application User → Viewer: creates and loads (evidence: `README.md`)
- Viewer → Rendering: initializes (evidence: `packages/core/src/Viewer.ts`)
- Viewer → Texture Loading: initializes (evidence: `packages/core/src/Viewer.ts`)
- Viewer → Input Handling: initializes (evidence: `packages/core/src/Viewer.ts`)
- Viewer → Adapter Base: uses adapter (evidence: `packages/core/src/Viewer.ts`)
- Input Handling → Press Handling: uses (evidence: `packages/core/src/services/EventsHandler.ts`)
- Cubemap Tiles → Cubemap: uses (evidence: `packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts`)
- Equirectangular Tiles → Tile Queue: queues tile loads (evidence: `packages/equirectangular-tiles-adapter/src/EquirectangularTilesAdapter.ts`)
- Cubemap Tiles → Tile Queue: queues tile loads (evidence: `packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts`)
- Auto Rotation → Markers: uses markers (evidence: `packages/autorotate-plugin/src/AutorotatePlugin.ts`)
- Auto Rotation → Video Playback: uses video (evidence: `packages/autorotate-plugin/src/AutorotatePlugin.ts`)
- Map View → Markers: navigates to marker (evidence: `packages/map-plugin/src/components/MapComponent.ts`)
- Map View → Panorama Gallery: uses gallery types (evidence: `packages/map-plugin/src/components/MapComponent.ts`)
- Plan View → Markers: uses markers (evidence: `packages/plan-plugin/src/PlanPlugin.ts`)
- Video Playback → Auto Rotation: requires for keypoints (evidence: `packages/video-plugin/src/VideoPlugin.ts`)