From bcd6960fe91008bf31d364c48b5c8765eec28701 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Mon, 10 Jun 2019 11:33:36 -0400 Subject: oops --- src/client/views/pdf/Page.tsx | 86 ++++++++++++++++++++++++++++++------------- 1 file changed, 61 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 0d86f22c1..7125c820c 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -1,8 +1,8 @@ import { observer } from "mobx-react"; import React = require("react"); -import { observable, action, runInAction } from "mobx"; +import { observable, action, runInAction, IReactionDisposer, reaction } from "mobx"; import * as Pdfjs from "pdfjs-dist"; -import { Opt, Doc, FieldResult, Field } from "../../../new_fields/Doc"; +import { Opt, Doc, FieldResult, Field, DocListCast, WidthSym, HeightSym } from "../../../new_fields/Doc"; import "./PDFViewer.scss"; import "pdfjs-dist/web/pdf_viewer.css"; import { PDFBox } from "../nodes/PDFBox"; @@ -12,6 +12,7 @@ import { List } from "../../../new_fields/List"; import { emptyFunction } from "../../../Utils"; import { Cast, NumCast } from "../../../new_fields/Types"; import { listSpec } from "../../../new_fields/Schema"; +import { menuBar } from "prosemirror-menu"; interface IPageProps { pdf: Opt; @@ -34,7 +35,7 @@ export default class Page extends React.Component { @observable private _marqueeWidth: number = 0; @observable private _marqueeHeight: number = 0; @observable private _rotate: string = ""; - @observable private _annotations: List = new List(); + @observable private _annotations: Doc[] = []; private _canvas: React.RefObject; private _textLayer: React.RefObject; @@ -44,6 +45,7 @@ export default class Page extends React.Component { private _currentAnnotations: HTMLDivElement[] = []; private _marqueeing: boolean = false; private _dragging: boolean = false; + private _reactionDisposer?: IReactionDisposer; constructor(props: IPageProps) { super(props); @@ -54,19 +56,38 @@ export default class Page extends React.Component { this._curly = React.createRef(); } - componentDidMount() { + componentDidMount = (): void => { if (this.props.pdf) { this.update(this.props.pdf); + + if (this.props.parent.Document) { + this._reactionDisposer = reaction( + () => DocListCast(this.props.parent.Document.annotations), + () => { + let annotations = DocListCast(this.props.parent.Document.annotations); + if (annotations && annotations.length) { + this.renderAnnotations(annotations, true); + } + }, + { fireImmediately: true } + ); + } + } + } + + componentWillUnmount = (): void => { + if (this._reactionDisposer) { + this._reactionDisposer(); } } - componentDidUpdate() { + componentDidUpdate = (): void => { if (this.props.pdf) { this.update(this.props.pdf); } } - private update = (pdf: Pdfjs.PDFDocumentProxy) => { + private update = (pdf: Pdfjs.PDFDocumentProxy): void => { if (pdf) { this.loadPage(pdf); } @@ -75,11 +96,11 @@ export default class Page extends React.Component { } } - private loadPage = (pdf: Pdfjs.PDFDocumentProxy) => { + private loadPage = (pdf: Pdfjs.PDFDocumentProxy): void => { if (this._state === "rendering" || this._page) return; pdf.getPage(this._currPage).then( - (page: Pdfjs.PDFPageProxy) => { + (page: Pdfjs.PDFPageProxy): void => { this._state = "rendering"; this.renderPage(page); } @@ -87,7 +108,18 @@ export default class Page extends React.Component { } @action - private renderPage = (page: Pdfjs.PDFPageProxy) => { + private renderAnnotations = (annotations: Doc[], removeOldAnnotations: boolean): void => { + if (removeOldAnnotations) { + this._annotations = annotations; + } + else { + this._annotations.push(...annotations); + this._annotations = new Array(...this._annotations); + } + } + + @action + private renderPage = (page: Pdfjs.PDFPageProxy): void => { // lower scale = easier to read at small sizes, higher scale = easier to read at large sizes let scale = 2; let viewport = page.getViewport(scale); @@ -104,7 +136,7 @@ export default class Page extends React.Component { // renders the page onto the canvas context page.render({ canvasContext: ctx, viewport: viewport }); // renders text onto the text container - page.getTextContent().then((res: Pdfjs.TextContent) => { + page.getTextContent().then((res: Pdfjs.TextContent): void => { //@ts-ignore Pdfjs.renderTextLayer({ textContent: res, @@ -144,7 +176,7 @@ export default class Page extends React.Component { * start a drag event and create or put the necessary info into the drag event. */ @action - startDrag = (e: PointerEvent) => { + startDrag = (e: PointerEvent): void => { // the first 5 lines is a hack to prevent text selection while dragging e.preventDefault(); e.stopPropagation(); @@ -166,15 +198,6 @@ export default class Page extends React.Component { else { targetDoc.annotations = new List(annotationDocs); } - // temporary code (currently broken ? 6/7/19) to get annotations to rerender on pdf - let thisAnnotations = Cast(this.props.parent.Document.annotations, listSpec(Doc)); - if (thisAnnotations) { - thisAnnotations.push(...annotationDocs); - this.props.parent.Document.annotations = thisAnnotations; - let temp = new List(thisAnnotations); - temp.push(...this._annotations); - this._annotations = temp; - } // create dragData and star tdrag let dragData = new DragManager.AnnotationDragData(thisDoc, annotationDocs, targetDoc); if (this._textLayer.current) { @@ -196,7 +219,7 @@ export default class Page extends React.Component { } @action - onPointerDown = (e: React.PointerEvent) => { + onPointerDown = (e: React.PointerEvent): void => { // if alt+left click, drag and annotate if (e.altKey && e.button === 0) { e.stopPropagation(); @@ -237,7 +260,7 @@ export default class Page extends React.Component { } @action - onSelectStart = (e: PointerEvent) => { + onSelectStart = (e: PointerEvent): void => { let target: any = e.target; if (this._marqueeing) { let current = this._textLayer.current; @@ -292,7 +315,7 @@ export default class Page extends React.Component { } @action - onSelectEnd = () => { + onSelectEnd = (): void => { if (this._marqueeing) { this._marqueeing = false; if (this._marquee.current) { @@ -375,7 +398,6 @@ export default class Page extends React.Component { } render() { - let annotations = this._annotations; return (
@@ -386,10 +408,24 @@ export default class Page extends React.Component { style={{ left: `${this._marqueeX}px`, top: `${this._marqueeY}px`, width: `${this._marqueeWidth}px`, height: `${this._marqueeHeight}px`, background: "transparent" }}>
- {annotations.map(anno => this.renderAnnotation(anno instanceof Doc ? anno : undefined))} + {this._annotations.map(anno => )}
); } +} + +interface IAnnotation { + x: number; + y: number; + width: number; + height: number; +} +class RegionAnnotation extends React.Component { + render() { + return ( +
+ ); + } } \ No newline at end of file -- cgit v1.2.3-70-g09d2