Added cleanable debounce function

Author: oleksandr-danylchenko

package-lock.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/package.json

@@ -1,9 +1,10 @@
 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,
@@ -82,13 +83,13 @@ export const createSelectionHandler = (
 
     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 = {
@@ -102,7 +103,7 @@ export const createSelectionHandler = (
     } else {
       // Proper lifecycle management: clear selection first...
       selection.clear();
-      
+
       // ...then add annotation to store...
       store.addAnnotation({
         id: currentTarget.annotation,
@@ -165,9 +166,14 @@ export const createSelectionHandler = (
   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);
   }

packages/text-annotator/src/SelectionHandler.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/baseRenderer.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/highlight/canvas/canvasRenderer.ts

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