From edd2e4af2c506d671518678cd5b36b34cf699a33 Mon Sep 17 00:00:00 2001 From: Oleksandr Danylchenko Date: Thu, 1 Aug 2024 17:45:52 +0300 Subject: [PATCH 1/2] Added `annotatingEnabled` flag updating support --- .../text-annotator/src/SelectionHandler.ts | 20 +++++++----- packages/text-annotator/src/TextAnnotator.ts | 31 +++++++++++++++---- 2 files changed, 38 insertions(+), 13 deletions(-) diff --git a/packages/text-annotator/src/SelectionHandler.ts b/packages/text-annotator/src/SelectionHandler.ts index eedef19e..429e0365 100644 --- a/packages/text-annotator/src/SelectionHandler.ts +++ b/packages/text-annotator/src/SelectionHandler.ts @@ -10,10 +10,9 @@ import { NOT_ANNOTATABLE_SELECTOR } from './utils'; -export const SelectionHandler = ( +export const createSelectionHandler = ( container: HTMLElement, state: TextAnnotatorState, - annotatingEnabled: boolean, offsetReferenceSelector?: string ) => { @@ -25,6 +24,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; @@ -34,6 +37,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 +58,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 @@ -110,8 +116,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 @@ -170,7 +175,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 index 4aeaf358..774d2eb9 100644 --- a/packages/text-annotator/src/TextAnnotator.ts +++ b/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 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 = ( 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 = ( 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,10 @@ export const createTextAnnotator = ( const getUser = () => currentUser; + const setAnnotatingEnabled = (enabled: boolean) => { + selectionHandler.setAnnotatingEnabled(enabled); + }; + const setFilter = (filter?: Filter) => { highlightRenderer.setFilter(filter); selectionHandler.setFilter(filter); @@ -126,6 +144,7 @@ export const createTextAnnotator = ( destroy, element: container, getUser, + setAnnotatingEnabled, setFilter, setStyle, setUser, From 2c5b4da7b42fe2a8acaf5cbde291f077ae91fbcc Mon Sep 17 00:00:00 2001 From: Oleksandr Danylchenko Date: Thu, 1 Aug 2024 17:49:23 +0300 Subject: [PATCH 2/2] Added `annotatingEnabled` update from the react wrapper --- .../text-annotator-react/src/TextAnnotator.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/text-annotator-react/src/TextAnnotator.tsx b/packages/text-annotator-react/src/TextAnnotator.tsx index 5024fea9..0c67fe90 100644 --- a/packages/text-annotator-react/src/TextAnnotator.tsx +++ b/packages/text-annotator-react/src/TextAnnotator.tsx @@ -40,22 +40,16 @@ export const TextAnnotator = (props: TextAnnotatorProps) = 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 (
{children}
- ) + ); }