@knaw-huc/osd-iiif-viewer 0.1.6 → 0.1.7

package/README.md

@@ -1,16 +1,17 @@
 # @knaw-huc/osd-iiif-viewer
 
-React wrapper around OpenSeadragon to display and browse image sources from iiif manifests.
+Lightweight React wrapper around OpenSeadragon to display and browse image sources from IIIF manifests.
 
-Current features (WIP):
+Features:
 - Canvas navigation
 - Highlight overlay
 - Zoom and fullscreen controls
-- Manifest parsing (iiif manifests v3, ImageService2)
+- IIIF manifest loading
+
+## Example
 
-## Minimal example
 ```tsx
-import { useEffect } from 'react';
+import {useEffect} from 'react';
 import {
   Viewer,
   ViewerProvider,
@@ -20,27 +21,28 @@ import {
 
 export function Example() {
   return <ViewerProvider>
-    <View/>
+    <MyOsdIiifView/>
   </ViewerProvider>
 }
 
-function View() {
+function MyOsdIiifView() {
   const loadManifest = useLoadManifest();
-  const manifest = useManifest();
+  const {isReady} = useManifest();
 
   useEffect(() => {
     loadManifest('/manifest.json');
   }, [loadManifest]);
 
-  if (manifest.isLoading || manifest.error) {
+  if (!isReady) {
     return null;
   }
 
   return (
-    <div style={{ width: '100%', height: '100vh' }}>
+    <div style={{width: '100%', height: '100vh'}}>
       <Viewer/>
     </div>
   );
 }
 ```
 
+For more examples, run `npm i && npm start` and open http://localhost:5173

package/dist/ControlSlice.d.ts

@@ -1,11 +1,14 @@
 import { StateCreator } from 'zustand/vanilla';
 import { ViewerStore } from './ViewerStore.ts';
