Mini-map / Viewport Navigator control
Opened this issue · 3 comments
(from notes)
@stephenwf : modelling perspective: a second canvas panel in a way - CP wouldn’t give the mini viewer straight out of the box but instead another viewer... Few lines of Vue and hook into the viewer - less about providing the feature but provide the API’s
Good to have bundles where familiar UIs are there , thinking about different ways how to compose the views important
Yes, although we could support it out of the box. It is different to displaying 2 canvases in a 2-up view, instead of painting something else on the same Atlas, you are rendering that same "world" using a different renderer.
So with the normal viewer, the images that are shown on screen are driven by the position of the viewport. For the mini-map it's driven by the same world, but the images rendered don't change position, just the red box. Atlas has a "composite" renderer that is used for rendering HTML-based annotations along-side an HTML canvas. That is likely what would be used internally to drive another rendering surface.
The mechanics are covered in #44 and a wire-frame version has been started here: https://github.com/atlas-viewer/atlas/blob/master/src/modules/debug-renderer/debug-renderer.ts
A smarter implementation, when viewing lots of canvases may change the mini-map depending on how far you have zoomed in. So maybe it would punch in when you're looking at a region on a canvas, and then punch back out when you are looking at the thumbnails.
Current Docs describe Navigator:
Navigator
:::danger
This is currently unstable
:::
Canvas panel has an optional viewport navigator:
<canvas-panel
manifest-id="https://iiif.wellcomecollection.org/presentation/b14658197"
canvas-id="https://iiif.wellcomecollection.org/presentation/b14658197/canvases/b14658197.jp2"
enable-navigator="true"
/>
The navigator mini-window will also show a miniature view of the annotations on the canvas.
:::info
This is an initial implementation and will be developed further.
:::
We will leave this out for now but revisit as an MVP:
- The image used by the navigator is just a single image - no composition, no anno rendering. It's just a thumbnail
- If there's more than one image on the canvas, CP will try to pick the one it uses for the navigator
- You can provide your own image via
navigator-src
property (e.g., take a screen grab of the rendered composition and use that) navigator-src="thumbnail"
is a special value that says "use thumbnail"
A full-featured navigator where the mini-window is a fully rendered canvas too is out of scope for now.