triiiceratops 0.8.1 → 0.9.0

package/dist/components/OSDViewer.svelte

@@ -0,0 +1,260 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { parseAnnotations } from '../utils/annotationAdapter';
+    import { manifestsState } from '../state/manifests.svelte';
+    import type { ViewerState } from '../state/viewer.svelte';
+
+    let {
+        tileSources,
+        viewerState,
+    }: { tileSources: string | object | null; viewerState: ViewerState } =
+        $props();
+
+    let container: HTMLElement | undefined = $state();
+    let viewer: any | undefined = $state();
+    let OSD: any | undefined = $state();
+
+    // Track OSD state changes for reactivity
+    let osdVersion = $state(0);
+
+    // Get all annotations for current canvas (manifest + search)
+    let allAnnotations = $derived.by(() => {
+        if (!viewerState.manifestId || !viewerState.canvasId) {
+            return [];
+        }
+        const manifestAnnotations = manifestsState.getAnnotations(
+            viewerState.manifestId,
+            viewerState.canvasId,
+        );
+        const searchAnnotations = viewerState.currentCanvasSearchAnnotations;
+        return [...manifestAnnotations, ...searchAnnotations];
+    });
+
+    // Get search hit IDs for styling
+    let searchHitIds = $derived.by(() => {
+        const ids = new Set<string>();
+        viewerState.currentCanvasSearchAnnotations.forEach((anno: any) => {
+            const id = anno.id || anno['@id'];
+            if (id) ids.add(id);
+        });
+        return ids;
+    });
+
+    // Parse annotations
+    let parsedAnnotations = $derived.by(() => {
+        return parseAnnotations(allAnnotations, searchHitIds);
+    });
+
+    // Rendered annotations with pixel coordinates
+    let renderedAnnotations = $derived.by(() => {
+        // Depend on osdVersion to trigger updates
+        osdVersion;
+
+        if (!viewer || !OSD || !parsedAnnotations.length) {
+            return [];
+        }
+
+        const tiledImage = viewer.world.getItemAt(0);
+        if (!tiledImage) {
+            return [];
+        }
+
+        const results: any[] = [];
+
+        for (const anno of parsedAnnotations) {
+            // Filter based on visibility
+            if (anno.isSearchHit) {
+                // Search hits are always visible
+            } else if (!viewerState.showAnnotations) {
+                continue;
+            } else if (!viewerState.visibleAnnotationIds.has(anno.id)) {
+                continue;
+            }
+
+            if (anno.geometry.type === 'RECTANGLE') {
+                // Convert image coordinates to viewport coordinates
+                const viewportRect = tiledImage.imageToViewportRectangle(
+                    anno.geometry.x,
+                    anno.geometry.y,
+                    anno.geometry.w,
+                    anno.geometry.h,
+                );
+
+                // Convert viewport to pixel coordinates
+                const pixelRect =
+                    viewer.viewport.viewportToViewerElementRectangle(
+                        viewportRect,
+                    );
+
+                results.push({
+                    id: anno.id,
+                    type: 'RECTANGLE' as const,
+                    rect: {
+                        x: pixelRect.x,
+                        y: pixelRect.y,
+                        width: pixelRect.width,
+                        height: pixelRect.height,
+                    },
+                    isSearchHit: anno.isSearchHit,
+                    tooltip: anno.body.value,
+                });
+            } else if (anno.geometry.type === 'POLYGON') {
+                // Convert each point from image to viewport to pixel
+                const pixelPoints = anno.geometry.points.map((point) => {
+                    const viewportPoint = tiledImage.imageToViewportCoordinates(
+                        new OSD.Point(point[0], point[1]),
+                    );
+                    const pixelPoint =
+                        viewer.viewport.viewportToViewerElementCoordinates(
+                            viewportPoint,
+                        );
+                    return [pixelPoint.x, pixelPoint.y];
+                });
+
+                // Calculate bounding box for SVG positioning
+                let minX = Infinity,
+                    minY = Infinity,
+                    maxX = -Infinity,
+                    maxY = -Infinity;
+                for (const [x, y] of pixelPoints) {
+                    minX = Math.min(minX, x);
+                    minY = Math.min(minY, y);
+                    maxX = Math.max(maxX, x);
+                    maxY = Math.max(maxY, y);
+                }
+
+                // Adjust points relative to bounding box
+                const relativePoints = pixelPoints.map(([x, y]) => [
+                    x - minX,
+                    y - minY,
+                ]);
+
+                results.push({
+                    id: anno.id,
+                    type: 'POLYGON' as const,
+                    bounds: {
+                        x: minX,
+                        y: minY,
+                        width: maxX - minX,
+                        height: maxY - minY,
+                    },
+                    points: relativePoints,
+                    isSearchHit: anno.isSearchHit,
+                    tooltip: anno.body.value,
+                });
+            }
+        }
+
+        return results;
+    });
+
+    onMount(() => {
+        if (!container) return;
+
+        (async () => {
+            // Dynamically import OpenSeadragon to avoid SSR issues
+            const osdModule = await import('openseadragon');
+            OSD = osdModule.default || osdModule;
+
+            // Initialize OpenSeadragon viewer
+            viewer = OSD({
+                element: container,
+                tileSources: null, // Will be set via effect
+                prefixUrl: '', // No navigation UI images needed
+                showNavigationControl: false,
+                showHomeControl: false,
+                showFullPageControl: false,
+                showSequenceControl: false,
+                showZoomControl: false,
+                showRotationControl: false,
+                animationTime: 0.5,
+                springStiffness: 7.0,
+                zoomPerClick: 2.0,
+            });
+
+            // Notify plugins that OSD is ready
+            viewerState.notifyOSDReady(viewer);
+        })();
+
+        return () => {
+            viewer?.destroy();
+            viewerState.osdViewer = null;
+        };
+    });
+
+    // Subscribe to OSD events for reactivity
+    $effect(() => {
+        if (!viewer) return;
+
+        const update = () => {
+            osdVersion++;
+        };
+
+        viewer.addHandler('open', update);
+        viewer.addHandler('animation', update);
+        viewer.addHandler('resize', update);
+        viewer.addHandler('rotate', update);
+        viewer.world.addHandler('add-item', update);
+        viewer.world.addHandler('remove-item', update);
+
+        return () => {
+            viewer.removeHandler('open', update);
+            viewer.removeHandler('animation', update);
+            viewer.removeHandler('resize', update);
+            viewer.removeHandler('rotate', update);
+            viewer.world.removeHandler('add-item', update);
+            viewer.world.removeHandler('remove-item', update);
+        };
+    });
+
+    // Load tile source when it changes
+    $effect(() => {
+        if (!viewer || !tileSources) return;
+
+        viewer.open(tileSources);
+    });
+</script>
+
+<div class="w-full h-full relative">
+    <div
+        bind:this={container}
+        class="w-full h-full osd-background bg-base-100"
+    ></div>
+
+    <!-- Render annotations -->
+    {#each renderedAnnotations as anno (anno.id)}
+        {#if anno.type === 'RECTANGLE'}
+            <div
+                class="absolute border-2 transition-colors cursor-pointer pointer-events-auto {anno.isSearchHit
+                    ? 'border-yellow-400 bg-yellow-400/40 hover:bg-yellow-400/60'
+                    : 'border-red-500 bg-red-500/20 hover:bg-red-500/40'}"
+                style="
+          left: {anno.rect.x}px;
+          top: {anno.rect.y}px;
+          width: {anno.rect.width}px;
+          height: {anno.rect.height}px;
+        "
+                title={anno.tooltip}
+            ></div>
+        {:else if anno.type === 'POLYGON'}
+            <svg
+                class="absolute pointer-events-auto"
+                style="
+          left: {anno.bounds.x}px;
+          top: {anno.bounds.y}px;
+          width: {anno.bounds.width}px;
+          height: {anno.bounds.height}px;
+        "
+            >
+                <title>{anno.tooltip}</title>
+                <polygon
+                    points={anno.points.map((p: any) => p.join(',')).join(' ')}
+                    class="cursor-pointer transition-colors {anno.isSearchHit
+                        ? 'fill-yellow-400/40 stroke-yellow-400 hover:fill-yellow-400/60'
+                        : 'fill-red-500/20 stroke-red-500 hover:fill-red-500/40'}"
+                    stroke-width="2"
+                />
+            </svg>
+        {/if}
+    {/each}
+</div>

