#127 Made annotatingEnabled property reactive

packages/text-annotator-react/src/TextAnnotator.tsx

@@ -27,8 +27,8 @@ export const TextAnnotator = <I extends TextAnnotation = TextAnnotation, E exten
   const el = useRef<HTMLDivElement>(null);
 
   const { className, children, ...opts } = props;
-  
-  const { style, filter, user } = opts;
+
+  const { style, filter, user, annotatingEnabled } = opts;
 
   const { anno, setAnno } = useContext(AnnotoriousContext);
 
@@ -49,10 +49,12 @@ export const TextAnnotator = <I extends TextAnnotation = TextAnnotation, E exten
 
   useEffect(() => anno?.setUser(user), [anno, user]);
 
+  useEffect(() => anno?.setAnnotatingEnabled(annotatingEnabled), [anno, annotatingEnabled]);
+
   return (
     <div ref={el} className={className}>
       {children}
     </div>
-  )
+  );
 
 }

packages/text-annotator/package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@annotorious/core": "^3.0.14",
     "colord": "^2.9.3",
+    "debounce": "^2.1.1",
     "dequal": "^2.0.3",
     "hotkeys-js": "^3.13.9",
     "rbush": "^4.0.1",

packages/text-annotator/src/SelectionHandler.ts

@@ -1,14 +1,15 @@
-import { Origin } from '@annotorious/core';
-import type { Filter, Selection, User } from '@annotorious/core';
+import debounce from 'debounce';
 import { v4 as uuidv4 } from 'uuid';
 import hotkeys from 'hotkeys-js';
