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

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,8 +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, useState, useCallback } from "react";
-import { createStore } from "zustand/vanilla";
-import { useStore } from "zustand/index";
 const createInstanceSlice = (set) => ({
   viewer: null,
   viewerReady: !1,
@@ -153,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
@@ -205,9 +247,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 +279,6 @@ function useViewerControls(fullscreenRef) {
     isFullPage
   };
 }
-function useViewerReady() {
-  return useViewerStoreSelector((s) => s.viewerReady);
-}
 function useManifest() {
   return useViewerStoreSelector((s) => s.manifest);
 }
@@ -250,6 +286,7 @@ function useLoadManifest() {
   return useViewerStoreSelector((s) => s.loadManifest);
 }
 export {
+  HighlightOverlay,
   ViewerCanvas,
   ViewerProvider,
   useCanvas,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knaw-huc/osd-iiif-viewer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",