@knaw-huc/osd-iiif-viewer 0.0.0

package/README.md

@@ -0,0 +1 @@
+# osd-iiif-viewer

package/dist/ControlSlice.d.ts

@@ -0,0 +1,15 @@
+import { StateCreator } from 'zustand/vanilla';
+import { ViewerStore } from './ViewerStore.ts';
+export type ControlSlice = {
+    zoomLevel: number | null;
+    zoomMin: number | null;
+    zoomMax: number | null;
+    isFullPage: boolean;
+    setZoomLevel: (zoomLevel: number | null) => void;
+    setZoomMin: (zoomMin: number | null) => void;
+    setZoomMax: (zoomMax: number | null) => void;
+    setIsFullPage: (isFullPage: boolean) => void;
+};
+export declare const createControlSlice: StateCreator<ViewerStore, [
+], [
+], ControlSlice>;

package/dist/HighlightOverlay.d.ts

@@ -0,0 +1,11 @@
+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 {};

package/dist/Id.d.ts

@@ -0,0 +1 @@
+export type Id = string;

package/dist/InstanceSlice.d.ts

@@ -0,0 +1,12 @@
+import { StateCreator } from 'zustand/vanilla';
+import { default as OpenSeadragon } from 'openseadragon';
+import { ViewerStore } from './ViewerStore.ts';
+export type InstanceSlice = {
+    viewer: OpenSeadragon.Viewer | null;
+    viewerReady: boolean;
+    setViewer: (viewer: OpenSeadragon.Viewer | null) => void;
+    setViewerReady: (viewerReady: boolean) => void;
+};
+export declare const createInstanceSlice: StateCreator<ViewerStore, [
+], [
+], InstanceSlice>;

package/dist/ViewerCanvas.d.ts

