2 files changed, 209 insertions, 0 deletions
diff --git a/src/client/views/pdf/PDFBox2.tsx b/src/client/views/pdf/PDFBox2.tsx
new file mode 100644
index 000000000..c3f5c19d8
--- /dev/null
+++ b/src/client/views/pdf/PDFBox2.tsx
@@ -0,0 +1,26 @@
+import React = require("react");
+import { FieldViewProps, FieldView } from "../nodes/FieldView";
+import { DocComponent } from "../DocComponent";
+import { makeInterface } from "../../../new_fields/Schema";
+import { positionSchema } from "../nodes/DocumentView";
+import { pageSchema } from "../nodes/ImageBox";
+import { PDFViewer } from "./PDFViewer";
+import { RouteStore } from "../../../server/RouteStore";
+import { InkingControl } from "../InkingControl";
+import { observer } from "mobx-react";
+
+type PdfDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>;
+const PdfDocument = makeInterface(positionSchema, pageSchema);
+
+@observer
+export class PDFBox2 extends DocComponent<FieldViewProps, PdfDocument>(PdfDocument) {
+    public static LayoutString() { return FieldView.LayoutString(PDFBox2); }
+
+    render() {
+        const pdfUrl = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
+        let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool);
+        return (
+            <PDFViewer url={pdfUrl} />
+        )
+    }
+}
+\ No newline at end of file
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
new file mode 100644
index 000000000..558a4fab6
--- /dev/null
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -0,0 +1,183 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { observable, action, runInAction } from "mobx";
+import { RouteStore } from "../../../server/RouteStore";
+import * as Pdfjs from "pdfjs-dist";
+import { Opt } from "../../../new_fields/Doc";
+
+interface IPDFViewerProps {
+    url: string;
+}
+
+@observer
+export class PDFViewer extends React.Component<IPDFViewerProps> {
+    @observable _pdf: Opt<Pdfjs.PDFDocumentProxy>;
+
+    @action
+    componentDidMount() {
+        // const pdfUrl = window.origin + RouteStore.corsProxy + "/https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
+        const pdfUrl = this.props.url;
+        let promise = Pdfjs.getDocument(pdfUrl).promise;
+
+        promise.then((pdf: Pdfjs.PDFDocumentProxy) => {
+            runInAction(() => this._pdf = pdf);
+        });
+    }
+
+    render() {
+        console.log("PDFVIEWER");
+        console.log(this._pdf);
+        return (
+            <div>
+                <Viewer pdf={this._pdf} />
+            </div>
+        );
+    }
+}
+
+interface IViewerProps {
+    pdf: Opt<Pdfjs.PDFDocumentProxy>;
+}
+
+class Viewer extends React.Component<IViewerProps> {
+    render() {
+        console.log("VIEWER");
+        let numPages = this.props.pdf ? this.props.pdf.numPages : 0;
+        console.log(numPages);
+        return (
+            <div className="viewer">
+                {/* {Array.from(Array(numPages).keys()).map((i) => ( */}
+                <Page
+                    pdf={this.props.pdf}
+                    numPages={numPages}
+                    key={`${this.props.pdf ? this.props.pdf.fingerprint : "undefined"}`}
+                    name={`${this.props.pdf ? this.props.pdf.fingerprint : "undefined"}`}
+                    {...this.props}
+                />
+                {/* ))} */}
+            </div>
+        );
+    }
+}
+
+interface IPageProps {
+    pdf: Opt<Pdfjs.PDFDocumentProxy>;
+    name: string;
+    numPages: number;
+}
+
+@observer
+class Page extends React.Component<IPageProps> {
+    @observable _state: string = "N/A";
+    @observable _width: number = 0;
+    @observable _height: number = 0;
+    @observable _page: Opt<Pdfjs.PDFPageProxy>;
+    canvas: React.RefObject<HTMLCanvasElement>;
+    textLayer: React.RefObject<HTMLDivElement>;
+    @observable _currPage: number = 1;
+
+    constructor(props: IPageProps) {
+        super(props);
+        this.canvas = React.createRef();
+        this.textLayer = React.createRef();
+    }
+
+    componentDidMount() {
+        console.log(this.props.pdf);
+        if (this.props.pdf) {
+            this.update(this.props.pdf);
+        }
+    }
+
+    componentDidUpdate() {
+        if (this.props.pdf) {
+            this.update(this.props.pdf);
+        }
+    }
+
+    private update = (pdf: Pdfjs.PDFDocumentProxy) => {
+        if (pdf) {
+            this.loadPage(pdf);
+        }
+        else {
+            this._state = "loading";
+        }
+    }
+
+    private loadPage = (pdf: Pdfjs.PDFDocumentProxy) => {
+        if (this._state === "rendering" || this._page) return;
+
+        pdf.getPage(this._currPage).then(
+            (page: Pdfjs.PDFPageProxy) => {
+                console.log("PAGE");
+                console.log(page);
+                this._state = "rendering";
+                this.renderPage(page);
+            }
+        )
+    }
+
+    @action
+    private renderPage = (page: Pdfjs.PDFPageProxy) => {
+        let scale = 1;
+        let viewport = page.getViewport(scale);
+        let canvas = this.canvas.current;
+        if (canvas) {
+            let context = canvas.getContext("2d");
+            canvas.width = viewport.width;
+            this._width = viewport.width;
+            canvas.height = viewport.height;
+            this._height = viewport.height;
+            if (context) {
+                page.render({ canvasContext: context, viewport: viewport });
+                page.getTextContent().then((res: Pdfjs.TextContent) => {
+                    //@ts-ignore
+                    let textLayer = Pdfjs.renderTextLayer({
+                        textContent: res,
+                        container: this.textLayer.current,
+                        viewport: viewport
+                    });
+                    // textLayer._render();
+                    this._state = "rendered";
+                });
+
+                this._page = page;
+            }
+        }
+    }
+
+    @action
+    prevPage = (e: React.MouseEvent) => {
+        if (this._currPage > 2 && this._state !== "rendering") {
+            this._currPage = Math.max(this._currPage - 1, 1);
+            this._page = undefined;
+            this.loadPage(this.props.pdf!);
+            this._state = "rendering";
+        }
+    }
+
+    @action
+    nextPage = (e: React.MouseEvent) => {
+        if (this._currPage < this.props.numPages - 1 && this._state !== "rendering") {
+            this._currPage = Math.min(this._currPage + 1, this.props.numPages)
+            this._page = undefined;
+            this.loadPage(this.props.pdf!);
+            this._state = "rendering";
+        }
+    }
+
+    render() {
+        return (
+            <div className={this.props.name} style={{ "width": this._width, "height": this._height }}>
+                <div className="canvasContainer">
+                    <canvas ref={this.canvas} />
+                </div>
+                <div className="textlayer" ref={this.textLayer} />
+                <div className="viewer-button-cont" style={{ "width": this._width / 10, "height": this._height / 20, "left": this._width * .9, "top": this._height * .95 }}>
+                    <div className="viewer-previousPage" onClick={this.prevPage}>&lt;</div>
+                    <div className="viewer-nextPage" onClick={this.nextPage}>&gt;</div>
+                </div>
+            </div>
+        );
+    }
+}
+\ No newline at end of file