Merge branch 'refs/heads/recogito#127-annotating-enabled-reactive' in…

…to keyboard-event-selection # Conflicts: # packages/text-annotator/src/SelectionHandler.ts
oleksandr-danylchenko · Aug 28, 2024 · 5e29997 · 5e29997
2 parents 8684a8a + 2c5b4da
commit 5e29997
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git a/packages/text-annotator-react/src/TextAnnotator.tsx b/packages/text-annotator-react/src/TextAnnotator.tsx
@@ -40,22 +40,16 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
     return () => anno.destroy();
   }, [setAnno]);
 
-  useEffect(() => {
-    if (!anno) return;
-
-    anno.setStyle(props.style);
-  }, [anno, props.style]);
+  useEffect(() => anno?.setStyle(props.style), [anno, props.style]);
 
-  useEffect(() => {
-    if (!anno) return;
+  useEffect(() => anno?.setFilter(props.filter), [anno, props.filter]);
 
-    anno.setFilter(props.filter);
-  }, [anno, props.filter]);
+  useEffect(() => anno?.setAnnotatingEnabled(props.annotatingEnabled), [anno, props.annotatingEnabled]);
 
   return (
     <div ref={el} className={className}>
       {children}
     </div>
-  )
+  );
 
 }
diff --git a/packages/text-annotator/src/SelectionHandler.ts b/packages/text-annotator/src/SelectionHandler.ts
@@ -13,10 +13,9 @@ import {
   NOT_ANNOTATABLE_SELECTOR
 } from './utils';
 
-export const SelectionHandler = (
+export const createSelectionHandler = (
   container: HTMLElement,
   state: TextAnnotatorState,
-  annotatingEnabled: boolean,
   offsetReferenceSelector?: string
 ) => {
 
@@ -28,6 +27,10 @@ export const SelectionHandler = (
 
   const setFilter = (filter?: Filter) => currentFilter = filter;
 
+  let currentAnnotatingEnabled = true;
+
+  const setAnnotatingEnabled = (enabled: boolean) => currentAnnotatingEnabled = enabled;
+
   const { store, selection } = state;
 
   let currentTarget: TextAnnotationTarget | undefined;
@@ -37,8 +40,9 @@ export const SelectionHandler = (
   let lastDownEvent: Selection['event'] | undefined;
 
   const onSelectStart = (evt: Event) => {
-    if (isLeftClick === false)
-      return;
+    if (!currentAnnotatingEnabled) return;
+
+    if (isLeftClick === false) return;
 
     /**
      * Make sure we don't listen to selection changes that were
@@ -56,10 +60,10 @@ export const SelectionHandler = (
     } : undefined;
   }
 
-  if (annotatingEnabled)
-    container.addEventListener('selectstart', onSelectStart);
+  container.addEventListener('selectstart', onSelectStart);
 
   const onSelectionChange = debounce((evt: Event) => {
+    if (!currentAnnotatingEnabled) return;
     const sel = document.getSelection();
 
     // This is to handle cases where the selection is "hijacked" by another element
@@ -127,8 +131,7 @@ export const SelectionHandler = (
     }
   })
 
-  if (annotatingEnabled)
-    document.addEventListener('selectionchange', onSelectionChange);
+  document.addEventListener('selectionchange', onSelectionChange);
 
   /**
    * Select events don't carry information about the mouse button
@@ -227,7 +230,8 @@ export const SelectionHandler = (
   return {
     destroy,
     setFilter,
-    setUser
+    setUser,
+    setAnnotatingEnabled
   }
 
 }

diff --git a/packages/text-annotator/src/TextAnnotator.ts b/packages/text-annotator/src/TextAnnotator.ts
@@ -1,13 +1,24 @@
-import { createAnonymousGuest, createLifecycleObserver, createBaseAnnotator, Filter, createUndoStack } from '@annotorious/core';
+import {
+  createAnonymousGuest,
+  createLifecycleObserver,
+  createBaseAnnotator,
+  Filter,
+  createUndoStack
+} from '@annotorious/core';
 import type { Annotator, User, PresenceProvider } from '@annotorious/core';
-import { createCanvasRenderer, createHighlightsRenderer, createSpansRenderer, type HighlightStyleExpression } from './highlight';
+import {
+  createCanvasRenderer,
+  createHighlightsRenderer,
+  createSpansRenderer,
+  type HighlightStyleExpression
+} from './highlight';
 import { createPresencePainter } from './presence';
 import { scrollIntoView } from './api';
 import { TextAnnotationStore, TextAnnotatorState, createTextAnnotatorState } from './state';
 import type { TextAnnotation } from './model';
 import { cancelSingleClickEvents, programmaticallyFocusable } from './utils';
 import { fillDefaults, type RendererType, type TextAnnotatorOptions } from './TextAnnotatorOptions';
-import { SelectionHandler } from './SelectionHandler';
+import { createSelectionHandler } from './SelectionHandler';
 
 import './TextAnnotator.css';
 
@@ -22,6 +33,8 @@ export interface TextAnnotator<E extends unknown = TextAnnotation> extends Annot
   // Returns true if successful (or false if the annotation is not currently rendered)
   scrollIntoView(annotation: TextAnnotation): boolean;
 
+  setAnnotatingEnabled: (enabled: boolean) => void;
+
   state: TextAnnotatorState;
 
 }
@@ -62,8 +75,8 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
 
   const highlightRenderer =
     useRenderer === 'SPANS' ? createSpansRenderer(container, state, viewport) :
-    useRenderer === 'CSS_HIGHLIGHTS' ? createHighlightsRenderer(container, state, viewport) :
-    useRenderer === 'CANVAS' ? createCanvasRenderer(container, state, viewport) : undefined;
+      useRenderer === 'CSS_HIGHLIGHTS' ? createHighlightsRenderer(container, state, viewport) :
+        useRenderer === 'CANVAS' ? createCanvasRenderer(container, state, viewport) : undefined;
 
   if (!highlightRenderer)
     throw `Unknown renderer implementation: ${useRenderer}`;
@@ -73,8 +86,9 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
   if (opts.style)
     highlightRenderer.setStyle(opts.style);
 
-  const selectionHandler = SelectionHandler(container, state, opts.annotatingEnabled, opts.offsetReferenceSelector);
+  const selectionHandler = createSelectionHandler(container, state, opts.offsetReferenceSelector);
   selectionHandler.setUser(currentUser);
+  selectionHandler.setAnnotatingEnabled(opts.annotatingEnabled);
 
   /*************************/
   /*      External API     */
@@ -85,6 +99,10 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
 
   const getUser = () => currentUser;
 
+  const setAnnotatingEnabled = (enabled: boolean) => {
+    selectionHandler.setAnnotatingEnabled(enabled);
+  };
+
   const setFilter = (filter?: Filter) => {
     highlightRenderer.setFilter(filter);
     selectionHandler.setFilter(filter);
@@ -129,6 +147,7 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
     destroy,
     element: container,
     getUser,
+    setAnnotatingEnabled,
     setFilter,
     setStyle,
     setUser,