@@ -0,0 +1,5 @@
+type ViewerCanvasProps = {
+    showControls?: boolean;
+};
+export declare function ViewerCanvas({ showControls }: ViewerCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ViewerContext.d.ts

@@ -0,0 +1,3 @@
+import { StoreApi } from 'zustand';
+import { ViewerStore } from './ViewerStore.ts';
+export declare const ViewerContext: import('react').Context<StoreApi<ViewerStore> | null>;

package/dist/ViewerProvider.d.ts

@@ -0,0 +1,3 @@
+export declare function ViewerProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ViewerStore.d.ts

@@ -0,0 +1,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;
+export declare const createViewerStore: () => import('zustand').StoreApi<ViewerStore>;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { ViewerCanvas } from './ViewerCanvas';
+export type { ViewerStore } from './ViewerStore.ts';
+export type { InstanceSlice } from './InstanceSlice.ts';
+export type { ControlSlice } from './ControlSlice.ts';
+export { useViewer } from './useViewer.tsx';
+export { useViewerControls } from './useViewerControls.tsx';
+export { ViewerProvider } from './ViewerProvider.tsx';
+export { useViewerReady } from './useViewerReady.tsx';
+export { useViewerStore } from './useViewerStore.tsx';

package/dist/index.js

@@ -0,0 +1,254 @@
+import { jsx } from "react/jsx-runtime";
+import { Viewer } from "openseadragon";
+import { createContext, useContext, useRef, useEffect, useCallback, useState } from "react";
+import "zustand";
+import { createStore } from "zustand/vanilla";
+import { useStore } from "zustand/index";
+const createInstanceSlice = (set) => ({
+  viewer: null,
+  viewerReady: !1,
+  setViewer: (viewer) => set({ viewer }),
+  setViewerReady: (viewerReady) => set({ viewerReady })
+}), createControlSlice = (set) => ({
+  zoomLevel: null,
+  zoomMin: null,
+  zoomMax: null,
+  isFullPage: !1,
+  setZoomLevel: (zoomLevel) => set({ zoomLevel }),
+  setZoomMin: (zoomMin) => set({ zoomMin }),
+  setZoomMax: (zoomMax) => set({ zoomMax }),
+  setIsFullPage: (isFullPage) => set({ isFullPage })
+}), defaultLanguage = "en";
+function findLanguage(translations, lang = defaultLanguage) {
+  if (!translations || typeof translations != "object")
+    return "";
+  const map = translations, tryLang = (lang2) => Array.isArray(map[lang2]) && map[lang2].length ? map[lang2][0] : null;
+  return tryLang(lang) ?? tryLang(defaultLanguage) ?? tryLang("none") ?? firstValue(map) ?? "";
+}
+function firstValue(map) {
+  for (const values of Object.values(map))
+    if (Array.isArray(values) && values.length)
+      return values[0];
+  return null;
+}
+function orThrow(msg) {
+  throw new Error(msg);
+}
+function parseManifest(json) {
+  return assertManifest(json), {
+    id: json.id,
+    label: findLanguage(json.label),
+    canvases: json.items.map(parseCanvas),
+    structures: parseStructures(json.structures),
+    metadata: {
+      attribution: parseAttribution(json.requiredStatement),
+      rights: json.rights ?? null,
+      thumbnailUrl: parseThumbnailUrl(json.thumbnail)
+    }
+  };
+}
+function parseCanvas(canvas) {
+  const painting = (canvas.items?.find(isAnnotationPage) ?? orThrow("No annotation page")).items?.find(isPaintingAnnotation) ?? orThrow("No painting annotation"), serviceId = (toBody(painting.body).service?.find(isImageService2) ?? orThrow("No ImageService2"))["@id"] ?? orThrow("No @id"), annotationPageIds = (canvas.annotations ?? []).filter(isAnnotationPage).map((a) => a.id).filter(isString);
+  return {
+    id: canvas.id,
+    label: findLanguage(canvas.label),
+    width: canvas.width,
+    height: canvas.height,
+    imageServiceId: serviceId,
+    annotationPageIds
+  };
+}
+function parseStructures(ranges) {
+  if (!ranges?.length)
+    return [];
+  const top = ranges[0];
+  return top.items?.length ? top.items.filter(isRange).map(parseRange) : [];
+}
+function parseRange(range) {
+  const items = range.items ?? [];
+  return {
+    id: range.id,
+    label: findLanguage(range.label),
+    canvasIds: items.filter(isCanvasRef).map((c) => c.id),
+    children: items.filter(isRange).map(parseRange)
+  };
+}
+function parseAttribution(statement) {
+  return statement ? findLanguage(statement.value) : null;
+}
+function parseThumbnailUrl(thumbnails) {
+  return thumbnails?.length ? thumbnails[0].id : null;
+}
+function toBody(body) {
+  return Array.isArray(body) ? body[0] ?? orThrow("Empty body array") : body;
+}
+function assertManifest(json) {
+  if (!json || typeof json != "object")
+    throw new Error("No manifest found");
+  if (!("type" in json) || json.type !== "Manifest")
+    throw new Error("No manifest type found");
+}
+function isAnnotationPage(item) {
+  return typeof item == "object" && item !== null && "type" in item && item.type === "AnnotationPage";
+}
+function isPaintingAnnotation(item) {
+  return typeof item == "object" && item !== null && "motivation" in item && item.motivation === "painting";
+}
+function isImageService2(service) {
+  return service["@type"] === "ImageService2";
+}
+function isRange(item) {
+  return item.type === "Range";
+}
+function isCanvasRef(item) {
+  return item.type === "Canvas";
+}
+function isString(value) {
+  return typeof value == "string";
+}
+const defaultManifest = { data: null, url: "", isLoading: !1, error: null }, createManifestSlice = (set) => ({
+  manifest: { ...defaultManifest },
+  loadManifest: async (url) => {
+    const loading = { ...defaultManifest, url, loading: !0 };
+    set({ manifest: loading });
+    const done = { ...loading, loading: !1 };
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        const error = `Failed to fetch manifest: ${response.status}`;
+        set({ manifest: { ...done, error } });
+        return;
+      }
+      const json = await response.json(), data = parseManifest(json);
+      set({ manifest: { ...done, data } });
+    } catch (e) {
+      const error = e instanceof Error ? e.message : "Unknown error";
+      set({ manifest: { ...done, error } });
+    }
+  }
+}), createCanvasSlice = (set, get) => ({
+  canvas: {
+    currentIndex: 0
+  },
+  goToCanvas: (index) => {
+    const canvases = get().manifest.data?.canvases;
+    if (!canvases?.length)
+      return;
+    const clamped = Math.max(0, Math.min(index, canvases.length - 1));
+    set({ canvas: { currentIndex: clamped } });
+  },
+  nextCanvas: () => {
+    const { canvas, goToCanvas } = get();
+    goToCanvas(canvas.currentIndex + 1);
+  },
+  prevCanvas: () => {
+    const { canvas, goToCanvas } = get();
+    goToCanvas(canvas.currentIndex - 1);
+  }
+}), createViewerStore = () => createStore((...a) => ({
+  ...createInstanceSlice(...a),
+  ...createControlSlice(...a),
+  ...createManifestSlice(...a),
+  ...createCanvasSlice(...a)
+})), ViewerContext = createContext(null);
+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 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
+  ), total = useViewerStoreSelector(
+    (s) => s.manifest.data?.canvases.length ?? 0
+  );
+  return { currentIndex, goTo, next, prev, current, total };
+}
+function ViewerCanvas({ showControls = !0 }) {
+  const containerRef = useRef(null), store = useViewerStore(), { current } = useCanvas(), tileSource = current ? findTileSource(current) : null;
+  return useEffect(() => {
+    if (!containerRef.current || !tileSource)
+      return;
+    const viewer = new Viewer({
+      element: containerRef.current,
+      prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
+      crossOriginPolicy: "Anonymous",
+      tileSources: tileSource,
+      showNavigationControl: showControls
+    });
+    store.getState().setViewer(viewer), viewer.addOnceHandler("open", () => {
+      const state2 = store.getState();
+      state2.setViewerReady(!0), state2.setZoomLevel(viewer.viewport.getZoom()), state2.setZoomMin(viewer.viewport.getMinZoom()), state2.setZoomMax(viewer.viewport.getMaxZoom());
+    });
+    const onZoom = () => {
+      store.getState().setZoomLevel(viewer.viewport.getZoom());
+    };
+    return viewer.addHandler("animation-start", onZoom), viewer.addHandler("animation-finish", onZoom), () => {
+      viewer.removeHandler("animation-start", onZoom), viewer.removeHandler("animation-finish", onZoom), viewer.destroy();
+      const state2 = store.getState();
+      state2.setViewer(null), state2.setViewerReady(!1), state2.setZoomLevel(null), state2.setZoomMin(null), state2.setZoomMax(null), state2.setIsFullPage(!1);
+    };
+  }, [tileSource, showControls, store]), /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: "viewer",
+      ref: containerRef,
+      style: { width: "100%", height: "100%" }
+    }
+  );
+}
+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(() => {
+    const onFullscreenChange = () => {
+      store.getState().setIsFullPage(!!document.fullscreenElement);
+    };
+    return document.addEventListener("fullscreenchange", onFullscreenChange), () => document.removeEventListener(
+      "fullscreenchange",
+      onFullscreenChange
+    );
+  }, [store]);
+  const zoomIn = useCallback(() => {
+    viewer?.viewport.zoomBy(1.5);
+  }, [viewer]), zoomOut = useCallback(() => {
+    viewer?.viewport.zoomBy(0.667);
+  }, [viewer]), home = useCallback(() => {
+    viewer?.viewport.goHome();
+  }, [viewer]), toggleFullPage = useCallback(() => {
+    const container = fullscreenRef?.current;
+    container && (document.fullscreenElement ? document.exitFullscreen() : container.requestFullscreen());
+  }, [fullscreenRef]);
+  return {
+    zoomIn,
+    zoomOut,
+    home,
+    toggleFullPage,
+    zoomLevel,
+    zoomMin,
+    zoomMax,
+    isFullPage
+  };
+}
+function ViewerProvider({ children }) {
+  const [store] = useState(() => createViewerStore());
+  return /* @__PURE__ */ jsx(ViewerContext.Provider, { value: store, children });
+}
+function useViewerReady() {
+  return useViewerStoreSelector((s) => s.viewerReady);
+}
+export {
+  ViewerCanvas,
+  ViewerProvider,
+  useViewer,
+  useViewerControls,
+  useViewerReady,
+  useViewerStore
+};

