@canopy-iiif/app 1.9.19 → 1.9.21

package/ui/dist/server.mjs

@@ -209,6 +209,10 @@ var Viewer = (props) => {
     DEFAULT_VIEWER_OPTIONS,
     props && props.options
   );
+  const crossOriginExplicitlyUndefined = props && props.options && Object.prototype.hasOwnProperty.call(props.options, "crossOrigin") && props.options.crossOrigin === void 0;
+  if (crossOriginExplicitlyUndefined) {
+    mergedOptions.crossOrigin = null;
+  }
   useEffect(() => {
     let mounted = true;
     const canUseDom = typeof window !== "undefined" && typeof document !== "undefined";
@@ -699,21 +703,16 @@ var ImageStory = (props = {}) => {
     if (!node) return void 0;
     let cleanup = null;
     let cancelled = false;
+    let mounted = false;
+    let resizeObserver = null;
+    let pollId = null;
     const payload = sanitizeImageStoryProps({
       iiifContent,
       disablePanAndZoom,
       pointOfInterestSvgUrl,
       viewerOptions
     });
-    mountImageStory(node, payload).then((destroy) => {
-      if (cancelled) {
-        destroy && destroy();
-        return;
-      }
-      cleanup = typeof destroy === "function" ? destroy : null;
-    });
-    return () => {
-      cancelled = true;
+    const destroyCleanup = () => {
       if (cleanup) {
         try {
           cleanup();
@@ -722,6 +721,67 @@ var ImageStory = (props = {}) => {
         cleanup = null;
       }
     };
+    const disconnectWatchers = () => {
+      if (resizeObserver) {
+        try {
+          resizeObserver.disconnect();
+        } catch (_) {
+        }
+        resizeObserver = null;
+      }
+      if (pollId) {
+        window.clearTimeout(pollId);
+        pollId = null;
+      }
+    };
+    const hasUsableSize = () => {
+      if (!node) return false;
+      const rect = node.getBoundingClientRect();
+      const width = (rect == null ? void 0 : rect.width) || node.offsetWidth || node.clientWidth;
+      const height2 = (rect == null ? void 0 : rect.height) || node.offsetHeight || node.clientHeight;
+      return width > 2 && height2 > 2;
+    };
+    const mountViewer = () => {
+      if (!node || mounted || cancelled) return false;
+      if (!hasUsableSize()) return false;
+      mounted = true;
+      disconnectWatchers();
+      mountImageStory(node, payload).then((destroy) => {
+        if (cancelled) {
+          destroy && destroy();
+          return;
+        }
+        cleanup = typeof destroy === "function" ? destroy : null;
+      });
+      return true;
+    };
+    if (!mountViewer()) {
+      if (typeof window !== "undefined" && typeof window.ResizeObserver === "function") {
+        resizeObserver = new window.ResizeObserver(() => {
+          if (mounted || cancelled) return;
+          mountViewer();
+        });
+        try {
+          resizeObserver.observe(node);
+        } catch (_) {
+        }
+      }
+      const schedulePoll = () => {
+        if (mounted || cancelled) return;
+        pollId = window.setTimeout(() => {
+          pollId = null;
+          if (!mountViewer()) {
+            schedulePoll();
+          }
+        }, 200);
+      };
+      schedulePoll();
+    }
+    return () => {
+      cancelled = true;
+      disconnectWatchers();
+      destroyCleanup();
+    };
   }, [iiifContent, disablePanAndZoom, pointOfInterestSvgUrl, viewerOptions]);
   return /* @__PURE__ */ React6.createElement(
     "div",