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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
import { observer } from "mobx-react";
import * as Pdfjs from "pdfjs-dist";
import "pdfjs-dist/web/pdf_viewer.css";
import { Doc, Opt, WidthSym } from "../../../fields/Doc";
import { documentSchema } from '../../../fields/documentSchemas';
import { makeInterface } from "../../../fields/Schema";
import { Cast, NumCast } from "../../../fields/Types";
import { PdfField } from "../../../fields/URLField";
import { TraceMobx } from '../../../fields/util';
import { Utils } from '../../../Utils';
import { KeyCodes } from '../../util/KeyCodes';
import { undoBatch } from '../../util/UndoManager';
import { panZoomSchema } from '../collections/collectionFreeForm/CollectionFreeFormView';
import { CollectionViewType } from '../collections/CollectionView';
import { ContextMenu } from '../ContextMenu';
import { ContextMenuProps } from '../ContextMenuItem';
import { ViewBoxAnnotatableComponent } from "../DocComponent";
import { PDFViewer } from "../pdf/PDFViewer";
import { FieldView, FieldViewProps } from './FieldView';
import { pageSchema } from "./ImageBox";
import "./PDFBox.scss";
import React = require("react");
type PdfDocument = makeInterface<[typeof documentSchema, typeof panZoomSchema, typeof pageSchema]>;
const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema);
@observer
export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocument>(PdfDocument) {
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PDFBox, fieldKey); }
private _searchString: string = "";
private _initialScale: number = 0; // the initial scale of the PDF when first rendered which determines whether the document will be live on startup or not. Getting bigger after startup won't make it automatically be live.
private _displayPdfLive = false; // has this box ever had its contents activated -- if so, stop drawing the overlay title
private _pdfViewer: PDFViewer | undefined;
private _searchRef = React.createRef<HTMLInputElement>();
private _selectReactionDisposer: IReactionDisposer | undefined;
@observable private _searching: boolean = false;
@observable private _pdf: Opt<Pdfjs.PDFDocumentProxy>;
@observable private _pageControls = false;
constructor(props: any) {
super(props);
this._initialScale = this.props.ScreenToLocalTransform().Scale;
const nw = Doc.NativeWidth(this.Document, this.dataDoc) || 927;
const nh = Doc.NativeHeight(this.Document, this.dataDoc) || 1200;
!this.Document._fitWidth && (this.Document._height = this.Document[WidthSym]() * (nh / nw));
const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
if (pdfUrl) {
if (PDFBox.pdfcache.get(pdfUrl.url.href)) runInAction(() => this._pdf = PDFBox.pdfcache.get(pdfUrl.url.href));
else if (PDFBox.pdfpromise.get(pdfUrl.url.href)) PDFBox.pdfpromise.get(pdfUrl.url.href)?.then(action(pdf => this._pdf = pdf));
}
const backup = "oldPath";
const { Document } = this.props;
const pdf = Cast(this.dataDoc[this.props.fieldKey], PdfField);
const href = pdf?.url?.href;
if (href) {
const pathCorrectionTest = /upload\_[a-z0-9]{32}.(.*)/g;
const matches = pathCorrectionTest.exec(href);
// console.log("\nHere's the { url } being fed into the outer regex:");
// console.log(href);
// console.log("And here's the 'properPath' build from the captured filename:\n");
if (matches !== null && href.startsWith(window.location.origin)) {
const properPath = Utils.prepend(`/files/pdfs/${matches[0]}`);
//console.log(properPath);
if (!properPath.includes(href)) {
console.log(`The two (url and proper path) were not equal`);
const proto = Doc.GetProto(Document);
proto[this.props.fieldKey] = new PdfField(properPath);
proto[backup] = href;
} else {
//console.log(`The two (url and proper path) were equal`);
}
} else {
console.log("Outer matches was null!");
}
}
}
componentWillUnmount() { this._selectReactionDisposer?.(); }
componentDidMount() {
this._selectReactionDisposer = reaction(() => this.props.isSelected(),
() => {
document.removeEventListener("keydown", this.onKeyDown);
this.props.isSelected(true) && document.addEventListener("keydown", this.onKeyDown);
}, { fireImmediately: true });
}
loaded = (nw: number, nh: number, np: number) => {
this.dataDoc[this.props.fieldKey + "-numPages"] = np;
Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), nw * 96 / 72));
Doc.SetNativeHeight(this.dataDoc, nh * 96 / 72);
this.layoutDoc._height = this.layoutDoc[WidthSym]() / (Doc.NativeAspect(this.dataDoc) || 1);
!this.Document._fitWidth && (this.Document._height = this.Document[WidthSym]() * (nh / nw));
}
public search = (string: string, fwd: boolean) => { this._pdfViewer?.search(string, fwd); };
public prevAnnotation = () => { this._pdfViewer?.prevAnnotation(); };
public nextAnnotation = () => { this._pdfViewer?.nextAnnotation(); };
public backPage = () => { this.Document._curPage = (this.Document._curPage || 1) - 1; return true; };
public forwardPage = () => { this.Document._curPage = (this.Document._curPage || 1) + 1; return true; };
public gotoPage = (p: number) => { this.Document._curPage = p; };
@undoBatch
onKeyDown = action((e: KeyboardEvent) => {
let processed = false;
if (e.key === "f" && e.ctrlKey) {
this._searching = true;
setTimeout(() => this._searchRef.current && this._searchRef.current.focus(), 100);
processed = true;
}
if (e.key === "PageDown") processed = this.forwardPage();
if (e.key === "PageUp") processed = this.backPage();
if (e.target instanceof HTMLInputElement || this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform) {
if (e.key === "ArrowDown" || e.key === "ArrowRight") processed = this.forwardPage();
if (e.key === "ArrowUp" || e.key === "ArrowLeft") processed = this.backPage();
}
if (processed) {
e.stopImmediatePropagation();
e.preventDefault();
}
});
whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive));
setPdfViewer = (pdfViewer: PDFViewer) => { this._pdfViewer = pdfViewer; };
searchStringChanged = (e: React.ChangeEvent<HTMLInputElement>) => this._searchString = e.currentTarget.value;
settingsPanel() {
const pageBtns = <>
<button className="pdfBox-overlayButton-back" key="back" title="Page Back"
onPointerDown={e => e.stopPropagation()} onClick={e => this.backPage()} >
<FontAwesomeIcon style={{ color: "white" }} icon={"arrow-left"} size="sm" />
</button>
<button className="pdfBox-overlayButton-fwd" key="fwd" title="Page Forward"
onPointerDown={e => e.stopPropagation()} onClick={e => this.forwardPage()} >
<FontAwesomeIcon style={{ color: "white" }} icon={"arrow-right"} size="sm" />
</button>
</>;
const searchTitle = `${!this._searching ? "Open" : "Close"} Search Bar`;
const curPage = this.Document._curPage || 1;
return !this.active() ? (null) :
(<div className="pdfBox-ui" onKeyDown={e => e.keyCode === KeyCodes.BACKSPACE || e.keyCode === KeyCodes.DELETE ? e.stopPropagation() : true}
onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none" }}>
<div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
<button className="pdfBox-overlayButton" title={searchTitle} />
<input className="pdfBox-searchBar" placeholder="Search" ref={this._searchRef} onChange={this.searchStringChanged} onKeyDown={e => e.keyCode === KeyCodes.ENTER && this.search(this._searchString, !e.shiftKey)} />
<button className="pdfBox-search" title="Search" onClick={e => this.search(this._searchString, !e.shiftKey)}>
<FontAwesomeIcon icon="search" size="sm" color="white" /></button>
<button className="pdfBox-prevIcon " title="Previous Annotation" onClick={this.prevAnnotation} >
<FontAwesomeIcon style={{ color: "white" }} icon={"arrow-up"} size="lg" />
</button>
<button className="pdfBox-nextIcon" title="Next Annotation" onClick={this.nextAnnotation} >
<FontAwesomeIcon style={{ color: "white" }} icon={"arrow-down"} size="lg" />
</button>
</div>
<button className="pdfBox-overlayButton" key="search" onClick={action(() => {
this._searching = !this._searching;
this.search("mxytzlaf", true);
})} title={searchTitle} style={{ bottom: 0, right: 0 }}>
<div className="pdfBox-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()}></div>
<div className="pdfBox-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
<FontAwesomeIcon style={{ color: "white" }} icon={this._searching ? "times" : "search"} size="lg" /></div>
</button>
<div className="pdfBox-pageNums">
<input value={curPage}
onChange={e => this.Document._curPage = Number(e.currentTarget.value)}
style={{ width: `${curPage > 99 ? 4 : 3}ch`, pointerEvents: "all" }}
onClick={action(() => this._pageControls = !this._pageControls)} />
{this._pageControls ? pageBtns : (null)}
</div>
</div>);
}
specificContextMenu = (e: React.MouseEvent): void => {
const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
const funcs: ContextMenuProps[] = [];
pdfUrl && funcs.push({ description: "Copy path", event: () => Utils.CopyText(pdfUrl.url.pathname), icon: "expand-arrows-alt" });
funcs.push({ description: "Toggle Fit Width " + (this.Document._fitWidth ? "Off" : "On"), event: () => this.Document._fitWidth = !this.Document._fitWidth, icon: "expand-arrows-alt" });
ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
}
@computed get contentScaling() { return this.props.ContentScaling(); }
@computed get renderTitleBox() {
const classname = "pdfBox" + (this.active() ? "-interactive" : "");
return <div className={classname} >
<div className="pdfBox-title-outer">
<strong className="pdfBox-title" >{this.props.Document.title}</strong>
</div>
</div>;
}
isChildActive = (outsideReaction?: boolean) => this._isChildActive;
@computed get renderPdfView() {
TraceMobx();
const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
return <div className={"pdfBox"} onContextMenu={this.specificContextMenu}
style={{ height: this.props.Document._scrollTop && !this.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}>
<div className="pdfBox-background" />
<PDFViewer {...this.props}
pdf={this._pdf!}
url={pdfUrl!.url.pathname}
loaded={!Doc.NativeAspect(this.dataDoc) ? this.loaded : undefined}
setPdfViewer={this.setPdfViewer}
addDocument={this.addDocument}
whenActiveChanged={this.whenActiveChanged}
isChildActive={this.isChildActive}
startupLive={true}
/>
{this.settingsPanel()}
</div>;
}
static pdfcache = new Map<string, Pdfjs.PDFDocumentProxy>();
static pdfpromise = new Map<string, Pdfjs.PDFPromise<Pdfjs.PDFDocumentProxy>>();
render() {
TraceMobx();
if (true) {//this.props.isSelected() || (this.props.active() && this.props.renderDepth === 0) || this.props.Document._scrollY !== undefined) {
this._displayPdfLive = true;
}
if (this._displayPdfLive) {
if (this._pdf) return this.renderPdfView;
const href = Cast(this.dataDoc[this.props.fieldKey], PdfField, null)?.url.href;
if (href) {
if (PDFBox.pdfcache.get(href)) setTimeout(action(() => this._pdf = PDFBox.pdfcache.get(href)));
else {
if (!PDFBox.pdfpromise.get(href)) PDFBox.pdfpromise.set(href, Pdfjs.getDocument(href).promise);
PDFBox.pdfpromise.get(href)?.then(action(pdf => PDFBox.pdfcache.set(href, this._pdf = pdf)));
}
}
}
return this.renderTitleBox;
}
}
|
