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

package/README.md

@@ -5,8 +5,8 @@ Lightweight React wrapper around OpenSeadragon to display and browse image sourc
 Features:
 - Canvas navigation
 - Highlight overlay
-- Zoom and fullscreen controls
-- IIIF manifest loading
+- Zoom, rotate and fullscreen controls
+- Manifest loading and parsing with @iiif/helpers Vault
 
 ## Example
 

package/dist/index.js

@@ -1956,9 +1956,10 @@ 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;
-  return useEffect(() => {
-    if (!containerRef.current)
+  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 createOsdViewer() {
+    if (!containerRef.current || !isContainerReady)
       return;
     const viewer = new Viewer$1({
       element: containerRef.current,
@@ -1978,10 +1979,22 @@ function Viewer({ showControls = !0 }) {
     return viewer.addHandler("animation-start", onZoom), viewer.addHandler("animation-finish", onZoom), viewer.addHandler("rotate", onRotate), () => {
       viewer.destroy(), store.getState().resetViewer();
     };
-  }, [showControls, store]), useEffect(() => {
-    const viewer = store.getState().viewer;
-    !viewer || !tileSource || viewer.open(tileSource);
-  }, [tileSource, store]), /* @__PURE__ */ jsx(
+  }
+  useEffect(openTileSource, [tileSource, store, isContainerReady]);
+  function openTileSource() {
+    const state = store.getState(), viewer = state.viewer;
+    !viewer || !tileSource || (state.setViewerReady(!1), viewer.open(tileSource));
+  }
+  useEffect(resizeViewerOnContainerResize, [store]);
+  function resizeViewerOnContainerResize() {
+    const container = containerRef.current;
+    if (container)
+      return observeResize(container, () => {
+        const { viewer, viewerReady } = store.getState();
+        viewer && viewerReady && viewer.forceResize();
+      });
+  }
+  return /* @__PURE__ */ jsx(
     "div",
     {
       id: "viewer",
@@ -1990,6 +2003,24 @@ function Viewer({ showControls = !0 }) {
     }
   );
 }
+function observeResize(element, callback) {
+  const ro = new ResizeObserver((entries) => {
+    callback(entries[0].contentRect);
+  });
+  return ro.observe(element), () => ro.disconnect();
+}
+function useContainerSize(ref) {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  return useEffect(() => {
+    const element = ref.current;
+    if (!element)
+      return;
+    const rect = element.getBoundingClientRect();
+    return setSize({ width: rect.width, height: rect.height }), observeResize(element, (rect2) => {
+      setSize({ width: rect2.width, height: rect2.height });
+    });
+  }, [ref]), size;
+}
 function useViewer() {
   return useViewerStoreSelector((s2) => s2.viewer);
 }

package/package.json

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