triiiceratops 0.12.6 → 0.12.8

package/dist/components/AnnotationOverlay.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import CaretDown from 'phosphor-svelte/lib/CaretDown';
-    import Eye from 'phosphor-svelte/lib/Eye';
-    import EyeSlash from 'phosphor-svelte/lib/EyeSlash';
     import { manifestsState } from '../state/manifests.svelte';
     import { VIEWER_STATE_KEY, type ViewerState } from '../state/viewer.svelte';
-    import { m } from '../state/i18n.svelte';
-    import { extractBody } from '../utils/annotationAdapter';
 
     const viewerState = getContext<ViewerState>(VIEWER_STATE_KEY);
 
@@ -54,52 +49,13 @@
         }
     });
 
-    // Derived state for "All Visible" status
-    let isAllVisible = $derived.by(() => {
-        if (annotations.length === 0) return false;
-        return annotations.every((a: any) => {
-            const id = getAnnotationId(a);
-            return !id || viewerState.visibleAnnotationIds.has(id);
-        });
-    });
-
-    function toggleAnnotation(id: string) {
-        if (viewerState.visibleAnnotationIds.has(id)) {
-            viewerState.visibleAnnotationIds.delete(id);
-        } else {
-            viewerState.visibleAnnotationIds.add(id);
-        }
-    }
-
-    function toggleAllAnnotations() {
-        if (isAllVisible) {
-            // Hide all
-            viewerState.visibleAnnotationIds.clear();
-        } else {
-            // Show all
-            viewerState.visibleAnnotationIds.clear();
-            annotations.forEach((a: any) => {
-                const id = getAnnotationId(a);
-                if (id) viewerState.visibleAnnotationIds.add(id);
-            });
-        }
-    }
-
-    // State for hovered annotation to draw connecting line
-    let hoveredAnnotationId: string | null = $state(null);
+    // Connecting line logic
     let toolbarContainer: HTMLElement | undefined = $state();
-
-    // Calculate coordinates for connecting line
-    let _connectingLine = $derived.by(() => {
-        if (!hoveredAnnotationId) return null;
-        return null;
-    });
-
     let lineCoords: { x1: number; y1: number; x2: number; y2: number } | null =
         $state(null);
 
     $effect(() => {
-        if (!hoveredAnnotationId) {
+        if (!viewerState.hoveredAnnotationId) {
             lineCoords = null;
             return;
         }
@@ -113,25 +69,45 @@
                 }
             }
 
+            // Note: The list item ID is now in AnnotationPanel, which must be rendered for this to work
             const listItem = root.getElementById(
-                `annotation-list-item-${hoveredAnnotationId}`,
+                `annotation-list-item-${viewerState.hoveredAnnotationId}`,
             );
             const visual = root.getElementById(
-                `annotation-visual-${hoveredAnnotationId}`,
+                `annotation-visual-${viewerState.hoveredAnnotationId}`,
             );
 
             if (listItem && visual) {
                 const listRect = listItem.getBoundingClientRect();
                 const visualRect = visual.getBoundingClientRect();
 
-                // Calculate connection points
-                // List item: Left center
-                const startX = listRect.left;
-                const startY = listRect.top + listRect.height / 2;
+                // Determine start point based on panel position (left or right)
+                // We can heuristic this: if list is on right half of screen, connect to its left edge.
+                // If list is on left half, connect to its right edge.
+                const isRightPanel = listRect.left > window.innerWidth / 2;
+
+                let startX, startY, endX, endY;
+
+                if (isRightPanel) {
+                    // Panel is on right, connect from left edge of list item
+                    startX = listRect.left;
+                    startY = listRect.top + listRect.height / 2;
+
+                    // Connect to right edge of visual
+                    endX = visualRect.right;
+                    endY = visualRect.top + visualRect.height / 2;
+                } else {
+                    // Panel is on left, connect from right edge of list item
+                    startX = listRect.right;
+                    startY = listRect.top + listRect.height / 2;
+
+                    // Connect to left edge of visual
+                    endX = visualRect.left;
+                    endY = visualRect.top + visualRect.height / 2;
+                }
 
-                // Visual: Center of the annotation visual
-                const endX = visualRect.left + visualRect.width / 2;
-                const endY = visualRect.top + visualRect.height / 2;
+                endX = visualRect.left + visualRect.width / 2;
+                endY = visualRect.top + visualRect.height / 2;
 
                 lineCoords = { x1: startX, y1: startY, x2: endX, y2: endY };
             } else {
@@ -148,23 +124,6 @@
 
         return () => clearInterval(interval);
     });
