From 82a6a258422666fbe3db2a2cf1934f8673912b67 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Mon, 10 Jun 2019 15:49:34 -0400 Subject: annotation updates blehh --- src/client/views/pdf/PDFViewer.scss | 6 +++ src/client/views/pdf/PDFViewer.tsx | 76 +++++++++++++++++++++++++++++++++++-- src/client/views/pdf/Page.tsx | 44 +-------------------- 3 files changed, 81 insertions(+), 45 deletions(-) (limited to 'src') diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index cb1aef410..831e6add1 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -28,4 +28,10 @@ position: absolute; background-color: red; opacity: 0.1; +} + +.pdfViewer-annotationLayer { + position: absolute; + top: 0; + overflow: visible hidden; } \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 0a6886878..1152587a4 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -2,11 +2,12 @@ import { observer } from "mobx-react"; import React = require("react"); import { observable, action, runInAction, computed, IReactionDisposer, reaction } from "mobx"; import * as Pdfjs from "pdfjs-dist"; -import { Opt } from "../../../new_fields/Doc"; +import { Opt, HeightSym, WidthSym, Doc, DocListCast } from "../../../new_fields/Doc"; import "./PDFViewer.scss"; import "pdfjs-dist/web/pdf_viewer.css"; import { PDFBox } from "../nodes/PDFBox"; import Page from "./Page"; +import { NumCast } from "../../../new_fields/Types"; interface IPDFViewerProps { url: string; @@ -65,9 +66,11 @@ class Viewer extends React.Component { @observable private _endIndex: number = 1; @observable private _loaded: boolean = false; @observable private _pdf: Opt; + @observable private _annotations: Doc[] = []; private _pageBuffer: number = 1; private _reactionDisposer?: IReactionDisposer; + private _annotationReactionDisposer?: IReactionDisposer; componentDidMount = () => { let wasSelected = this.props.parent.props.isSelected(); @@ -88,6 +91,19 @@ class Viewer extends React.Component { { fireImmediately: true } ); + if (this.props.parent.Document) { + this._annotationReactionDisposer = 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 } + ); + } + // On load, render pdf setTimeout(() => this.renderPages(this.startIndex, this.endIndex, true), 1000); } @@ -96,6 +112,9 @@ class Viewer extends React.Component { if (this._reactionDisposer) { this._reactionDisposer(); } + if (this._annotationReactionDisposer) { + this._annotationReactionDisposer(); + } } @action @@ -135,6 +154,17 @@ class Viewer extends React.Component { } } + @action + private renderAnnotations = (annotations: Doc[], removeOldAnnotations: boolean): void => { + if (removeOldAnnotations) { + this._annotations = annotations; + } + else { + this._annotations.push(...annotations); + this._annotations = new Array(...this._annotations); + } + } + /** * @param startIndex: where to start rendering pages * @param endIndex: where to end rendering pages @@ -158,6 +188,7 @@ class Viewer extends React.Component { name={`${this.props.pdf ? this.props.pdf.fingerprint + `-page${i + 1}` : "undefined"}`} pageLoaded={this.pageLoaded} parent={this.props.parent} + renderAnnotations={this.renderAnnotations} {...this.props} /> )); let arr = Array.from(Array(numPages).keys()).map(() => false); @@ -194,6 +225,7 @@ class Viewer extends React.Component { name={`${this.props.pdf ? this.props.pdf.fingerprint + `-page${i + 1}` : "undefined"}`} pageLoaded={this.pageLoaded} parent={this.props.parent} + renderAnnotations={this.renderAnnotations} {...this.props} /> ); this._isPage[i] = true; @@ -247,11 +279,49 @@ class Viewer extends React.Component { } } + getPageHeight = (index: number): number => { + let counter = 0; + if (this.props.pdf && index < this.props.pdf.numPages) { + for (let i = 0; i < index; i++) { + if (this._pageSizes[i]) { + counter += this._pageSizes[i].height; + } + } + } + return counter; + } + render() { return ( -
- {this._visibleElements} +
+
+ {this._visibleElements} +
+
+
+ {this._annotations.map(anno => )} +
+
); } } + +interface IAnnotation { + x: number; + y: number; + width: number; + height: number; +} + +class RegionAnnotation extends React.Component { + onPointerDown = (e: React.PointerEvent) => { + console.log("clicked!"); + } + + render() { + return ( +
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 5269f448b..5738889c4 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -21,6 +21,7 @@ interface IPageProps { page: number; pageLoaded: (index: number, page: Pdfjs.PDFPageViewport) => void; parent: PDFBox; + renderAnnotations: (annotations: Doc[], removeOld: boolean) => void; } @observer @@ -35,7 +36,6 @@ export default class Page extends React.Component { @observable private _marqueeWidth: number = 0; @observable private _marqueeHeight: number = 0; @observable private _rotate: string = ""; - @observable private _annotations: Doc[] = []; private _canvas: React.RefObject; private _textLayer: React.RefObject; @@ -60,19 +60,6 @@ export default class Page extends React.Component { 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) { - annotations = annotations.filter(anno => NumCast(anno.page) === this.props.page); - this.renderAnnotations(annotations, true); - } - }, - { fireImmediately: true } - ); - } } } @@ -108,17 +95,6 @@ export default class Page extends React.Component { ); } - @action - 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 @@ -407,30 +383,14 @@ export default class Page extends React.Component {
-
+
- {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