triiiceratops 0.9.12 → 0.10.0

package/dist/annotation_tool_point-CZKsj4Nk.js

@@ -0,0 +1,290 @@
+import { a as t } from "./X-DZEgXrJ8.js";
+const a = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Annotation Editor"
+  )
+), r = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Anmerkungs-Editor"
+  )
+), Q = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? a() : r(), i = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Edit"
+  )
+), l = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Bearbeiten"
+  )
+), V = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? i() : l(), c = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Create"
+  )
+), _ = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Erstellen"
+  )
+), X = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? c() : _(), s = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Click to start annotating, click again to set shape"
+  )
+), d = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Klicken zum Annotieren, erneut klicken zum Abschließen"
+  )
+), Y = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? s() : d(), u = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Click on an annotation to select and edit it"
+  )
+), p = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Anmerkung klicken zum Bearbeiten"
+  )
+), $ = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? u() : p(), g = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Drawing Tool"
+  )
+), h = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Zeichenwerkzeug"
+  )
+), nn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? g() : h(), f = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Undo"
+  )
+), k = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rückgängig"
+  )
+), tn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? f() : k(), m = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Redo"
+  )
+), b = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Wiederholen"
+  )
+), en = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? m() : b(), A = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Edit Annotation"
+  )
+), y = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Anmerkung bearbeiten"
+  )
+), on = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? A() : y(), v = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Delete annotation"
+  )
+), x = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Anmerkung löschen"
+  )
+), an = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? v() : x(), C = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Tag value..."
+  )
+), E = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Tag eingeben..."
+  )
+), rn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? C() : E(), w = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "https://..."
+  )
+), z = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "https://..."
+  )
+), ln = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? w() : z(), D = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Enter text..."
+  )
+), T = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Text eingeben..."
+  )
+), cn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? D() : T(), P = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Add Content"
+  )
+), R = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Inhalt hinzufügen"
+  )
+), _n = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? P() : R(), B = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Save Changes"
+  )
+), L = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Speichern"
+  )
+), sn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? B() : L(), S = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Delete Annotation?"
+  )
+), j = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Anmerkung löschen?"
+  )
+), dn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? S() : j(), q = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Are you sure you want to delete this annotation? This action cannot be undone."
+  )
+), I = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Anmerkung wirklich löschen? Dies kann nicht rückgängig gemacht werden."
+  )
+), un = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? q() : I(), K = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Cancel"
+  )
+), U = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Abbrechen"
+  )
+), pn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? K() : U(), W = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Delete"
+  )
+), Z = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Löschen"
+  )
+), gn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? W() : Z(), F = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rectangle"
+  )
+), G = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rechteck"
+  )
+), hn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? F() : G(), H = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Polygon"
+  )
+), J = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Polygon"
+  )
+), fn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? H() : J(), M = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Point"
+  )
+), N = (
+  /** @type {(inputs: {}) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Punkt"
+  )
+), kn = /* @__NO_SIDE_EFFECTS__ */ (e = {}, n = {}) => (n.locale ?? t()) === "en" ? M() : N();
+export {
+  _n as a,
+  pn as b,
+  X as c,
+  gn as d,
+  un as e,
+  dn as f,
+  an as g,
+  V as h,
+  on as i,
+  Y as j,
+  $ as k,
+  ln as l,
+  en as m,
+  sn as n,
+  rn as o,
+  cn as p,
+  Q as q,
+  nn as r,
+  tn as s,
+  kn as t,
+  fn as u,
+  hn as v
+};

package/dist/components/AnnotationOverlay.svelte

@@ -6,6 +6,7 @@
     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);
 
@@ -92,83 +93,79 @@
         }
     }
 