-export type ControlSlice = {
+import { Resettable } from './Resettable.ts';
+export type ControlState = {
     zoomLevel: number | null;
     zoomMin: number | null;
     zoomMax: number | null;
     isFullPage: boolean;
     rotation: number;
+};
+export type ControlSlice = Resettable & ControlState & {
     setZoomLevel: (zoomLevel: number | null) => void;
     setZoomMin: (zoomMin: number | null) => void;
     setZoomMax: (zoomMax: number | null) => void;

package/dist/InstanceSlice.d.ts

@@ -1,9 +1,12 @@
 import { StateCreator } from 'zustand/vanilla';
 import { default as OpenSeadragon } from 'openseadragon';
 import { ViewerStore } from './ViewerStore.ts';
-export type InstanceSlice = {
+import { Resettable } from './Resettable.ts';
+export type InstanceState = {
     viewer: OpenSeadragon.Viewer | null;
     viewerReady: boolean;
+};
+export type InstanceSlice = Resettable & InstanceState & {
     setViewer: (viewer: OpenSeadragon.Viewer | null) => void;
     setViewerReady: (viewerReady: boolean) => void;
 };

package/dist/Resettable.d.ts

@@ -0,0 +1,3 @@
+export type Resettable = {
+    reset: () => void;
+};

package/dist/ViewerStore.d.ts

@@ -2,5 +2,6 @@ import { InstanceSlice } from './InstanceSlice.ts';
 import { ControlSlice } from './ControlSlice.ts';
 import { ManifestSlice } from './manifest/ManifestSlice.ts';
 import { CanvasSlice } from './manifest/CanvasSlice.ts';
-export type ViewerStore = InstanceSlice & ControlSlice & ManifestSlice & CanvasSlice;
+import { Resettable } from './Resettable.ts';
+export type ViewerStore = InstanceSlice & ControlSlice & ManifestSlice & CanvasSlice & Resettable;
 export declare const createViewerStore: () => import('zustand').StoreApi<ViewerStore>;

package/dist/index.d.ts

@@ -12,4 +12,3 @@ export { useVault } from './manifest/useVault';
 export { findTileSource } from './manifest/findTileSource';
 export { findThumbnail } from './manifest/findThumbnail';
 export { getImageServiceId } from './manifest/getImageServiceId';
-export { getAnnotationPageIds } from './manifest/getAnnotationPageIds.ts';

package/dist/index.js

@@ -1774,60 +1774,73 @@ var E = class {
     this.dispatch(typeof r2 == "function" ? i2.setMetaValueDynamic({ id: e2, meta: t3, key: n2, updateValue: r2 }) : i2.setMetaValue({ id: e2, meta: t3, key: n2, value: r2 }));
   }
 };
-const createInstanceSlice = (set) => ({
+const defaultState$1 = {
   viewer: null,
-  viewerReady: !1,
+  viewerReady: !1
+}, createInstanceSlice = (set) => ({
+  ...defaultState$1,
   setViewer: (viewer) => set({ viewer }),
-  setViewerReady: (viewerReady) => set({ viewerReady })
-}), createControlSlice = (set) => ({
+  setViewerReady: (viewerReady) => set({ viewerReady }),
+  reset: () => set(defaultState$1)
+}), defaultState = {
   zoomLevel: null,
   zoomMin: null,
   zoomMax: null,
   isFullPage: !1,
-  rotation: 0,
+  rotation: 0
+}, createControlSlice = (set) => ({
+  ...defaultState,
   setZoomLevel: (zoomLevel) => set({ zoomLevel }),
   setZoomMin: (zoomMin) => set({ zoomMin }),
   setZoomMax: (zoomMax) => set({ zoomMax }),
   setIsFullPage: (isFullPage) => set({ isFullPage }),
-  setRotation: (rotation) => set({ rotation })
-}), defaultState = { url: null, isLoading: !1, error: null }, createManifestSlice = (vault) => (set, get) => ({
-  manifest: { ...defaultState, vault },
+  setRotation: (rotation) => set({ rotation }),
+  reset: () => set(defaultState)
+}), defaultManifest = {
+  url: null,
+  isLoading: !1,
+  error: null
+}, createManifestSlice = (vault) => (set) => ({
+  vault,
+  ...defaultManifest,
   loadManifest: async (url) => {
-    const { vault: vault2 } = get().manifest;
-    set({ manifest: { vault: vault2, url, isLoading: !0, error: null } });
+    set({ url, isLoading: !0, error: null });
     try {
-      await vault2.loadManifest(url), set({ manifest: { vault: vault2, url, isLoading: !1, error: null } });
+      await vault.loadManifest(url), set({ isLoading: !1, error: null });
     } catch (e2) {
       const error = e2 instanceof Error ? e2.message : "Unknown error";
-      set({ manifest: { vault: vault2, url, isLoading: !1, error } });
+      set({ isLoading: !1, error });
     }
-  }
-}), createCanvasSlice = (set, get) => ({
-  canvas: {
-    currentIndex: 0
   },
+  reset: () => set(defaultManifest)
+}), defaultCanvas = {
+  currentIndex: 0
+}, createCanvasSlice = (set, get) => ({
+  ...defaultCanvas,
   goToCanvas: (index) => {
-    const { vault, url } = get().manifest;
+    const { vault, url } = get();
     if (!url)
       return;
     const manifest = vault.get({ id: url, type: "Manifest" }), clamped = Math.max(0, Math.min(index, manifest.items.length - 1));
-    set({ canvas: { currentIndex: clamped } });
+    set({ currentIndex: clamped });
   },
   nextCanvas: () => {
-    const { canvas, goToCanvas } = get();
-    goToCanvas(canvas.currentIndex + 1);
+    const { currentIndex, goToCanvas } = get();
+    goToCanvas(currentIndex + 1);
   },
   prevCanvas: () => {
-    const { canvas, goToCanvas } = get();
-    goToCanvas(canvas.currentIndex - 1);
-  }
+    const { currentIndex, goToCanvas } = get();
+    goToCanvas(currentIndex - 1);
+  },
+  reset: () => set(defaultCanvas)
 }), createViewerStore = () => {
-  const vault = new E();
+  const vault = new E(), resets = [], withReset = (slice) => (resets.push(slice.reset), slice);
   return createStore((...a2) => ({
-    ...createInstanceSlice(...a2),
-    ...createControlSlice(...a2),
-    ...createManifestSlice(vault)(...a2),
-    ...createCanvasSlice(...a2)
+    ...withReset(createInstanceSlice(...a2)),
+    ...withReset(createControlSlice(...a2)),
+    ...withReset(createManifestSlice(vault)(...a2)),
+    ...withReset(createCanvasSlice(...a2)),
+    reset: () => resets.forEach((fn) => fn())
   }));
 }, ViewerContext = createContext(null);
 function orThrow(msg) {
@@ -1920,7 +1933,7 @@ function useViewerStoreSelector(selector) {
   return useStore(store, selector);
 }
 function useCanvas() {
-  const { vault, url, isLoading } = useViewerStoreSelector((s2) => s2.manifest), currentIndex = useViewerStoreSelector((s2) => s2.canvas.currentIndex), goTo = useViewerStoreSelector((s2) => s2.goToCanvas), next = useViewerStoreSelector((s2) => s2.nextCanvas), prev = useViewerStoreSelector((s2) => s2.prevCanvas), { current, total } = useMemo(() => {
+  const vault = useViewerStoreSelector((s2) => s2.vault), url = useViewerStoreSelector((s2) => s2.url), isLoading = useViewerStoreSelector((s2) => s2.isLoading), currentIndex = useViewerStoreSelector((s2) => s2.currentIndex), goTo = useViewerStoreSelector((s2) => s2.goToCanvas), next = useViewerStoreSelector((s2) => s2.nextCanvas), prev = useViewerStoreSelector((s2) => s2.prevCanvas), { current, total } = useMemo(() => {
     if (!url || isLoading)
       return { current: null, total: 0 };
     const manifest = vault.get({ id: url, type: "Manifest" }), canvasRef = manifest.items[currentIndex] ?? orThrow("No canvas ref for " + currentIndex), current2 = vault.get(canvasRef), total2 = manifest.items.length;
@@ -1929,21 +1942,20 @@ function useCanvas() {
   return { currentIndex, current, total, goTo, next, prev };
 }
 function useVault() {
-  return useViewerStoreSelector((s2) => s2.manifest.vault);
+  return useViewerStoreSelector((s2) => s2.vault);
 }
 function Viewer({ showControls = !0 }) {
   const containerRef = useRef(null), store = useViewerStore(), vault = useVault(), { current } = useCanvas(), tileSource = current ? findTileSource(vault, current) : null;
   return useEffect(() => {
-    if (!containerRef.current || !tileSource)
+    if (!containerRef.current)
       return;
     const viewer = new Viewer$1({
       element: containerRef.current,
       prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
       crossOriginPolicy: "Anonymous",
-      tileSources: tileSource,
       showNavigationControl: showControls
     });
-    store.getState().setViewer(viewer), viewer.addOnceHandler("open", () => {
+    store.getState().setViewer(viewer), viewer.addHandler("open", () => {
       const state2 = store.getState();
       state2.setViewerReady(!0), state2.setZoomLevel(viewer.viewport.getZoom()), state2.setZoomMin(viewer.viewport.getMinZoom()), state2.setZoomMax(viewer.viewport.getMaxZoom()), state2.setRotation(viewer.viewport.getRotation());
     });
@@ -1953,11 +1965,12 @@ function Viewer({ showControls = !0 }) {
       store.getState().setRotation(viewer.viewport.getRotation());
     };
     return viewer.addHandler("animation-start", onZoom), viewer.addHandler("animation-finish", onZoom), viewer.addHandler("rotate", onRotate), () => {
-      viewer.removeHandler("animation-start", onZoom), viewer.removeHandler("animation-finish", onZoom), viewer.removeHandler("rotate", onRotate), viewer.destroy();
-      const state2 = store.getState();
-      state2.setViewer(null), state2.setViewerReady(!1), state2.setZoomLevel(null), state2.setZoomMin(null), state2.setZoomMax(null), state2.setIsFullPage(!1), state2.setRotation(0);
+      viewer.destroy(), store.getState().reset();
     };
-  }, [tileSource, showControls, store]), /* @__PURE__ */ jsx(
+  }, [showControls, store]), useEffect(() => {
+    const viewer = store.getState().viewer;
+    !viewer || !tileSource || viewer.open(tileSource);
+  }, [tileSource, store]), /* @__PURE__ */ jsx(
     "div",
     {
       id: "viewer",
@@ -2040,8 +2053,8 @@ function useViewerControls(fullscreenRef) {
   };
 }
 function useManifest() {
-  const manifest = useViewerStoreSelector((s2) => s2.manifest), isReady = !!manifest.url && !manifest.isLoading && !manifest.error;
-  return { ...manifest, isReady };
+  const url = useViewerStoreSelector((s2) => s2.url), isLoading = useViewerStoreSelector((s2) => s2.isLoading), error = useViewerStoreSelector((s2) => s2.error);
+  return { url, isLoading, error, isReady: !!url && !isLoading && !error };
 }
 function useLoadManifest() {
   return useViewerStoreSelector((s2) => s2.loadManifest);
@@ -2049,16 +2062,12 @@ function useLoadManifest() {
 function findThumbnail(vault, canvas, height = 120) {
   return getImageServiceId(vault, canvas) ? `/full/,${height}/0/default.jpg` : null;
 }
-function getAnnotationPageIds(canvas) {
-  return canvas.annotations.map((ref) => ref.id).filter((id) => !!id);
-}
 export {
   Overlay,
   Viewer,
   ViewerProvider,
   findThumbnail,
   findTileSource,
-  getAnnotationPageIds,
   getImageServiceId,
   useCanvas,
   useImageInfo,

package/dist/manifest/CanvasSlice.d.ts

@@ -1,10 +1,10 @@
 import { StateCreator } from 'zustand/vanilla';
 import { ViewerStore } from '../ViewerStore.ts';
+import { Resettable } from '../Resettable.ts';
 export type CanvasState = {
     currentIndex: number;
 };
-export type CanvasSlice = {
-    canvas: CanvasState;
+export type CanvasSlice = Resettable & CanvasState & {
     goToCanvas: (index: number) => void;
     nextCanvas: () => void;
     prevCanvas: () => void;

package/dist/manifest/ManifestSlice.d.ts

@@ -1,14 +1,14 @@
 import { StateCreator } from 'zustand/vanilla';
 import { Vault } from '@iiif/helpers/vault';
 import { ViewerStore } from '../ViewerStore.ts';
+import { Resettable } from '../Resettable.ts';
 export type ManifestState = {
     url: string | null;
-    vault: Vault;
     isLoading: boolean;
     error: string | null;
 };
-export type ManifestSlice = {
-    manifest: ManifestState;
+export type ManifestSlice = Resettable & ManifestState & {
+    vault: Vault;
     loadManifest: (url: string) => Promise<void>;
 };
 export declare const createManifestSlice: (vault: Vault) => StateCreator<ViewerStore, [], [], ManifestSlice>;

package/dist/manifest/useManifest.d.ts

@@ -1,8 +1,7 @@
 export declare function useManifest(): {
-    isReady: boolean;
     url: string | null;
-    vault: import('@iiif/helpers/vault').Vault;
     isLoading: boolean;
     error: string | null;
+    isReady: boolean;
 };
 export declare function useLoadManifest(): (url: string) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knaw-huc/osd-iiif-viewer",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/knaw-huc/osd-iiif-viewer.git"

package/dist/manifest/getAnnotationPageIds.d.ts

@@ -1,3 +0,0 @@
-import { CanvasNormalized } from '@iiif/presentation-3-normalized';
-import { Id } from '../Id.ts';
-export declare function getAnnotationPageIds(canvas: CanvasNormalized): Id[];