@knaw-huc/osd-iiif-viewer 0.1.10 → 0.1.12

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(() => {
+  }
+  useEffect(openTileSource, [tileSource, store, isContainerReady]);
+  function openTileSource() {
     const state = store.getState(), viewer = state.viewer;
     !viewer || !tileSource || (state.setViewerReady(!1), viewer.open(tileSource));
-  }, [tileSource, store]), /* @__PURE__ */ jsx(
+  }
+  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);
 }
@@ -2016,7 +2047,7 @@ function Overlay({ location, children }) {
   return 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/package.json

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