+
+import { Origin, type Filter, type Selection, type User } from '@annotorious/core';
+
 import type { TextAnnotatorState } from './state';
 import type { TextAnnotation, TextAnnotationTarget } from './model';
 import type { TextAnnotatorOptions } from './TextAnnotatorOptions';
 import {
   clonePointerEvent,
   cloneKeyboardEvent,
-  debounce,
   splitAnnotatableRanges,
   rangeToSelector,
   isMac,
@@ -28,12 +29,14 @@ const SELECTION_KEYS = [
   SELECT_ALL
 ];
 
-export const SelectionHandler = (
+export const createSelectionHandler = (
   container: HTMLElement,
   state: TextAnnotatorState<TextAnnotation, unknown>,
   options: TextAnnotatorOptions<TextAnnotation, unknown>
 ) => {
 
+  const { store, selection } = state;
+
   let currentUser: User | undefined;
 
   const { annotatingEnabled, offsetReferenceSelector, selectionMode } = options;
@@ -44,17 +47,29 @@ export const SelectionHandler = (
 
   const setFilter = (filter?: Filter) => currentFilter = filter;
 
-  const { store, selection } = state;
-
   let currentTarget: TextAnnotationTarget | undefined;
 
   let isLeftClick: boolean | undefined;
 
   let lastDownEvent: Selection['event'] | undefined;
 
+  let currentAnnotatingEnabled = annotatingEnabled;
+
+  const setAnnotatingEnabled = (enabled: boolean) => {
+    currentAnnotatingEnabled = enabled;
+    onSelectionChange.clear();
+
+    if (!enabled) {
+      currentTarget = undefined;
+      isLeftClick = undefined;
+      lastDownEvent = 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
@@ -73,6 +88,8 @@ export const SelectionHandler = (
   };
 
   const onSelectionChange = debounce((evt: Event) => {
+    if (!currentAnnotatingEnabled) return;
+
     const sel = document.getSelection();
 
     /**
@@ -166,7 +183,7 @@ export const SelectionHandler = (
       // Proper lifecycle management: clear the previous selection first...
       selection.clear();
     }
-  });
+  }, 10);
 
   /**
    * Select events don't carry information about the mouse button.
@@ -243,18 +260,20 @@ export const SelectionHandler = (
 
     if (sel?.isCollapsed) return;
 
-    // When selecting the initial word, Chrome Android fires `contextmenu` 
+    // When selecting the initial word, Chrome Android fires `contextmenu`
     // before selectionChanged.
     if (!currentTarget || currentTarget.selector.length === 0) {
       onSelectionChange(evt);
     }
-    
+
     upsertCurrentTarget();
 
     selection.userSelect(currentTarget.annotation, clonePointerEvent(evt));
   }
 
   const onKeyup = (evt: KeyboardEvent) => {
+    if (!currentAnnotatingEnabled) return;
+
     if (evt.key === 'Shift' && currentTarget) {
       const sel = document.getSelection();
 
@@ -351,13 +370,17 @@ export const SelectionHandler = (
   document.addEventListener('pointerup', onPointerUp);
   document.addEventListener('contextmenu', onContextMenu);
 
-  if (annotatingEnabled) {
-    container.addEventListener('keyup', onKeyup);
-    container.addEventListener('selectstart', onSelectStart);
-    document.addEventListener('selectionchange', onSelectionChange);
-  }
+  container.addEventListener('keyup', onKeyup);
+  container.addEventListener('selectstart', onSelectStart);
+  document.addEventListener('selectionchange', onSelectionChange);
 
   const destroy = () => {
+    currentTarget = undefined;
+    isLeftClick = undefined;
+    lastDownEvent = undefined;
+
+    onSelectionChange.clear();
+
     container.removeEventListener('pointerdown', onPointerDown);
     document.removeEventListener('pointerup', onPointerUp);
     document.removeEventListener('contextmenu', onContextMenu);
@@ -372,7 +395,8 @@ export const SelectionHandler = (
   return {
     destroy,
     setFilter,
-    setUser
+    setUser,
+    setAnnotatingEnabled
   }
 
 }

packages/text-annotator/src/TextAnnotator.ts

@@ -1,14 +1,25 @@
-import { createAnonymousGuest, createLifecycleObserver, createBaseAnnotator, createUndoStack } from '@annotorious/core';
-import type { Filter } from '@annotorious/core';
+import {
+  createAnonymousGuest,
+  createLifecycleObserver,
+  createBaseAnnotator,
+  createUndoStack,
+  type Filter,
+} 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 { type TextAnnotationStore, type 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';
 
@@ -23,6 +34,8 @@ export interface TextAnnotator<I extends TextAnnotation = TextAnnotation, E exte
   // Returns true if successful (or false if the annotation is not currently rendered)
   scrollIntoView(annotationOrId: I | string): boolean;
 
+  setAnnotatingEnabled: (enabled: boolean) => void;
+
   state: TextAnnotatorState<I, E>;
 
 }
@@ -65,8 +78,8 @@ export const createTextAnnotator = <I extends TextAnnotation = TextAnnotation, E
 
   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}`;
@@ -76,8 +89,9 @@ export const createTextAnnotator = <I extends TextAnnotation = TextAnnotation, E
   if (opts.style)
     highlightRenderer.setStyle(opts.style);
 
-  const selectionHandler = SelectionHandler(container, state, opts);
+  const selectionHandler = createSelectionHandler(container, state, opts);
   selectionHandler.setUser(currentUser);
+  selectionHandler.setAnnotatingEnabled(opts.annotatingEnabled);
 
   /*************************/
   /*      External API     */
@@ -88,6 +102,12 @@ export const createTextAnnotator = <I extends TextAnnotation = TextAnnotation, E
 
   const getUser = () => currentUser;
 
+  const setAnnotatingEnabled = (enabled?: boolean) => {
+    selectionHandler.setAnnotatingEnabled(
+      enabled === undefined ? true : enabled
+    );
+  };
+
   const setFilter = (filter?: Filter<I>) => {
     highlightRenderer.setFilter(filter);
     selectionHandler.setFilter(filter);
@@ -132,6 +152,7 @@ export const createTextAnnotator = <I extends TextAnnotation = TextAnnotation, E
     destroy,
     element: container,
     getUser,
+    setAnnotatingEnabled,
     setFilter,
     setStyle,
     setUser,

packages/text-annotator/src/TextAnnotatorOptions.ts

@@ -30,12 +30,8 @@ export type RendererType = 'SPANS' | 'CANVAS' | 'CSS_HIGHLIGHTS';
 export const fillDefaults = <I extends TextAnnotation = TextAnnotation, E extends unknown = TextAnnotation>(
   opts: TextAnnotatorOptions<I, E>,
   defaults: TextAnnotatorOptions<I, E>
-): TextAnnotatorOptions<I, E> => {
-
-  return {
-    ...opts,
-    annotatingEnabled: opts.annotatingEnabled ?? defaults.annotatingEnabled,
-    user: opts.user || defaults.user
-  };
-
-};
+): TextAnnotatorOptions<I, E> => ({
+  ...opts,
+  annotatingEnabled: opts.annotatingEnabled ?? defaults.annotatingEnabled,
+  user: opts.user || defaults.user
+});

packages/text-annotator/src/highlight/baseRenderer.ts

@@ -1,6 +1,8 @@
+import debounce from 'debounce';
+
 import type { Filter, ViewportState } from '@annotorious/core';
+
 import type { TextAnnotatorState } from '../state';
-import { debounce } from '../utils';
 import { type ViewportBounds, getViewportBounds, trackViewport } from './viewport';
 import type { HighlightPainter } from './HighlightPainter';
 import type { Highlight } from './Highlight';
@@ -135,11 +137,10 @@ export const createBaseRenderer = <T extends TextAnnotatorState = TextAnnotatorS
   const onResize = debounce(() => {
     store.recalculatePositions();
 
-    if (currentPainter)
-      currentPainter.reset();
+    currentPainter?.reset();
 
     redraw();
-  });
+  }, 10);
 
   window.addEventListener('resize', onResize);
 
@@ -169,6 +170,7 @@ export const createBaseRenderer = <T extends TextAnnotatorState = TextAnnotatorS
 
     document.removeEventListener('scroll', onScroll);
 
+    onResize.clear();
     window.removeEventListener('resize', onResize);
     resizeObserver.disconnect();
 

packages/text-annotator/src/highlight/canvas/canvasRenderer.ts

@@ -1,6 +1,8 @@
+import debounce from 'debounce';
+
 import type { ViewportState } from '@annotorious/core';
+
 import type { TextAnnotatorState } from '../../state';
-import { debounce } from '../../utils';
 import type { ViewportBounds } from '../viewport';
 import type { HighlightStyle } from '../HighlightStyle';
 import { DEFAULT_SELECTED_STYLE, DEFAULT_STYLE, type HighlightStyleExpression } from '../HighlightStyle';
@@ -117,9 +119,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     });
   });
 
-  const onResize = debounce(() => {
-    resetCanvas(canvas);
-  });
+  const onResize = debounce(() => resetCanvas(canvas), 10);
 
   window.addEventListener('resize', onResize);
 
@@ -130,6 +130,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
   const destroy = () => {
     canvas.remove();
 
+    onResize.clear();
     window.removeEventListener('resize', onResize);
   }
 

packages/text-annotator/src/utils/index.ts

@@ -2,7 +2,6 @@ export * from './cancelSingleClickEvents';
 export * from './cloneEvents';
 export * from './device';
 export * from './programmaticallyFocusable';
-export * from './debounce';
 export * from './getQuoteContext';
 export * from './isNotAnnotatable';
 export * from './isRevived';