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

…to staging # Conflicts: # packages/text-annotator-react/src/TextAnnotator.tsx # packages/text-annotator/src/SelectionHandler.ts
oleksandr-danylchenko · Aug 2, 2024 · c696800 · c696800
2 parents 99179f9 + 2c5b4da
commit c696800
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/packages/text-annotator-react/src/TextAnnotator.tsx b/packages/text-annotator-react/src/TextAnnotator.tsx
@@ -26,7 +26,7 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
   const el = useRef<HTMLDivElement>(null);
 
   const { className, children, ...opts } = props;
-  const { style, filter, userSelectAction, user } = opts;
+  const { annotatingEnabled, style, filter, userSelectAction, user } = opts;
 
   const { anno, setAnno } = useContext(AnnotoriousContext);
 
@@ -49,6 +49,8 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
 
   useEffect(() => anno?.setUser(user), [anno, user]);
 
+  useEffect(() => anno?.setAnnotatingEnabled(annotatingEnabled), [anno, annotatingEnabled]);
+
   return (
     <div ref={el} className={className}>
       {children}

diff --git a/packages/text-annotator/src/SelectionHandler.ts b/packages/text-annotator/src/SelectionHandler.ts
@@ -14,10 +14,9 @@ import {
   NOT_ANNOTATABLE_SELECTOR
 } from './utils';
 
-export const SelectionHandler = (
+export const createSelectionHandler = (
   container: HTMLElement,
   state: TextAnnotatorState,
-  annotatingEnabled: boolean,
   offsetReferenceSelector?: string
 ) => {
 
@@ -29,6 +28,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;
@@ -38,6 +41,8 @@ export const SelectionHandler = (
   let lastDownEvent: Selection['event'] | undefined;
 
   const onSelectStart = (evt: Event) => {
+    if (!currentAnnotatingEnabled) return;
+
     if (isLeftClick === false)
       return;
 
@@ -57,10 +62,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
@@ -116,8 +121,7 @@ export const SelectionHandler = (
     }
   })
 
-  if (annotatingEnabled)
-    document.addEventListener('selectionchange', onSelectionChange);
+  document.addEventListener('selectionchange', onSelectionChange);
 
   /**
    * Select events don't carry information about the mouse button
@@ -219,7 +223,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
@@ -18,7 +18,7 @@ import { TextAnnotationStore, TextAnnotatorState, createTextAnnotatorState } fro
 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';
 
@@ -35,6 +35,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;
 
 }
@@ -87,8 +89,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     */
@@ -99,6 +102,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);
@@ -137,6 +144,7 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
     destroy,
     element: container,
     getUser,
+    setAnnotatingEnabled,
     setFilter,
     setStyle: highlightRenderer.setStyle.bind(highlightRenderer),
     redraw: highlightRenderer.redraw.bind(highlightRenderer),