@knaw-huc/osd-iiif-viewer 0.1.1 → 0.1.2

package/README.md

@@ -1 +1,46 @@
-# osd-iiif-viewer
+# @knaw-huc/osd-iiif-viewer
+
+React wrapper around OpenSeadragon to display and browse image sources from iiif manifests.
+
+Current features (WIP):
+- Canvas navigation
+- Highlight overlay
+- Zoom and fullscreen controls
+- Manifest parsing (iiif manifests v3, ImageService2)
+
+## Minimal example
+```tsx
+import {useEffect} from 'react';
+import {
+  ViewerProvider,
+  ViewerCanvas,
+  useLoadManifest,
+  useManifest,
+} from '@knaw-huc/osd-iiif-viewer';
+
+export function Example() {
+  return <ViewerProvider>
+    <Viewer/>
+  </ViewerProvider>
+}
+
+function Viewer() {
+  const loadManifest = useLoadManifest();
+  const manifest = useManifest();
+
+  useEffect(() => {
+    loadManifest('/manifest.json');
+  }, [loadManifest]);
+
+  if (!manifest.data) {
+    return null;
+  }
+
+  return (
+    <div style={{width: '100%', height: '100vh'}}>
+      <ViewerCanvas/>
+    </div>
+  );
+}
+```
+

package/dist/Overlay.d.ts

@@ -0,0 +1,6 @@
+type OverlayProps = {
+    location: OpenSeadragon.Rect;
+    children: React.ReactNode;
+};
+export declare function Overlay({ location, children }: OverlayProps): import('react').ReactPortal | null;
+export {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { HighlightOverlay, type Highlight } from './HighlightOverlay.tsx';
+export { useImageInfo } from './useImageInfo.tsx';
+export { Overlay } from './Overlay.tsx';
 export { ViewerCanvas } from './ViewerCanvas';
 export { ViewerProvider } from './ViewerProvider';
 export { useViewer } from './useViewer';

package/dist/index.js

@@ -1,6 +1,7 @@
 import { useStore } from "zustand/index";
-import { createContext, useContext, useEffect, useRef, useState, useCallback } from "react";
+import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback } from "react";
 import { createStore } from "zustand/vanilla";
+import { createPortal } from "react-dom";
 import { jsx } from "react/jsx-runtime";
 import { Viewer } from "openseadragon";
 const createInstanceSlice = (set) => ({
@@ -163,42 +164,30 @@ function useViewer() {
 function useViewerReady() {
   return useViewerStoreSelector((s) => s.viewerReady);
 }
-function assertSvgElement(element) {
-  if (!(element instanceof SVGElement))
-    throw new Error("Expected SVGElement");
-}
-function HighlightOverlay({ highlights, onHover = noop }) {
+function useImageInfo() {
   const viewer = useViewer(), ready = useViewerReady();
-  return useEffect(() => {
-    if (!viewer || !ready || !highlights.length)
-      return;
+  return useMemo(() => {
+    if (!viewer || !ready)
+      return null;
     const item = viewer.world.getItemAt(0);
     if (!item)
-      return;
-    const size = item.getContentSize(), imageRect = item.imageToViewportRectangle(0, 0, size.x, size.y), overlayElements = [];
-    for (const highlight of highlights) {
-      const container = document.createElement("div");
-      container.style.position = "absolute", container.style.pointerEvents = "none";
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.setAttribute("viewBox", `0 0 ${size.x} ${size.y}`), svg.style.width = "100%", svg.style.height = "100%", svg.style.pointerEvents = "none";
-      const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-      g.innerHTML = highlight.path;
-      const shape = g.firstElementChild;
-      assertSvgElement(shape), shape.setAttribute("fill", "transparent"), shape.style.pointerEvents = "auto", shape.style.cursor = "pointer", shape.addEventListener("mouseenter", (event) => {
-        shape.setAttribute("fill", "rgba(0,0,0,0.1)"), onHover(highlight.id, event);
-      }), shape.addEventListener("mousemove", (event) => {
-        onHover(highlight.id, event);
-      }), shape.addEventListener("mouseleave", (event) => {
-        shape.setAttribute("fill", "transparent"), onHover(null, event);
-      }), svg.appendChild(g), container.appendChild(svg), viewer.addOverlay({ element: container, location: imageRect }), overlayElements.push(container);
-    }
-    return () => {
-      overlayElements.forEach((el) => viewer.removeOverlay(el));
-    };
-  }, [viewer, ready, highlights, onHover]), null;
+      return null;
+    const size = item.getContentSize();
+    return { location: item.imageToViewportRectangle(0, 0, size.x, size.y), size };
+  }, [viewer, ready]);
+}
+function Overlay({ location, children }) {
+  const viewer = useViewer(), [container] = useState(() => {
+    const el = document.createElement("div");
+    return el.style.position = "absolute", el.style.pointerEvents = "none", el;
+  });
+  return useEffect(() => {
+    if (viewer)
+      return viewer.addOverlay({ element: container, location }), () => {
+        viewer.removeOverlay(container);
+      };
+  }, [viewer, location, container]), viewer ? createPortal(children, container) : null;
 }
-const noop = () => {
-};
 function findTileSource(canvas) {
   return canvas.imageServiceId + "/info.json";
 }
@@ -286,10 +275,11 @@ function useLoadManifest() {
   return useViewerStoreSelector((s) => s.loadManifest);
 }
 export {
-  HighlightOverlay,
+  Overlay,
   ViewerCanvas,
   ViewerProvider,
   useCanvas,
+  useImageInfo,
   useLoadManifest,
   useManifest,
   useViewer,

package/dist/useImageInfo.d.ts

@@ -0,0 +1,5 @@
+export type ImageInfo = {
+    location: OpenSeadragon.Rect;
+    size: OpenSeadragon.Point;
+};
+export declare function useImageInfo(): ImageInfo | null;

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@knaw-huc/osd-iiif-viewer",
-  "version": "0.1.1",
+  "version": "0.1.2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/knaw-huc/osd-iiif-viewer.git"
+  },
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/HighlightOverlay.d.ts

@@ -1,11 +0,0 @@
-import { Id } from './Id.ts';
-export type Highlight = {
-    id: Id;
-    path: string;
-};
-type HighlightOverlayProps = {
-    highlights: Highlight[];
-    onHover?: (highlightId: Id | null, event: MouseEvent) => void;
-};
-export declare function HighlightOverlay({ highlights, onHover }: HighlightOverlayProps): null;
-export {};