aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/pdf/PDFViewer.tsx
diff options
context:
space:
mode:
authorBob Zeleznik <zzzman@gmail.com>2020-06-26 20:09:15 -0400
committerBob Zeleznik <zzzman@gmail.com>2020-06-26 20:09:15 -0400
commit344d478d6140be1e469cfcd52ca76bbd1c4324f1 (patch)
tree1ee3ba5dd6a529af2333ada8603550493be141e4 /src/client/views/pdf/PDFViewer.tsx
parent780ef6fec5add6a0b6b05f5fa64f47b1a2b71df4 (diff)
parent2043e0b55263e8168ccba8387a6b795a052da809 (diff)
Merge branch 'master' into ink_menu
Diffstat (limited to 'src/client/views/pdf/PDFViewer.tsx')
-rw-r--r--src/client/views/pdf/PDFViewer.tsx53
1 files changed, 25 insertions, 28 deletions
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 50ffd57fe..bd74e0dd0 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -1,5 +1,6 @@
import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
import { observer } from "mobx-react";
+const pdfjs = require('pdfjs-dist/es5/build/pdf.js');
import * as Pdfjs from "pdfjs-dist";
import "pdfjs-dist/web/pdf_viewer.css";
import { Dictionary } from "typescript-collections";
@@ -41,7 +42,10 @@ export const pageSchema = createSchema({
serachMatch: "boolean"
});
-pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`;
+//pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`;
+// The workerSrc property shall be specified.
+pdfjsLib.GlobalWorkerOptions.workerSrc = "https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js";
+
type PdfDocument = makeInterface<[typeof documentSchema, typeof pageSchema]>;
const PdfDocument = makeInterface(documentSchema, pageSchema);
@@ -80,7 +84,6 @@ interface IViewerProps {
export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocument>(PdfDocument) {
static _annotationStyle: any = addStyleSheet();
@observable private _pageSizes: { width: number, height: number }[] = [];
- @observable private _annotations: Doc[] = [];
@observable private _savedAnnotations: Dictionary<number, HTMLDivElement[]> = new Dictionary<number, HTMLDivElement[]>();
@observable private _script: CompiledScript = CompileScript("return true") as CompiledScript;
@observable private Index: number = -1;
@@ -112,17 +115,14 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
private _downY: number = 0;
private _coverPath: any;
private _viewerIsSetup = false;
+ private _lastSearch: string = "";
@computed get allAnnotations() {
- return DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]).filter(
- anno => this._script.run({ this: anno }, console.log, true).result);
- }
-
- @computed get nonDocAnnotations() {
- return this._annotations.filter(anno => this._script.run({ this: anno }, console.log, true).result);
+ return DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]).
+ filter(anno => this._script.run({ this: anno }, console.log, true).result);
}
+ @computed get nonDocAnnotations() { return this.allAnnotations.filter(a => a.annotations); }
- _lastSearch: string = "";
componentDidMount = async () => {
// change the address to be the file address of the PNG version of each page
// file address of the pdf
@@ -148,7 +148,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
}
runInAction(() => this._showWaiting = this._showCover = true);
this.props.startupLive && this.setupPdfJsViewer();
- this._mainCont.current!.scrollTop = this.layoutDoc._scrollTop || 0;
+ this._mainCont.current && (this._mainCont.current.scrollTop = this.layoutDoc._scrollTop || 0);
this._searchReactionDisposer = reaction(() => this.Document.searchMatch, search => {
if (search) {
this.search(Doc.SearchQuery(), true);
@@ -231,25 +231,19 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
await this.initialLoad();
this._scrollTopReactionDisposer = reaction(() => Cast(this.layoutDoc._scrollTop, "number", null),
- (stop) => (stop !== undefined && this.layoutDoc._scrollY === undefined) && (this._mainCont.current!.scrollTop = stop), { fireImmediately: true });
-
- this._annotationReactionDisposer = reaction(
- () => DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]),
- annotations => annotations?.length && (this._annotations = annotations),
+ (stop) => (stop !== undefined && this.layoutDoc._scrollY === undefined && this._mainCont.current) && (this._mainCont.current.scrollTop = stop),
{ fireImmediately: true });
this._filterReactionDisposer = reaction(
- () => ({ scriptField: Cast(this.Document.filterScript, ScriptField), annos: this._annotations.slice() }),
- action(({ scriptField, annos }: { scriptField: FieldResult<ScriptField>, annos: Doc[] }) => {
+ () => Cast(this.Document.filterScript, ScriptField),
+ action(scriptField => {
const oldScript = this._script.originalScript;
- this._script = scriptField && scriptField.script.compiled ? scriptField.script : CompileScript("return true") as CompiledScript;
+ this._script = scriptField?.script.compiled ? scriptField.script : CompileScript("return true") as CompiledScript;
if (this._script.originalScript !== oldScript) {
this.Index = -1;
}
- annos.forEach(d => d.opacity = this._script.run({ this: d }, console.log, 1).result ? 1 : 0);
}),
- { fireImmediately: true }
- );
+ { fireImmediately: true });
this.createPdfViewer();
}
@@ -270,16 +264,18 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
}
document.removeEventListener("copy", this.copy);
document.addEventListener("copy", this.copy);
- document.addEventListener("pagesinit", this.pagesinit);
- document.addEventListener("pagerendered", action(() => this._showCover = this._showWaiting = false));
+ const eventBus = new PDFJSViewer.EventBus(true);
+ eventBus._on("pagesinit", this.pagesinit);
+ eventBus._on("pagerendered", action(() => this._showCover = this._showWaiting = false));
const pdfLinkService = new PDFJSViewer.PDFLinkService();
- const pdfFindController = new PDFJSViewer.PDFFindController({ linkService: pdfLinkService });
+ const pdfFindController = new PDFJSViewer.PDFFindController({ linkService: pdfLinkService, eventBus });
this._pdfViewer = new PDFJSViewer.PDFViewer({
container: this._mainCont.current,
viewer: this._viewer.current,
linkService: pdfLinkService,
findController: pdfFindController,
renderer: "canvas",
+ eventBus
});
pdfLinkService.setViewer(this._pdfViewer);
pdfLinkService.setDocument(this.props.pdf, null);
@@ -403,7 +399,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
if (!searchString) {
fwd ? this.nextAnnotation() : this.prevAnnotation();
}
- else if (this._pdfViewer._pageViewsReady) {
+ else if (this._pdfViewer.pageViewsReady) {
this._pdfViewer.findController.executeCommand('findagain', {
caseSensitive: false,
findPrevious: !fwd,
@@ -503,7 +499,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
const annoBox = document.createElement("div");
annoBox.className = "pdfViewer-annotationBox";
// transforms the positions from screen onto the pdf div
- annoBox.style.top = ((rect.top - boundingRect.top) * scaleY / this._zoomed + this._mainCont.current.scrollTop).toString();
+ annoBox.style.top = ((rect.top - boundingRect.top) * scaleX / this._zoomed + this._mainCont.current.scrollTop).toString();
annoBox.style.left = ((rect.left - boundingRect.left) * scaleX / this._zoomed).toString();
annoBox.style.width = (rect.width * this._mainCont.current.offsetWidth / boundingRect.width / this._zoomed).toString();
annoBox.style.height = (rect.height * this._mainCont.current.offsetHeight / boundingRect.height / this._zoomed).toString();
@@ -656,8 +652,9 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
@computed get annotationLayer() {
TraceMobx();
return <div className="pdfViewer-annotationLayer" style={{ height: NumCast(this.Document._nativeHeight), transform: `scale(${this._zoomed})` }} ref={this._annotationLayer}>
- {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map((anno, index) =>
- <Annotation {...this.props} focus={this.props.focus} dataDoc={this.dataDoc} fieldKey={this.props.fieldKey} anno={anno} key={`${anno[Id]}-annotation`} />)}
+ {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno =>
+ <Annotation {...this.props} focus={this.props.focus} dataDoc={this.dataDoc} fieldKey={this.props.fieldKey} anno={anno} key={`${anno[Id]}-annotation`} />)
+ }
</div>;
}
overlayTransform = () => this.scrollXf().scale(1 / this._zoomed);