-
-    let renderedAnnotations = $derived.by(() => {
-        if (!annotations.length) return [];
-
-        return annotations.map((anno: any) => {
-            const bodies = extractBody(anno);
-
-            return {
-                id: getAnnotationId(anno),
-                bodies,
-                label:
-                    (typeof anno.getLabel === 'function'
-                        ? anno.getLabel()
-                        : anno.label) || '',
-            };
-        });
-    });
 </script>
 
 {#if lineCoords}
@@ -196,179 +155,5 @@
     </svg>
 {/if}
 
-<!-- Unified Annotation Toolbar -->
-{#if viewerState.showAnnotations}
-    <div
-        bind:this={toolbarContainer}
-        class="absolute top-4 right-4 z-40 pointer-events-auto transition-all duration-300"
-    >
-        <!-- z-index increased for Leaflet (z-400 is map) -->
-        <details class="group relative">
-            <summary
-                class="flex items-center gap-2 bg-base-200/90 backdrop-blur shadow-lg rounded-full px-4 py-2 cursor-pointer list-none hover:bg-base-200 transition-all select-none border border-base-300 pointer-events-auto"
-            >
-                <!-- Toggle Button -->
-                <button
-                    class="btn btn-xs btn-circle btn-ghost"
-                    onclick={(e) => {
-                        e.preventDefault();
-                        toggleAllAnnotations();
-                    }}
-                    title={isAllVisible
-                        ? m.hide_all_annotations()
-                        : m.show_all_annotations()}
-                >
-                    {#if isAllVisible}
-                        <Eye size={16} weight="bold" />
-                    {:else}
-                        <EyeSlash size={16} weight="bold" />
-                    {/if}
-                </button>
-
-                <!-- Badge Text -->
-                <span class="text-sm font-medium">
-                    {m.annotations_count({ count: annotations.length })}
-                    <span class="opacity-50 text-xs font-normal ml-1">
-                        {m.visible_count({
-                            count: viewerState.visibleAnnotationIds.size,
-                        })}
-                    </span>
-                </span>
-
-                <CaretDown
-                    size={16}
-                    weight="bold"
-                    class="group-open:rotate-180 transition-transform opacity-80"
-                />
-            </summary>
-
-            <!-- Expanded List -->
-            <div
-                class="absolute right-0 mt-2 w-96 bg-base-200/95 backdrop-blur shadow-xl rounded-box p-0 max-h-[60vh] overflow-y-auto border border-base-300 flex flex-col divide-y divide-base-300"
-            >
-                {#each renderedAnnotations as anno, i (anno.id)}
-                    {@const isVisible = viewerState.visibleAnnotationIds.has(
-                        anno.id,
-                    )}
-                    <!-- List Item Row -->
-                    <div
-                        id="annotation-list-item-{anno.id}"
-                        class="w-full text-left p-3 hover:bg-base-300 transition-colors cursor-pointer flex gap-3 group/item items-start focus:outline-none focus:bg-base-300 relative"
-                        role="button"
-                        tabindex="0"
-                        onmouseenter={() => (hoveredAnnotationId = anno.id)}
-                        onmouseleave={() => (hoveredAnnotationId = null)}
-                        onclick={(e) => {
-                            e.preventDefault();
-                            toggleAnnotation(anno.id);
-                        }}
-                        onkeypress={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                toggleAnnotation(anno.id);
-                            }
-                        }}
-                    >
-                        <!-- Visual Toggle Indicator (eye icon button) -->
-                        <!-- If user wants only the eye to toggle, we should stopPropagation on it, 
-                             and maybe remove toggle from the main click? 
-                             Wait, user updated task: "Changing the list item interaction so that clicking the item no longer key-toggles visibility. ... Disregard this."
-                             So click anywhere ON the row still toggles. 
-                        -->
-                        <button
-                            class="btn btn-xs btn-circle btn-ghost mt-0.5 shrink-0"
-                            onclick={(e) => {
-                                e.stopPropagation();
-                                toggleAnnotation(anno.id);
-                            }}
-                        >
-                            {#if isVisible}
-                                <Eye size={16} weight="bold" />
-                            {:else}
-                                <EyeSlash size={16} weight="bold" />
-                            {/if}
-                        </button>
-
-                        <div class="flex-1 min-w-0 pointer-events-none">
-                            <div class="flex items-start justify-between">
-                                <span class="font-bold text-sm text-primary"
-                                    >#{i + 1}</span
-                                >
-                                <!-- Only show label separately if it's different from the content being displayed -->
-                                {#if anno.label && !anno.bodies.some((b) => b.value === anno.label)}
-                                    <span
-                                        class="text-xs opacity-50 truncate max-w-[150px]"
-                                        >{anno.label}</span
-                                    >
-                                {/if}
-                            </div>
-                            <div
-                                class="text-sm prose prose-sm max-w-none prose-p:my-0 prose-a:text-blue-500 wrap-break-word text-left {isVisible
-                                    ? ''
-                                    : 'opacity-50'} space-y-2"
-                            >
-                                {#each anno.bodies as body, i (i)}
-                                    <div
-                                        class="flex flex-wrap gap-2 pointer-events-auto"
-                                    >
-                                        {#if body.purpose === 'tagging'}
-                                            <span
-                                                class="badge badge-primary badge-outline badge-sm"
-                                            >
-                                                {body.value}
-                                            </span>
-                                        {:else if body.purpose === 'linking'}
-                                            <a
-                                                href={body.value}
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="flex items-center gap-1 text-primary hover:underline hover:text-primary-focus p-1 rounded hover:bg-base-200 -ml-1 transition-colors"
-                                                onclick={(e) =>
-                                                    e.stopPropagation()}
-                                            >
-                                                <!-- Link Icon -->
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    width="12"
-                                                    height="12"
-                                                    fill="currentColor"
-                                                    viewBox="0 0 256 256"
-                                                    ><path
-                                                        d="M136.37,187.53a12,12,0,0,1,0,17l-5.94,5.94a60,60,0,0,1-84.88-84.88l24.12-24.12A60,60,0,0,1,152.06,99,12,12,0,1,1,135,116a36,36,0,0,0-50.93,1.57L60,141.66a36,36,0,0,0,50.93,50.93l5.94-5.94A12,12,0,0,1,136.37,187.53Zm81.51-149.41a60,60,0,0,0-84.88,0l-5.94,5.94a12,12,0,0,0,17,17l5.94-5.94a36,36,0,0,1,50.93,50.93l-24.11,24.12A36,36,0,0,1,121,140a12,12,0,1,0-17.08,17,60,60,0,0,0,82.39,2.46l24.12-24.12A60,60,0,0,0,217.88,38.12Z"
-                                                    ></path></svg
-                                                >
-                                                <span
-                                                    class="truncate max-w-[200px]"
-                                                    >{body.value}</span
-                                                >
-                                            </a>
-                                        {:else}
-                                            <!-- Commenting / Default -->
-                                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                                            {#if body.isHtml}
-                                                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                                                {@html body.value}
-                                            {:else}
-                                                {body.value || '(No content)'}
-                                            {/if}
-                                        {/if}
-                                    </div>
-                                {/each}
-
-                                {#if anno.bodies.length === 0}
-                                    <span class="opacity-50 italic text-xs"
-                                        >(No content)</span
-                                    >
-                                {/if}
-                            </div>
-                        </div>
-                    </div>
-                {:else}
-                    <div class="p-4 text-center opacity-50 text-sm">
-                        No annotations available.
-                    </div>
-                {/each}
-            </div>
-        </details>
-    </div>
-{/if}
+<!-- Hidden element to capture root node context if needed, though document.getElementById usually works globally -->
+<div bind:this={toolbarContainer} class="hidden"></div>

package/dist/components/AnnotationPanel.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import X from 'phosphor-svelte/lib/X';
+    import Eye from 'phosphor-svelte/lib/Eye';
+    import EyeSlash from 'phosphor-svelte/lib/EyeSlash';
+    import ListDashes from 'phosphor-svelte/lib/ListDashes';
+    import { VIEWER_STATE_KEY, type ViewerState } from '../state/viewer.svelte';
+    import { manifestsState } from '../state/manifests.svelte';
+    import { m } from '../state/i18n.svelte';
+    import { extractBody } from '../utils/annotationAdapter';
+
+    const viewerState = getContext<ViewerState>(VIEWER_STATE_KEY);
+
+    let width = $derived(viewerState.config.annotations?.width ?? '320px');
+    let position = $derived(
+        viewerState.config.annotations?.position ?? 'right',
+    );
+    let showCloseButton = $derived(
+        viewerState.config.annotations?.showCloseButton ?? true,
+    );
+
+    let annotations = $derived.by(() => {
+        if (!viewerState.manifestId || !viewerState.canvasId) {
+            return [];
+        }
+        const manifestAnnotations = manifestsState.getAnnotations(
+            viewerState.manifestId,
+            viewerState.canvasId,
+        );
+        // Add search hits for current canvas
+        const searchAnnotations = viewerState.currentCanvasSearchAnnotations;
+
+        return [...manifestAnnotations, ...searchAnnotations];
+    });
+
+    // Helper to get ID from annotation object
+    function getAnnotationId(anno: any): string {
+        return (
+            anno.id ||
+            anno['@id'] ||
+            (typeof anno.getId === 'function' ? anno.getId() : '') ||
+            ''
+        );
+    }
+
+    let renderedAnnotations = $derived.by(() => {
+        if (!annotations.length) return [];
+
+        return annotations.map((anno: any) => {
+            const bodies = extractBody(anno);
+
+            return {
+                id: getAnnotationId(anno),
+                bodies,
+                label:
+                    (typeof anno.getLabel === 'function'
+                        ? anno.getLabel()
+                        : anno.label) || '',
+            };
+        });
+    });
+
+    // Derived state for "All Visible" status
+    let isAllVisible = $derived.by(() => {
+        if (annotations.length === 0) return false;
+        return annotations.every((a: any) => {
+            const id = getAnnotationId(a);
+            return !id || viewerState.visibleAnnotationIds.has(id);
+        });
+    });
+
+    function toggleAnnotation(id: string) {
+        if (viewerState.visibleAnnotationIds.has(id)) {
+            viewerState.visibleAnnotationIds.delete(id);
+        } else {
+            viewerState.visibleAnnotationIds.add(id);
+        }
+    }
+
+    function toggleAllAnnotations() {
+        if (isAllVisible) {
+            // Hide all
+            viewerState.visibleAnnotationIds.clear();
+        } else {
+            // Show all
+            viewerState.visibleAnnotationIds.clear();
+            annotations.forEach((a: any) => {
+                const id = getAnnotationId(a);
+                if (id) viewerState.visibleAnnotationIds.add(id);
+            });
+        }
+    }
+</script>
+
+<!-- Drawer / Panel -->
+{#if viewerState.showAnnotations}
+    <div
+        class="h-full bg-base-200 shadow-2xl z-100 flex flex-col transition-[width] duration-200 {viewerState
+            .config.transparentBackground
+            ? ''
+            : position === 'left'
+              ? 'border-r border-base-300'
+              : 'border-l border-base-300'}"
+        style="width: {width}"
+        role="dialog"
+        aria-label={m.settings_submenu_annotations()}
+    >
+        <!-- Header -->
+        <div
+            class="flex items-center justify-between p-4 border-b border-base-300"
+        >
+            <div class="flex items-center gap-2">
+                <ListDashes size={20} weight="bold" />
+                <h2 class="font-bold text-lg">
+                    {m.settings_submenu_annotations()}
+                </h2>
+            </div>
+            {#if showCloseButton}
+                <button
+                    class="btn btn-sm btn-circle btn-ghost"
+                    onclick={() => viewerState.toggleAnnotations()}
+                    aria-label={m.close()}
+                >
+                    <X size={20} weight="bold" />
+                </button>
+            {/if}
+        </div>
+
+        <!-- Toolbar / Stats -->
+        <div
+            class="p-4 border-b border-base-300 bg-base-100/50 flex items-center justify-between"
+        >
+            <div class="text-sm font-medium opacity-80">
+                {m.annotations_count({ count: annotations.length })}
+            </div>
+            <button
+                class="btn btn-sm btn-ghost gap-2"
+                onclick={toggleAllAnnotations}
+                disabled={annotations.length === 0}
+            >
+                {#if isAllVisible}
+                    <Eye size={16} weight="bold" />
+                    {m.hide_all_annotations()}
+                {:else}
+                    <EyeSlash size={16} weight="bold" />
+                    {m.show_all_annotations()}
+                {/if}
+            </button>
+        </div>
+
+        <!-- List -->
+        <div
+            class="flex-1 overflow-y-auto p-0 flex flex-col divide-y divide-base-300"
+        >
+            {#each renderedAnnotations as anno, i (anno.id)}
+                {@const isVisible = viewerState.visibleAnnotationIds.has(
+                    anno.id,
+                )}
+                <!-- List Item Row -->
+                <div
+                    class="w-full text-left p-4 hover:bg-base-100 transition-colors cursor-pointer flex gap-3 group/item items-start focus:outline-none focus:bg-base-100 relative {isVisible
+                        ? ''
+                        : 'opacity-60 bg-base-200/50'}"
+                    role="button"
+                    tabindex="0"
+                    id="annotation-list-item-{anno.id}"
+                    onmouseenter={() =>
+                        (viewerState.hoveredAnnotationId = anno.id)}
+                    onmouseleave={() =>
+                        (viewerState.hoveredAnnotationId = null)}
+                    onclick={(e) => {
+                        e.preventDefault();
+                        toggleAnnotation(anno.id);
+                    }}
+                    onkeypress={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            toggleAnnotation(anno.id);
+                        }
+                    }}
+                >
+                    <!-- Visual Toggle Indicator (eye icon button) -->
+                    <button
+                        class="btn btn-xs btn-circle btn-ghost mt-0.5 shrink-0"
+                        onclick={(e) => {
+                            e.stopPropagation();
+                            toggleAnnotation(anno.id);
+                        }}
+                    >
+                        {#if isVisible}
+                            <Eye size={16} weight="bold" />
+                        {:else}
+                            <EyeSlash size={16} weight="bold" />
+                        {/if}
+                    </button>
+
+                    <div class="flex-1 min-w-0 pointer-events-none">
+                        <div class="flex items-start justify-between mb-1">
+                            <span class="font-bold text-sm text-primary"
+                                >#{i + 1}</span
+                            >
+                            <!-- Only show label separately if it's different from the content being displayed -->
+                            {#if anno.label && !anno.bodies.some((b) => b.value === anno.label)}
+                                <span
+                                    class="text-xs opacity-50 truncate max-w-[150px]"
+                                    >{anno.label}</span
+                                >
+                            {/if}
+                        </div>
+                        <div
+                            class="text-sm prose prose-sm max-w-none prose-p:my-0 prose-a:text-blue-500 wrap-break-word text-left space-y-2"
+                        >
+                            {#each anno.bodies as body, i (i)}
+                                <div
+                                    class="flex flex-wrap gap-2 pointer-events-auto"
+                                >
+                                    {#if body.purpose === 'tagging'}
+                                        <span
+                                            class="badge badge-primary badge-outline badge-sm"
+                                        >
+                                            {body.value}
+                                        </span>
+                                    {:else if body.purpose === 'linking'}
+                                        <a
+                                            href={body.value}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            class="flex items-center gap-1 text-primary hover:underline hover:text-primary-focus p-1 rounded hover:bg-base-200 -ml-1 transition-colors"
+                                            onclick={(e) => e.stopPropagation()}
+                                        >
+                                            <!-- Link Icon -->
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                width="12"
+                                                height="12"
+                                                fill="currentColor"
+                                                viewBox="0 0 256 256"
+                                                ><path
+                                                    d="M136.37,187.53a12,12,0,0,1,0,17l-5.94,5.94a60,60,0,0,1-84.88-84.88l24.12-24.12A60,60,0,0,1,152.06,99,12,12,0,1,1,135,116a36,36,0,0,0-50.93,1.57L60,141.66a36,36,0,0,0,50.93,50.93l5.94-5.94A12,12,0,0,1,136.37,187.53Zm81.51-149.41a60,60,0,0,0-84.88,0l-5.94,5.94a12,12,0,0,0,17,17l5.94-5.94a36,36,0,0,1,50.93,50.93l-24.11,24.12A36,36,0,0,1,121,140a12,12,0,1,0-17.08,17,60,60,0,0,0,82.39,2.46l24.12-24.12A60,60,0,0,0,217.88,38.12Z"
+                                                ></path></svg
+                                            >
+                                            <span class="truncate max-w-[200px]"
+                                                >{body.value}</span
+                                            >
+                                        </a>
+                                    {:else if body.isHtml}
+                                        {@html body.value}
+                                    {:else}
+                                        {body.value || '(No content)'}
+                                    {/if}
+                                </div>
+                            {/each}
+
+                            {#if anno.bodies.length === 0}
+                                <span class="opacity-50 italic text-xs"
+                                    >{m.no_content()}</span
+                                >
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            {:else}
+                <div class="p-8 text-center opacity-50 text-sm">
+                    {m.no_annotations_available()}
+                </div>
+            {/each}
+        </div>
+    </div>
+{/if}

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

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

package/dist/components/OSDViewer.svelte

@@ -74,8 +74,6 @@
             // 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;
             }