@semiont/react-ui 0.5.10 → 0.5.12

package/src/components/image-annotation/SvgDrawingCanvas.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import type { Annotation } from '@semiont/core';
-import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, Point } from '@semiont/core';
+import type { Annotation, AnchorRect } from '@semiont/core';
+import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, Point, resourceId as toResourceId } from '@semiont/core';
+import { toViewportAnchorRect } from '../../lib/anchor-rect';
 import { AnnotationOverlay } from './AnnotationOverlay';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
 import type { SemiontSession } from '@semiont/sdk';
@@ -35,6 +36,8 @@ function getMotivationColor(motivation: SelectionMotivation | null): { stroke: s
 
 interface SvgDrawingCanvasProps {
   imageUrl: string;
+  /** The '@id' of the annotated resource — stamped as `source` on mark:requested (multi-viewer routing). */
+  resourceUri: string;
   existingAnnotations?: Annotation[];
   drawingMode: DrawingMode;
   selectedMotivation?: SelectionMotivation | null;
@@ -52,6 +55,7 @@ interface SvgDrawingCanvasProps {
  */
 export function SvgDrawingCanvas({
   imageUrl,
+  resourceUri,
   existingAnnotations = [],
   drawingMode,
   selectedMotivation,
@@ -172,7 +176,10 @@ export function SvgDrawingCanvas({
       // This was a click, not a drag - check if we clicked an existing annotation
       if (existingAnnotations.length > 0) {
         // Find annotation at click point
-        // Note: We're checking in display coordinates
+        // Note: We're checking in display coordinates. The hit-test owns the
+        // coordinate transform — capture the hit annotation's viewport rect
+        // for the emission below (A1 anchor).
+        let hitRect: AnchorRect | undefined;
         const clickedAnnotation = existingAnnotations.find(ann => {
           if (typeof ann.target === 'string') return false;
 
@@ -198,19 +205,23 @@ export function SvgDrawingCanvas({
             const displayWidth = width * scaleX;
             const displayHeight = height * scaleY;
 
-            return (
+            const hit = (
               endPoint.x >= displayX &&
               endPoint.x <= displayX + displayWidth &&
               endPoint.y >= displayY &&
               endPoint.y <= displayY + displayHeight
             );
+            if (hit && imageRef.current) {
+              hitRect = toViewportAnchorRect(imageRef.current.getBoundingClientRect(), displayX, displayY, displayWidth, displayHeight);
+            }
+            return hit;
           }
 
           return false;
         });
 
         if (clickedAnnotation) {
-          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation, hitRect);
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -274,6 +285,7 @@ export function SvgDrawingCanvas({
     // Emit annotation:requested event with SvgSelector
     if (session && selectedMotivation) {
       session.client.mark.request(
+        toResourceId(resourceUri),
         { type: 'SvgSelector', value: nativeSvg },
         selectedMotivation,
       );

package/src/components/image-annotation/__tests__/AnnotationOverlay.click.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * A1 anchor thread (HEADLESS-ANNOTATION-PANELS Phase 3) — image overlay pin.
+ *
+ * The overlay's shape elements own their on-screen geometry: a click passes
+ * the element's viewport rect as browse.click's third argument so hosts can
+ * anchor popovers. Runtime-only view geometry; no schema involvement.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { Annotation, AnnotationId } from '@semiont/core';
+import { AnnotationOverlay } from '../AnnotationOverlay';
+
+function svgAnnotation(id: string, motivation: Annotation['motivation'], svgValue: string): Annotation {
+  return {
+    '@context': 'http://www.w3.org/ns/anno.jsonld',
+    id: id as AnnotationId,
+    type: 'Annotation',
+    motivation,
+    created: '2024-01-01T10:00:00Z',
+    target: {
+      source: 'resource-1',
+      selector: {
+        type: 'SvgSelector',
+        value: svgValue,
+      },
+    },
+  };
+}
+
+const rectAnnotation = svgAnnotation('img-ann-1', 'highlighting', '<svg><rect x="10" y="10" width="20" height="20"/></svg>');
+
+function sessionDouble() {
+  const click = vi.fn();
+  const session = {
+    client: {
+      browse: { click },
+      beckon: { hover: vi.fn() },
+    },
+  } as unknown as SemiontSession;
+  return { session, click };
+}
+
+describe('AnnotationOverlay — anchorRect on click', () => {
+  it('passes the shape element rect as browse.click third argument', () => {
+    const { session, click } = sessionDouble();
+
+    const { container } = render(
+      <AnnotationOverlay
+        annotations={[rectAnnotation]}
+        imageWidth={100}
+        imageHeight={100}
+        displayWidth={200}
+        displayHeight={200}
+        session={session}
+        hoverDelayMs={0}
+      />,
+    );
+
+    const shape = container.querySelector('.semiont-annotation-overlay__shape');
+    expect(shape).toBeInTheDocument();
+
+    fireEvent.click(shape!);
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('img-ann-1');
+    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
+    const anchorRect = click.mock.calls[0]?.[2];
+    expect(anchorRect).toBeDefined();
+    expect(typeof anchorRect.width).toBe('number');
+    expect(typeof anchorRect.left).toBe('number');
+  });
+
+  // The other shape kinds render distinct SVG elements with their own
+  // handlers — each instance of the pattern gets its own pin.
+  it.each([
+    ['circle', svgAnnotation('img-circle-1', 'commenting', '<svg><circle cx="30" cy="30" r="10"/></svg>')],
+    ['polygon', svgAnnotation('img-polygon-1', 'assessing', '<svg><polygon points="10,10 30,10 20,30"/></svg>')],
+  ] as const)('passes the %s element rect as browse.click third argument', (_kind, annotation) => {
+    const { session, click } = sessionDouble();
+
+    const { container } = render(
+      <AnnotationOverlay
+        annotations={[annotation]}
+        imageWidth={100}
+        imageHeight={100}
+        displayWidth={200}
+        displayHeight={200}
+        session={session}
+        hoverDelayMs={0}
+      />,
+    );
+
+    const shape = container.querySelector('.semiont-annotation-overlay__shape');
+    expect(shape).toBeInTheDocument();
+
+    fireEvent.click(shape!);
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe(annotation.id);
+    const anchorRect = click.mock.calls[0]?.[2];
+    expect(anchorRect).toBeDefined();
+    expect(typeof anchorRect.width).toBe('number');
+  });
+
+  it('passes the status-indicator element rect as browse.click third argument', () => {
+    // Only references render a status indicator (🔗/❓).
+    const reference = svgAnnotation('img-ref-1', 'linking', '<svg><rect x="10" y="10" width="20" height="20"/></svg>');
+    const { session, click } = sessionDouble();
+
+    const { container } = render(
+      <AnnotationOverlay
+        annotations={[reference]}
+        imageWidth={100}
+        imageHeight={100}
+        displayWidth={200}
+        displayHeight={200}
+        session={session}
+        hoverDelayMs={0}
+      />,
+    );
+
+    const indicator = container.querySelector('.semiont-annotation-overlay__status-indicator');
+    expect(indicator).toBeInTheDocument();
+
+    fireEvent.click(indicator!);
+
+    // stopPropagation: the indicator's own handler emits, exactly once.
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('img-ref-1');
+    expect(click.mock.calls[0]?.[1]).toBe('linking');
+    const anchorRect = click.mock.calls[0]?.[2];
+    expect(anchorRect).toBeDefined();
+    expect(typeof anchorRect.width).toBe('number');
+  });
+});

package/src/components/image-annotation/__tests__/SvgDrawingCanvas.click.test.tsx

@@ -0,0 +1,108 @@
+/**
+ * A1 anchor thread — image canvas drawing-path hit-test pin.
+ *
+ * In drawing mode, a sub-10px "click" on an existing annotation goes through
+ * the mouse-up hit-test (not the overlay's element handlers): the hit-test
+ * owns the display-coordinate transform and must emit browse.click with the
+ * annotation's viewport rect (display rect offset by the image's position —
+ * zeros in jsdom, so viewport == display coordinates here).
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { Annotation, AnnotationId } from '@semiont/core';
+import { SvgDrawingCanvas } from '../SvgDrawingCanvas';
+
+// jsdom's Image never fires onload; the canvas loads natural dimensions via a
+// detached `new Image()`. Stub it to report 100×100 synchronously-ish.
+class FakeImage {
+  onload: (() => void) | null = null;
+  naturalWidth = 100;
+  naturalHeight = 100;
+  set src(_value: string) {
+    queueMicrotask(() => this.onload?.());
+  }
+}
+
+const rectAnnotation: Annotation = {
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id: 'canvas-ann-1' as AnnotationId,
+  type: 'Annotation',
+  motivation: 'highlighting',
+  created: '2024-01-01T10:00:00Z',
+  target: {
+    source: 'resource-1',
+    selector: {
+      type: 'SvgSelector',
+      value: '<svg><rect x="10" y="10" width="20" height="20"/></svg>',
+    },
+  },
+};
+
+function sessionDouble() {
+  const click = vi.fn();
+  const session = {
+    client: {
+      browse: { click },
+      beckon: { hover: vi.fn() },
+    },
+  } as unknown as SemiontSession;
+  return { session, click };
+}
+
+describe('SvgDrawingCanvas — drawing-path hit-test anchorRect', () => {
+  beforeEach(() => {
+    vi.stubGlobal('Image', FakeImage);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('emits browse.click with the hit annotation viewport rect on a sub-10px click', async () => {
+    const { session, click } = sessionDouble();
+
+    const { container } = render(
+      <SvgDrawingCanvas
+        imageUrl="http://test/image.png"
+        resourceUri="resource-1"
+        existingAnnotations={[rectAnnotation]}
+        drawingMode="rectangle"
+        selectedMotivation="highlighting"
+        session={session}
+      />,
+    );
+
+    // Wait for the stubbed Image load to land imageDimensions (overlay mounts).
+    await waitFor(() => {
+      expect(container.querySelector('.semiont-svg-drawing-canvas__overlay-container')).toBeInTheDocument();
+    });
+
+    // jsdom has no layout: give the rendered <img> display dimensions and let
+    // the resize listener re-read them (display 200×200 over natural 100×100
+    // → scale 2, so the 10,10,20,20 annotation displays at 20,20,40,40).
+    const img = container.querySelector('.semiont-svg-drawing-canvas__image') as HTMLImageElement;
+    Object.defineProperty(img, 'clientWidth', { value: 200, configurable: true });
+    Object.defineProperty(img, 'clientHeight', { value: 200, configurable: true });
+    fireEvent(window, new Event('resize'));
+
+    await waitFor(() => {
+      const overlay = container.querySelector('.semiont-svg-drawing-canvas__overlay') as HTMLElement;
+      expect(overlay?.style.width).toBe('200px');
+    });
+
+    // Sub-10px gesture inside the displayed annotation (image rect is zeros
+    // in jsdom, so client coordinates are display coordinates).
+    const canvas = container.querySelector('.semiont-svg-drawing-canvas')!;
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 30 });
+    fireEvent.mouseUp(canvas, { clientX: 30, clientY: 30 });
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('canvas-ann-1');
+    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
+    expect(click.mock.calls[0]?.[2]).toEqual({
+      x: 20, y: 20, left: 20, top: 20, width: 40, height: 40, right: 60, bottom: 60,
+    });
+  });
+});

package/src/components/pdf-annotation/PdfAnnotationCanvas.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnchorRect } from '@semiont/core';
+import { resourceId as toResourceId } from '@semiont/core';
+import { toViewportAnchorRect } from '../../lib/anchor-rect';
 import {
   getTargetSelector,
   createFragmentSelector,
@@ -48,6 +50,8 @@ function getMotivationColor(motivation: SelectionMotivation | null): { stroke: s
 
 interface PdfAnnotationCanvasProps {
   pdfUrl: string;
+  /** The '@id' of the annotated resource — stamped as `source` on mark:requested (multi-viewer routing). */
+  resourceUri: string;
   existingAnnotations?: Annotation[];
   drawingMode: DrawingMode;
   selectedMotivation?: SelectionMotivation | null;
@@ -66,6 +70,7 @@ interface PdfAnnotationCanvasProps {
  */
 export function PdfAnnotationCanvas({
   pdfUrl,
+  resourceUri,
   existingAnnotations = [],
   drawingMode,
   selectedMotivation,
@@ -252,6 +257,9 @@ export function PdfAnnotationCanvas({
     if (dragDistance < MIN_DRAG_DISTANCE) {
       // This was a click, not a drag - check if we clicked an existing annotation
       if (existingAnnotations.length > 0) {
+        // The hit-test owns the coordinate transform — capture the hit
+        // annotation's viewport rect for the emission below (A1 anchor).
+        let hitRect: AnchorRect | undefined;
         const clickedAnnotation = pageAnnotations.find(ann => {
           const fragmentSel = getFragmentSelector(ann.target);
           if (!fragmentSel) return false;
@@ -270,16 +278,20 @@ export function PdfAnnotationCanvas({
           const displayWidth = rect.width * scaleX;
           const displayHeight = rect.height * scaleY;
 
-          return (
+          const hit = (
             selection.endX >= displayX &&
             selection.endX <= displayX + displayWidth &&
             selection.endY >= displayY &&
             selection.endY <= displayY + displayHeight
           );
+          if (hit && imageRef.current) {
+            hitRect = toViewportAnchorRect(imageRef.current.getBoundingClientRect(), displayX, displayY, displayWidth, displayHeight);
+          }
+          return hit;
         });
 
         if (clickedAnnotation) {
-          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation, hitRect);
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -319,6 +331,7 @@ export function PdfAnnotationCanvas({
     // Emit annotation:requested event with FragmentSelector
     if (selectedMotivation) {
       session.client.mark.request(
+        toResourceId(resourceUri),
         {
           type: 'FragmentSelector',
           conformsTo: 'http://tools.ietf.org/rfc/rfc3778',
@@ -456,7 +469,7 @@ export function PdfAnnotationCanvas({
                         cursor: 'pointer',
                         opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                       }}
-                      onClick={() => session?.client.browse.click(ann.id, ann.motivation)}
+                      onClick={(e) => session?.client.browse.click(ann.id, ann.motivation, e.currentTarget.getBoundingClientRect())}
                       onMouseEnter={() => handleMouseEnter(ann.id)}
                       onMouseLeave={handleMouseLeave}
                     />

package/src/components/pdf-annotation/__tests__/PdfAnnotationCanvas.test.tsx

@@ -11,7 +11,8 @@ import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PdfAnnotationCanvas } from '../PdfAnnotationCanvas';
-import { resourceId, annotationId } from '@semiont/core';
+import { resourceId, annotationId, parseFragmentSelector } from '@semiont/core';
+import { pdfToCanvasCoordinates } from '../../../lib/pdf-coordinates';
 
 import type { Annotation } from '@semiont/core';
 
@@ -56,7 +57,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('renders loading state initially', () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
@@ -67,7 +68,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('renders page navigation controls after loading', async () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
@@ -83,7 +84,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('previous button is disabled on first page', async () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
@@ -99,7 +100,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('next button is disabled on last page', async () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
@@ -144,7 +145,7 @@ describe('PdfAnnotationCanvas', () => {
     ];
 
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         existingAnnotations={mockAnnotations}
         drawingMode={null}
@@ -177,9 +178,144 @@ describe('PdfAnnotationCanvas', () => {
     });
   });
 
+  test('passes the annotation rect as browse.click third argument (A1 anchor)', async () => {
+    const click = vi.fn();
+    const session = {
+      client: { browse: { click }, beckon: { hover: vi.fn() } },
+    } as unknown as import('@semiont/sdk').SemiontSession;
+
+    const mockAnnotations: Annotation[] = [
+      {
+        '@context': 'http://www.w3.org/ns/anno.jsonld',
+        type: 'Annotation',
+        id: annotationId('ann-1'),
+        target: {
+          source: mockResourceId,
+          selector: {
+            type: 'FragmentSelector',
+            value: 'page=1&viewrect=100,200,150,100',
+            conformsTo: 'http://tools.ietf.org/rfc/rfc3778'
+          }
+        },
+        motivation: 'highlighting',
+        created: new Date().toISOString()
+      }
+    ];
+
+    render(
+      <PdfAnnotationCanvas resourceUri="res-1"
+        pdfUrl={mockPdfUrl}
+        existingAnnotations={mockAnnotations}
+        drawingMode={null}
+        session={session}
+      />
+    );
+
+    await waitFor(() => {
+      const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+      expect(img).toBeInTheDocument();
+    });
+
+    const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+    Object.defineProperty(img, 'clientWidth', { value: 612, configurable: true });
+    Object.defineProperty(img, 'clientHeight', { value: 792, configurable: true });
+    fireEvent.load(img);
+
+    await waitFor(() => {
+      const rects = document.querySelector('.semiont-pdf-annotation-canvas__svg')?.querySelectorAll('rect');
+      expect(rects?.length).toBeGreaterThan(0);
+    });
+
+    const annotationRect = document.querySelector('.semiont-pdf-annotation-canvas__svg')!.querySelector('rect')!;
+    fireEvent.click(annotationRect);
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('ann-1');
+    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
+    const anchorRect = click.mock.calls[0]?.[2];
+    expect(anchorRect).toBeDefined();
+    expect(typeof anchorRect.width).toBe('number');
+  });
+
+  test('drawing-path hit-test emits browse.click with the annotation viewport rect', async () => {
+    // A1 anchor: in drawing mode, a sub-10px click on an existing annotation
+    // goes through the mouse-up hit-test, which owns the PDF→display
+    // coordinate transform. Expected rect computed with the same lib
+    // functions the component uses (scale is 1: display 612×792 == page).
+    const click = vi.fn();
+    const session = {
+      client: { browse: { click }, beckon: { hover: vi.fn() } },
+    } as unknown as import('@semiont/sdk').SemiontSession;
+
+    const fragmentValue = 'page=1&viewrect=100,200,150,100';
+    const mockAnnotations: Annotation[] = [
+      {
+        '@context': 'http://www.w3.org/ns/anno.jsonld',
+        type: 'Annotation',
+        id: annotationId('ann-hit-1'),
+        target: {
+          source: mockResourceId,
+          selector: {
+            type: 'FragmentSelector',
+            value: fragmentValue,
+            conformsTo: 'http://tools.ietf.org/rfc/rfc3778'
+          }
+        },
+        motivation: 'highlighting',
+        created: new Date().toISOString()
+      }
+    ];
+
+    render(
+      <PdfAnnotationCanvas resourceUri="res-1"
+        pdfUrl={mockPdfUrl}
+        existingAnnotations={mockAnnotations}
+        drawingMode="rectangle"
+        selectedMotivation="highlighting"
+        session={session}
+      />
+    );
+
+    await waitFor(() => {
+      const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+      expect(img).toBeInTheDocument();
+    });
+
+    const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+    Object.defineProperty(img, 'clientWidth', { value: 612, configurable: true });
+    Object.defineProperty(img, 'clientHeight', { value: 792, configurable: true });
+    fireEvent.load(img);
+
+    await waitFor(() => {
+      const rects = document.querySelector('.semiont-pdf-annotation-canvas__svg')?.querySelectorAll('rect');
+      expect(rects?.length).toBeGreaterThan(0);
+    });
+
+    const pdfCoord = parseFragmentSelector(fragmentValue)!;
+    const displayRect = pdfToCanvasCoordinates(pdfCoord, 792, 1.0);
+
+    // Sub-10px gesture at the annotation's display-rect center (image rect is
+    // zeros in jsdom, so client coordinates are display coordinates).
+    const canvasContainer = document.querySelector('.semiont-pdf-annotation-canvas__container')!;
+    const clickX = displayRect.x + displayRect.width / 2;
+    const clickY = displayRect.y + displayRect.height / 2;
+    fireEvent.mouseDown(canvasContainer, { clientX: clickX, clientY: clickY });
+    fireEvent.mouseUp(canvasContainer, { clientX: clickX, clientY: clickY });
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('ann-hit-1');
+    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
+    expect(click.mock.calls[0]?.[2]).toMatchObject({
+      left: displayRect.x,
+      top: displayRect.y,
+      width: displayRect.width,
+      height: displayRect.height,
+    });
+  });
+
   test('accepts a drawing gesture without throwing when drawing mode is active', async () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode="rectangle"
         selectedMotivation="highlighting"