#127 Made annotatingEnabled property reactive

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>
-  )
+  );
 
 }

packages/text-annotator/package.json

@@ -39,8 +39,9 @@
   "dependencies": {
     "@annotorious/core": "^3.0.0-rc.31",
     "colord": "^2.9.3",
+    "debounce": "^2.1.0",
     "dequal": "^2.0.3",
     "rbush": "^4.0.0",
     "uuid": "^10.0.0"
   }
-}
+}

packages/text-annotator/src/SelectionHandler.ts

@@ -1,19 +1,19 @@
 import { Filter, Origin, type User } from '@annotorious/core';
 import { v4 as uuidv4 } from 'uuid';
+import debounce from 'debounce';
+
 import type { TextAnnotatorState } from './state';
 import type { TextAnnotationTarget } from './model';
 import {
-  debounce,
   splitAnnotatableRanges,
   rangeToSelector,
   isWhitespaceOrEmpty,
   NOT_ANNOTATABLE_SELECTOR
 } from './utils';
 
-export const SelectionHandler = (
+export const createSelectionHandler = (
   container: HTMLElement,
   state: TextAnnotatorState,
-  annotatingEnabled: boolean,
   offsetReferenceSelector?: string
 ) => {
 
@@ -25,6 +25,18 @@ export const SelectionHandler = (
 
   const setFilter = (filter?: Filter) => currentFilter = filter;
 
+  let currentAnnotatingEnabled = true;
+
+  const setAnnotatingEnabled = (enabled: boolean) => {
+    currentAnnotatingEnabled = enabled;
+    onSelectionChange.clear();
+
+    if (!enabled) {
+      currentTarget = undefined;
+      lastPointerDown = undefined;
+    }
+  };
+
   const { store, selection } = state;
 
   let currentTarget: TextAnnotationTarget | undefined;
@@ -34,6 +46,8 @@ export const SelectionHandler = (
   let lastPointerDown: PointerEvent | undefined;
 
   const onSelectStart = (evt: PointerEvent) => {
+    if (!currentAnnotatingEnabled) return;
+
     if (!isLeftClick) return;
 
     // Make sure we don't listen to selection changes that were
@@ -53,10 +67,11 @@ export const SelectionHandler = (
     }
   }
 
-  if (annotatingEnabled)
-    container.addEventListener('selectstart', onSelectStart);
+  container.addEventListener('selectstart', onSelectStart);
 
   const onSelectionChange = debounce((evt: PointerEvent) => {
+    if (!currentAnnotatingEnabled) return;
+
     const sel = document.getSelection();
 
     // This is to handle cases where the selection is "hijacked" by another element
@@ -76,13 +91,13 @@ export const SelectionHandler = (
 
     const selectionRange = sel.getRangeAt(0);
     if (isWhitespaceOrEmpty(selectionRange)) return;
-    
+
     const annotatableRanges = splitAnnotatableRanges(selectionRange.cloneRange());
 
     const hasChanged =
       annotatableRanges.length !== currentTarget.selector.length ||
       annotatableRanges.some((r, i) => r.toString() !== currentTarget.selector[i]?.quote);
-      
+
     if (!hasChanged) return;
 
     currentTarget = {
@@ -96,7 +111,7 @@ export const SelectionHandler = (
     } else {
       // Proper lifecycle management: clear selection first...
       selection.clear();
-      
+
       // ...then add annotation to store...
       store.addAnnotation({
         id: currentTarget.annotation,
@@ -110,8 +125,7 @@ export const SelectionHandler = (
     }
   })
 
-  if (annotatingEnabled)
-    document.addEventListener('selectionchange', onSelectionChange);
+  document.addEventListener('selectionchange', onSelectionChange);
 
   // Select events don't carry information about the mouse button
   // Therefore, to prevent right-click selection, we need to listen
@@ -160,17 +174,23 @@ export const SelectionHandler = (
   document.addEventListener('pointerup', onPointerUp);
 
   const destroy = () => {
+    currentTarget = undefined;
+    lastPointerDown = undefined;
+
+    onSelectionChange.clear();
+
     container.removeEventListener('selectstart', onSelectStart);
     document.removeEventListener('selectionchange', onSelectionChange);
-    
+
     container.removeEventListener('pointerdown', onPointerDown);
     document.removeEventListener('pointerup', onPointerUp);
   }
 
   return {
     destroy,
     setFilter,
-    setUser
+    setUser,
+    setAnnotatingEnabled
   }
 
 }

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 } 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;
 
 }
@@ -59,8 +72,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}`;
@@ -70,8 +83,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     */
@@ -82,6 +96,12 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
 
   const getUser = () => currentUser;
 
+  const setAnnotatingEnabled = (enabled?: boolean) => {
+    selectionHandler.setAnnotatingEnabled(
+      enabled === undefined ? true : enabled
+    );
+  };
+
   const setFilter = (filter?: Filter) => {
     highlightRenderer.setFilter(filter);
     selectionHandler.setFilter(filter);
@@ -126,6 +146,7 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
     destroy,
     element: container,
     getUser,
+    setAnnotatingEnabled,
     setFilter,
     setStyle,
     setUser,

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

@@ -1,6 +1,7 @@
+import debounce from 'debounce';
 import type { Filter, ViewportState } from '@annotorious/core';
+
 import type { TextAnnotatorState } from '../state';
-import { debounce } from '../utils';
 import { ViewportBounds, getViewportBounds, trackViewport } from './viewport';
 import type { HighlightPainter } from './HighlightPainter';
 import type { Highlight } from './Highlight';
@@ -169,6 +170,7 @@ export const createBaseRenderer = (
 
     document.removeEventListener('scroll', onScroll);
 
+    onResize.clear();
     window.removeEventListener('resize', onResize);
     resizeObserver.disconnect();
 

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

@@ -1,6 +1,7 @@
+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, HighlightStyleExpression } from '../HighlightStyle';
@@ -116,9 +117,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     });
   });
 
-  const onResize = debounce(() => {
-    resetCanvas(canvas);
-  });
+  const onResize = debounce(() => resetCanvas(canvas));
 
   window.addEventListener('resize', onResize);
 
@@ -129,6 +128,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
   const destroy = () => {
     canvas.remove();
 
+    onResize.clear();
     window.removeEventListener('resize', onResize);
   }
 

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

@@ -1,5 +1,4 @@
 export * from './cancelSingleClickEvents';
-export * from './debounce';
 export * from './getAnnotatableFragment';
 export * from './getClientRectsPonyfill';
 export * from './getQuoteContext';