From f043c60ff537667021a76e716b6e6465aec44525 Mon Sep 17 00:00:00 2001 From: _stanleyyip <33562077+yipstanley@users.noreply.github.com> Date: Sun, 19 May 2019 12:30:09 -0700 Subject: scrolling ? --- src/client/views/pdf/PDFViewer.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/client/views/pdf/PDFViewer.scss (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss new file mode 100644 index 000000000..d8ff06406 --- /dev/null +++ b/src/client/views/pdf/PDFViewer.scss @@ -0,0 +1,19 @@ +.canvasContainer {} + +.viewer-button-cont { + position: absolute; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.viewer-previousPage, +.viewer-nextPage { + background: grey; + font-weight: bold; + opacity: 0.5; + padding: 0 10px; + border-radius: 5px; +} + +.viewer {} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From e815a45a50e215e1a5c3ada6404226326a8530a9 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Mon, 20 May 2019 04:02:23 -0400 Subject: YES --- src/client/views/nodes/PDFBox.tsx | 21 ++++- src/client/views/pdf/PDFViewer.scss | 4 + src/client/views/pdf/PDFViewer.tsx | 165 +++++++++++++++++++++++++++++++++--- 3 files changed, 176 insertions(+), 14 deletions(-) (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index d74dc53c4..62c8e1c99 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -54,7 +54,7 @@ export class PDFBox extends DocComponent(PdfDocumen public static LayoutString() { return FieldView.LayoutString(PDFBox); } @observable private _alt = false; - @observable private _interactive: boolean = false; + @observable private _scrollY: number = 0; getHeight = (): number => { if (this.props.Document) { @@ -65,13 +65,28 @@ export class PDFBox extends DocComponent(PdfDocumen return 0; } + loaded = (nw: number, nh: number) => { + if (this.props.Document) { + let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document; + doc.nativeWidth = nw; + doc.nativeHeight = nh; + } + } + + @action + onScroll = (e: React.UIEvent) => { + if (e.currentTarget) { + this._scrollY = e.currentTarget.scrollTop; + } + } + 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 ( -
e.stopPropagation()} className={classname}> - +
e.stopPropagation()} className={classname}> +
); } diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index d8ff06406..3a6045317 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -16,4 +16,8 @@ border-radius: 5px; } +.textLayer { + user-select: auto; +} + .viewer {} \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 26becebf1..6201f6330 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -1,14 +1,18 @@ import { observer } from "mobx-react"; import React = require("react"); -import { observable, action, runInAction } from "mobx"; +import { observable, action, runInAction, computed } from "mobx"; import { RouteStore } from "../../../server/RouteStore"; import * as Pdfjs from "pdfjs-dist"; import { Opt } from "../../../new_fields/Doc"; import "./PDFViewer.scss"; import "pdfjs-dist/web/pdf_viewer.css"; +import { number } from "prop-types"; +import { JSXElement } from "babel-types"; interface IPDFViewerProps { url: string; + loaded: (nw: number, nh: number) => void; + scrollY: number; } @observer @@ -27,11 +31,9 @@ export class PDFViewer extends React.Component { } render() { - console.log("PDFVIEWER"); - console.log(this._pdf); return (
- +
); } @@ -39,25 +41,166 @@ export class PDFViewer extends React.Component { interface IViewerProps { pdf: Opt; + loaded: (nw: number, nh: number) => void; + scrollY: number; } +type PDFItem = React.Component | HTMLDivElement; + +@observer class Viewer extends React.Component { + @observable.shallow private _visibleElements: JSX.Element[] = []; + @observable private _isPage: boolean[] = []; + @observable private _pageSizes: { width: number, height: number }[] = []; + @observable private _startIndex: number = 0; + @observable private _endIndex: number = 1; + @observable private _loaded: boolean = false; + @observable private _pdf: Opt; + + private _pageBuffer: number = 1; + + @computed get scrollY(): number { + return this.props.scrollY; + } + + @computed get startIndex(): number { + return Math.max(0, this.getIndex(this.scrollY) - this._pageBuffer); + } + + @computed get endIndex(): number { + let width = this._pageSizes.map(i => i.width); + return Math.min(this.props.pdf ? this.props.pdf.numPages - 1 : 0, this.getIndex(this.scrollY + Math.max(...width)) + this._pageBuffer); + } + + componentDidMount = () => { + let numPages = this.props.pdf ? this.props.pdf.numPages : 0; + this.renderPages(0, numPages - 1, true); + } + + componentDidUpdate = (prevProps: IViewerProps) => { + if (this.scrollY !== prevProps.scrollY || this._pdf !== this.props.pdf) { + this._pdf = this.props.pdf; + this.renderPages(this.startIndex, this.endIndex); + } + } + + @action + renderPages = (startIndex: number, endIndex: number, forceRender: boolean = false) => { + let numPages = this.props.pdf ? this.props.pdf.numPages : 0; + + if (this._visibleElements.length !== numPages) { + let divs = Array.from(Array(numPages).keys()).map(i => ( + + )); + let arr = Array.from(Array(numPages).keys()).map(i => false); + this._visibleElements.push(...divs); + this._isPage.push(...arr); + } + + if (startIndex === this._startIndex && endIndex === this._endIndex && !forceRender) { + return; + } + + for (let i = startIndex; i <= endIndex; i++) { + if (this._isPage[i] && forceRender) { + this._visibleElements[i] = ( + + ); + this._isPage[i] = true; + } + else if (!this._isPage[i]) { + this._visibleElements[i] = ( + + ); + this._isPage[i] = true; + } + } + + for (let i = 0; i < numPages; i++) { + if (i < startIndex || i > endIndex) { + if (this._isPage[i]) { + this._visibleElements[i] = ( +
+ ); + this._isPage[i] = false; + } + } + } + + return; + } + + getIndex = (vOffset: number) => { + if (this._loaded) { + let index = 0; + let currOffset = vOffset; + while (currOffset - this._pageSizes[index].height > 0) { + currOffset -= this._pageSizes[index].height; + index++; + } + return index; + } + return 0; + } + + @action + pageLoaded = (index: number, page: Pdfjs.PDFPageViewport): void => { + let numPages = this.props.pdf ? this.props.pdf.numPages : 0; + this.props.loaded(page.width, page.height); + if (index > this._pageSizes.length) { + this._pageSizes.push({ width: page.width, height: page.height }); + } + else { + this._pageSizes[index - 1] = { width: page.width, height: page.height }; + } + if (index === numPages) { + this._loaded = true; + let divs = Array.from(Array(numPages).keys()).map(i => ( +
+ )); + this._visibleElements = new Array(...divs); + } + } + render() { - console.log("VIEWER"); + console.log(`START: ${this.startIndex}`); + console.log(`END: ${this.endIndex}`) let numPages = this.props.pdf ? this.props.pdf.numPages : 0; - console.log(numPages); return (
- {Array.from(Array(numPages).keys()).map((i) => ( + {/* {Array.from(Array(numPages).keys()).map((i) => ( - ))} } + ))} */} + {this._visibleElements}
); } @@ -68,6 +211,7 @@ interface IPageProps { name: string; numPages: number; page: number; + pageLoaded: (index: number, page: Pdfjs.PDFPageViewport) => void; } @observer @@ -113,12 +257,10 @@ class Page extends React.Component { pdf.getPage(this._currPage).then( (page: Pdfjs.PDFPageProxy) => { - console.log("PAGE"); - console.log(page); this._state = "rendering"; this.renderPage(page); } - ) + ); } @action @@ -132,6 +274,7 @@ class Page extends React.Component { this._width = viewport.width; canvas.height = viewport.height; this._height = viewport.height; + this.props.pageLoaded(this._currPage, viewport); if (context) { page.render({ canvasContext: context, viewport: viewport }); page.getTextContent().then((res: Pdfjs.TextContent) => { -- cgit v1.2.3-70-g09d2 From 1fb7a7bc185c1ba9bbe0f21ad5e16cf19235b2da Mon Sep 17 00:00:00 2001 From: yipstanley Date: Tue, 4 Jun 2019 13:59:04 -0400 Subject: updatesss --- src/client/views/nodes/PDFBox.tsx | 2 +- src/client/views/pdf/PDFViewer.scss | 6 +++- src/client/views/pdf/PDFViewer.tsx | 59 +++++++++++++++++++++++++++++-------- 3 files changed, 53 insertions(+), 14 deletions(-) (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 62c8e1c99..dd945b030 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -86,7 +86,7 @@ export class PDFBox extends DocComponent(PdfDocumen let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : ""); return (
e.stopPropagation()} className={classname}> - +
); } diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 3a6045317..9d41a1bb0 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -1,4 +1,8 @@ -.canvasContainer {} +.textLayer { + div { + user-select: text; + } +} .viewer-button-cont { position: absolute; diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 6201f6330..d510ba91c 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -1,18 +1,24 @@ import { observer } from "mobx-react"; import React = require("react"); -import { observable, action, runInAction, computed } from "mobx"; +import { observable, action, runInAction, computed, IReactionDisposer, reaction } from "mobx"; import { RouteStore } from "../../../server/RouteStore"; import * as Pdfjs from "pdfjs-dist"; +import * as htmlToImage from "html-to-image"; import { Opt } from "../../../new_fields/Doc"; import "./PDFViewer.scss"; import "pdfjs-dist/web/pdf_viewer.css"; import { number } from "prop-types"; import { JSXElement } from "babel-types"; +import { PDFBox } from "../nodes/PDFBox"; +import { NumCast, FieldValue } from "../../../new_fields/Types"; +import { SearchBox } from "../SearchBox"; +import { Utils } from "../../../Utils"; interface IPDFViewerProps { url: string; loaded: (nw: number, nh: number) => void; scrollY: number; + parent: PDFBox; } @observer @@ -33,7 +39,7 @@ export class PDFViewer extends React.Component { render() { return (
- +
); } @@ -43,10 +49,9 @@ interface IViewerProps { pdf: Opt; loaded: (nw: number, nh: number) => void; scrollY: number; + parent: PDFBox; } -type PDFItem = React.Component | HTMLDivElement; - @observer class Viewer extends React.Component { @observable.shallow private _visibleElements: JSX.Element[] = []; @@ -56,8 +61,41 @@ class Viewer extends React.Component { @observable private _endIndex: number = 1; @observable private _loaded: boolean = false; @observable private _pdf: Opt; + @observable private _renderAsSvg = true; private _pageBuffer: number = 1; + private _reactionDisposer?: IReactionDisposer; + private _mainDiv = React.createRef(); + + @computed private get thumbnailPage() { return NumCast(this.props.parent.Document.thumbnailPage, -1); } + + componentDidMount() { + let wasSelected = this.props.parent.props.isSelected(); + this._reactionDisposer = reaction( + () => [this.props.parent.props.isSelected(), this.startIndex], + () => { + if (this.startIndex > 0 && !this.props.parent.props.isTopMost && this.startIndex !== this.thumbnailPage && wasSelected && !this.props.parent.props.isSelected()) { + this.saveThumbnail(); + } + wasSelected = this.props.parent.props.isSelected(); + }, + { fireImmediately: true } + ); + let numPages = this.props.pdf ? this.props.pdf.numPages : 0; + this.renderPages(0, numPages - 1, true); + } + + saveThumbnail = () => { + this.props.parent.props.Document.thumbnailPage = FieldValue(this.props.parent.Document.curPage, -1); + this._renderAsSvg = false; + setTimeout(() => { + let nwidth = FieldValue(this.props.parent.Document.nativeWidth, 0); + let nheight = FieldValue(this.props.parent.Document.nativeHeight, 0); + htmlToImage.toPng(this._mainDiv.current!, { width: nwidth, height: nheight, quality: 0.8 }) + .then(action((dataUrl: string) => { + })); + }, 1250); + } @computed get scrollY(): number { return this.props.scrollY; @@ -72,11 +110,6 @@ class Viewer extends React.Component { return Math.min(this.props.pdf ? this.props.pdf.numPages - 1 : 0, this.getIndex(this.scrollY + Math.max(...width)) + this._pageBuffer); } - componentDidMount = () => { - let numPages = this.props.pdf ? this.props.pdf.numPages : 0; - this.renderPages(0, numPages - 1, true); - } - componentDidUpdate = (prevProps: IViewerProps) => { if (this.scrollY !== prevProps.scrollY || this._pdf !== this.props.pdf) { this._pdf = this.props.pdf; @@ -188,7 +221,7 @@ class Viewer extends React.Component { console.log(`END: ${this.endIndex}`) let numPages = this.props.pdf ? this.props.pdf.numPages : 0; return ( -
+
{/* {Array.from(Array(numPages).keys()).map((i) => ( { } onPointerDown = (e: React.PointerEvent) => { + console.log("down"); e.stopPropagation(); } onPointerMove = (e: React.PointerEvent) => { + console.log("move") e.stopPropagation(); } render() { return ( -
+
-
+
); } -- cgit v1.2.3-70-g09d2 From f774314ddae00f2d2ceda886f0b6699f01f80718 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Wed, 5 Jun 2019 16:33:57 -0400 Subject: better virtualization and thumbnails git status --- src/client/views/nodes/PDFBox.tsx | 12 ++- src/client/views/pdf/PDFViewer.scss | 4 + src/client/views/pdf/PDFViewer.tsx | 158 ++++++++++++++++-------------------- 3 files changed, 82 insertions(+), 92 deletions(-) (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 7e335e75e..6d604ec75 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -14,9 +14,11 @@ import { FieldView, FieldViewProps } from './FieldView'; import { pageSchema } from "./ImageBox"; import "./PDFBox.scss"; import React = require("react"); -import { NumCast, StrCast } from "../../../new_fields/Types"; +import { NumCast, StrCast, Cast } from "../../../new_fields/Types"; import { makeInterface } from "../../../new_fields/Schema"; import { PDFViewer } from "../pdf/PDFViewer"; +import { PdfField } from "../../../new_fields/URLField"; +import { HeightSym, WidthSym } from "../../../new_fields/Doc"; /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, @@ -65,6 +67,7 @@ export class PDFBox extends DocComponent(PdfDocumen let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document; doc.nativeWidth = nw; doc.nativeHeight = nh; + doc.height = nh * (doc[WidthSym]() / nw); } } @@ -77,11 +80,12 @@ export class PDFBox extends DocComponent(PdfDocumen render() { trace(); - const pdfUrl = window.origin + RouteStore.corsProxy + "/" + StrCast(this.props.Document.title); + const pdfUrl = Cast(this.props.Document.data, PdfField, new PdfField(window.origin + RouteStore.corsProxy + "/https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf")); + console.log(pdfUrl); let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : ""); return ( -
e.stopPropagation()} className={classname}> - +
e.stopPropagation()} className={classname}> +
); } diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 9d41a1bb0..42bf023d6 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -24,4 +24,8 @@ user-select: auto; } +.pdfBox-cont-interactive { + overflow-x: visible; +} + .viewer {} \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 374e598a4..84d9f1ad0 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -4,18 +4,18 @@ import { observable, action, runInAction, computed, IReactionDisposer, reaction import { RouteStore } from "../../../server/RouteStore"; import * as Pdfjs from "pdfjs-dist"; import * as htmlToImage from "html-to-image"; -import { Opt } from "../../../new_fields/Doc"; +import { Opt, WidthSym } from "../../../new_fields/Doc"; import "./PDFViewer.scss"; import "pdfjs-dist/web/pdf_viewer.css"; import { number } from "prop-types"; import { JSXElement } from "babel-types"; import { PDFBox } from "../nodes/PDFBox"; -import { NumCast, FieldValue } from "../../../new_fields/Types"; +import { NumCast, FieldValue, Cast } from "../../../new_fields/Types"; import { SearchBox } from "../SearchBox"; import { Utils } from "../../../Utils"; import { Id } from "../../../new_fields/FieldSymbols"; import { DocServer } from "../../DocServer"; -import { ImageField } from "../../../new_fields/URLField"; +import { ImageField, PdfField } from "../../../new_fields/URLField"; var path = require("path"); interface IPDFViewerProps { @@ -44,7 +44,7 @@ export class PDFViewer extends React.Component { render() { return (
- +
); } @@ -56,6 +56,7 @@ interface IViewerProps { scrollY: number; parent: PDFBox; mainCont: React.RefObject; + url: string; } @observer @@ -71,71 +72,63 @@ class Viewer extends React.Component { private _pageBuffer: number = 1; private _reactionDisposer?: IReactionDisposer; - - @computed private get thumbnailY() { return NumCast(this.props.parent.Document.thumbnailY, -1); } + private _widthReactionDisposer?: IReactionDisposer; + private _width: number = 0; componentDidMount = () => { let wasSelected = this.props.parent.props.isSelected(); this._reactionDisposer = reaction( () => [this.props.parent.props.isSelected(), this.startIndex], () => { - if (this.startIndex >= 0 && !this.props.parent.props.isTopMost && this.scrollY !== this.thumbnailY && wasSelected && !this.props.parent.props.isSelected()) { + if (wasSelected && !this.props.parent.props.isSelected()) { this.saveThumbnail(); } + else if (!wasSelected && this.props.parent.props.isSelected()) { + this.renderPages(this.startIndex, this.endIndex, true); + } wasSelected = this.props.parent.props.isSelected(); }, { fireImmediately: true } ); - let numPages = this.props.pdf ? this.props.pdf.numPages : 0; - this.renderPages(0, numPages - 1, true); - } - saveThumbnail = () => { - // this.props.parent.props.Document.thumbnailY = FieldValue(this.scrollY, 0); - // this._renderAsSvg = false; - // setTimeout(() => { - // let nwidth = FieldValue(this.props.parent.Document.nativeWidth, 0); - // htmlToImage.toPng(this.props.mainCont.current!, { width: nwidth, height: nwidth, quality: 0.8, }) - // .then(action((dataUrl: string) => { - // SearchBox.convertDataUri(dataUrl, `icon${this.props.parent.Document[Id]}_${this.startIndex}`).then((returnedFilename) => { - // if (returnedFilename) { - // let url = DocServer.prepend(returnedFilename); - // this.props.parent.props.Document.thumbnail = new ImageField(new URL(url)); - // } - // runInAction(() => this._renderAsSvg = true); - // }); - // })) - // .catch(function (error: any) { - // console.error("Oops, something went wrong!", error); - // }); - // }, 1250); - } + // this._widthReactionDisposer = reaction( + // () => [this._docWidth], + // () => { + // if (this._width !== this._docWidth) { + // this._width = this._docWidth; + // this.renderPages(this.startIndex, this.endIndex, true); + // console.log(this._width); + // } + // }, + // { fireImmediately: true } + // ) - @computed get scrollY(): number { - return this.props.scrollY; + let numPages = this.props.pdf ? this.props.pdf.numPages : 0; + this.renderPages(0, numPages - 1, true); } - @computed get imageProxyRenderer() { - let thumbField = this.props.parent.props.Document.thumbnail; - if (thumbField && this._renderAsSvg && NumCast(this.props.parent.props.Document.startY, 0) === this.scrollY) { - let pw = typeof this.props.parent.props.PanelWidth === "function" ? this.props.parent.props.PanelWidth() : typeof this.props.parent.props.PanelWidth === "number" ? (this.props.parent.props.PanelWidth as any) as number : 50; - let path = thumbField instanceof ImageField ? thumbField.url.href : "http://cs.brown.edu/people/bcz/prairie.jpg"; - let field = thumbField; - if (field instanceof ImageField) path = this.choosePath(field.url); - return ; + componentWillUnmount = () => { + if (this._reactionDisposer) { + this._reactionDisposer(); } } - @action onError = () => { + @action + saveThumbnail = () => { + const address: string = this.props.url; + console.log(address); + for (let i = 0; i < this._visibleElements.length; i++) { + if (this._isPage[i]) { + let thisAddress = `${address.substring(0, address.length - ".pdf".length)}-${i + 1}.PNG`; + let nWidth = this._pageSizes[i].width; + let nHeight = this._pageSizes[i].height; + this._visibleElements[i] = ; + } + } } - choosePath(url: URL) { - if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1) { - return url.href; - } - let ext = path.extname(url.href); - ///TODO: Not done lol - syip2 - return url.href; + @computed get scrollY(): number { + return this.props.scrollY; } @computed get startIndex(): number { @@ -157,6 +150,9 @@ class Viewer extends React.Component { @action renderPages = (startIndex: number, endIndex: number, forceRender: boolean = false) => { let numPages = this.props.pdf ? this.props.pdf.numPages : 0; + if (!this.props.pdf) { + return; + } if (this._visibleElements.length !== numPages) { let divs = Array.from(Array(numPages).keys()).map(i => ( @@ -178,21 +174,19 @@ class Viewer extends React.Component { return; } - for (let i = startIndex; i <= endIndex; i++) { - if (this._isPage[i] && forceRender) { - this._visibleElements[i] = ( - - ); - this._isPage[i] = true; + for (let i = 0; i < numPages; i++) { + if (i < startIndex || i > endIndex) { + if (this._isPage[i]) { + this._visibleElements[i] = ( +
+ ); + } + this._isPage[i] = false; } - else if (!this._isPage[i]) { + } + + for (let i = startIndex; i <= endIndex; i++) { + if (!this._isPage[i] || forceRender) { this._visibleElements[i] = ( { } } - for (let i = 0; i < numPages; i++) { - if (i < startIndex || i > endIndex) { - if (this._isPage[i]) { - this._visibleElements[i] = ( -
- ); - this._isPage[i] = false; - } - } - } + this._startIndex = startIndex; + this._endIndex = endIndex; return; } getIndex = (vOffset: number) => { if (this._loaded) { + let numPages = this.props.pdf ? this.props.pdf.numPages : 0; let index = 0; let currOffset = vOffset; - while (currOffset - this._pageSizes[index].height > 0) { + while (index < numPages && currOffset - this._pageSizes[index].height > 0) { currOffset -= this._pageSizes[index].height; index++; } @@ -236,6 +223,9 @@ class Viewer extends React.Component { @action pageLoaded = (index: number, page: Pdfjs.PDFPageViewport): void => { + if (this._loaded) { + return; + } let numPages = this.props.pdf ? this.props.pdf.numPages : 0; this.props.loaded(page.width, page.height); if (index > this._pageSizes.length) { @@ -270,7 +260,7 @@ class Viewer extends React.Component { {...this.props} /> ))} */} - {this._renderAsSvg ? this.imageProxyRenderer : this._visibleElements} + {this._visibleElements}
); } @@ -338,32 +328,24 @@ class Page extends React.Component { let scale = 1; let viewport = page.getViewport(scale); let canvas = this.canvas.current; - let tempCanvas = document.createElement('canvas') - if (tempCanvas && canvas) { + let textLayer = this.textLayer.current; + if (canvas && textLayer) { let ctx = canvas.getContext("2d"); - let context = tempCanvas.getContext("2d"); - tempCanvas.width = viewport.width; canvas.width = viewport.width; this._width = viewport.width; - tempCanvas.height = viewport.height; canvas.height = viewport.height; this._height = viewport.height; this.props.pageLoaded(this._currPage, viewport); - if (context) { - page.render({ canvasContext: context, viewport: viewport }).promise.then(() => { - if (context && ctx) { - ctx.putImageData(context.getImageData(0, 0, tempCanvas.width, tempCanvas.height), 0, 0); - } - }); + if (ctx) { + page.render({ canvasContext: ctx, viewport: viewport }) page.getTextContent().then((res: Pdfjs.TextContent) => { //@ts-ignore - let textLayer = Pdfjs.renderTextLayer({ + Pdfjs.renderTextLayer({ textContent: res, - container: this.textLayer.current, + container: textLayer, viewport: viewport }); // textLayer._render(); - this._state = "rendered"; }); this._page = page; -- cgit v1.2.3-70-g09d2 From c4180929255db3bc7a75938e07afd86522f0a15e Mon Sep 17 00:00:00 2001 From: yipstanley Date: Wed, 5 Jun 2019 18:09:39 -0400 Subject: bug fixess --- src/client/views/nodes/PDFBox.tsx | 2 +- src/client/views/pdf/PDFViewer.scss | 4 ---- src/client/views/pdf/PDFViewer.tsx | 2 +- 3 files changed, 2 insertions(+), 6 deletions(-) (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 6d604ec75..4ee3ae098 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -84,7 +84,7 @@ export class PDFBox extends DocComponent(PdfDocumen console.log(pdfUrl); let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : ""); return ( -
e.stopPropagation()} className={classname}> +
e.stopPropagation()} className={classname}>
); diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 42bf023d6..9d41a1bb0 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -24,8 +24,4 @@ user-select: auto; } -.pdfBox-cont-interactive { - overflow-x: visible; -} - .viewer {} \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 84d9f1ad0..95f31bb89 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -104,7 +104,7 @@ class Viewer extends React.Component { // ) let numPages = this.props.pdf ? this.props.pdf.numPages : 0; - this.renderPages(0, numPages - 1, true); + setTimeout(() => this.renderPages(this.startIndex, this.endIndex, true), 1000); } componentWillUnmount = () => { -- cgit v1.2.3-70-g09d2 From 727c8be8d51766f483a90edf07366b5840f5a4f6 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Wed, 5 Jun 2019 23:00:10 -0400 Subject: screen transform remaining --- src/client/views/pdf/PDFViewer.scss | 6 ++++- src/client/views/pdf/PDFViewer.tsx | 48 ++++++++++++++++++++++++++++++++----- 2 files changed, 47 insertions(+), 7 deletions(-) (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 9d41a1bb0..484d9dc04 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -24,4 +24,8 @@ user-select: auto; } -.viewer {} \ No newline at end of file +.pdfViewer-annotationBox { + position: absolute; + background-color: red; + opacity: 0.5; +} \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 95f31bb89..a76527618 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -354,18 +354,54 @@ class Page extends React.Component { } onPointerDown = (e: React.PointerEvent) => { - console.log("down"); - e.stopPropagation(); + if (e.button === 0) { + e.stopPropagation(); + document.addEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointerup", this.onPointerUp); + } + } + + onPointerMove = (e: PointerEvent) => { + if (e.button === 0) { + e.stopPropagation(); + } } - onPointerMove = (e: React.PointerEvent) => { - console.log("move") - e.stopPropagation(); + onPointerUp = (e: PointerEvent) => { + let sel = window.getSelection(); + if (sel && sel.type === "Range") { + // console.log(sel.getRangeAt(0)); + let commonContainer = sel.getRangeAt(0).commonAncestorContainer; + let startContainer = sel.getRangeAt(0).startContainer; + let endContainer = sel.getRangeAt(0).endContainer; + let clientRects = sel.getRangeAt(0).getClientRects(); + console.log(sel.getRangeAt(0)); + let annoBoxes = []; + if (this.textLayer.current) { + // let transform = Utils.GetScreenTransform(this.textLayer.current); + console.log(transform); + for (let i = 0; i < clientRects.length; i++) { + let rect = clientRects.item(i); + if (rect) { + let annoBox = document.createElement("div"); + annoBox.className = "pdfViewer-annotationBox"; + annoBox.style.top = rect.top.toString(); + annoBox.style.left = rect.left.toString(); + annoBox.style.width = rect.width.toString(); + annoBox.style.height = rect.height.toString(); + // annoBox.style.transform = `scale(${1 / transform.scale}) translate(-${transform.translateX * transform.scale}px, -${transform.translateY * transform.scale}px)`; + this.textLayer.current.appendChild(annoBox); + } + } + } + } + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); } render() { return ( -
+
-- cgit v1.2.3-70-g09d2 From 0a14ecf9b9fa5e15bc3e5373c8f042f9cd876c8a Mon Sep 17 00:00:00 2001 From: yipstanley Date: Thu, 6 Jun 2019 18:26:57 -0400 Subject: region annotation basics --- src/client/views/collections/CollectionPDFView.tsx | 3 + src/client/views/pdf/PDFAnnotationLayer.tsx | 24 ++++ src/client/views/pdf/PDFViewer.scss | 2 +- src/client/views/pdf/PDFViewer.tsx | 125 +++++++++++++++++---- 4 files changed, 129 insertions(+), 25 deletions(-) create mode 100644 src/client/views/pdf/PDFAnnotationLayer.tsx (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 5e51437a4..773e4ae60 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -13,6 +13,9 @@ import { Id } from "../../../new_fields/FieldSymbols"; @observer export class CollectionPDFView extends React.Component { + constructor(props: FieldViewProps) { + super(props); + } public static LayoutString(fieldKey: string = "data") { return FieldView.LayoutString(CollectionPDFView, fieldKey); diff --git a/src/client/views/pdf/PDFAnnotationLayer.tsx b/src/client/views/pdf/PDFAnnotationLayer.tsx new file mode 100644 index 000000000..e92dcacbf --- /dev/null +++ b/src/client/views/pdf/PDFAnnotationLayer.tsx @@ -0,0 +1,24 @@ +import React = require("react"); +import { observer } from "mobx-react"; + +interface IAnnotationProps { + +} + +@observer +export class PDFAnnotationLayer extends React.Component { + onPointerDown = (e: React.PointerEvent) => { + if (e.ctrlKey) { + console.log("annotating"); + e.stopPropagation(); + } + } + + render() { + return ( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 484d9dc04..cb1aef410 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -27,5 +27,5 @@ .pdfViewer-annotationBox { position: absolute; background-color: red; - opacity: 0.5; + opacity: 0.1; } \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index d5a0a7aa1..5c480090c 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -6,6 +6,9 @@ import { Opt } from "../../../new_fields/Doc"; import "./PDFViewer.scss"; import "pdfjs-dist/web/pdf_viewer.css"; import { PDFBox } from "../nodes/PDFBox"; +import { PDFAnnotationLayer } from "./PDFAnnotationLayer"; +import { TSMethodSignature } from "babel-types"; +import { checkPropTypes } from "prop-types"; interface IPDFViewerProps { url: string; @@ -268,15 +271,24 @@ class Page extends React.Component { @observable private _height: number = 0; @observable private _page: Opt; @observable private _currPage: number = this.props.page + 1; + @observable private _marqueeX: number = 0; + @observable private _marqueeY: number = 0; + @observable private _marqueeWidth: number = 0; + @observable private _marqueeHeight: number = 0; private _canvas: React.RefObject; - private _currentAnnotations: HTMLDivElement[] = []; private _textLayer: React.RefObject; + private _annotationLayer: React.RefObject; + private _marquee: React.RefObject; + private _currentAnnotations: HTMLDivElement[] = []; + private _marqueeing: boolean = false; constructor(props: IPageProps) { super(props); this._canvas = React.createRef(); this._textLayer = React.createRef(); + this._annotationLayer = React.createRef(); + this._marquee = React.createRef(); } componentDidMount() { @@ -342,9 +354,26 @@ class Page extends React.Component { } } + @action onPointerDown = (e: React.PointerEvent) => { if (e.button === 0) { - e.stopPropagation(); + let target: any = e.target; + if (target && target.parentElement === this._textLayer.current) { + e.stopPropagation(); + } + else { + e.stopPropagation(); + runInAction(() => { + let current = this._textLayer.current; + if (current) { + let boundingRect = current.getBoundingClientRect(); + this._marqueeX = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width); + this._marqueeY = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height); + } + }); + this._marqueeing = true; + if (this._marquee.current) this._marquee.current.style.opacity = "0.2"; + } document.addEventListener("pointermove", this.onPointerMove); document.addEventListener("pointerup", this.onPointerUp); if (!e.ctrlKey) { @@ -355,8 +384,22 @@ class Page extends React.Component { } } + @action onPointerMove = (e: PointerEvent) => { - if (e.button === 0) { + let target: any = e.target; + if (this._marqueeing) { + let current = this._textLayer.current; + if (current) { + let boundingRect = current.getBoundingClientRect(); + this._marqueeWidth = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width) - this._marqueeX; + this._marqueeHeight = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height) - this._marqueeY; + console.log(this._marqueeWidth); + console.log(this._marqueeHeight); + } + e.stopPropagation(); + e.preventDefault(); + } + else if (target && target.parentElement === this._textLayer.current) { e.stopPropagation(); } } @@ -369,42 +412,76 @@ class Page extends React.Component { e.stopPropagation(); } + @action onPointerUp = (e: PointerEvent) => { - let sel = window.getSelection(); - // if selecting over a range of things - if (sel && sel.type === "Range") { - let clientRects = sel.getRangeAt(0).getClientRects(); - if (this._textLayer.current) { - let boundingRect = this._textLayer.current.getBoundingClientRect(); - for (let i = 0; i < clientRects.length; i++) { - let rect = clientRects.item(i); - if (rect) { - let annoBox = document.createElement("div"); - annoBox.className = "pdfViewer-annotationBox"; - // transforms the positions from screen onto the pdf div - annoBox.style.top = ((rect.top - boundingRect.top) * (this._textLayer.current.offsetHeight / boundingRect.height)).toString(); - annoBox.style.left = ((rect.left - boundingRect.left) * (this._textLayer.current.offsetWidth / boundingRect.width)).toString(); - annoBox.style.width = (rect.width * this._textLayer.current.offsetWidth / boundingRect.width).toString(); - annoBox.style.height = (rect.height * this._textLayer.current.offsetHeight / boundingRect.height).toString(); - annoBox.ondragstart = this.startAnnotation; - annoBox.onpointerdown = this.pointerDownCancel; - this._textLayer.current.appendChild(annoBox); - this._currentAnnotations.push(annoBox); + if (this._marqueeing) { + this._marqueeing = false; + if (this._marquee.current) { + let copy = document.createElement("div"); + copy.style.left = this._marquee.current.style.left; + copy.style.top = this._marquee.current.style.top; + copy.style.width = this._marquee.current.style.width; + copy.style.height = this._marquee.current.style.height; + copy.style.opacity = this._marquee.current.style.opacity; + copy.className = this._marquee.current.className; + if (this._annotationLayer.current) { + this._annotationLayer.current.append(copy); + this._currentAnnotations.push(copy); + } + this._marquee.current.style.opacity = "0"; + } + + this._marqueeHeight = this._marqueeWidth = 0; + } + else { + let sel = window.getSelection(); + // if selecting over a range of things + if (sel && sel.type === "Range") { + let clientRects = sel.getRangeAt(0).getClientRects(); + if (this._textLayer.current) { + let boundingRect = this._textLayer.current.getBoundingClientRect(); + for (let i = 0; i < clientRects.length; i++) { + let rect = clientRects.item(i); + if (rect) { + let annoBox = document.createElement("div"); + annoBox.className = "pdfViewer-annotationBox"; + // transforms the positions from screen onto the pdf div + annoBox.style.top = ((rect.top - boundingRect.top) * (this._textLayer.current.offsetHeight / boundingRect.height)).toString(); + annoBox.style.left = ((rect.left - boundingRect.left) * (this._textLayer.current.offsetWidth / boundingRect.width)).toString(); + annoBox.style.width = (rect.width * this._textLayer.current.offsetWidth / boundingRect.width).toString(); + annoBox.style.height = (rect.height * this._textLayer.current.offsetHeight / boundingRect.height).toString(); + annoBox.ondragstart = this.startAnnotation; + annoBox.onpointerdown = this.pointerDownCancel; + if (this._annotationLayer.current) this._annotationLayer.current.append(annoBox); + this._currentAnnotations.push(annoBox); + } } } + if (sel.empty) { // Chrome + sel.empty(); + } else if (sel.removeAllRanges) { // Firefox + sel.removeAllRanges(); + } } } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); } + annotationPointerDown = (e: React.PointerEvent) => { + console.log("annotation"); + } + render() { return (
-
+
+
+
+
); } -- cgit v1.2.3-70-g09d2 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/client/views/pdf/PDFViewer.scss') 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 From 64f6a0d54656ded133af113746003d61eaa1d651 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Tue, 11 Jun 2019 15:04:47 -0400 Subject: pin annotations base --- src/client/views/pdf/PDFViewer.scss | 6 ++++ src/client/views/pdf/PDFViewer.tsx | 72 +++++++++++++++++++++++++++++++++++-- src/client/views/pdf/Page.tsx | 22 ++++++++++-- 3 files changed, 96 insertions(+), 4 deletions(-) (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 831e6add1..57be04b93 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -34,4 +34,10 @@ position: absolute; top: 0; overflow: visible hidden; +} + +.pdfViewer-pinAnnotation { + background-color: red; + position: absolute; + border-radius: 100%; } \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 092765324..bc773ebef 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -9,9 +9,11 @@ import { PDFBox } from "../nodes/PDFBox"; import Page from "./Page"; import { NumCast, Cast, BoolCast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; -import { DocUtils } from "../../documents/Documents"; +import { DocUtils, Docs } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { SelectionManager } from "../../util/SelectionManager"; +import { List } from "../../../new_fields/List"; +import { DocumentContentsView } from "../nodes/DocumentContentsView"; interface IPDFViewerProps { url: string; @@ -56,6 +58,8 @@ interface IViewerProps { url: string; } +const PinRadius = 25; + /** * Handles rendering and virtualization of the pdf */ @@ -193,6 +197,7 @@ class Viewer extends React.Component { pageLoaded={this.pageLoaded} parent={this.props.parent} renderAnnotations={this.renderAnnotations} + makePin={this.createPinAnnotation} {...this.props} /> )); let arr = Array.from(Array(numPages).keys()).map(() => false); @@ -229,6 +234,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} + makePin={this.createPinAnnotation} renderAnnotations={this.renderAnnotations} {...this.props} /> ); @@ -242,6 +248,33 @@ class Viewer extends React.Component { return; } + createPinAnnotation = (x: number, y: number): void => { + let targetDoc = Docs.TextDocument({ title: "New Pin Annotation" }); + + let pinAnno = new Doc(); + pinAnno.x = x; + pinAnno.y = y; + pinAnno.width = pinAnno.height = PinRadius; + pinAnno.page = this.getIndex(y); + pinAnno.target = targetDoc; + pinAnno.type = AnnotationTypes.Pin; + // this._annotations.push(pinAnno); + let annotations = DocListCast(this.props.parent.Document.annotations); + if (annotations && annotations.length) { + annotations.push(pinAnno); + this.props.parent.Document.annotations = new List(annotations); + } + else { + this.props.parent.Document.annotations = new List([pinAnno]); + } + // let pinAnno = document.createElement("div"); + // pinAnno.className = "pdfViewer-pinAnnotation"; + // pinAnno.style.top = (y - (radius / 2)).toString(); + // pinAnno.style.left = (x - (radius / 2)).toString(); + // pinAnno.style.height = pinAnno.style.width = radius.toString(); + // if (this._annotationLayer.current) this._annotationLayer.current.append(pinAnno); + } + // get the page index that the vertical offset passed in is on getIndex = (vOffset: number) => { if (this._loaded) { @@ -295,6 +328,18 @@ class Viewer extends React.Component { return counter; } + renderAnnotation = (anno: Doc): JSX.Element => { + let type = NumCast(anno.type); + switch (type) { + case AnnotationTypes.Pin: + return ; + case AnnotationTypes.Region: + return ; + default: + return
; + } + } + render() { return (
@@ -303,7 +348,7 @@ class Viewer extends React.Component {
- {this._annotations.map(anno => )} + {this._annotations.map(anno => this.renderAnnotation(anno))}
@@ -311,6 +356,10 @@ class Viewer extends React.Component { } } +export enum AnnotationTypes { + Region, Pin +} + interface IAnnotationProps { x: number; y: number; @@ -319,6 +368,25 @@ interface IAnnotationProps { document: Doc; } +class PinAnnotation extends React.Component { + @observable private _backgroundColor: string = "red"; + + pointerDown = (e: React.PointerEvent) => { + + } + + render() { + let targetDoc = Cast(this.props.document.targetDoc, Doc, Docs.TextDocument({ title: "New Pin Annotation" })); + return ( +
+ {/* */} +
+ ); + } +} + class RegionAnnotation extends React.Component { @observable private _backgroundColor: string = "red"; diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 5738889c4..fe7369aeb 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -13,6 +13,7 @@ import { emptyFunction } from "../../../Utils"; import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; import { listSpec } from "../../../new_fields/Schema"; import { menuBar } from "prosemirror-menu"; +import { AnnotationTypes } from "./PDFViewer"; interface IPageProps { pdf: Opt; @@ -22,6 +23,7 @@ interface IPageProps { pageLoaded: (index: number, page: Pdfjs.PDFPageViewport) => void; parent: PDFBox; renderAnnotations: (annotations: Doc[], removeOld: boolean) => void; + makePin: (x: number, y: number) => void; } @observer @@ -142,6 +144,7 @@ export default class Page extends React.Component { annoDoc.width = anno.offsetWidth; annoDoc.page = this.props.page; annoDoc.target = targetDoc; + annoDoc.type = AnnotationTypes.Region; annoDocs.push(annoDoc); DocUtils.MakeLink(annoDoc, targetDoc, `Annotation from ${StrCast(this.props.parent.Document.title)}`, "", StrCast(this.props.parent.Document.title)); anno.remove(); @@ -169,7 +172,6 @@ export default class Page extends React.Component { targetDoc.targetPage = this.props.page; // creates annotation documents for current highlights let annotationDocs = this.makeAnnotationDocuments(targetDoc); - console.log(annotationDocs); let targetAnnotations = DocListCast(this.props.parent.Document.annotations); if (targetAnnotations) { targetAnnotations.push(...annotationDocs); @@ -364,6 +366,22 @@ export default class Page extends React.Component { document.removeEventListener("pointerup", this.onSelectEnd); } + doubleClick = (e: React.MouseEvent) => { + let target: any = e.target; + // if double clicking text + if (target && target.parentElement === this._textLayer.current) { + // do something to select the paragraph ideally + } + + let current = this._textLayer.current; + if (current) { + let boundingRect = current.getBoundingClientRect(); + let x = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width); + let y = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height); + this.props.makePin(x, y); + } + } + renderAnnotation = (anno: Doc | undefined): HTMLDivElement => { let annoBox = document.createElement("div"); if (anno) { @@ -379,7 +397,7 @@ export default class Page extends React.Component { render() { return ( -
+
-- cgit v1.2.3-70-g09d2 From b631beaf11db59549e75cc38ae7288a0ba8845cf Mon Sep 17 00:00:00 2001 From: yipstanley Date: Thu, 13 Jun 2019 22:00:33 -0400 Subject: added collection back --- src/client/documents/Documents.ts | 2 +- src/client/views/collections/CollectionPDFView.tsx | 32 +++++++++++++++++++--- src/client/views/nodes/PDFBox.tsx | 13 ++++++++- src/client/views/pdf/PDFViewer.scss | 1 - src/client/views/pdf/PDFViewer.tsx | 30 ++++++++++++++------ src/client/views/pdf/Page.tsx | 2 +- 6 files changed, 64 insertions(+), 16 deletions(-) (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index dfbe2e136..91d3707f6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -170,7 +170,7 @@ export namespace Docs { return textProto; } function CreatePdfPrototype(): Doc { - let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", PDFBox.LayoutString(), + let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("annotations"), { x: 0, y: 0, width: 300, height: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1 }); return pdfProto; } diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 62e8adbec..4af89d780 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -1,4 +1,4 @@ -import { action, observable } from "mobx"; +import { action, observable, IReactionDisposer, reaction } from "mobx"; import { observer } from "mobx-react"; import { ContextMenu } from "../ContextMenu"; import "./CollectionPDFView.scss"; @@ -9,12 +9,36 @@ import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from ". import { emptyFunction } from "../../../Utils"; import { NumCast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; +import { HeightSym, WidthSym } from "../../../new_fields/Doc"; @observer export class CollectionPDFView extends React.Component { + private _reactionDisposer?: IReactionDisposer; + private _buttonTray: React.RefObject; + constructor(props: FieldViewProps) { super(props); + + this._buttonTray = React.createRef(); + } + + componentDidMount() { + this._reactionDisposer = reaction( + () => NumCast(this.props.Document.scrollY), + () => { + // let transform = this.props.ScreenToLocalTransform(); + if (this._buttonTray.current) { + // console.log(this._buttonTray.current.offsetHeight); + // console.log(NumCast(this.props.Document.scrollY)); + let scale = this.nativeWidth() / this.props.Document[WidthSym](); + this.props.Document.panY = NumCast(this.props.Document.scrollY); + // console.log(scale); + } + // console.log(this.props.Document[HeightSym]()); + }, + { fireImmediately: true } + ) } public static LayoutString(fieldKey: string = "data") { @@ -52,12 +76,12 @@ export class CollectionPDFView extends React.Component { private get uIButtons() { let ratio = (this.curPage - 1) / this.numPages * 100; return ( -
+
-
+ {/*
-
+
*/}
); } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 4214a6777..acb430deb 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -36,6 +36,10 @@ export class PDFBox extends DocComponent(PdfDocumen let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document; doc.nativeWidth = nw; doc.nativeHeight = nh; + let ccv = this.props.ContainingCollectionView; + if (ccv) { + ccv.props.Document.pdfHeight = nh; + } doc.height = nh * (doc[WidthSym]() / nw); } } @@ -45,6 +49,10 @@ export class PDFBox extends DocComponent(PdfDocumen if (e.currentTarget) { this._scrollY = e.currentTarget.scrollTop; // e.currentTarget.scrollTo({ top: 1000, behavior: "smooth" }); + let ccv = this.props.ContainingCollectionView; + if (ccv) { + ccv.props.Document.scrollY = this._scrollY; + } } } @@ -56,7 +64,10 @@ export class PDFBox extends DocComponent(PdfDocumen let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : ""); return (
e.stopPropagation()} className={classname}> {/*
*/} diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 57be04b93..a73df2d58 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -33,7 +33,6 @@ .pdfViewer-annotationLayer { position: absolute; top: 0; - overflow: visible hidden; } .pdfViewer-pinAnnotation { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index fe442c906..144fca9e0 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -188,8 +188,8 @@ class Viewer extends React.Component { else { this.props.parent.Document.annotations = new List([destDoc]); } + e.stopPropagation(); } - e.stopPropagation(); } componentWillUnmount = () => { @@ -465,7 +465,7 @@ class Viewer extends React.Component { {this._visibleElements}
-
+
{this._annotations.map(anno => this.renderAnnotation(anno))}
@@ -501,17 +501,31 @@ class PinAnnotation extends React.Component { componentDidMount = () => { let selected = this.props.document.selected; - if (selected && BoolCast(selected)) { + if (!BoolCast(selected)) { runInAction(() => { - this._backgroundColor = "green"; - this._display = "initial"; - }) + this._backgroundColor = "red"; + this._display = "none"; + }); + } + if (selected) { + if (BoolCast(selected)) { + runInAction(() => { + this._backgroundColor = "green"; + this._display = "initial"; + }); + } + else { + runInAction(() => { + this._backgroundColor = "red"; + this._display = "none"; + }); + } } else { runInAction(() => { this._backgroundColor = "red"; this._display = "none"; - }) + }); } } @@ -572,7 +586,7 @@ class PinAnnotation extends React.Component { PanelWidth={() => NumCast(this.props.parent.props.parent.Document.nativeWidth)} PanelHeight={() => NumCast(this.props.parent.props.parent.Document.nativeHeight)} focus={emptyFunction} - selectOnLoad={false} + selectOnLoad={true} parentActive={this.props.parent.props.parent.props.active} whenActiveChanged={this.props.parent.props.parent.props.whenActiveChanged} bringToFront={emptyFunction} diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 9e3bf4954..1c305caa3 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -257,7 +257,7 @@ export default class Page extends React.Component { let ratio = this._marqueeWidth / this._marqueeHeight; if (ratio > 1.5) { // vertical - transform = "rotate(90deg) scale(1, 2)"; + transform = "rotate(90deg) scale(1, 5)"; } else if (ratio < 0.5) { // horizontal -- cgit v1.2.3-70-g09d2 From 6a2cb71af332d4c782c1678750ba955757eaab45 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 14 Jun 2019 11:56:36 -0400 Subject: fixes --- src/client/views/nodes/PDFBox.scss | 6 ++++++ src/client/views/pdf/PDFViewer.scss | 2 ++ src/client/views/pdf/PDFViewer.tsx | 10 +++++----- src/client/views/pdf/Page.tsx | 3 +-- 4 files changed, 14 insertions(+), 7 deletions(-) (limited to 'src/client/views/pdf/PDFViewer.scss') diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index f4d455be7..bb1f534c6 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -41,6 +41,12 @@ pointer-events: none !important; } } +.textlayer { + span { + pointer-events: all !important; + user-select: text; + } +} .pdfBox-cont-interactive { pointer-events: all; diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index a73df2d58..53c33ce0b 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -35,6 +35,8 @@ top: 0; } + + .pdfViewer-pinAnnotation { background-color: red; position: absolute; diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 144fca9e0..4b949aa3e 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -103,22 +103,22 @@ class Viewer extends React.Component { @action componentDidMount = () => { - let wasSelected = this.props.parent.props.isSelected(); + let wasSelected = this.props.parent.props.active(); // reaction for when document gets (de)selected this._reactionDisposer = reaction( - () => [this.props.parent.props.isSelected(), this.startIndex], + () => [this.props.parent.props.active(), this.startIndex], () => { // if deselected, render images in place of pdf - if (wasSelected && !this.props.parent.props.isSelected()) { + if (wasSelected && !this.props.parent.props.active()) { this.saveThumbnail(); this._pointerEvents = "all"; } // if selected, render pdf - else if (!wasSelected && this.props.parent.props.isSelected()) { + else if (!wasSelected && this.props.parent.props.active()) { this.renderPages(this.startIndex, this.endIndex, true); this._pointerEvents = "none"; } - wasSelected = this.props.parent.props.isSelected(); + wasSelected = this.props.parent.props.active(); }, { fireImmediately: true } ); diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 1c305caa3..fa3f7baca 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -195,7 +195,6 @@ export default class Page extends React.Component { e.stopPropagation(); } else { - e.stopPropagation(); // set marquee x and y positions to the spatially transformed position let current = this._textLayer.current; if (current) { @@ -355,7 +354,7 @@ export default class Page extends React.Component { render() { return ( -
+
-- cgit v1.2.3-70-g09d2