Merge pull request #178 from recogito/selection-mode

rsimon · web-flow · commit a8e7adb5d1ca · 2024-11-11T12:16:49.000+01:00
New `selectionMode` init prop
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/extension-tei/package.json b/packages/extension-tei/package.json
@@ -28,11 +28,11 @@
   "devDependencies": {
     "CETEIcean": "^1.9.3",
     "typescript": "5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
-    "@annotorious/core": "^3.0.11",
+    "@annotorious/core": "^3.0.12",
     "@recogito/text-annotator": "3.0.0-rc.51"
   }
 }
diff --git a/packages/text-annotator-react/package.json b/packages/text-annotator-react/package.json
@@ -29,9 +29,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.0"
+    "vite-tsconfig-paths": "^5.1.2"
   },
   "peerDependencies": {
     "openseadragon": "^3.0.0 || ^4.0.0 || ^5.0.0",
@@ -44,8 +44,8 @@
     }
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.11",
-    "@annotorious/react": "^3.0.11",
+    "@annotorious/core": "^3.0.12",
+    "@annotorious/react": "^3.0.12",
     "@floating-ui/react": "^0.26.27",
     "@recogito/text-annotator": "3.0.0-rc.51",
     "@recogito/text-annotator-tei": "3.0.0-rc.51",
diff --git a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.css b/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.css
diff --git a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx b/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
@@ -19,7 +19,7 @@ import {
   useRole
 } from '@floating-ui/react';
 
-import './TextAnnotatorPopup.css';
+import './TextAnnotationPopup.css';
 
 interface TextAnnotationPopupProps {
 
@@ -39,11 +39,11 @@ export interface TextAnnotationPopupContentProps {
 
   editable?: boolean;
 
-  event?: PointerEvent;
+  event?: PointerEvent | KeyboardEvent;
 
 }
 
-export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
+export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
 
   const r = useAnnotator<TextAnnotator>();
 
@@ -177,3 +177,14 @@ const getStopEventsPropagationProps = <T extends HTMLElement = HTMLElement>() =>
   onMouseDown: (event: React.MouseEvent<T>) => event.stopPropagation(),
   onMouseUp: (event: React.MouseEvent<T>) => event.stopPropagation()
 });
+
+/** For backwards compatibility **/
+/** @deprecated Use TextAnnotationPopup instead */
+export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
+
+  useEffect(() => {
+    console.warn('TextAnnotatorPopup is deprecated and will be removed in a future version. Please use TextAnnotationPopup instead.');
+  }, []);
+
+  return <TextAnnotationPopup {...props} />;
+};
diff --git a/packages/text-annotator-react/src/TextAnnotationPopup/index.ts b/packages/text-annotator-react/src/TextAnnotationPopup/index.ts
@@ -0,0 +1 @@
+export * from './TextAnnotationPopup';
diff --git a/packages/text-annotator-react/src/TextAnnotationPopup/isMobile.ts b/packages/text-annotator-react/src/TextAnnotationPopup/isMobile.ts
diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/index.ts b/packages/text-annotator-react/src/TextAnnotatorPopup/index.ts
diff --git a/packages/text-annotator/package.json b/packages/text-annotator/package.json
@@ -30,16 +30,16 @@
     "@types/rbush": "^4.0.0",
     "jsdom": "^25.0.1",
     "typescript": "5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.1.4"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.11",
+    "@annotorious/core": "^3.0.12",
     "colord": "^2.9.3",
     "dequal": "^2.0.3",
     "hotkeys-js": "^3.13.7",
     "rbush": "^4.0.1",
-    "uuid": "^11.0.2"
+    "uuid": "^11.0.3"
   }
 }
diff --git a/packages/text-annotator/src/SelectionHandler.ts b/packages/text-annotator/src/SelectionHandler.ts
@@ -15,6 +15,7 @@ import {
   trimRangeToContainer,
   isNotAnnotatable
 } from './utils';
+import type { TextAnnotatorOptions } from './TextAnnotatorOptions';
 
 const CLICK_TIMEOUT = 300;
 