package/dist/manifest/CanvasSlice.d.ts

@@ -0,0 +1,14 @@
+import { StateCreator } from 'zustand/vanilla';
+import { ViewerStore } from '../ViewerStore.ts';
+export type CanvasState = {
+    currentIndex: number;
+};
+export type CanvasSlice = {
+    canvas: CanvasState;
+    goToCanvas: (index: number) => void;
+    nextCanvas: () => void;
+    prevCanvas: () => void;
+};
+export declare const createCanvasSlice: StateCreator<ViewerStore, [
+], [
+], CanvasSlice>;

package/dist/manifest/ManifestSlice.d.ts

@@ -0,0 +1,16 @@
+import { StateCreator } from 'zustand/vanilla';
+import { ViewerManifest } from './model.ts';
+import { ViewerStore } from '../ViewerStore.ts';
+export type ManifestState = {
+    isLoading: boolean;
+    data: ViewerManifest | null;
+    url: string | null;
+    error: string | null;
+};
+export type ManifestSlice = {
+    manifest: ManifestState;
+    loadManifest: (url: string) => Promise<void>;
+};
+export declare const createManifestSlice: StateCreator<ViewerStore, [
+], [
+], ManifestSlice>;

package/dist/manifest/findLanguage.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Extract display string in preferred language, or english, or first available
+ */
+export declare function findLanguage(translations: unknown, lang?: string): string;

