Closes #356

annotorious · Jan 17, 2024 · 2287e39 · 2287e39
1 parent 158f87a
commit 2287e39
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 62 deletions.
diff --git a/packages/annotorious-core/src/model/Annotator.ts b/packages/annotorious-core/src/model/Annotator.ts
@@ -42,7 +42,7 @@ export interface Annotator<I extends Annotation = Annotation, E extends unknown
 
   setAnnotations(annotations: E[]): void;
 
-  setFilter(filter: Filter): void;
+  setFilter(filter: Filter | undefined): void;
 
   setPresenceProvider?(provider: PresenceProvider): void;
 

diff --git a/packages/annotorious-openseadragon/src/Annotorious.ts b/packages/annotorious-openseadragon/src/Annotorious.ts
@@ -117,6 +117,7 @@ export const createOSDAnnotator = <E extends unknown = ImageAnnotation>(
     target: viewer.element.querySelector('.openseadragon-canvas')!,
     props: { 
       drawingEnabled: Boolean(drawingEnabled),
+      filter: undefined,
       preferredDrawingMode: drawingMode!,
       state,
       style: opts.style,
@@ -191,9 +192,12 @@ export const createOSDAnnotator = <E extends unknown = ImageAnnotation>(
     drawingLayer.$set({ drawingEnabled });
   }
 
-  const setFilter = (filter: Filter) =>
+  const setFilter = (filter: Filter | undefined) => {
     // @ts-ignore
     displayLayer.$set({ filter });
+    // @ts-ignore
+    drawingLayer.$set({ filter });
+  }
 
   const setStyle = (style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined) => {
     displayLayer.$set({ style });

diff --git a/packages/annotorious-openseadragon/src/annotation/svg/drawing/SVGDrawingLayer.svelte b/packages/annotorious-openseadragon/src/annotation/svg/drawing/SVGDrawingLayer.svelte
@@ -2,7 +2,7 @@
   import { SvelteComponent } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
   import OpenSeadragon from 'openseadragon';
-  import type { DrawingStyle, StoreChangeEvent, User } from '@annotorious/core';
+  import type { DrawingStyle, Filter, StoreChangeEvent, User } from '@annotorious/core';
   import { EditorMount } from '@annotorious/annotorious/src'; // Import Svelte components from source
   import { getEditor as _getEditor, getTool, listDrawingTools } from '@annotorious/annotorious';
   import type { ImageAnnotation, Shape, ImageAnnotatorState, DrawingMode } from '@annotorious/annotorious';
@@ -11,6 +11,7 @@
 
   /** Props **/
   export let drawingEnabled: boolean;
+  export let filter: Filter<ImageAnnotation> | undefined;
   export let preferredDrawingMode: DrawingMode;
   export let state: ImageAnnotatorState;
   export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined = undefined;
@@ -31,11 +32,13 @@
   $: drawingEnabled && selection.clear();
 
   /** Selection tracking **/
-  const { store, selection } = state;
+  const { store, selection, hover } = state;
 
   let storeObserver: (event: StoreChangeEvent<ImageAnnotation>) => void;
 
   let editableAnnotations: ImageAnnotation[] | undefined;
+
+  let grabbedAt: number | undefined;
  
   $: if ($selection.selected.length === 0 && drawingMode === 'drag' && drawingEnabled) { viewer.setMouseNavEnabled(false) }
 
@@ -70,9 +73,32 @@
     return [x, y];
   }
 
-  const onGrab = () => viewer.setMouseNavEnabled(false);
-  
-  const onRelease = () => viewer.setMouseNavEnabled(true);
+  const onGrab = (evt: CustomEvent<PointerEvent>) => {
+    viewer.setMouseNavEnabled(false);
+
+    // Record timestamp, so we can differentiate between actual
+    // grab (edit) and click (possibly select overlapping shape)
+    grabbedAt = evt.timeStamp;
+  }
+
+  const onRelease = (evt: CustomEvent<PointerEvent>) => { 
+    viewer.setMouseNavEnabled(true);
+
+    const timeDifference = performance.now() - (grabbedAt || 0);
+    if (timeDifference < 300) {
+      // Click - check if another shape needs selecting
+      const { offsetX, offsetY } = evt.detail;
+      const [x, y] = toolTransform(offsetX, offsetY);
+
+      const hit = store.getAt(x, y);
+      const isVisibleHit = hit && (!filter || filter(hit));
+
+      if (isVisibleHit && !editableAnnotations!.find(e => e.id === hit.id)) {
+        hover.set(hit.id);
+        selection.setSelected(hit.id);
+      }
+    }
+  }
 
   const onChangeSelected = (annotation: ImageAnnotation) => (event: CustomEvent<Shape>) => {  
     const { target } = annotation;

diff --git a/packages/annotorious-openseadragon/test/annotations.json b/packages/annotorious-openseadragon/test/annotations.json
@@ -1,54 +1,83 @@
-[{ 
-  "@context": "http://www.w3.org/ns/anno.jsonld",
-  "id": "#a88b22d0-6106-4872-9435-c78b5e89fede",
-  "type": "Annotation",
-  "body": [{
-    "type": "TextualBody",
-    "value": "A comment..."
-  }],
-  "target": {
-    "selector": {
-      "type": "FragmentSelector",
-      "conformsTo": "http://www.w3.org/TR/media-frags/",
-      "value": "xywh=pixel:2000,1200,400,370"
+[
+  {
+    "@context": "http://www.w3.org/ns/anno.jsonld",
+    "id": "#a88b22d0-6106-4872-9435-c78b5e89fede",
+    "type": "Annotation",
+    "body": [
+      {
+        "type": "TextualBody",
+        "value": "A comment..."
+      }
+    ],
+    "target": {
+      "selector": {
+        "type": "FragmentSelector",
+        "conformsTo": "http://www.w3.org/TR/media-frags/",
+        "value": "xywh=pixel:2000,1200,400,370"
+      }
     }
-  }
-},{ 
-  "@context": "http://www.w3.org/ns/anno.jsonld",
-  "id": "#a99b22d0-6106-4872-9435-c78b5e89fede",
-  "type": "Annotation",
-  "body": [{
-    "type": "TextualBody",
-    "value": "Another comment..."
-  }],
-  "target": {
-    "selector": {
-      "type": "FragmentSelector",
-      "conformsTo": "http://www.w3.org/TR/media-frags/",
-      "value": "xywh=pixel:4000,2200,500,270"
+  },
+  {
+    "@context": "http://www.w3.org/ns/anno.jsonld",
+    "id": "#a99b22d0-6106-4872-9435-c78b5e89fede",
+    "type": "Annotation",
+    "body": [
+      {
+        "type": "TextualBody",
+        "value": "Another comment..."
+      }
+    ],
+    "target": {
+      "selector": {
+        "type": "FragmentSelector",
+        "conformsTo": "http://www.w3.org/TR/media-frags/",
+        "value": "xywh=pixel:4000,2200,500,270"
+      }
     }
-  }
-}, {
-  "@context": "http://www.w3.org/ns/anno.jsonld",
-  "id": "#9df313be-4ded-4d0f-b7f6-f6b1a19e733b",
-  "type": "Annotation",
-  "body": [
-    {
-      "type": "TextualBody",
-      "value": "A comment...",
-      "purpose": "commenting",
-      "creator": {
-        "id": "http://www.example.com/rainer",
-        "name": "rainer"
-      },
-      "created": "2021-08-14T08:13:12.514Z",
-      "modified": "2021-08-14T08:13:12.557Z"
+  },
+  {
+    "@context": "http://www.w3.org/ns/anno.jsonld",
+    "id": "#9df313be-4ded-4d0f-b7f6-f6b1a19e733b",
+    "type": "Annotation",
+    "body": [
+      {
+        "type": "TextualBody",
+        "value": "A comment...",
+        "purpose": "commenting",
+        "creator": {
+          "id": "http://www.example.com/rainer",
+          "name": "rainer"
+        },
+        "created": "2021-08-14T08:13:12.514Z",
+        "modified": "2021-08-14T08:13:12.557Z"
+      }
+    ],
+    "target": {
+      "selector": {
+        "type": "SvgSelector",
+        "value": "<svg><polygon points=\"447,213 560,140 563,259\"></polygon></svg>"
+      }
     }
-  ],
-  "target": {
-    "selector": {
-      "type": "SvgSelector",
-      "value": "<svg><polygon points=\"447,213 560,140 563,259\"></polygon></svg>"
+  },
+  {
+    "id": "outer",
+    "bodies": [],
+    "target": {
+      "annotation": "6e4110be-821b-4a94-9a6f-6d53a631baec",
+      "source": "https://iiif.bodleian.ox.ac.uk/iiif/image/af315e66-6a85-445b-9e26-012f729fc49c",
+      "selector": {
+        "type": "FragmentSelector",
+        "conformsTo": "http://www.w3.org/TR/media-frags/",
+        "value": "xywh=pixel:3837.5816366158074,2062.6452035798984,834.5284826225229,559.3172825934121"
+      }
+    },
+    "@context": "http://www.w3.org/ns/anno.jsonld",
+    "type": "Annotation",
+    "body": [],
+    "created": "2024-01-17T10:49:04.535Z",
+    "creator": {
+      "isGuest": true,
+      "id": "uFbvPid1_5qwzTWkG6jN"
     }
   }
-}]
+]
diff --git a/packages/annotorious-openseadragon/test/index.html b/packages/annotorious-openseadragon/test/index.html
@@ -86,7 +86,7 @@
           }
         });
 
-        anno.setDrawingTool('polygon');
+        // anno.setDrawingTool('polygon');
 
         fetch('annotations.json').then((response) => response.json())
           .then(annotations =>

diff --git a/packages/annotorious/src/annotation/editors/Editor.svelte b/packages/annotorious/src/annotation/editors/Editor.svelte
@@ -3,7 +3,7 @@
   import type { Shape } from '../../model';
   import type { Transform } from '../Transform';
 
-  const dispatch = createEventDispatcher<{ grab: undefined, release: undefined, change: Shape }>();
+  const dispatch = createEventDispatcher<{ grab: PointerEvent, release: PointerEvent, change: Shape }>();
 
   /** Props */
   export let shape: Shape;
@@ -24,7 +24,7 @@
     const target = evt.target as Element;
     target.setPointerCapture(evt.pointerId);
 
-    dispatch('grab');
+    dispatch('grab', evt);
   }
 
   const onPointerMove = (evt: PointerEvent) => {
@@ -47,7 +47,7 @@
 
     initialShape = shape;
     
-    dispatch('release');
+    dispatch('release', evt);
   }
 </script>
 

diff --git a/packages/annotorious/src/annotation/editors/EditorMount.svelte b/packages/annotorious/src/annotation/editors/EditorMount.svelte
@@ -5,7 +5,7 @@
   import { computeStyle } from '../utils/styling';
   import type { Transform } from '../Transform';
 
-  const dispatch = createEventDispatcher<{ grab: undefined, release: undefined, change: Shape }>();
+  const dispatch = createEventDispatcher<{ grab: PointerEvent, release: PointerEvent, change: Shape }>();
 
   /** Props */
   export let annotation: ImageAnnotation;

diff --git a/packages/annotorious/test/index.html b/packages/annotorious/test/index.html
@@ -70,7 +70,7 @@
           // console.log('selected', selected);
         });
 
-        anno.setDrawingTool('polygon');
+        // anno.setDrawingTool('polygon');
       }
     </script>
   </body>