Annotation filtering

rsimon · rsimon · commit 111cbd18d93f · 2023-11-29T14:48:02.000+01:00
diff --git a/packages/text-annotator/src/TextAnnotator.ts b/packages/text-annotator/src/TextAnnotator.ts
@@ -51,9 +51,8 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
 
   const getUser = () => currentUser;
 
-  const setFilter = (filter: Filter) => {
-    // TODO
-  }
+  const setFilter = (filter?: Filter) =>
+    highlightLayer.setFilter(filter);
 
   const setStyle = (drawingStyle: DrawingStyle | ((annotation: TextAnnotation) => DrawingStyle) | undefined) =>
     highlightLayer.setDrawingStyle(drawingStyle);
diff --git a/packages/text-annotator/src/highlight/highlightLayer.ts b/packages/text-annotator/src/highlight/highlightLayer.ts
@@ -1,4 +1,4 @@
-import type { DrawingStyle, ViewportState } from '@annotorious/core';
+import type { DrawingStyle, Filter, ViewportState } from '@annotorious/core';
 import type { TextAnnotation } from '../model';
 import type { TextAnnotatorState } from '../state';
 import { defaultPainter, type HighlightPainter } from './HighlightPainter';
@@ -52,6 +52,8 @@ export const createHighlightLayer = (
   
   let currentStyle: DrawingStyle | ((annotation: TextAnnotation, selected?: boolean) => DrawingStyle) | undefined;
 
+  let currentFilter: Filter | undefined;
+
   let currentPainter: HighlightPainter = defaultPainter;
 
   const onDraw = trackViewport(viewport);
@@ -69,11 +71,14 @@ export const createHighlightLayer = (
 
   container.addEventListener('pointermove', (event: PointerEvent) => {
     const {x, y} = container.getBoundingClientRect();
-    const hovered = store.getAt(event.clientX - x, event.clientY - y);
-    if (hovered) {
-      if (hover.current !== hovered.id) {
+
+    const hit = store.getAt(event.clientX - x, event.clientY - y);
+    const isVisibleHit = hit && (!currentFilter || currentFilter(hit));
+
+    if (isVisibleHit) {
+      if (hover.current !== hit.id) {
         container.classList.add('hovered');
-        hover.set(hovered.id);
+        hover.set(hit.id);
       }
     } else {
       if (hover.current) {
@@ -123,8 +128,10 @@ export const createHighlightLayer = (
   const redraw = () => requestAnimationFrame(() => {
     const { top, left, minX, minY, maxX, maxY } = getViewport();   
     
-    const annotationsInView = store.getIntersectingRects(minX, minY, maxX, maxY);
-    
+    const annotationsInView = currentFilter
+      ? store.getIntersectingRects(minX, minY, maxX, maxY).filter(({ annotation }) => currentFilter(annotation))
+      : store.getIntersectingRects(minX, minY, maxX, maxY);
+
     const { width, height } = fgCanvas;
 
     // Get current selection
@@ -161,9 +168,15 @@ export const createHighlightLayer = (
     redraw();
   }
 
+  const setFilter = (filter?: Filter) => {
+    currentFilter = filter;
+    redraw();
+  } 
+
   return {
     redraw,
     setDrawingStyle,
+    setFilter,
     setPainter: (painter: HighlightPainter) => currentPainter = painter
   }
 
diff --git a/packages/text-annotator/test/index.html b/packages/text-annotator/test/index.html
@@ -43,7 +43,7 @@
 
   <body>
     <div id="buttons">
-      <button id="jump">Jump to annotation</button>
+      <button id="filter">Toggle Filter</button>
     </div>
     
     <div id="content">
@@ -140,13 +140,8 @@ <h1>Homer: The Odyssey</h1>
       window.onload = async function() {
         var r = createTextAnnotator(document.getElementById('content'));
 
-        let annotations;
+        r.loadAnnotations('annotations.json');
 
-        r.loadAnnotations('annotations.json').then(a => {
-          annotations = a;
-        });
-
-        /*
         r.on('createAnnotation', annotation => {
           console.log('createAnnotation', annotation);
         });
@@ -166,16 +161,22 @@ <h1>Homer: The Odyssey</h1>
         r.on('viewportIntersect', (annotations) => {
           console.log('viewport', annotations);
         });
-        */ 
 
-        let idx = 0;
+        var filterActive = false;
 
-        document.getElementById('jump').addEventListener('click', () => {
-          const next = annotations[idx];
+        document.getElementById('filter').addEventListener('click', () => {
+          if (filterActive) {
+            r.setFilter();
 
-          idx = (idx + 1) % annotations.length;
+            filterActive = false;
+          } else {
+            r.setFilter(annotation => {
+              // Dummy filter - just filter randomly
+              return  Math.random() < 0.5;
+            });
 
-          r.scrollIntoView(next);
+            filterActive = true;
+          }
         });
       }
     </script>
