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 (let i = 0; i < e.spans.length; i++){
if (e.spans[i] == 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>
);
}
}
|
