Skip to content

Commit

Permalink
Merge branch 'refs/heads/main' into recogito#115-fix-spans-underlying…
Browse files Browse the repository at this point in the history
…-offset

# Conflicts:
#	packages/text-annotator/src/highlight/span/spansRenderer.css
  • Loading branch information
oleksandr-danylchenko committed Jul 8, 2024
2 parents 617072b + fbe29fd commit 398bafb
Show file tree
Hide file tree
Showing 8 changed files with 59 additions and 54 deletions.
11 changes: 1 addition & 10 deletions packages/text-annotator/src/TextAnnotator.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,10 @@ html, body {
cursor: pointer;
}

.r6o-highlight-layer {
left: 0;
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
pointer-events: none;
}

*::selection, ::selection {
background: rgba(0, 128, 255, 0.18);
}

::-moz-selection, ::-moz-selection{
background: rgba(0, 128, 255, 0.18);
}
}
14 changes: 14 additions & 0 deletions packages/text-annotator/src/highlight/canvas/canvasRenderer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.r6o-canvas-highlight-layer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
}

.r6o-canvas-highlight-layer.bg {
mix-blend-mode: multiply;
z-index: 1;
}
41 changes: 16 additions & 25 deletions packages/text-annotator/src/highlight/canvas/canvasRenderer.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import type { ViewportBounds } from '../viewport';
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 type { TextAnnotatorState } from 'src/state';
import type { ViewportState } from '@annotorious/core';

import './canvasRenderer.css';

const createCanvas = () => {
const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.className = 'r6o-highlight-layer bg';
canvas.className = 'r6o-canvas-highlight-layer bg';
return canvas;
}

Expand All @@ -35,10 +37,10 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
const canvas = createCanvas();
const ctx = canvas.getContext('2d');

container.insertBefore(canvas, container.firstChild);
document.body.appendChild(canvas);

const redraw = (
highlights: Highlight[],
const redraw = (
highlights: Highlight[],
viewportBounds: ViewportBounds,
currentStyle?: HighlightStyleExpression,
currentPainter?: HighlightPainter
Expand All @@ -65,7 +67,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
const { annotation: { target: { created: createdA } } } = highlightA;
const { annotation: { target: { created: createdB } } } = highlightB;
return createdA.getTime() - createdB.getTime();
})
});

highlightsByCreation.forEach(h => {
const base: HighlightStyle = currentStyle
Expand All @@ -90,19 +92,8 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
ctx.fillStyle = style.fill;
ctx.globalAlpha = style.fillOpacity || 1;


/**
* The default browser's selection highlight is a bit taller than the text itself.
* To match it, we need to draw the highlight a bit taller as well.
*/
const selectionHighlightCompensation = 5;
offsetRects.forEach(({ x, y, width, height }) =>
ctx.fillRect(
x,
y - selectionHighlightCompensation / 2,
width,
height + selectionHighlightCompensation
)
ctx.fillRect(x, y, width, height)
);

if (style.underlineColor) {
Expand All @@ -111,7 +102,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
ctx.lineWidth = style.underlineThickness ?? 1;

// Place the underline below the highlighted text + an optional offset
const underlineOffset = selectionHighlightCompensation / 2 + (style.underlineOffset ?? 0);
const underlineOffset = style.underlineOffset ?? 0;

offsetRects.forEach(({ x, y, width, height }) => {
ctx.beginPath();
Expand All @@ -136,7 +127,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
}

const destroy = () => {
container.removeChild(canvas);
canvas.remove();

window.removeEventListener('resize', onResize);
}
Expand All @@ -145,12 +136,12 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
destroy,
setVisible,
redraw
}
};

}
};

export const createCanvasRenderer = (
container: HTMLElement,
container: HTMLElement,
state: TextAnnotatorState,
viewport: ViewportState
) => createBaseRenderer(container, state, viewport, createRenderer(container));
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const createRenderer = (): RendererImplementation => {
let currentRendered = new Set<string>();

const redraw = (
highlights: Highlight[],
highlights: Highlight[],
viewportBounds: ViewportBounds,
currentStyle?: HighlightStyleExpression,
painter?: HighlightPainter
Expand All @@ -46,10 +46,10 @@ export const createRenderer = (): RendererImplementation => {

// For simplicity, re-generate the whole stylesheet
const updatedCSS = highlights.map(h => {
const base = currentStyle
? typeof currentStyle === 'function'
? currentStyle(h.annotation, h.state)
: currentStyle
const base = currentStyle
? typeof currentStyle === 'function'
? currentStyle(h.annotation, h.state)
: currentStyle
: h.state?.selected ? DEFAULT_SELECTED_STYLE : DEFAULT_STYLE;

// Trigger the custom painter (if any) as a side-effect
Expand All @@ -70,7 +70,7 @@ export const createRenderer = (): RendererImplementation => {

// Could be improved further by (re-)setting only annotations that
// have changes.
highlights.forEach(({ annotation }) => {
highlights.forEach(({ annotation }) => {
const ranges = annotation.target.selector.map(s => s.range);

// @ts-ignore
Expand Down Expand Up @@ -100,12 +100,12 @@ export const createRenderer = (): RendererImplementation => {
destroy,
setVisible,
redraw
}
};

}

export const createHighlightsRenderer = (
container: HTMLElement,
container: HTMLElement,
state: TextAnnotatorState,
viewport: ViewportState
) => createBaseRenderer(container, state, viewport, createRenderer());
) => createBaseRenderer(container, state, viewport, createRenderer());
6 changes: 3 additions & 3 deletions packages/text-annotator/src/highlight/span/spansRenderer.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.r6o-annotatable .r6o-span-highlight-layer {
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

.r6o-annotatable .r6o-span-highlight-layer.hidden {
Expand Down
8 changes: 8 additions & 0 deletions packages/text-annotator/src/presence/PresencePainter.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.r6o-presence-layer {
left: 0;
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
pointer-events: none;
}
13 changes: 7 additions & 6 deletions packages/text-annotator/src/presence/PresencePainter.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import type { Color, PresenceProvider, PresentUser } from '@annotorious/core';
import type { AnnotationRects } from '../state';
import type { HighlightStyle } from '../highlight/HighlightStyle';
import type { HighlightPainter } from '../highlight/HighlightPainter';
import type { PresencePainterOptions } from 'src/presence';
import type { HighlightStyle, HighlightPainter } from '../highlight';
import type { PresencePainterOptions } from '../presence';
import type { ViewportBounds } from '../highlight/viewport';

import './PresencePainter.css';

const createCanvas = () => {
const canvas = document.createElement('canvas');

// Retina resolution for crisp font rendering
canvas.width = 2 * window.innerWidth;
canvas.height = 2 * window.innerHeight;
canvas.className = 'r6o-highlight-layer presence';
canvas.className = 'r6o-presence-layer';

const context = canvas.getContext('2d');
context.scale(2, 2);
Expand All @@ -30,7 +31,7 @@ export const createPresencePainter = (

const ctx = canvas.getContext('2d');

container.appendChild(canvas);
document.body.appendChild(canvas);

const trackedAnnotations = new Map<string, PresentUser>();

Expand Down Expand Up @@ -115,4 +116,4 @@ export const createPresencePainter = (
reset
}

}
}
2 changes: 1 addition & 1 deletion packages/text-annotator/test/annotations.w3c.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,4 +143,4 @@
}
]
}
]
]

0 comments on commit 398bafb

Please sign in to comment.