triiiceratops 0.16.2 → 0.16.4

package/dist/components/OSDViewer.svelte

@@ -15,6 +15,9 @@
     let viewer: any | undefined = $state.raw();
     let OSD: any | undefined = $state();
 
+    const IIIF_LEVEL0_V2_HTTPS = 'https://iiif.io/api/image/2/level0.json';
+    const IIIF_LEVEL0_V2_HTTP = 'http://iiif.io/api/image/2/level0.json';
+
     // Track OSD state changes for reactivity
     let osdVersion = $state(0);
     // Track last opened tile source to prevent unnecessary resets
@@ -169,6 +172,7 @@
             if (!mounted) return;
 
             OSD = osdModule.default || osdModule;
+            patchIiifLevel0ProfileCompatibility(OSD);
 
             // Initialize OpenSeadragon viewer
             viewer = OSD({
@@ -184,6 +188,9 @@
                 animationTime: 0.5,
                 springStiffness: 7.0,
                 zoomPerClick: 2.0,
+                // Lower threshold prevents blanking on sparse/level-0 pyramids
+                // when zooming far out. Consumers can override via config.
+                minPixelRatio: 0.1,
                 // Consumer-provided OSD overrides
                 ...(viewerState.config?.openSeadragonConfig ?? {}),
                 // Enable double-click to zoom, but keep clickToZoom disabled for Annotorious
@@ -193,6 +200,20 @@
                 },
             });
 
+            viewer.addHandler('open', () => {
+                const overrides = viewerState.config?.openSeadragonConfig ?? {};
+                if (overrides.minZoomLevel !== undefined) return;
+
+                // Prevent zooming into the "no tiles rendered" range seen on
+                // some level-0 services when zoomed far past home view.
+                const homeZoom = viewer.viewport.getHomeZoom();
+                viewer.viewport.minZoomLevel = homeZoom * 0.5;
+
+                if (overrides.minPixelRatio === undefined) {
+                    viewer.minPixelRatio = 0.1;
+                }
+            });
+
             // Notify plugins that OSD is ready
             viewerState.notifyOSDReady(viewer);
         })();
@@ -239,6 +260,43 @@
         }
     });
 
