1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import "./ImageBox.scss";
import React = require("react");
import { observer } from "mobx-react";
import { observable, action } from 'mobx';
import 'react-pdf/dist/Page/AnnotationLayer.css';
interface IProps {
Span: HTMLSpanElement;
X: number;
Y: number;
Highlights: any[];
Annotations: any[];
CurrAnno: any[];
}
/**
* Annotation class is used to take notes on a particular highlight. You can also change highlighted span's color
* Improvements to be made: Removing the annotation when onRemove is called. (Removing this, not just the highlighted span).
* Also need to support multiline highlighting
*
* Written by: Andrew Kim
*/
@observer
export class Annotation extends React.Component<IProps> {
/**
* changes color of the span (highlighted section)
*/
onColorChange = (e: React.PointerEvent) => {
if (e.currentTarget.innerHTML === "r") {
this.props.Span.style.backgroundColor = "rgba(255,0,0, 0.3)";
} else if (e.currentTarget.innerHTML === "b") {
this.props.Span.style.backgroundColor = "rgba(0,255, 255, 0.3)";
} else if (e.currentTarget.innerHTML === "y") {
this.props.Span.style.backgroundColor = "rgba(255,255,0, 0.3)";
} else if (e.currentTarget.innerHTML === "g") {
this.props.Span.style.backgroundColor = "rgba(76, 175, 80, 0.3)";
}
}
/**
* removes the highlighted span. Supposed to remove Annotation too, but I don't know how to unmount this
*/
@action
onRemove = (e: any) => {
let index: number = -1;
//finding the highlight in the highlight array
this.props.Highlights.forEach((e) => {
for (const span of e.spans) {
if (span === this.props.Span) {
index = this.props.Highlights.indexOf(e);
this.props.Highlights.splice(index, 1);
}
}
});
//removing from CurrAnno and Annotation array
this.props.Annotations.splice(index, 1);
this.props.CurrAnno.pop();
//removing span from div
if (this.props.Span.parentElement) {
let nodesArray = this.props.Span.parentElement.childNodes;
nodesArray.forEach((e) => {
if (e === this.props.Span) {
if (this.props.Span.parentElement) {
this.props.Highlights.forEach((item) => {
if (item === e) {
item.remove();
}
});
e.remove();
}
}
});
}
}
render() {
return (
<div
style={{
position: "absolute",
top: "20px",
left: "0px",
zIndex: 1,
transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
}}>
<div style={{ width: "200px", height: "50px", backgroundColor: "orange" }}>
<button
style={{ borderRadius: "25px", width: "25%", height: "100%" }}
onClick={this.onRemove}
>x</button>
<div style={{ width: "75%", height: "100%", display: "inline-block" }}>
<button onPointerDown={this.onColorChange} style={{ backgroundColor: "red", borderRadius: "50%", color: "transparent" }}>r</button>
<button onPointerDown={this.onColorChange} style={{ backgroundColor: "blue", borderRadius: "50%", color: "transparent" }}>b</button>
<button onPointerDown={this.onColorChange} style={{ backgroundColor: "yellow", borderRadius: "50%", color: "transparent" }}>y</button>
<button onPointerDown={this.onColorChange} style={{ backgroundColor: "green", borderRadius: "50%", color: "transparent" }}>g</button>
</div>
</div>
<div style={{ width: "200px", height: "200" }}>
<textarea style={{ width: "100%", height: "100%" }}
defaultValue="Enter Text Here..."
></textarea>
</div>
</div>
);
}
}
|
