@knaw-huc/osd-iiif-viewer 0.1.0 → 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,3 +1,5 @@
+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,8 +1,9 @@
+import { useStore } from "zustand/index";
+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";
-import { createContext, useContext, useRef, useEffect, useState, useCallback } from "react";
-import { createStore } from "zustand/vanilla";
-import { useStore } from "zustand/index";
 const createInstanceSlice = (set) => ({
   viewer: null,
   viewerReady: !1,
@@ -153,13 +154,43 @@ const defaultManifest = { data: null, url: "", isLoading: !1, error: null }, cre
 function useViewerStore() {
   return useContext(ViewerContext) ?? orThrow("viewer hook must be used within viewer provider");
 }
-function findTileSource(canvas) {
-  return canvas.imageServiceId + "/info.json";
-}
 function useViewerStoreSelector(selector) {
   const store = useViewerStore();
   return useStore(store, selector);
 }
+function useViewer() {
+  return useViewerStoreSelector((s) => s.viewer);
+}
+function useViewerReady() {
+  return useViewerStoreSelector((s) => s.viewerReady);
+}
+function useImageInfo() {
+  const viewer = useViewer(), ready = useViewerReady();
+  return useMemo(() => {
+    if (!viewer || !ready)
+      return null;
+    const item = viewer.world.getItemAt(0);
+    if (!item)
+      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;
+}
+function findTileSource(canvas) {
+  return canvas.imageServiceId + "/info.json";
+}
 function useCanvas() {
   const { currentIndex } = useViewerStoreSelector((s) => s.canvas), goTo = useViewerStoreSelector((s) => s.goToCanvas), next = useViewerStoreSelector((s) => s.nextCanvas), prev = useViewerStoreSelector((s) => s.prevCanvas), current = useViewerStoreSelector(
     (s) => s.manifest.data?.canvases[s.canvas.currentIndex] ?? null
@@ -205,9 +236,6 @@ function ViewerProvider({ children }) {
   const [store] = useState(() => createViewerStore());
   return /* @__PURE__ */ jsx(ViewerContext.Provider, { value: store, children });
 }
-function useViewer() {
-  return useViewerStoreSelector((s) => s.viewer);
-}
 function useViewerControls(fullscreenRef) {
   const viewer = useViewer(), store = useViewerStore(), zoomLevel = useViewerStoreSelector((s) => s.zoomLevel), zoomMin = useViewerStoreSelector((s) => s.zoomMin), zoomMax = useViewerStoreSelector((s) => s.zoomMax), isFullPage = useViewerStoreSelector((s) => s.isFullPage);
   useEffect(() => {
@@ -240,9 +268,6 @@ function useViewerControls(fullscreenRef) {
     isFullPage
   };
 }
-function useViewerReady() {
-  return useViewerStoreSelector((s) => s.viewerReady);
-}
 function useManifest() {
   return useViewerStoreSelector((s) => s.manifest);
 }
@@ -250,9 +275,11 @@ function useLoadManifest() {
   return useViewerStoreSelector((s) => s.loadManifest);
 }
 export {
+  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.0",
+  "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 {};