1 |
ac59aec1
|
Dominik Poch
|
/**
|
2 |
|
|
* Creates an annotation view of a document.
|
3 |
|
|
* @returns The annotation view.
|
4 |
|
|
*/
|
5 |
7652cf88
|
Lukáš Vlček
|
import { useContext } from 'react';
|
6 |
|
|
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
7 |
6973d036
|
Lukáš Vlček
|
import parse from 'html-react-parser';
|
8 |
|
|
import {
|
9 |
|
|
DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME,
|
10 |
|
|
DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME,
|
11 |
|
|
DOCUMENT_TAG_ID_ATTRIBUTE_NAME,
|
12 |
|
|
} from '../../constants';
|
13 |
7652cf88
|
Lukáš Vlček
|
|
14 |
6d10fe14
|
Dominik Poch
|
export function DocumentAnnotationView() {
|
15 |
6973d036
|
Lukáš Vlček
|
const {
|
16 |
|
|
annotation,
|
17 |
|
|
setSelectedInstanceId,
|
18 |
|
|
setSelectedOccurrenceId,
|
19 |
|
|
selectedInstanceId,
|
20 |
|
|
selectedOccurrenceId,
|
21 |
|
|
} = useContext(AnnotationContext);
|
22 |
7652cf88
|
Lukáš Vlček
|
|
23 |
|
|
if (!annotation) {
|
24 |
c9762683
|
Vojtěch Bartička
|
return <p>Probíhá načítání anotace ...</p>;
|
25 |
7652cf88
|
Lukáš Vlček
|
}
|
26 |
|
|
|
27 |
6973d036
|
Lukáš Vlček
|
function detectSelectedElement(e: any) {
|
28 |
|
|
if (!(e.target instanceof HTMLElement)) {
|
29 |
|
|
return;
|
30 |
|
|
}
|
31 |
|
|
|
32 |
|
|
const target = e.target as HTMLElement;
|
33 |
|
|
|
34 |
|
|
const id = target.getAttribute(DOCUMENT_TAG_ID_ATTRIBUTE_NAME);
|
35 |
|
|
const idInstance = target.getAttribute(DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME);
|
36 |
|
|
const idOccurrence = target.getAttribute(DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME);
|
37 |
|
|
|
38 |
|
|
if (!id || !idInstance || !idOccurrence) {
|
39 |
|
|
setSelectedInstanceId(null);
|
40 |
|
|
setSelectedOccurrenceId(null);
|
41 |
|
|
return;
|
42 |
|
|
}
|
43 |
e02e004e
|
Lukáš Vlček
|
|
44 |
6973d036
|
Lukáš Vlček
|
setSelectedInstanceId(idInstance);
|
45 |
|
|
setSelectedOccurrenceId(idOccurrence);
|
46 |
|
|
}
|
47 |
|
|
|
48 |
|
|
function getCss() {
|
49 |
e02e004e
|
Lukáš Vlček
|
let css = 'span.annotation {border-bottom: 2px solid;}\n';
|
50 |
|
|
css += 'span {line-height: 30px}\n';
|
51 |
|
|
css +=
|
52 |
|
|
'span[end="1"] {border-end-end-radius: 0px; border-right: 1px solid darkgray}\n';
|
53 |
|
|
css +=
|
54 |
|
|
'span[start="1"] {border-end-start-radius: 0px; border-left: 1px solid darkgray}\n';
|
55 |
|
|
|
56 |
|
|
for (const info of annotation?.cssInfo ?? []) {
|
57 |
|
|
css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${info.instanceId}"] { border-color:${info.color}; padding-bottom: ${info.padding}px }\n`;
|
58 |
|
|
}
|
59 |
|
|
|
60 |
6973d036
|
Lukáš Vlček
|
if (selectedInstanceId) {
|
61 |
|
|
css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${selectedInstanceId}"] { background-color: #FCF3CF; }\n`;
|
62 |
|
|
}
|
63 |
|
|
if (selectedOccurrenceId) {
|
64 |
|
|
css += `span[${DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME}="${selectedOccurrenceId}"] { border-bottom: 4px dotted; }\n`;
|
65 |
|
|
}
|
66 |
|
|
|
67 |
e02e004e
|
Lukáš Vlček
|
return <style dangerouslySetInnerHTML={{ __html: css }}></style>;
|
68 |
|
|
}
|
69 |
|
|
|
70 |
ac59aec1
|
Dominik Poch
|
return (
|
71 |
|
|
<div>
|
72 |
e02e004e
|
Lukáš Vlček
|
{getCss()}
|
73 |
6973d036
|
Lukáš Vlček
|
<div onClick={detectSelectedElement}>
|
74 |
|
|
{parse(annotation.documentToRender ?? '')}
|
75 |
|
|
</div>
|
76 |
ac59aec1
|
Dominik Poch
|
</div>
|
77 |
|
|
);
|
78 |
|
|
}
|