@projektemacher/tify-plugin-annotorious

Note: This code was generated with AI assistance — opencode, powered by GLM (Z.ai).

Display-only Annotorious annotations for the TIFY IIIF viewer: imports xywh annotations from the IIIF manifest and renders them as shapes with a translated list panel.

import { annotoriousPlugin } from '@projektemacher/tify-plugin-annotorious';
import '@projektemacher/tify-plugin-core/style.css';
import '@projektemacher/tify-plugin-annotorious/annotorious.css';

const plugin = await annotoriousPlugin(tify, {
  panelEl: document.querySelector('#panel'),
});

Notes

• Display-only: drawingEnabled: false plus UserSelectAction.SELECT, so clicks select but never open Annotorious's (English) editor — bodies render in the translated side panel instead.
• Annotations are imported from the IIIF manifest (xywh fragment targets via W3CImageFormat().parse(), verified: xywh=265,661,1260,1239 → exact rectangle). Whole-canvas targets, SVG selectors and painting annotations are skipped.
• @annotorious/openseadragon is pinned to ~3.8.10: the 3.9.x line broke canvas-click selection (no clickAnnotation events, so list rows never highlight) — caught by the e2e suite. Re-evaluate on future releases.
• Shapes are pre-styled for visibility: annotorious paints display shapes on its WebGL canvas (CSS cannot reach them), so the plugin passes a DrawingStyle expression — a resting accent tint per annotation and a heavier accent stroke once selected. See the exported shapeStyle if you want to customize it.
• Annotorious coordinates are relative to a single base image: in TIFY book view (double-page spread) the second page's annotations are offset into the shared world space (per the page layout), so both facing pages show shapes.

Example

example/ — display-only shapes from IIIF xywh annotations plus a list panel. Run npm run dev at the repo root and open /packages/plugin-annotorious/example/ (defaults to the IIIF cookbook tagging manifest).

Manifest generation

The image side can be any plain image service — generate one with fliiifenleger (generate, --iiif-version V3 recommended):

java -jar cli/target/fliiifenleger-cli.jar generate --iiif-version V3 \
  -o ./my-iiif-images /path/to/image.jpg

The xywh tagging annotations themselves are added afterwards, at the Presentation-manifest level.

Development

npm run build       # dist/ (ESM + declarations)
npm run typecheck
npm run test:i18n   # catalogue coverage for src/ + example/
npm run lint

License: AGPL-3.0-or-later.