+    function normalizeIiifLevel0Profile<T>(source: T): T {
+        if (!source || typeof source !== 'object') return source;
+
+        const obj = source as any;
+        const profile = obj.profile;
+
+        if (typeof profile === 'string' && profile === IIIF_LEVEL0_V2_HTTPS) {
+            obj.profile = IIIF_LEVEL0_V2_HTTP;
+        } else if (Array.isArray(profile) && profile.length > 0) {
+            const first = profile[0];
+            if (typeof first === 'string' && first === IIIF_LEVEL0_V2_HTTPS) {
+                obj.profile = [IIIF_LEVEL0_V2_HTTP, ...profile.slice(1)];
+            }
+        }
+
+        return source;
+    }
+
+    function patchIiifLevel0ProfileCompatibility(osd: any) {
+        if (
+            !osd?.IIIFTileSource?.prototype ||
+            osd.__triiiceratopsIiifLevel0Patched
+        )
+            return;
+
+        const proto = osd.IIIFTileSource.prototype;
+        const originalConfigure = proto.configure;
+        if (typeof originalConfigure !== 'function') return;
+
+        proto.configure = function (data: any, url: string, postData: any) {
+            const configured = originalConfigure.call(this, data, url, postData);
+            return normalizeIiifLevel0Profile(configured);
+        };
+
+        osd.__triiiceratopsIiifLevel0Patched = true;
+    }
+
     // Pre-fetch info.json URLs to detect 401 auth errors before passing to OSD
     async function resolveTileSources(
         sources: any[],
@@ -248,18 +306,25 @@
     > {
         const resolved = await Promise.all(
             sources.map(async (source) => {
-                // Only fetch string sources (info.json URLs)
-                if (typeof source !== 'string') return source;
+                // Only probe string sources (info.json URLs); preserve string tile
+                // sources so OSD follows its normal source-loading path.
+                if (typeof source !== 'string')
+                    return normalizeIiifLevel0Profile(source);
                 try {
                     const response = await fetch(source);
                     if (response.status === 401) {
                         return { __authError: true };
                     }
-                    if (!response.ok) {
-                        // For other errors, pass through the URL and let OSD handle it
-                        return source;
+                    if (response.ok) {
+                        // Keep probing for auth, but preserve source URL so OSD
+                        // continues using IIIF tile source behavior.
+                        try {
+                            normalizeIiifLevel0Profile(await response.json());
+                        } catch {
+                            // Not JSON or malformed response; let OSD handle source URL.
+                        }
                     }
-                    return await response.json();
+                    return source;
                 } catch {
                     // Network errors: pass through and let OSD handle it
                     return source;
@@ -309,107 +374,178 @@
 
         // Capture stateKey for staleness guard
         const capturedKey = stateKey;
+        const overrides = viewerState.config?.openSeadragonConfig ?? {};
 
         if (mode === 'continuous') {
-            viewerState.tileSourceError = null;
+            // Continuous mode can include mixed-size canvases; keep tile culling
+            // thresholds low so smaller images don't disappear before full-strip view.
+            if (overrides.minPixelRatio === undefined) {
+                viewer.minPixelRatio = 0.01;
+            }
+            if (overrides.minZoomImageRatio === undefined) {
+                viewer.minZoomImageRatio = 0.1;
+            }
 
-            const gap = 0.025;
+            resolveTileSources(sources).then((result) => {
+                // Staleness guard: if tile sources changed while we were fetching, discard
+                if (capturedKey !== lastTileSourceStr) return;
 
-            // Build position info for all sources
-            const allPositions = sources.map((source, index) => {
-                let x = 0;
-                let y = 0;
-                if (isVertical) {
-                    const yPos = index * (1 + gap);
-                    y = isBTT ? -yPos : yPos;
-                } else {
-                    const xPos = index * (1 + gap);
-                    x = isRTL ? -xPos : xPos;
+                if (!result.ok) {
+                    viewerState.tileSourceError = result.error;
+                    viewer.close();
+                    return;
                 }
-                return { tileSource: source, x, y, width: 1.0 };
-            });
 
-            // Only open a window of canvases around the active one for fast initial load.
-            // The rest are added progressively after the viewer opens.
-            const INITIAL_WINDOW = 3; // canvases on each side of current
-            const currentIndex = viewerState.currentCanvasIndex;
-            const startIdx = Math.max(0, currentIndex - INITIAL_WINDOW);
-            const endIdx = Math.min(
-                allPositions.length,
-                currentIndex + INITIAL_WINDOW + 1,
-            );
+                viewerState.tileSourceError = null;
+                const resolvedSources = result.resolved;
 
-            const initialSpread = allPositions.slice(startIdx, endIdx);
-            viewer.open(initialSpread);
+                const gap = 0.025;
 
-            viewer.addOnceHandler('open', () => {
-                // Zoom to the active canvas
-                const itemIdx = currentIndex - startIdx;
-                const item = viewer.world.getItemAt(itemIdx);
-                if (item) {
-                    viewer.viewport.fitBounds(item.getBounds(), true);
-                }
+                // Build position info for all sources
+                const allPositions = resolvedSources.map((source, index) => {
+                    let x = 0;
+                    let y = 0;
+                    if (isVertical) {
+                        const yPos = index * (1 + gap);
+                        y = isBTT ? -yPos : yPos;
+                    } else {
+                        const xPos = index * (1 + gap);
+                        x = isRTL ? -xPos : xPos;
+                    }
+                    return { tileSource: source, x, y, width: 1.0 };
+                });
 
-                // Progressively add remaining canvases in batches
-                const remaining = [
-                    ...allPositions
-                        .slice(0, startIdx)
-                        .map((pos, i) => ({ ...pos, originalIndex: i })),
-                    ...allPositions
-                        .slice(endIdx)
-                        .map((pos, i) => ({
-                            ...pos,
-                            originalIndex: endIdx + i,
-                        })),
-                ];
-
-                const BATCH_SIZE = 5;
-                let batchIdx = 0;
-
-                function addNextBatch() {
-                    // Staleness guard
-                    if (capturedKey !== lastTileSourceStr) return;
-
-                    const batch = remaining.slice(
-                        batchIdx * BATCH_SIZE,
-                        (batchIdx + 1) * BATCH_SIZE,
-                    );
-                    if (batch.length === 0) {
-                        // All loaded — now set zoom constraints based on full world bounds
-                        const worldBounds = viewer.world.getHomeBounds();
-                        const viewportBounds = viewer.viewport.getBounds();
-                        const minZoom =
-                            (Math.min(
-                                viewportBounds.width / worldBounds.width,
-                                viewportBounds.height / worldBounds.height,
-                            ) *
-                                viewer.viewport.getZoom()) *
-                            0.8;
-                        viewer.viewport.minZoomLevel = minZoom;
-                        viewer.viewport.visibilityRatio = 1;
-                        return;
+                // Only open a window of canvases around the active one for fast initial load.
+                // The rest are added progressively after the viewer opens.
+                const INITIAL_WINDOW = 3; // canvases on each side of current
+                const currentIndex = viewerState.currentCanvasIndex;
+                const startIdx = Math.max(0, currentIndex - INITIAL_WINDOW);
+                const endIdx = Math.min(
+                    allPositions.length,
+                    currentIndex + INITIAL_WINDOW + 1,
+                );
+
+                const initialSpread = allPositions.slice(startIdx, endIdx);
+                viewer.open(initialSpread);
+
+                viewer.addOnceHandler('open', () => {
+                    // Zoom to the active canvas
+                    const itemIdx = currentIndex - startIdx;
+                    const item = viewer.world.getItemAt(itemIdx);
+                    if (item) {
+                        viewer.viewport.fitBounds(item.getBounds(), true);
                     }
 
-                    for (const pos of batch) {
-                        viewer.addTiledImage({
-                            tileSource: pos.tileSource,
-                            x: pos.x,
-                            y: pos.y,
-                            width: pos.width,
-                        });
+                    // Progressively add remaining canvases in batches
+                    const remaining = [
+                        ...allPositions
+                            .slice(0, startIdx)
+                            .map((pos, i) => ({ ...pos, originalIndex: i })),
+                        ...allPositions
+                            .slice(endIdx)
+                            .map((pos, i) => ({
+                                ...pos,
+                                originalIndex: endIdx + i,
+                            })),
+                    ];
+
+                    const BATCH_SIZE = 5;
+                    let batchIdx = 0;
+
+                    function addNextBatch() {
+                        // Staleness guard
+                        if (capturedKey !== lastTileSourceStr) return;
+
+                        const batch = remaining.slice(
+                            batchIdx * BATCH_SIZE,
+                            (batchIdx + 1) * BATCH_SIZE,
+                        );
+                        if (batch.length === 0) {
+                            // In continuous mode, allow a bit beyond home zoom so
+                            // strips centered near one end can still include all canvases.
+                            if (overrides.minZoomLevel === undefined) {
+                                viewer.viewport.minZoomLevel =
+                                    viewer.viewport.getHomeZoom() + 0.1;
+                            }
+                            return;
+                        }
+
+                        for (const pos of batch) {
+                            viewer.addTiledImage({
+                                tileSource: pos.tileSource,
+                                x: pos.x,
+                                y: pos.y,
+                                width: pos.width,
+                            });
+                        }
+                        batchIdx++;
+                        setTimeout(addNextBatch, 100);
                     }
-                    batchIdx++;
-                    setTimeout(addNextBatch, 100);
-                }
 
-                // Start adding remaining canvases after a short delay
-                setTimeout(addNextBatch, 200);
+                    // Start adding remaining canvases after a short delay
+                    setTimeout(addNextBatch, 200);
+                });
             });
 
             return;
         }
 
-        // Pre-fetch info.json URLs to detect auth errors (for non-continuous modes)
+        // In paged/individual modes, clear the current image immediately so
+        // users don't see stale content while tile sources are being prepared.
+        viewer.close();
+        viewerState.tileSourceError = null;
+
+        // Restore less aggressive defaults outside continuous mode unless user-overridden.
+        if (overrides.minPixelRatio === undefined) {
+            viewer.minPixelRatio = 0.1;
+        }
+        if (overrides.minZoomImageRatio === undefined) {
+            viewer.minZoomImageRatio = 0.9;
+        }
+
+        const immediateSources = sources.map((source) =>
+            typeof source === 'string'
+                ? source
+                : normalizeIiifLevel0Profile(source),
+        );
+
+        // Open immediately for perceived responsiveness.
+        if (mode === 'paged' && immediateSources.length === 2) {
+            const gap = 0.025;
+            const offset = 1 + gap;
+
+            // Two pages.
+            // If LTR: [0] at 0, [1] at 1.025
+            // If RTL: [0] at 1.025, [1] at 0
+            const firstX = isPagedRTL ? offset : 0;
+            const secondX = isPagedRTL ? 0 : offset;
+
+            const spread = [
+                {
+                    tileSource: immediateSources[0],
+                    x: firstX,
+                    y: 0,
+                    width: 1.0,
+                },
+                {
+                    tileSource: immediateSources[1],
+                    x: secondX,
+                    y: 0,
+                    width: 1.0,
+                },
+            ];
+            viewer.open(spread);
+        } else {
+            // Individuals or single paged or fallback
+            viewer.open(
+                immediateSources.length === 1
+                    ? immediateSources[0]
+                    : immediateSources,
+            );
+        }
+
+        // Pre-fetch info.json URLs in the background to detect auth errors
+        // without delaying image display.
         resolveTileSources(sources).then((result) => {
             // Staleness guard: if tile sources changed while we were fetching, discard
             if (capturedKey !== lastTileSourceStr) return;
@@ -423,42 +559,6 @@
 
             // Clear any previous error
             viewerState.tileSourceError = null;
-
-            const resolvedSources = result.resolved;
-
-            if (mode === 'paged' && resolvedSources.length === 2) {
-                const gap = 0.025;
-                const offset = 1 + gap;
-
-                // Two pages.
-                // If LTR: [0] at 0, [1] at 1.025
-                // If RTL: [0] at 1.025, [1] at 0
-                const firstX = isPagedRTL ? offset : 0;
-                const secondX = isPagedRTL ? 0 : offset;
-
-                const spread = [
-                    {
-                        tileSource: resolvedSources[0],
-                        x: firstX,
-                        y: 0,
-                        width: 1.0,
-                    },
-                    {
-                        tileSource: resolvedSources[1],
-                        x: secondX,
-                        y: 0,
-                        width: 1.0,
-                    },
-                ];
-                viewer.open(spread);
-            } else {
-                // Individuals or single paged or fallback
-                viewer.open(
-                    resolvedSources.length === 1
-                        ? resolvedSources[0]
-                        : resolvedSources,
-                );
-            }
         });
     });
 

package/dist/components/TriiiceratopsViewer.svelte

@@ -610,10 +610,9 @@
                     {manifestData.error}
                 </div>
             {:else if tileSources}
-                <OSDViewer {tileSources} viewerState={internalViewerState} />
                 {#if internalViewerState.tileSourceError}
                     <div
-                        class="absolute inset-0 z-[5] flex items-center justify-center pointer-events-none overflow-hidden"
+                        class="w-full h-full absolute inset-0 z-[5] flex items-center justify-center pointer-events-none overflow-hidden"
                         role="alert"
                     >
                         {#if currentCanvasThumbnail}
@@ -643,6 +642,8 @@
                             </p>
                         </div>
                     </div>
+                {:else}
+                    <OSDViewer {tileSources} viewerState={internalViewerState} />
                 {/if}
             {:else if manifestData && !manifestData.isFetching && !tileSources}
                 <div