package/dist/components/OSDViewer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ViewerState } from '../state/viewer.svelte';
+type $$ComponentProps = {
+    tileSources: string | object | null;
+    viewerState: ViewerState;
+};
+declare const OSDViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type OSDViewer = ReturnType<typeof OSDViewer>;
+export default OSDViewer;

package/dist/components/SearchPanel.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+    import { getContext, untrack } from 'svelte';
+    import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
+    import Spinner from 'phosphor-svelte/lib/Spinner';
+    import X from 'phosphor-svelte/lib/X';
+    import { VIEWER_STATE_KEY, type ViewerState } from '../state/viewer.svelte';
+    import { m } from '../state/i18n.svelte';
+
+    const viewerState = getContext<ViewerState>(VIEWER_STATE_KEY);
+
+    // We'll initialize from viewerState to preserve context.
+    let searchQuery = $state('');
+    let resultsContainer: HTMLElement;
+
+    let showCloseButton = $derived(
+        viewerState.config.search?.showCloseButton ?? true,
+    );
+
+    // Sync local query with viewerState
+    $effect(() => {
+        if (viewerState.searchQuery !== untrack(() => searchQuery)) {
+            searchQuery = viewerState.searchQuery;
+        }
+    });
+
+    function handleSearch() {
+        viewerState.search(searchQuery);
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    }
+
+    function navigate(result: any) {
+        const canvas = viewerState.canvases[result.canvasIndex];
+        if (canvas) {
+            viewerState.setCanvas(canvas.id);
+        }
+    }
+</script>
+
+<!-- Drawer / Panel -->
+{#if viewerState.showSearchPanel}
+    <div
+        class="h-full w-80 bg-base-200 shadow-2xl z-100 flex flex-col border-l border-base-300"
+        role="dialog"
+        aria-label={m.search_panel_title()}
+    >
+        <!-- Header -->
+        <div
+            class="flex items-center justify-between p-4 border-b border-base-300"
+        >
+            <h2 class="font-bold text-lg">{m.search()}</h2>
+            {#if showCloseButton}
+                <button
+                    class="btn btn-sm btn-circle btn-ghost"
+                    onclick={() => viewerState.toggleSearchPanel()}
+                    aria-label={m.close_search()}
+                >
+                    <X size={20} weight="bold" />
+                </button>
+            {/if}
+        </div>
+
+        <!-- Search Input -->
+        <div class="p-4 border-b border-base-300 shrink-0">
+            <div class="relative w-full">
+                <input
+                    type="text"
+                    bind:value={searchQuery}
+                    onkeydown={handleKeydown}
+                    placeholder={m.search_panel_placeholder()}
+                    class="input input-bordered w-full pr-12"
+                />
+                <button
+                    class="btn btn-primary absolute right-0 top-0 h-full rounded-l-none"
+                    onclick={handleSearch}
+                    aria-label={m.search_panel_title()}
+                >
+                    {#if viewerState.isSearching}
+                        <span class="loading loading-spinner loading-xs"></span>
+                    {:else}
+                        <MagnifyingGlass size={20} weight="bold" />
+                    {/if}
+                </button>
+            </div>
+        </div>
+
+        <!-- Results -->
+        <div class="flex-1 overflow-y-auto p-4 space-y-4">
+            {#if viewerState.isSearching}
+                <div class="flex justify-center p-8">
+                    <span
+                        class="loading loading-spinner loading-lg text-primary"
+                    ></span>
+                </div>
+            {:else if viewerState.searchResults.length === 0 && viewerState.searchQuery}
+                <div class="text-center opacity-50 p-4">
+                    {m.search_panel_no_results({
+                        query: viewerState.searchQuery,
+                    })}
+                </div>
+            {:else if viewerState.searchResults.length === 0 && !viewerState.searchQuery}
+                <div class="text-center opacity-50 p-4 text-sm">
+                    {m.search_panel_instruction()}
+                </div>
+            {:else}
+                <!-- Results Header -->
+                <div
+                    class="text-xs font-bold opacity-50 uppercase tracking-wider pb-2"
+                >
+                    {m.search_panel_results_count({
+                        count: viewerState.searchResults.length,
+                    })}
+                </div>
+
+                {#each viewerState.searchResults as result, i}
+                    <button
+                        class="w-full text-left card bg-base-100 shadow hover:shadow-md transition-all p-4 text-sm group border border-transparent hover:border-primary focus:outline-none focus:ring-2 focus:ring-primary"
+                        onclick={() => navigate(result)}
+                    >
+                        <div class="flex justify-between items-baseline mb-1">
+                            <span
+                                class="font-bold text-xs opacity-70 bg-base-200 px-1.5 py-0.5 rounded"
+                                >{result.canvasLabel}</span
+                            >
+                        </div>
+
+                        {#if result.type === 'hit'}
+                            <div class="leading-relaxed">
+                                <span>{@html result.before}</span>
+                                <span
+                                    class="bg-yellow-200 text-yellow-900 font-bold px-0.5 rounded"
+                                    >{@html result.match}</span
+                                >
+                                <span>{@html result.after}</span>
+                            </div>
+                        {:else}
+                            <div class="leading-relaxed">
+                                {result.match}
+                            </div>
+                        {/if}
+                    </button>
+                {/each}
+            {/if}
+        </div>
+    </div>
+{/if}

package/dist/components/SearchPanel.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SearchPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type SearchPanel = ReturnType<typeof SearchPanel>;
+export default SearchPanel;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import CaretDown from 'phosphor-svelte/lib/CaretDown';
+    import { onMount } from 'svelte';
+    import { m } from '../state/i18n.svelte';
+
+    let theme = $state('light');
+
+    const themes = [
+        'light',
+        'dark',
+        'cupcake',
+        'bumblebee',
+        'emerald',
+        'corporate',
+        'synthwave',
+        'retro',
+        'cyberpunk',
+        'valentine',
+        'halloween',
+        'garden',
+        'forest',
+        'aqua',
+        'lofi',
+        'pastel',
+        'fantasy',
+        'wireframe',
+        'black',
+        'luxury',
+        'dracula',
+        'cmyk',
+        'autumn',
+        'business',
+        'acid',
+        'lemonade',
+        'night',
+        'coffee',
+        'winter',
+        'dim',
+        'nord',
+        'sunset',
+    ];
+
+    onMount(() => {
+        const storedTheme = localStorage.getItem('theme');
+        if (storedTheme) {
+            theme = storedTheme;
+        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            theme = 'dark';
+        }
+        document.documentElement.setAttribute('data-theme', theme);
+    });
+
+    function onThemeChange(newTheme: string) {
+        theme = newTheme;
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+    }
+</script>
+
+<div title={m.change_theme_label()} class="dropdown dropdown-end">
+    <div
+        tabindex="0"
+        role="button"
+        class="btn group btn-sm gap-1.5 px-1.5 btn-ghost"
+        aria-label={m.change_theme_label()}
+    >
+        <div
+            class="bg-base-100 group-hover:border-base-content/20 border-base-content/10 grid shrink-0 grid-cols-2 gap-0.5 rounded-md border p-1 transition-colors"
+        >
+            <div class="bg-base-content size-1 rounded-full"></div>
+            <div class="bg-primary size-1 rounded-full"></div>
+            <div class="bg-secondary size-1 rounded-full"></div>
+            <div class="bg-accent size-1 rounded-full"></div>
+        </div>
+        <CaretDown size={16} />
+    </div>
+    <div
+        tabindex="-1"
+        class="dropdown-content bg-base-200 text-base-content rounded-box top-px h-122 max-h-[calc(100vh-8.6rem)] overflow-y-auto border border-white/5 shadow-2xl outline outline-black/5 mt-16"
+    >
+        <ul class="menu w-56">
+            <li class="menu-title text-xs">{m.theme_menu_title()}</li>
+            {#each themes as t}
+                <li>
+                    <button class="gap-3 px-2" onclick={() => onThemeChange(t)}>
+                        <div
+                            data-theme={t}
+                            class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
+                        >
+                            <div
+                                class="bg-base-content size-1 rounded-full"
+                            ></div>
+                            <div class="bg-primary size-1 rounded-full"></div>
+                            <div class="bg-secondary size-1 rounded-full"></div>
+                            <div class="bg-accent size-1 rounded-full"></div>
+                        </div>
+                        <div class="w-32 truncate">
+                            {t}
+                        </div>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                            class={theme === t
+                                ? 'h-3 w-3 shrink-0'
+                                : 'invisible h-3 w-3 shrink-0'}
+                            ><path
+                                d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
+                            ></path></svg
+                        >
+                    </button>
+                </li>
+            {/each}
+        </ul>
+    </div>
+</div>

package/dist/components/ThemeToggle.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;