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
118
119
120
121
122
123
124
125
126
127
128
129
|
import React = require("react");
import { action, IReactionDisposer, observable, reaction, runInAction } from "mobx";
import { observer } from "mobx-react";
import { Doc, DocListCast, HeightSym, WidthSym, Opt } from "../../../new_fields/Doc";
import { Id } from "../../../new_fields/FieldSymbols";
import { List } from "../../../new_fields/List";
import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
import { DocumentManager } from "../../util/DocumentManager";
import PDFMenu from "./PDFMenu";
import "./Annotation.scss";
interface IAnnotationProps {
anno: Doc;
fieldExtensionDoc: Doc;
addDocTab: (document: Doc, dataDoc: Opt<Doc>, where: string) => boolean;
pinToPres: (document: Doc) => void;
}
export default class Annotation extends React.Component<IAnnotationProps> {
render() {
return DocListCast(this.props.anno.annotations).map(a => (
<RegionAnnotation {...this.props} document={a} x={NumCast(a.x)} y={NumCast(a.y)} width={a[WidthSym]()} height={a[HeightSym]()} key={a[Id]} />));
}
}
interface IRegionAnnotationProps {
x: number;
y: number;
width: number;
height: number;
fieldExtensionDoc: Doc;
addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => boolean;
pinToPres: (document: Doc) => void;
document: Doc;
}
@observer
class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
private _reactionDisposer?: IReactionDisposer;
private _brushDisposer?: IReactionDisposer;
private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
@observable private _brushed: boolean = false;
componentDidMount() {
this._reactionDisposer = reaction(
() => this.props.document.delete,
(del) => del && this._mainCont.current && (this._mainCont.current.style.display = "none"),
{ fireImmediately: true }
);
this._brushDisposer = reaction(
() => FieldValue(Cast(this.props.document.group, Doc)) && Doc.IsBrushed(FieldValue(Cast(this.props.document.group, Doc))!),
(brushed) => {
if (brushed !== undefined) {
runInAction(() => this._brushed = brushed);
}
}
);
}
componentWillUnmount() {
this._reactionDisposer && this._reactionDisposer();
}
deleteAnnotation = () => {
let annotation = DocListCast(this.props.fieldExtensionDoc.annotations);
let group = FieldValue(Cast(this.props.document.group, Doc));
if (group) {
if (annotation.indexOf(group) !== -1) {
let newAnnotations = annotation.filter(a => a !== FieldValue(Cast(this.props.document.group, Doc)));
this.props.fieldExtensionDoc.annotations = new List<Doc>(newAnnotations);
}
DocListCast(group.annotations).forEach(anno => anno.delete = true);
}
PDFMenu.Instance.fadeOut(true);
}
pinToPres = () => {
let group = FieldValue(Cast(this.props.document.group, Doc));
group && this.props.pinToPres(group);
}
@action
onPointerDown = async (e: React.PointerEvent) => {
if (e.button === 0) {
let targetDoc = await Cast(this.props.document.target, Doc);
if (targetDoc) {
let context = await Cast(targetDoc.targetContext, Doc);
if (context) {
DocumentManager.Instance.jumpToDocument(targetDoc, false, false,
((doc) => this.props.addDocTab(targetDoc!, undefined, e.ctrlKey ? "onRight" : "inTab")),
undefined, undefined);
}
}
}
if (e.button === 2) {
PDFMenu.Instance.Status = "annotation";
PDFMenu.Instance.Delete = this.deleteAnnotation.bind(this);
PDFMenu.Instance.Pinned = false;
PDFMenu.Instance.AddTag = this.addTag.bind(this);
PDFMenu.Instance.PinToPres = this.pinToPres;
PDFMenu.Instance.jumpTo(e.clientX, e.clientY, true);
}
}
addTag = (key: string, value: string): boolean => {
let group = FieldValue(Cast(this.props.document.group, Doc));
if (group) {
let valNum = parseInt(value);
group[key] = isNaN(valNum) ? value : valNum;
return true;
}
return false;
}
render() {
return (<div className="pdfAnnotation" onPointerDown={this.onPointerDown} ref={this._mainCont}
style={{
top: this.props.y,
left: this.props.x,
width: this.props.width,
height: this.props.height,
backgroundColor: this._brushed ? "green" : StrCast(this.props.document.color)
}} />);
}
}
|
