# emigre/openseadragon-annotations architecture

> Architecture diagram of the GitHub repository emigre/openseadragon-annotations, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/emigre/openseadragon-annotations
- Repository: https://github.com/emigre/openseadragon-annotations

## Overview

OpenSeadragon Annotations adds an SVG drawing layer and draw/move controls to a deep-zoom viewer. The workflow starts when the viewer opens: the plugin mounts the overlay, initializes drawing state and controls, then routes pointer actions through a Flux dispatcher to update annotations. The overlay renders that state over the image; callers can also get, set, or clear annotations. The map reflects the sampled source and README; no persistence layer is documented.

Main entry points: [`src/main.js`](https://github.com/emigre/openseadragon-annotations/blob/master/src/main.js) (Annotations plugin), [`src/model/createModel.js`](https://github.com/emigre/openseadragon-annotations/blob/master/src/model/createModel.js) (Annotation model), [`src/views/Overlay.js`](https://github.com/emigre/openseadragon-annotations/blob/master/src/views/Overlay.js) (SVG overlay), [`src/model/createDispatcher.js`](https://github.com/emigre/openseadragon-annotations/blob/master/src/model/createDispatcher.js) (Action dispatcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["Viewer integration"]
  node_plugin["Annotations plugin<br/>[main.js]"]
end

subgraph group_interaction["Drawing interaction"]
  node_overlay["SVG overlay<br/>[Overlay.js]"]
  node_controls["Draw/move controls<br/>[Controls.js]"]
end

subgraph group_state["Annotation state"]
  node_dispatcher["Action dispatcher"]
  node_actions["Action reactions<br/>[generalActions.js]"]
  node_model["Annotation model<br/>[createModel.js]"]
end

node_user(("Viewer user"))
node_viewer["OpenSeadragon viewer"]

node_user -->|"uses"| node_viewer
node_viewer -->|"opens, zooms"| node_plugin
node_plugin -->|"registers handlers"| node_viewer
node_plugin -->|"creates"| node_model
node_plugin -->|"configures"| node_dispatcher
node_plugin -->|"mounts"| node_overlay
node_plugin -->|"creates"| node_controls
node_dispatcher -->|"registers"| node_actions
node_actions -->|"updates"| node_model
node_overlay -->|"dispatches pointer actions"| node_dispatcher
node_controls -->|"dispatches mode changes"| node_dispatcher
node_overlay -->|"subscribes to changes"| node_model
node_overlay -->|"renders annotations"| node_model
node_plugin -->|"gets or resets annotations"| node_model

click node_plugin "https://github.com/emigre/openseadragon-annotations/blob/master/src/main.js"
click node_overlay "https://github.com/emigre/openseadragon-annotations/blob/master/src/views/Overlay.js"
click node_controls "https://github.com/emigre/openseadragon-annotations/blob/master/src/views/Controls.js"
click node_dispatcher "https://github.com/emigre/openseadragon-annotations/blob/master/src/model/createDispatcher.js"
click node_actions "https://github.com/emigre/openseadragon-annotations/blob/master/src/model/generalActions.js"
click node_model "https://github.com/emigre/openseadragon-annotations/blob/master/src/model/createModel.js"

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_plugin,node_user,node_viewer toneBlue
class node_overlay,node_controls toneAmber
class node_dispatcher,node_actions,node_model toneMint
```

## Components

### Viewer integration

- [Annotations plugin](https://github.com/emigre/openseadragon-annotations/blob/master/src/main.js): `src/main.js`

### Drawing interaction

- [SVG overlay](https://github.com/emigre/openseadragon-annotations/blob/master/src/views/Overlay.js): `src/views/Overlay.js`
- [Draw/move controls](https://github.com/emigre/openseadragon-annotations/blob/master/src/views/Controls.js): `src/views/Controls.js`

### Annotation state

- [Action dispatcher](https://github.com/emigre/openseadragon-annotations/blob/master/src/model/createDispatcher.js): `src/model/createDispatcher.js`
- [Action reactions](https://github.com/emigre/openseadragon-annotations/blob/master/src/model/generalActions.js): `src/model/generalActions.js`
- [Annotation model](https://github.com/emigre/openseadragon-annotations/blob/master/src/model/createModel.js): `src/model/createModel.js`

### Other components

- **Viewer user**
- **OpenSeadragon viewer**

## Connections

- Viewer user → OpenSeadragon viewer: uses (evidence: `README.md`)
- OpenSeadragon viewer → Annotations plugin: opens, zooms (evidence: `src/main.js`)
- Annotations plugin → OpenSeadragon viewer: registers handlers (evidence: `src/main.js`)
- Annotations plugin → Annotation model: creates (evidence: `src/main.js`)
- Annotations plugin → Action dispatcher: configures (evidence: `src/main.js`)
- Annotations plugin → SVG overlay: mounts (evidence: `src/main.js`)
- Annotations plugin → Draw/move controls: creates (evidence: `src/main.js`)
- Action dispatcher → Action reactions: registers (evidence: `src/model/createDispatcher.js`)
- Action reactions → Annotation model: updates (evidence: `src/model/generalActions.js`)
- SVG overlay → Action dispatcher: dispatches pointer actions (evidence: `src/views/Overlay.js`)
- Draw/move controls → Action dispatcher: dispatches mode changes (evidence: `src/views/Controls.js`)
- SVG overlay → Annotation model: subscribes to changes (evidence: `src/views/Overlay.js`)
- SVG overlay → Annotation model: renders annotations (evidence: `src/views/Overlay.js`)
- Annotations plugin → Annotation model: gets or resets annotations (evidence: `src/main.js`)