Skip to content

Commit 4f737bf

Browse files
rsimonrsimon
authored
Merge pull request recogito#116 from oleksandr-danylchenko/recogito#115-fix-spans-underlying-offset
recogito#115 [`SPANS`] Made `underlineOffset` compatible with the `box-sizing: border-box`
2 parents 1b9fbb5 + 9790b0e commit 4f737bf

File tree

5 files changed

+409
-393
lines changed

5 files changed

+409
-393
lines changed

‎packages/extension-tei/test/index.html‎

Lines changed: 69 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,83 +6,87 @@
66
<link rel="stylesheet" href="CETEIcean.css">
77
<script type="module" src="../src/index.ts"></script>
88
<style>
9-
html, body {
10-
background: #e2e2e2;
11-
padding: 0;
12-
margin: 0;
13-
display: flex;
14-
flex-direction: row;
15-
justify-content: center;
16-
}
17-
18-
#content {
19-
max-width: 800px;
20-
background-color: #fff;
21-
padding: 40px;
22-
border-style: solid;
23-
border-color: #cfcfcf;
24-
border-width: 0 1px;
25-
position: relative;
26-
}
27-
28-
#content img {
29-
max-width: 100%;
30-
}
31-
32-
h1 {
33-
margin: 0;
34-
padding: 0 0 20px 0;
35-
}
36-
37-
p {
38-
font-size: 17px;
39-
line-height: 160%;
40-
}
9+
*, *:before, *:after {
10+
box-sizing: border-box;
11+
}
12+
13+
html, body {
14+
background: #e2e2e2;
15+
padding: 0;
16+
margin: 0;
17+
display: flex;
18+
flex-direction: row;
19+
justify-content: center;
20+
}
21+
22+
#content {
23+
max-width: 800px;
24+
background-color: #fff;
25+
padding: 40px;
26+
border-style: solid;
27+
border-color: #cfcfcf;
28+
border-width: 0 1px;
29+
position: relative;
30+
}
31+
32+
#content img {
33+
max-width: 100%;
34+
}
35+
36+
h1 {
37+
margin: 0;
38+
padding: 0 0 20px 0;
39+
}
40+
41+
p {
42+
font-size: 17px;
43+
line-height: 160%;
44+
}
4145
</style>
4246
</head>
4347

4448
<body>
45-
<div id="content">
46-
</div>
49+
<div id="content">
50+
</div>
51+
52+
<script type="module">
53+
import CETEI from 'CETEIcean';
54+
import { createTextAnnotator } from '@recogito/text-annotator';
55+
import { TEIPlugin } from '../src/index.ts';
4756

48-
<script type="module">
49-
import CETEI from 'CETEIcean';
50-
import { createTextAnnotator } from '@recogito/text-annotator';
51-
import { TEIPlugin } from '../src/index.ts';
57+
import '@recogito/text-annotator/dist/text-annotator.css';
5258

53-
import '@recogito/text-annotator/dist/text-annotator.css';
59+
window.onload = async function () {
60+
var CETEIcean = new CETEI();
5461

55-
window.onload = async function() {
56-
var CETEIcean = new CETEI();
62+
CETEIcean.getHTML5('macbeth.xml', data => {
63+
document.getElementById('content').appendChild(data);
5764

58-
CETEIcean.getHTML5('macbeth.xml', data => {
59-
document.getElementById('content').appendChild(data);
60-
61-
var anno = TEIPlugin(createTextAnnotator(document.getElementById('content')));
65+
var anno = TEIPlugin(createTextAnnotator(document.getElementById('content')));
6266

63-
anno.loadAnnotations('annotations.json');
67+
anno.loadAnnotations('annotations.json');
6468

65-
anno.on('createAnnotation', annotation => {
66-
console.log('createAnnotation', annotation);
67-
});
69+
anno.on('createAnnotation', annotation => {
70+
console.log('createAnnotation', annotation);
71+
});
6872

69-
anno.on('updateAnnotation', (annotation, previous) => {
70-
console.log('updateAnnotation', annotation);
71-
});
73+
anno.on('updateAnnotation', (annotation, previous) => {
74+
console.log('updateAnnotation', annotation);
75+
});
7276

73-
anno.on('deleteAnnotation', (annotation) => {
74-
console.log('deleteAnnotation', annotation);
75-
});
77+
anno.on('deleteAnnotation', (annotation) => {
78+
console.log('deleteAnnotation', annotation);
79+
});
7680

77-
anno.on('selectionChanged', (annotations) => {
78-
console.log('selectionChanged', annotations);
79-
});
81+
anno.on('selectionChanged', (annotations) => {
82+
console.log('selectionChanged', annotations);
83+
});
8084

81-
anno.on('viewportIntersect', (annotations) => {
82-
console.log('viewport', annotations);
83-
});
84-
});
85-
}
86-
</script>
85+
anno.on('viewportIntersect', (annotations) => {
86+
console.log('viewport', annotations);
87+
});
88+
});
89+
};
90+
</script>
8791
</body>
88-
</html>
92+
</html>

‎packages/text-annotator-react/test/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>RecogitoJS React</title>
77
<style>
8+
*, *:before, *:after {
9+
box-sizing: border-box;
10+
}
11+
812
html, body {
913
background: #fff;
1014
padding: 40px;
@@ -18,7 +22,7 @@
1822
margin: 0;
1923
padding: 0 0 20px 0;
2024
}
21-
25+
2226
p {
2327
font-size: 17px;
2428
line-height: 160%;

‎packages/text-annotator/src/highlight/span/spansRenderer.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,12 @@
1414
}
1515

1616
.r6o-annotatable .r6o-span-highlight-layer .r6o-annotation {
17+
position: absolute;
18+
display: block;
1719
border-style: solid;
1820
border-width: 0;
21+
22+
/* `padding` should grow beyond the `height` and be used as the underline offset */
1923
box-sizing: content-box;
20-
display: block;
21-
position: absolute;
2224
}
25+

‎packages/text-annotator/src/highlight/span/spansRenderer.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const computeZIndex = (rect: Rect, all: Highlight[]): number => {
1515
const intersects = (a: Rect, b: Rect): boolean => (
1616
a.x <= b.x + b.width && a.x + a.width >= b.x &&
1717
a.y <= b.y + b.height && a.y + a.height >= b.y
18-
);
18+
)
1919

2020
const getLength = (h: Highlight) =>
2121
h.rects.reduce((total, rect) => total + rect.width, 0);
@@ -132,4 +132,4 @@ export const createSpansRenderer = (
132132
container: HTMLElement,
133133
state: TextAnnotatorState<TextAnnotation, unknown>,
134134
viewport: ViewportState
135-
) => createBaseRenderer(container, state, viewport, createRenderer(container));
135+
) => createBaseRenderer(container, state, viewport, createRenderer(container))

0 commit comments

Comments
 (0)