-    let renderedAnnotations = $derived.by(() => {
-        if (!annotations.length) return [];
+    // State for hovered annotation to draw connecting line
+    let hoveredAnnotationId: string | null = $state(null);
+    let toolbarContainer: HTMLElement | undefined = $state();
 
-        return annotations.map((anno: any) => {
-            let content = '';
-            let isHtml = false;
-
-            // Extract content (support IIIF v2 and v3)
-            if (typeof anno.getBody === 'function') {
-                const body = anno.getBody();
-                if (body && body.length) {
-                    const getValue = (b: any) => {
-                        const val = b.getValue ? b.getValue() : null;
-                        if (val) return val;
-                        return '';
-                    };
-                    content = body
-                        .map((b: any) => getValue(b))
-                        .filter(Boolean)
-                        .join(' ');
-                    isHtml = body.some((b: any) => {
-                        const fmt = b.getFormat ? b.getFormat() : '';
-                        return (
-                            fmt === 'text/html' || fmt === 'application/html'
-                        );
-                    });
-                }
-                if (!content && typeof anno.getLabel === 'function') {
-                    const label = anno.getLabel();
-                    if (label) content = label;
+    // 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) {
+            lineCoords = null;
+            return;
+        }
+
+        const updateCoords = () => {
+            let root: Document | ShadowRoot = document;
+            if (toolbarContainer) {
+                const node = toolbarContainer.getRootNode();
+                if (node instanceof Document || node instanceof ShadowRoot) {
+                    root = node;
                 }
+            }
+
+            const listItem = root.getElementById(
+                `annotation-list-item-${hoveredAnnotationId}`,
+            );
+            const visual = root.getElementById(
+                `annotation-visual-${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;
+
+                // Visual: Center of the annotation visual
+                const endX = visualRect.left + visualRect.width / 2;
+                const endY = visualRect.top + visualRect.height / 2;
+
+                lineCoords = { x1: startX, y1: startY, x2: endX, y2: endY };
             } else {
-                // Raw JSON Parsing (Fallback)
-                const getText = (r: any) => {
-                    if (!r) return '';
-                    return r.chars || r.value || r['cnt:chars'] || '';
-                };
-                const isHtmlFormat = (r: any) => {
-                    if (!r) return false;
-                    return r.format === 'text/html' || r.type === 'TextualBody';
-                };
-                if (anno.resource) {
-                    if (Array.isArray(anno.resource)) {
-                        content = anno.resource
-                            .map((r: any) => getText(r))
-                            .join(' ');
-                        if (anno.resource.some((r: any) => isHtmlFormat(r)))
-                            isHtml = true;
-                    } else {
-                        content = getText(anno.resource);
-                        if (isHtmlFormat(anno.resource)) isHtml = true;
-                    }
-                } else if (anno.body) {
-                    if (Array.isArray(anno.body)) {
-                        content = anno.body
-                            .map((b: any) => getText(b))
-                            .join(' ');
-                        if (anno.body.some((b: any) => isHtmlFormat(b)))
-                            isHtml = true;
-                    } else {
-                        content = getText(anno.body);
-                        if (isHtmlFormat(anno.body)) isHtml = true;
-                    }
-                }
-                if (!content) {
-                    const fallback = anno.label || anno.name || anno.title;
-                    if (fallback)
-                        content = Array.isArray(fallback)
-                            ? fallback.join(' ')
-                            : fallback;
-                }
+                lineCoords = null;
             }
+        };
+
+        // Run immediately
+        updateCoords();
+
+        // Optional: Could add resize listener or interval if things move,
+        // but for hover it might be enough to just set it once or on scroll
+        const interval = setInterval(updateCoords, 16); // ~60fps follow
+
+        return () => clearInterval(interval);
+    });
+
+    let renderedAnnotations = $derived.by(() => {
+        if (!annotations.length) return [];
+
+        return annotations.map((anno: any) => {
+            const bodies = extractBody(anno);
 
             return {
                 id: getAnnotationId(anno),
-                content,
-                isHtml,
+                bodies,
                 label:
                     (typeof anno.getLabel === 'function'
                         ? anno.getLabel()
@@ -178,9 +175,39 @@
     });
 </script>
 
+{#if lineCoords}
+    <svg
+        class="fixed inset-0 z-50 pointer-events-none drop-shadow-md text-primary"
+        style="width: 100vw; height: 100vh;"
+    >
+        <line
+            x1={lineCoords.x1}
+            y1={lineCoords.y1}
+            x2={lineCoords.x2}
+            y2={lineCoords.y2}
+            stroke="currentColor"
+            stroke-width="2"
+        />
+        <!-- Optional: Dots at ends -->
+        <circle
+            cx={lineCoords.x1}
+            cy={lineCoords.y1}
+            r="3"
+            fill="currentColor"
+        />
+        <circle
+            cx={lineCoords.x2}
+            cy={lineCoords.y2}
+            r="3"
+            fill="currentColor"
+        />
+    </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) -->
@@ -231,32 +258,52 @@
                     {@const isVisible = viewerState.visibleAnnotationIds.has(
                         anno.id,
                     )}
-                    <!-- List Item Row: Click toggles visibility -->
-                    <button
-                        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"
+                    <!-- 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 (formerly a button) -->
-                        <div
-                            class="btn btn-xs btn-circle btn-ghost mt-0.5 shrink-0 pointer-events-none"
+                        <!-- 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}
-                        </div>
+                        </button>
 
-                        <div class="flex-1 min-w-0">
+                        <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.label !== anno.content}
+                                {#if anno.label && !anno.bodies.some((b) => b.value === anno.label)}
                                     <span
                                         class="text-xs opacity-50 truncate max-w-[150px]"
                                         >{anno.label}</span
@@ -266,17 +313,63 @@
                             <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'}"
+                                    : 'opacity-50'} space-y-2"
                             >
-                                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                                {#if anno.isHtml}
-                                    {@html anno.content}
-                                {:else}
-                                    {anno.content || '(No content)'}
+                                {#each anno.bodies as body}
+                                    <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}
+                                                {@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>
-                    </button>
+                    </div>
                 {:else}
                     <div class="p-4 text-center opacity-50 text-sm">
                         No annotations available.

package/dist/components/DemoHeader.svelte

@@ -238,6 +238,18 @@
                 <li class="menu-title px-4 py-2">
                     {m.settings_category_general()}
                 </li>
+                <li>
+                    <label class="label cursor-pointer py-1">
+                        <span class="label-text"
+                            >{m.settings_transparent_background()}</span
+                        >
+                        <input
+                            type="checkbox"
+                            class="toggle toggle-sm"
+                            bind:checked={config.transparentBackground}
+                        />
+                    </label>
+                </li>
                 <li>
                     <label class="label cursor-pointer py-1">
                         <span class="label-text"