@knaw-huc/osd-iiif-viewer 0.1.11 → 0.2.0

package/dist/Viewer.d.ts

@@ -1,5 +1,6 @@
+import { Options as OsdOptions } from 'openseadragon';
 type ViewerProps = {
-    showControls?: boolean;
+    options?: Partial<OsdOptions>;
 };
-export declare function Viewer({ showControls }: ViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Viewer(props: ViewerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Viewer as Viewer$1 } from "openseadragon";
-import { createContext, useContext, useMemo, useRef, useEffect, useState, useCallback } from "react";
+import { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from "react";
 import { createStore } from "zustand/vanilla";
 import { useStore } from "zustand/index";
 import { createPortal } from "react-dom";
@@ -1955,17 +1955,25 @@ function useManifest() {
 function useLoadManifest() {
   return useViewerStoreSelector((s2) => s2.loadManifest);
 }
-function Viewer({ showControls = !0 }) {
-  const containerRef = useRef(null), store = useViewerStore(), { vault } = useManifest(), { current } = useCanvas(), tileSource = current ? findTileSource(vault, current) : null, size = useContainerSize(containerRef), isContainerReady = size.width > 0 && size.height > 0;
-  useEffect(createOsdViewer, [isContainerReady, showControls, store]);
+function useStableProp(options) {
+  const [stable, setStable] = useState(options), [key, setKey] = useState(() => JSON.stringify(options)), json = JSON.stringify(options);
+  return json !== key && (setKey(json), setStable(options)), stable;
+}
+const defaultOptions = {
+  prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
+  crossOriginPolicy: "Anonymous",
+  showNavigationControl: !0
+};
+function Viewer(props) {
+  const containerRef = useRef(null), store = useViewerStore(), { vault } = useManifest(), { current } = useCanvas(), tileSource = current ? findTileSource(vault, current) : null, size = useContainerSize(containerRef), isContainerReady = size.width > 0 && size.height > 0, options = useStableProp(props.options);
+  useEffect(createOsdViewer, [isContainerReady, store, options]);
   function createOsdViewer() {
     if (!containerRef.current || !isContainerReady)
       return;
     const viewer = new Viewer$1({
-      element: containerRef.current,
-      prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
-      crossOriginPolicy: "Anonymous",
-      showNavigationControl: showControls
+      ...defaultOptions,
+      ...options,
+      element: containerRef.current
     });
     store.getState().setViewer(viewer), viewer.addHandler("open", () => {
       const state2 = store.getState();
@@ -2045,9 +2053,16 @@ function Overlay({ location, children }) {
     return el.style.position = "absolute", el.style.pointerEvents = "none", el;
   });
   return useEffect(() => {
+    function stopPropagation(e2) {
+      e2.target !== container && e2.stopPropagation();
+    }
+    return container.addEventListener("pointerdown", stopPropagation), () => {
+      container.removeEventListener("pointerdown", stopPropagation);
+    };
+  }, [container]), useEffect(() => {
     if (viewer)
       return viewer.addOverlay({ element: container, location }), () => {
-        viewer.removeOverlay(container);
+        viewer.isOpen() && viewer.removeOverlay(container);
       };
   }, [viewer, location, container]), viewer ? createPortal(children, container) : null;
 }

package/dist/useStableProp.d.ts

@@ -0,0 +1 @@
+export declare function useStableProp<T>(options: T): T;

package/package.json

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