package/dist/manifest/findThumbnail.d.ts

@@ -0,0 +1,2 @@
+import { ViewerCanvas } from './model.ts';
+export declare function findThumbnail(canvas: ViewerCanvas, height?: number): string;

package/dist/manifest/findTileSource.d.ts

@@ -0,0 +1,2 @@
+import { ViewerCanvas } from './model.ts';
+export declare function findTileSource(canvas: ViewerCanvas): string;

package/dist/manifest/model.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Internal model of parsed iiif manifests
+ */
+export type ViewerManifest = {
+    id: string;
+    label: string;
+    canvases: ViewerCanvas[];
+    structures: ViewerRange[];
+    metadata: ViewerMetadata;
+};
+export type ViewerCanvas = {
+    id: string;
+    label: string;
+    width: number;
+    height: number;
+    imageServiceId: string;
+    annotationPageIds: string[];
+};
+export type ViewerRange = {
+    id: string;
+    label: string;
+    canvasIds: string[];
+    children: ViewerRange[];
+};
+export type ViewerMetadata = {
+    attribution: string | null;
+    rights: string | null;
+    thumbnailUrl: string | null;
+};

package/dist/manifest/parseManifest.d.ts

@@ -0,0 +1,2 @@
+import { ViewerManifest } from './model.ts';
+export declare function parseManifest(json: unknown): ViewerManifest;

package/dist/manifest/parseManifest.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/manifest/useCanvas.d.ts

@@ -0,0 +1,8 @@
+export declare function useCanvas(): {
+    currentIndex: number;
+    goTo: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+    current: import('./model.ts').ViewerCanvas | null;
+    total: number;
+};

package/dist/manifest/useManifest.d.ts

@@ -0,0 +1,2 @@
+export declare function useManifest(): import('./ManifestSlice.ts').ManifestState;
+export declare function useLoadManifest(): (url: string) => Promise<void>;

package/dist/useViewer.d.ts

@@ -0,0 +1 @@
+export declare function useViewer(): import('openseadragon').Viewer | null;

package/dist/useViewerControls.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+/**
+ * Expose zoom and full-screen controls and state
+ *
+ * Note: Fullscreen is handled via the native Fullscreen API,
+ * skipping setFullScreen/setFullPage which moves
+ * the viewer to <body> and destroys the React component tree.
+ * @see https://github.com/openseadragon/openseadragon/issues/449
+ */
+export declare function useViewerControls(fullscreenRef: RefObject<HTMLElement | null>): {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    home: () => void;
+    toggleFullPage: () => void;
+    zoomLevel: number | null;
+    zoomMin: number | null;
+    zoomMax: number | null;
+    isFullPage: boolean;
+};

package/dist/useViewerReady.d.ts

@@ -0,0 +1 @@
+export declare function useViewerReady(): boolean;

package/dist/useViewerStore.d.ts

@@ -0,0 +1 @@
+export declare function useViewerStore(): import('zustand').StoreApi<import('./ViewerStore.ts').ViewerStore>;

package/dist/useViewerStoreSelector.d.ts

@@ -0,0 +1,2 @@
+import { ViewerStore } from './ViewerStore.ts';
+export declare function useViewerStoreSelector<T>(selector: (state: ViewerStore) => T): T;

package/dist/util/assertSvgElement.d.ts

@@ -0,0 +1 @@
+export declare function assertSvgElement(element: unknown): asserts element is SVGElement;

package/dist/util/orThrow.d.ts

@@ -0,0 +1 @@
+export declare function orThrow(msg: string): never;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@knaw-huc/osd-iiif-viewer",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "openseadragon": "^5.0.1",
+    "zustand": "^5.0.9"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@iiif/presentation-3": "^2.2.3",
+    "@stylistic/eslint-plugin": "^4.0.0",
+    "@types/node": "^24.10.1",
+    "@types/openseadragon": "^5.0.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.1"
+  }
+}