#127 Made annotatingEnabled property reactive

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

@@ -26,8 +26,8 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
   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);
 
@@ -48,10 +48,12 @@ 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}
     </div>
-  )
+  );
 
 }

packages/text-annotator/package.json

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

packages/text-annotator/src/SelectionHandler.ts

@@ -1,5 +1,6 @@
 import { Filter, Origin, type User } from '@annotorious/core';
 import { v4 as uuidv4 } from 'uuid';
+
 import type { TextAnnotatorState } from './state';
 import type { TextAnnotationTarget } from './model';
 import {
@@ -11,10 +12,9 @@ import {
   NOT_ANNOTATABLE_SELECTOR
 } from './utils';
 
-export const SelectionHandler = (
+export const createSelectionHandler = (
   container: HTMLElement,
   state: TextAnnotatorState,
-  annotatingEnabled: boolean,
   offsetReferenceSelector?: string
 ) => {
 
@@ -26,6 +26,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;
@@ -35,6 +47,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
@@ -54,10 +68,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
@@ -78,7 +93,7 @@ export const SelectionHandler = (
 
     const selectionRange = sel.getRangeAt(0);
 
-    // The selection should be captured only within the annotatable container
+// The selection should be captured only within the annotatable container
     const containedRange = trimRangeToContainer(selectionRange, container);
     if (isWhitespaceOrEmpty(containedRange)) return;
 
@@ -87,7 +102,7 @@ export const SelectionHandler = (
     const hasChanged =
       annotatableRanges.length !== currentTarget.selector.length ||
       annotatableRanges.some((r, i) => r.toString() !== currentTarget.selector[i]?.quote);
-      
+
     if (!hasChanged) return;
 
     currentTarget = {
@@ -101,7 +116,7 @@ export const SelectionHandler = (
     } else {
       // Proper lifecycle management: clear selection first...
       selection.clear();
-      
+
       // ...then add annotation to store...
       store.addAnnotation({
         id: currentTarget.annotation,
@@ -113,10 +128,9 @@ export const SelectionHandler = (
       // select events don't have offsetX/offsetY - reuse last up/down)
       selection.userSelect(currentTarget.annotation, lastPointerDown);
     }
-  })
+  });
 
-  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
@@ -169,16 +183,23 @@ export const SelectionHandler = (
   document.addEventListener('pointerup', onPointerUp);
 
   const destroy = () => {
+    currentTarget = undefined;
+    lastPointerDown = undefined;
+
+    onSelectionChange.clear();
+
     container.removeEventListener('selectstart', onSelectStart);
-    document.removeEventListener('selectionchange', onSelectionChange);    
+    document.removeEventListener('selectionchange', onSelectionChange);
+
     document.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;
 
 }
@@ -60,8 +73,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}`;
@@ -71,8 +84,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     */
@@ -83,6 +97,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);
@@ -127,6 +147,7 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
     destroy,
     element: container,
     getUser,
+    setAnnotatingEnabled,
     setFilter,
     setStyle,
     setUser,

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

@@ -1,10 +1,11 @@
 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';
 import type { HighlightStyleExpression } from './HighlightStyle';
+import { debounce } from '../utils';
 
 export interface RendererImplementation {
 
@@ -135,8 +136,7 @@ export const createBaseRenderer = (
   const onResize = debounce(() => {
     store.recalculatePositions();
 
-    if (currentPainter)
-      currentPainter.reset();
+    currentPainter?.reset();
 
     redraw();
   });
@@ -169,6 +169,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,12 +1,13 @@
 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';
 import type { HighlightPainter } from '../HighlightPainter';
 import { createBaseRenderer, type RendererImplementation } from '../baseRenderer';
 import type { Highlight } from '../Highlight';
+import { debounce } from '../../utils';
 
 import './canvasRenderer.css';
 
@@ -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/debounce.ts

@@ -1,8 +1,22 @@
-export const debounce = <T extends (...args: any[]) => void>(func: T, delay = 10): T => {
-	let timeoutId: ReturnType<typeof setTimeout>;
+import libDebounce from 'debounce';
 
-	return ((...args: any[]) => {
-		clearTimeout(timeoutId);
-		timeoutId = setTimeout(() => func.apply(this, args), delay);
-	}) as T;
+/**
+ * Wraps the `debounce` function from the `debounce` package
+ * to make it context-agnostic.
+ * Otherwise, we won't be able to use it in multiple event listeners simultaneously,
+ * like `window.onresize` and `ResizeObserver`.
+ * @see https://github.com/sindresorhus/debounce/issues/8#issuecomment-2321341074
+ */
+export const debounce: typeof libDebounce = (function_, wait = 10, options) => {
+  const fn = libDebounce(function_, wait, options);
+
+  const boundFn = fn.bind(undefined);
+
+  Object.getOwnPropertyNames(fn).forEach(
+    prop => Object.defineProperty(boundFn, prop, Object.getOwnPropertyDescriptor(fn, prop))
+  );
+  const proto = Object.getPrototypeOf(fn);
+  Object.setPrototypeOf(boundFn, proto);
+
+  return boundFn;
 }

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';
@@ -12,4 +11,5 @@ export * from './reviveSelector';
 export * from './reviveTarget';
 export * from './splitAnnotatableRanges';
 export * from './trimRangeToContainer';
+export * from './debounce';