From 6df3143ead642356b7823946e9710f840f3faa5a Mon Sep 17 00:00:00 2001 From: _stanleyyip <33562077+yipstanley@users.noreply.github.com> Date: Tue, 14 May 2019 16:02:37 -0400 Subject: argh --- src/client/documents/Documents.ts | 3 +- src/client/views/nodes/DocumentContentsView.tsx | 1 + src/client/views/nodes/PDFBox.tsx | 4 +- src/client/views/pdf/PDFBox2.tsx | 26 ++++ src/client/views/pdf/PDFViewer.tsx | 183 ++++++++++++++++++++++++ 5 files changed, 215 insertions(+), 2 deletions(-) create mode 100644 src/client/views/pdf/PDFBox2.tsx create mode 100644 src/client/views/pdf/PDFViewer.tsx (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 11929455c..654431905 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -33,6 +33,7 @@ import { DocServer } from "../DocServer"; import { StrokeData, InkField } from "../../new_fields/InkField"; import { dropActionType } from "../util/DragManager"; import { DateField } from "../../new_fields/DateField"; +import { PDFBox2 } from "../views/pdf/PDFBox2"; export interface DocumentOptions { x?: number; @@ -136,7 +137,7 @@ export namespace Docs { } function CreatePdfPrototype(): Doc { let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("annotations"), - { x: 0, y: 0, nativeWidth: 1200, width: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1 }); + { x: 0, y: 0, nativeWidth: 1200, width: 300, height: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1 }); return pdfProto; } function CreateWebPrototype(): Doc { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index f404b7bc6..11df9162a 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -23,6 +23,7 @@ import { FieldViewProps } from "./FieldView"; import { Without, OmitKeys } from "../../../Utils"; import { Cast, StrCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; +import { PDFBox2 } from "../pdf/PDFBox2"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? type BindingProps = Without; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index cb27b3f1b..55a37883a 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -21,6 +21,7 @@ import { positionSchema } from "./DocumentView"; import { pageSchema } from "./ImageBox"; import { ImageField, PdfField } from "../../../new_fields/URLField"; import { InkingControl } from "../InkingControl"; +import { PDFViewer } from "../pdf/PDFViewer"; /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, @@ -354,10 +355,11 @@ export class PDFBox extends DocComponent(PdfDocumen } render() { trace(); + const pdfUrl = window.origin + RouteStore.corsProxy + "/https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"; let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : ""); return (
- {this.pdfRenderer} +
); } 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(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 ( + + ) + } +} \ 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 { + @observable _pdf: Opt; + + @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 ( +
+ +
+ ); + } +} + +interface IViewerProps { + pdf: Opt; +} + +class Viewer extends React.Component { + render() { + console.log("VIEWER"); + let numPages = this.props.pdf ? this.props.pdf.numPages : 0; + console.log(numPages); + return ( +
+ {/* {Array.from(Array(numPages).keys()).map((i) => ( */} + + {/* ))} */} +
+ ); + } +} + +interface IPageProps { + pdf: Opt; + name: string; + numPages: number; +} + +@observer +class Page extends React.Component { + @observable _state: string = "N/A"; + @observable _width: number = 0; + @observable _height: number = 0; + @observable _page: Opt; + canvas: React.RefObject; + textLayer: React.RefObject; + @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 ( +
+
+ +
+
+
+
<
+
>
+
+
+ ); + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2