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

package/dist/index.d.ts

@@ -1,9 +1,10 @@
+export { HighlightOverlay, type Highlight } from './HighlightOverlay.tsx';
 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';
+export { ViewerProvider } from './ViewerProvider';
+export { useViewer } from './useViewer';
+export { useViewerControls } from './useViewerControls';
+export { useViewerReady } from './useViewerReady';
+export { useViewerStore } from './useViewerStore';
+export { useManifest, useLoadManifest } from './manifest/useManifest';
+export { useCanvas } from './manifest/useCanvas';
+export type { ViewerManifest, ViewerCanvas as ViewerCanvasModel, ViewerRange, ViewerMetadata } from './manifest/model';

package/dist/index.js

@@ -1,9 +1,8 @@
+import { useStore } from "zustand/index";
+import { createContext, useContext, useEffect, useRef, useState, useCallback } from "react";
+import { createStore } from "zustand/vanilla";
 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,
@@ -154,13 +153,55 @@ 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 assertSvgElement(element) {
+  if (!(element instanceof SVGElement))
+    throw new Error("Expected SVGElement");
+}
+function HighlightOverlay({ highlights, onHover = noop }) {
+  const viewer = useViewer(), ready = useViewerReady();
+  return useEffect(() => {
+    if (!viewer || !ready || !highlights.length)
+      return;
+    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;
+}
+const noop = () => {
+};
+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
@@ -202,8 +243,9 @@ function ViewerCanvas({ showControls = !0 }) {
     }
   );
 }
-function useViewer() {
-  return useViewerStoreSelector((s) => s.viewer);
+function ViewerProvider({ children }) {
+  const [store] = useState(() => createViewerStore());
+  return /* @__PURE__ */ jsx(ViewerContext.Provider, { value: store, children });
 }
 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);
@@ -237,16 +279,19 @@ function useViewerControls(fullscreenRef) {
     isFullPage
   };
 }
-function ViewerProvider({ children }) {
-  const [store] = useState(() => createViewerStore());
-  return /* @__PURE__ */ jsx(ViewerContext.Provider, { value: store, children });
+function useManifest() {
+  return useViewerStoreSelector((s) => s.manifest);
 }
-function useViewerReady() {
-  return useViewerStoreSelector((s) => s.viewerReady);
+function useLoadManifest() {
+  return useViewerStoreSelector((s) => s.loadManifest);
 }
 export {
+  HighlightOverlay,
   ViewerCanvas,
   ViewerProvider,
+  useCanvas,
+  useLoadManifest,
+  useManifest,
   useViewer,
   useViewerControls,
   useViewerReady,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knaw-huc/osd-iiif-viewer",
-  "version": "0.0.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,4 +52,4 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.1"
   }
-}
+}