@deadragdoll/osd

Internal React package for OpenSeadragon annotations, overlays and zoom bookmarks.

What it provides

• annotation state provider and hooks;
• SVG overlay renderer;
• toolbar, selector and inspector UI components;
• zoom bookmark state and navigator UI;
• viewer lifecycle hook for OpenSeadragon;
• built-in arrow skins and fallback style fields.

Peer dependencies

• react
• react-dom
• openseadragon

Installation

yarn add @deadragdoll/osd openseadragon

Import styles once:

import "@deadragdoll/osd/style.css";

Minimal usage

import {
  OsdAnnotationsProvider,
  OsdAnnotationOverlay,
  useOpenSeadragonViewer
} from "@deadragdoll/osd";

function Viewer() {
  const { attachViewerElement, viewerInstance } = useOpenSeadragonViewer({
    dziUrl: "/tiles/example.dzi",
    showViewer: true
  });

  return (
    <div style={{ position: "relative" }}>
      <div ref={attachViewerElement} style={{ width: 800, height: 600 }} />
      <OsdAnnotationOverlay viewer={viewerInstance} visible />
    </div>
  );
}

export function AnnotatedViewer() {
  return (
    <OsdAnnotationsProvider>
      <Viewer />
    </OsdAnnotationsProvider>
  );
}

Main exports

UI:

• OsdAnnotationOverlay
• OsdAnnotationToolbar
• OsdAnnotationSelector
• OsdAnnotationInspector
• OsdMarkerStyleFields
• OsdZoomNavigator
• OsdZoomNavigatorHost

Hooks and provider:

• OsdAnnotationsProvider
• useOpenSeadragonViewer
• useOsdZoomBookmarks
• useOsdAnnotations
• useOsdAnnotationObjects
• useOsdAnnotationMarkers
• useOsdAnnotationEntities
• useOsdAnnotationSelection
• useOsdAnnotationDraft
• useOsdAnnotationMode
• useOsdAnnotationTools
• useOsdAnnotationFocusZoom
• useOsdAnnotationNavigation
• useOsdAnnotationHighlight
• useOsdAnnotationVisibility

Utilities:

• OSD_ARROW_SKINS
• getOsdArrowSkin
• getViewerZoomState
• normalizeZoomBookmarks