@@ -30,12 +31,13 @@ const SELECTION_KEYS = [
 export const SelectionHandler = (
   container: HTMLElement,
   state: TextAnnotatorState<TextAnnotation, unknown>,
-  annotatingEnabled: boolean,
-  offsetReferenceSelector?: string
+  options: TextAnnotatorOptions<TextAnnotation, unknown>
 ) => {
 
   let currentUser: User | undefined;
 
+  const { annotatingEnabled, offsetReferenceSelector, selectionMode } = options;
+
   const setUser = (user?: User) => currentUser = user;
 
   let currentFilter: Filter | undefined;
@@ -179,14 +181,20 @@ export const SelectionHandler = (
       const hovered =
         evt.target instanceof Node &&
         container.contains(evt.target) &&
-        store.getAt(evt.clientX - x, evt.clientY - y, currentFilter);
+        store.getAt(evt.clientX - x, evt.clientY - y, selectionMode === 'all', currentFilter);
 
       if (hovered) {
         const { selected } = selection;
 
-        if (selected.length !== 1 || selected[0].id !== hovered.id) {
-          selection.userSelect(hovered.id, evt);
-        }
+        const currentIds = new Set(selected.map(s => s.id));
+        const nextIds = Array.isArray(hovered) ? hovered.map(a => a.id) : [hovered.id];
+
+        const hasChanged = 
+          currentIds.size !== nextIds.length ||
+          !nextIds.every(id => currentIds.has(id));
+
+        if (hasChanged)
+          selection.userSelect(nextIds, evt);
       } else {
         selection.clear();
       }
diff --git a/packages/text-annotator/src/TextAnnotator.ts b/packages/text-annotator/src/TextAnnotator.ts
@@ -76,7 +76,7 @@ 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 = SelectionHandler(container, state, opts);
   selectionHandler.setUser(currentUser);
 
   /*************************/
diff --git a/packages/text-annotator/src/TextAnnotatorOptions.ts b/packages/text-annotator/src/TextAnnotatorOptions.ts
@@ -17,6 +17,8 @@ export interface TextAnnotatorOptions<I extends TextAnnotation = TextAnnotation,
 
   presence?: PresencePainterOptions;
 
+  selectionMode?: 'shortest' | 'all';
+
   style?: HighlightStyleExpression;
 
   user?: User;
diff --git a/packages/text-annotator/src/highlight/baseRenderer.ts b/packages/text-annotator/src/highlight/baseRenderer.ts
@@ -63,7 +63,7 @@ export const createBaseRenderer = <T extends TextAnnotatorState = TextAnnotatorS
   const onPointerMove = (event: PointerEvent) => {
     const {x, y} = container.getBoundingClientRect();
 
-    const hit = store.getAt(event.clientX - x, event.clientY - y, currentFilter);
+    const hit = store.getAt(event.clientX - x, event.clientY - y, false, currentFilter);
     if (hit) {
       if (hover.current !== hit.id) {
         container.classList.add('hovered');
diff --git a/packages/text-annotator/src/state/TextAnnotationStore.ts b/packages/text-annotator/src/state/TextAnnotationStore.ts
@@ -15,7 +15,9 @@ export interface TextAnnotationStore<T extends TextAnnotation = TextAnnotation>
 
   getAnnotationRects(id: string): DOMRect[];
 
-  getAt(x: number, y: number, filter?: Filter): T | undefined;
+  getAt(x: number, y: number, all: true, filter?: Filter): T[] | undefined;
+  getAt(x: number, y: number, all: false, filter?: Filter): T | undefined;
+  getAt(x: number, y: number, all?: boolean, filter?: Filter): T | T[] | undefined;
 
   getIntersecting(minX: number, minY: number, maxX: number, maxY: number): AnnotationRects<T>[];
 
diff --git a/packages/text-annotator/src/state/TextAnnotatorState.ts b/packages/text-annotator/src/state/TextAnnotatorState.ts
@@ -1,4 +1,4 @@
-import type { Filter, Store, ViewportState, UserSelectActionExpression, Annotation } from '@annotorious/core';
+import type { Filter, Store, ViewportState, UserSelectActionExpression } from '@annotorious/core';
 import { 
   createHoverState, 
   createSelectionState, 
@@ -99,10 +99,19 @@ export const createTextAnnotatorState = <I extends TextAnnotation = TextAnnotati
     store.bulkUpdateTargets(revived, origin);
   }
 
-  const getAt = (x: number, y: number, filter?: Filter): I | undefined => {
-    const annotations = tree.getAt(x, y, Boolean(filter)).map(id => store.getAnnotation(id));
+  function getAt(x: number, y: number, all: true, filter?: Filter): I[] | undefined;
+  function getAt(x: number, y: number, all: false, filter?: Filter): I | undefined;
+  function getAt(x: number, y: number, all?: boolean, filter?: Filter): I | I[] | undefined {
+    const getAll = all || Boolean(filter);
+
+    const annotations = tree.getAt(x, y, getAll).map(id => store.getAnnotation(id));
+
     const filtered = filter ? annotations.filter(filter) : annotations;
-    return filtered.length > 0 ? filtered[0] : undefined;
+
+    if (filtered.length === 0)
+      return undefined;
+
+    return all ? filtered : filtered[0];
   }
 
   const getAnnotationBounds = (id: string, x?: number, y?: number, buffer = 5): DOMRect => {
diff --git a/packages/text-annotator/test/index.html b/packages/text-annotator/test/index.html
@@ -304,6 +304,7 @@ <h3>Not annotatable block!</h3>
 				adapter: W3CTextFormat('https://www.gutenberg.org', contentContainer),
 				renderer: 'SPANS',
 				// annotatingEnabled: false,
+        // selectionMode: 'all',
 				style
 			});
 

Original file line number	Diff line number	Diff line change
`@@ -28,11 +28,11 @@`
`28`	`28`	`"devDependencies": {`
`29`	`29`	`"CETEIcean": "^1.9.3",`
`30`	`30`	`"typescript": "5.6.3",`
`31`		`- "vite": "^5.4.10",`
	`31`	`+ "vite": "^5.4.11",`
`32`	`32`	`"vite-plugin-dts": "^4.3.0"`
`33`	`33`	`},`
`34`	`34`	`"peerDependencies": {`
`35`		`- "@annotorious/core": "^3.0.11",`
	`35`	`+ "@annotorious/core": "^3.0.12",`
`36`	`36`	`"@recogito/text-annotator": "3.0.0-rc.51"`
`37`	`37`	`}`
`38`	`38`	`}`