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
|
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { SelectionManager } from "../../util/SelectionManager";
import React = require("react")
import { observer } from "mobx-react"
import { observable, action } from 'mobx';
import 'react-pdf/dist/Page/AnnotationLayer.css'
interface IProps{
Height:number;
Width:number;
X:number;
Y:number;
}
/**
* Sticky, also known as area highlighting, is used to highlight large selection of the PDF file.
* Improvements that could be made: maybe store line array and store that somewhere for future rerendering.
*
* Written By: Andrew Kim
*/
@observer
export class Sticky extends React.Component<IProps> {
private initX:number = 0;
private initY:number = 0;
private _ref = React.createRef<HTMLCanvasElement>();
private ctx:any; //context that keeps track of sticky canvas
/**
* drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
*/
drawDown = (e:React.PointerEvent) => {
if (this._ref.current){
this.ctx = this._ref.current.getContext("2d");
let mouse = e.nativeEvent;
this.initX = mouse.offsetX;
this.initY = mouse.offsetY;
this.ctx.beginPath();
this.ctx.lineTo(this.initX, this.initY);
this.ctx.strokeStyle = "black";
document.addEventListener("pointermove", this.drawMove);
document.addEventListener("pointerup", this.drawUp);
}
}
//when user drags
drawMove = (e: PointerEvent):void =>{
//x and y mouse movement
let x = this.initX += e.movementX,
y = this.initY += e.movementY;
//connects the point
this.ctx.lineTo(x, y);
this.ctx.stroke();
}
/**
* when user lifts the mouse, the drawing ends
*/
drawUp = (e:PointerEvent) => {
this.ctx.closePath();
console.log(this.ctx);
document.removeEventListener("pointermove", this.drawMove);
}
render() {
return (
<div onPointerDown = {this.drawDown}>
<canvas ref = {this._ref} height = {this.props.Height} width = {this.props.Width}
style = {{position:"absolute",
top: "20px",
left: "0px",
zIndex: 1,
background: "yellow",
transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
opacity: 0.4
}}
/>
</div>
);
}
}
|
