Skip to content

Commit 3647e9e

Browse files
oleksandr-danylchenkooleksandr-danylchenko
committed
Merge branch 'main' into #71-fix-losing-styleClass
# Conflicts: # packages/text-annotator/src/highlight/canvas/highlightRenderer.ts
2 parents 7f80bb3 + 1dbda37 commit 3647e9e

33 files changed

+1316
-915
lines changed

‎package-lock.json‎

Lines changed: 408 additions & 331 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@recogito/text-annotator-monorepo",
3-
"version": "3.0.0-rc.18",
3+
"version": "3.0.0-rc.21",
44
"description": "Recogito Text Annotator monorepo",
55
"author": "Rainer Simon",
66
"repository": {

‎packages/extension-tei/package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@recogito/text-annotator-tei",
3-
"version": "3.0.0-rc.18",
3+
"version": "3.0.0-rc.21",
44
"description": "Recogito Text Annotator TEI extension",
55
"author": "Rainer Simon",
66
"license": "BSD-3-Clause",
@@ -27,11 +27,12 @@
2727
},
2828
"devDependencies": {
2929
"CETEIcean": "^1.9.2",
30-
"typescript": "^5.3.3",
31-
"vite": "^5.2.6",
32-
"vite-plugin-dts": "^3.7.3"
30+
"typescript": "^5.4.3",
31+
"vite": "^5.2.7",
32+
"vite-plugin-dts": "^3.8.1"
3333
},
34-
"dependencies": {
35-
"@annotorious/core": "^3.0.0-rc.21"
34+
"peerDependencies": {
35+
"@annotorious/core": "^3.0.0-rc.22",
36+
"@recogito/text-annotator": "3.0.0-rc.21"
3637
}
37-
}
38+
}

‎packages/text-annotator-react/package.json‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@recogito/react-text-annotator",
3-
"version": "3.0.0-rc.18",
3+
"version": "3.0.0-rc.21",
44
"description": "Recogito Text Annotator React bindings",
55
"author": "Rainer Simon",
66
"license": "BSD-3-Clause",
@@ -24,23 +24,26 @@
2424
"module": "./dist/react-text-annotator.es.js",
2525
"types": "./dist/index.d.ts",
2626
"devDependencies": {
27-
"@types/react-dom": "^18.2.22",
27+
"@types/react-dom": "^18.2.23",
2828
"@vitejs/plugin-react": "^4.2.1",
2929
"openseadragon": "4.1.0",
3030
"react": "^18.2.0",
3131
"react-dom": "^18.2.0",
32-
"typescript": "^5.3.3",
33-
"vite": "^5.2.6",
34-
"vite-plugin-dts": "^3.7.3",
32+
"typescript": "^5.4.3",
33+
"vite": "^5.2.7",
34+
"vite-plugin-dts": "^3.8.1",
3535
"vite-tsconfig-paths": "^4.3.2"
3636
},
3737
"peerDependencies": {
38-
"@annotorious/react": "^3.0.0-rc.21",
3938
"react": "16.8.0 || >=17.x || >=18.x",
4039
"react-dom": "16.8.0 || >=17.x || >=18.x"
4140
},
4241
"dependencies": {
42+
"@annotorious/core": "^3.0.0-rc.22",
43+
"@annotorious/react": "^3.0.0-rc.22",
44+
"@recogito/text-annotator": "3.0.0-rc.21",
45+
"@recogito/text-annotator-tei": "3.0.0-rc.21",
4346
"@neodrag/react": "^2.0.3",
4447
"CETEIcean": "^1.9.2"
4548
}
46-
}
49+
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { ReactNode, useContext, useEffect, useRef } from 'react';
2-
import { AnnotoriousContext, DrawingStyle, Filter } from '@annotorious/react';
2+
import { AnnotoriousContext, Filter } from '@annotorious/react';
33
import type { FormatAdapter } from '@annotorious/core';
4-
import type { TextAnnotation, TextAnnotatorOptions } from '@recogito/text-annotator';
4+
import type { HighlightStyleExpression, TextAnnotation, TextAnnotatorOptions } from '@recogito/text-annotator';
55
import { createTextAnnotator } from '@recogito/text-annotator';
66

77
import '@recogito/text-annotator/dist/text-annotator.css';
88

9+
910
export interface TextAnnotatorProps<E extends unknown> extends Omit<TextAnnotatorOptions<E>, 'adapter'> {
1011

1112
children?: ReactNode | JSX.Element;
@@ -14,7 +15,7 @@ export interface TextAnnotatorProps<E extends unknown> extends Omit<TextAnnotato
1415

1516
filter?: Filter;
1617

17-
style?: DrawingStyle | ((annotation: TextAnnotation) => DrawingStyle);
18+
style?: HighlightStyleExpression
1819

1920
className?: string;
2021

‎packages/text-annotator-react/src/tei/TEIAnnotator.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Children, ReactElement, ReactNode, cloneElement, useContext, useEffect } from 'react';
2-
import { AnnotoriousContext, DrawingStyle, Filter } from '@annotorious/react';
2+
import { AnnotoriousContext, Filter } from '@annotorious/react';
33
import { TEIPlugin } from '@recogito/text-annotator-tei';
4-
import { createTextAnnotator } from '@recogito/text-annotator';
5-
import type { TextAnnotatorOptions, TextAnnotation } from '@recogito/text-annotator';
4+
import { createTextAnnotator, HighlightStyleExpression } from '@recogito/text-annotator';
5+
import type { TextAnnotatorOptions } from '@recogito/text-annotator';
66

77
import '@recogito/text-annotator/dist/text-annotator.css';
88

@@ -12,7 +12,7 @@ export type TEIAnnotatorProps = TextAnnotatorOptions & {
1212

1313
filter?: Filter;
1414

15-
style?: DrawingStyle | ((annotation: TextAnnotation) => DrawingStyle);
15+
style?: HighlightStyleExpression
1616

1717
}
1818

@@ -48,4 +48,4 @@ export const TEIAnnotator = (props: TEIAnnotatorProps) => {
4848
</>
4949
) : null;
5050

51-
}
51+
}

‎packages/text-annotator-react/vite.config.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export default defineConfig(({ command, mode }) => ({
1818
open: '/test/index.html'
1919
},
2020
build: {
21+
minify: false,
2122
lib: {
2223
entry: './src/index.ts',
2324
name: 'ReactTextAnnotator',
@@ -26,17 +27,15 @@ export default defineConfig(({ command, mode }) => ({
2627
},
2728
rollupOptions: {
2829
external: [
29-
...Object.keys(packageJson.peerDependencies)
30+
...Object.keys(packageJson.peerDependencies),
31+
"@annotorious/core",
32+
"@annotorious/react",
33+
"@recogito/text-annotator",
34+
"@recogito/text-annotator-tei"
3035
],
3136
output: {
3237
preserveModules: true,
33-
assetFileNames: 'react-text-annotator.[ext]',
34-
globals: {
35-
'@annotorious/react': 'AnnotoriousReact',
36-
'openseadragon': 'OpenSeadragon',
37-
'react': 'React',
38-
'react-dom': 'ReactDOM'
39-
}
38+
assetFileNames: 'react-text-annotator.[ext]'
4039
}
4140
},
4241
sourcemap: true

‎packages/text-annotator/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@recogito/text-annotator",
3-
"version": "3.0.0-rc.18",
3+
"version": "3.0.0-rc.21",
44
"description": "A JavaScript text annotation library",
55
"author": "Rainer Simon",
66
"license": "BSD-3-Clause",
@@ -31,15 +31,16 @@
3131
"@types/uuid": "^9.0.8",
3232
"jsdom": "^24.0.0",
3333
"svelte": "^4.2.12",
34-
"typescript": "^5.3.3",
35-
"vite": "^5.2.6",
36-
"vite-plugin-dts": "^3.7.3",
34+
"typescript": "^5.4.3",
35+
"vite": "^5.2.7",
36+
"vite-plugin-dts": "^3.8.1",
3737
"vitest": "^1.4.0"
3838
},
3939
"dependencies": {
40-
"@annotorious/core": "^3.0.0-rc.21",
40+
"@annotorious/core": "^3.0.0-rc.22",
4141
"colord": "^2.9.3",
42+
"dequal": "^2.0.3",
4243
"rbush": "^3.0.1",
4344
"uuid": "^9.0.1"
4445
}
45-
}
46+
}

‎packages/text-annotator/src/TextAnnotator.ts‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
1-
import { createAnonymousGuest, createLifecyleObserver, createBaseAnnotator, DrawingStyle, Filter, createUndoStack } from '@annotorious/core';
1+
import { createAnonymousGuest, createLifecyleObserver, createBaseAnnotator, Filter, createUndoStack } from '@annotorious/core';
22
import type { Annotator, User, PresenceProvider } from '@annotorious/core';
3-
import { createCanvasHighlightRenderer, createCSSHighlightRenderer } from './highlight';
3+
import { createCanvasRenderer, createHighlightsRenderer, createSpansRenderer, type HighlightStyleExpression } from './highlight';
44
import { createPresencePainter } from './presence';
55
import { scrollIntoView } from './api';
66
import { TextAnnotationStore, TextAnnotatorState, createTextAnnotatorState } from './state';
77
import type { TextAnnotation } from './model';
8-
import type { TextAnnotatorOptions } from './TextAnnotatorOptions';
8+
import type { RendererType, TextAnnotatorOptions } from './TextAnnotatorOptions';
99
import { SelectionHandler } from './SelectionHandler';
1010

1111
import './TextAnnotator.css';
1212

13+
14+
const USE_DEFAULT_RENDERER: RendererType = 'SPANS';
15+
1316
export interface TextAnnotator<E extends unknown = TextAnnotation> extends Annotator<TextAnnotation, E> {
1417

1518
element: HTMLElement;
1619

20+
setStyle(style: HighlightStyleExpression | undefined): void;
21+
1722
// Returns true if successful (or false if the annotation is not currently rendered)
1823
scrollIntoView(annotation: TextAnnotation): boolean;
1924

@@ -42,20 +47,26 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
4247

4348
let currentUser: User = createAnonymousGuest();
4449

45-
// Switch on CSS Custom Highlight rendering, if requested in the init
46-
// opts and API is available in this browser
47-
// @ts-ignore
48-
const useExperimentalCSSRenderer = opts.experimentalCSSRenderer && Boolean(CSS.highlights);
50+
// Use selected renderer, or fall back to default. If CSS_HIGHLIGHT is
51+
// requested, check if CSS Custom Highlights are supported, and fall
52+
// back to default renderer if not.
53+
const useRenderer: RendererType =
54+
opts.renderer === 'CSS_HIGHLIGHTS'
55+
? Boolean(CSS.highlights) ? 'CSS_HIGHLIGHTS' : USE_DEFAULT_RENDERER
56+
: opts.renderer || USE_DEFAULT_RENDERER;
4957

50-
if (useExperimentalCSSRenderer)
51-
console.log('Using experimental CSS Custom Highlight API renderer');
58+
const highlightRenderer =
59+
useRenderer === 'SPANS' ? createSpansRenderer(container, state, viewport) :
60+
useRenderer === 'CSS_HIGHLIGHTS' ? createHighlightsRenderer(container, state, viewport) :
61+
useRenderer === 'CANVAS' ? createCanvasRenderer(container, state, viewport) : undefined;
5262

53-
const highlightRenderer = useExperimentalCSSRenderer
54-
? createCSSHighlightRenderer(container, state, viewport)
55-
: createCanvasHighlightRenderer(container, state, viewport);
63+
if (!highlightRenderer)
64+
throw `Unknown renderer implementation: ${useRenderer}`;
5665

66+
console.debug(`Using ${useRenderer} renderer`);
67+
5768
if (opts.style)
58-
highlightRenderer.setDrawingStyle(opts.style);
69+
highlightRenderer.setStyle(opts.style);
5970

6071
const selectionHandler = SelectionHandler(container, state, opts.offsetReferenceSelector);
6172

@@ -73,8 +84,8 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
7384
const setFilter = (filter?: Filter) =>
7485
highlightRenderer.setFilter(filter);
7586

76-
const setStyle = (drawingStyle: DrawingStyle | ((annotation: TextAnnotation) => DrawingStyle) | undefined) =>
77-
highlightRenderer.setDrawingStyle(drawingStyle);
87+
const setStyle = (style: HighlightStyleExpression | undefined) =>
88+
highlightRenderer.setStyle(style);
7889

7990
const setUser = (user: User) => {
8091
currentUser = user;
@@ -84,7 +95,7 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
8495
const setPresenceProvider = (provider: PresenceProvider) => {
8596
if (provider) {
8697
highlightRenderer.setPainter(createPresencePainter(container, provider, opts.presence));
87-
provider.on('selectionChange', () => highlightRenderer.refresh());
98+
provider.on('selectionChange', () => highlightRenderer.redraw());
8899
}
89100
}
90101

@@ -96,6 +107,9 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
96107
}
97108
}
98109

110+
const setVisible = (visible: boolean) =>
111+
highlightRenderer.setVisible(visible);
112+
99113
const destroy = () => {
100114
highlightRenderer.destroy();
101115
selectionHandler.destroy();
@@ -114,6 +128,7 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
114128
setUser,
115129
setSelected,
116130
setPresenceProvider,
131+
setVisible,
117132
on: lifecycle.on,
118133
off: lifecycle.off,
119134
scrollIntoView: scrollIntoView(container, store),

‎packages/text-annotator/src/TextAnnotatorOptions.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
import type { DrawingStyle, FormatAdapter, PointerSelectAction } from '@annotorious/core';
1+
import type { FormatAdapter, PointerSelectAction } from '@annotorious/core';
22
import type { PresencePainterOptions } from './presence';
33
import type { TextAnnotation } from './model';
4+
import type { HighlightStyleExpression } from './highlight';
45

56
export interface TextAnnotatorOptions<T extends unknown = TextAnnotation> {
67

78
adapter?: FormatAdapter<TextAnnotation, T> | null;
89

9-
experimentalCSSRenderer?: boolean;
10+
renderer?: RendererType;
1011

1112
offsetReferenceSelector?: string;
1213

1314
pointerAction?: PointerSelectAction | ((annotation: TextAnnotation) => PointerSelectAction);
1415

1516
presence?: PresencePainterOptions;
1617

17-
style?: DrawingStyle | ((annotation: TextAnnotation) => DrawingStyle);
18+
style?: HighlightStyleExpression;
1819

1920
}
21+
22+
export type RendererType = 'SPANS' | 'CANVAS' | 'CSS_HIGHLIGHTS';

0 commit comments

Comments
 (0)