diff options
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/KeyValueBox.tsx | 23 | ||||
| -rw-r--r-- | src/client/views/nodes/PDFNode.scss | 10 | ||||
| -rw-r--r-- | src/client/views/nodes/PDFNode.tsx | 151 | ||||
| -rw-r--r-- | src/fields/ListField.ts | 1 |
6 files changed, 91 insertions, 97 deletions
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index c51fba908..f01c538e6 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -35,6 +35,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp private _goldenLayout: any = null; private _containerRef = React.createRef<HTMLDivElement>(); private _fullScreen: any = null; + private _flush: boolean = false; constructor(props: SubCollectionViewProps) { super(props); @@ -164,7 +165,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); } - _flush: boolean = false; @action onPointerUp = (e: React.PointerEvent): void => { if (this._flush) { diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index fb9394d59..f496517f5 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -3,6 +3,7 @@ .collectionfreeformview > .jsx-parser{ position:absolute; height: 100%; + width: 100%; } border-style: solid; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index e8ebd50be..ac8c949a9 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -1,37 +1,18 @@ -import { IReactionDisposer } from 'mobx'; import { observer } from "mobx-react"; -import { EditorView } from 'prosemirror-view'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import { Document } from '../../../fields/Document'; -import { Opt, FieldWaiting } from '../../../fields/Field'; +import { FieldWaiting } from '../../../fields/Field'; import { KeyStore } from '../../../fields/KeyStore'; import { FieldView, FieldViewProps } from './FieldView'; -import { KeyValuePair } from "./KeyValuePair"; import "./KeyValueBox.scss"; +import { KeyValuePair } from "./KeyValuePair"; import React = require("react") @observer export class KeyValueBox extends React.Component<FieldViewProps> { public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) } - private _ref: React.RefObject<HTMLDivElement>; - private _editorView: Opt<EditorView>; - private _reactionDisposer: Opt<IReactionDisposer>; - - - constructor(props: FieldViewProps) { - super(props); - - this._ref = React.createRef(); - } - - - - shouldComponentUpdate() { - return false; - } - onPointerDown = (e: React.PointerEvent): void => { if (e.buttons === 1 && this.props.isSelected()) { diff --git a/src/client/views/nodes/PDFNode.scss b/src/client/views/nodes/PDFNode.scss index f4935cba9..18ebca952 100644 --- a/src/client/views/nodes/PDFNode.scss +++ b/src/client/views/nodes/PDFNode.scss @@ -1,9 +1,15 @@ .react-pdf__Page { transform-origin: left top; - //transform: scale(0.2, 0.2); position: absolute; } -.pdfButton-Tray { +.react-pdf__Document { + position: absolute; +} +.pdfNode-buttonTray { position:absolute; z-index: 25; +} +.pdfNode-contentContainer { + position: absolute; + transform-origin: "left top"; }
\ No newline at end of file diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx index b6829f086..648bd3e62 100644 --- a/src/client/views/nodes/PDFNode.tsx +++ b/src/client/views/nodes/PDFNode.tsx @@ -1,4 +1,4 @@ -import { action, observable, _interceptReads } from 'mobx'; +import { action, observable, _interceptReads, computed } from 'mobx'; import { observer } from "mobx-react"; import Measure from "react-measure"; import 'react-image-lightbox/style.css'; @@ -76,26 +76,29 @@ export class PDFNode extends React.Component<FieldViewProps> { private _highlightTool = React.createRef<HTMLButtonElement>(); //highlighter button reference private _highlightToolOn: boolean = false; + private _pdfCanvas: any; - @observable perPage: Object[] = []; //stores pageInfo - @observable pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno + @observable private _perPageInfo: Object[] = []; //stores pageInfo + @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno - @observable private page: number = 1; //default is the first page. - @observable private numPage: number = 1; //default number of pages - private _pdfCanvas: any; + @observable private _currAnno: any = [] + @observable private _page: number = 1; //default is the first page. + @observable private _numPages: number = 1; //default number of pages + @observable private _interactive: boolean = false; + @observable private _loaded: boolean = false; /** * for pagination backwards */ @action onPageBack = () => { - if (this.page > 1) { - this.page -= 1; - this.currAnno = []; - this.perPage[this.page] = this.pageInfo - this.pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this.perPage[this.page - 1]) { - this.pageInfo = this.perPage[this.page - 1]; + if (this._page > 1) { + this._page -= 1; + this._currAnno = []; + this._perPageInfo[this._page] = this._pageInfo + this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default + if (this._perPageInfo[this._page - 1]) { + this._pageInfo = this._perPageInfo[this._page - 1]; } this.saveThumbnail(); } @@ -106,13 +109,13 @@ export class PDFNode extends React.Component<FieldViewProps> { */ @action onPageForward = () => { - if (this.page < this.numPage) { - this.page += 1; - this.currAnno = []; - this.perPage[this.page - 2] = this.pageInfo; - this.pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this.perPage[this.page - 1]) { - this.pageInfo = this.perPage[this.page - 1]; + if (this._page < this._numPages) { + this._page += 1; + this._currAnno = []; + this._perPageInfo[this._page - 2] = this._pageInfo; + this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default + if (this._perPageInfo[this._page - 1]) { + this._pageInfo = this._perPageInfo[this._page - 1]; } this.saveThumbnail(); } @@ -196,7 +199,7 @@ export class PDFNode extends React.Component<FieldViewProps> { } } } - this.pageInfo.divs.push(obj); + this._pageInfo.divs.push(obj); } document.designMode = "off"; @@ -224,27 +227,26 @@ export class PDFNode extends React.Component<FieldViewProps> { /** * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES */ - @observable private currAnno: any = [] @action onEnter = (e: any) => { let span: HTMLSpanElement = e.toElement; let index: any; - this.pageInfo.divs.forEach((obj: any) => { + this._pageInfo.divs.forEach((obj: any) => { obj.spans.forEach((element: any) => { if (element == span) { if (!index) { - index = this.pageInfo.divs.indexOf(obj); + index = this._pageInfo.divs.indexOf(obj); } } }) }) - if (this.pageInfo.anno.length >= index + 1) { - if (this.currAnno.length == 0) { - this.currAnno.push(this.pageInfo.anno[index]); + if (this._pageInfo.anno.length >= index + 1) { + if (this._currAnno.length == 0) { + this._currAnno.push(this._pageInfo.anno[index]); } } else { - if (this.currAnno.length == 0) { //if there are no current annotation + if (this._currAnno.length == 0) { //if there are no current annotation let div = span.offsetParent; //@ts-ignore let divX = div.style.left @@ -253,9 +255,9 @@ export class PDFNode extends React.Component<FieldViewProps> { //slicing "px" from the end divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span) divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span) - let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this.pageInfo.divs} Annotations={this.pageInfo.anno} CurrAnno={this.currAnno} /> - this.pageInfo.anno.push(annotation); - this.currAnno.push(annotation); + let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this._pageInfo.divs} Annotations={this._pageInfo.anno} CurrAnno={this._currAnno} /> + this._pageInfo.anno.push(annotation); + this._currAnno.push(annotation); } } @@ -314,7 +316,7 @@ export class PDFNode extends React.Component<FieldViewProps> { if (this._mainDiv.current) { let sticky = <Sticky key={Utils.GenerateGuid()} Height={height} Width={width} X={this.initX} Y={this.initY} /> - this.pageInfo.area.push(sticky); + this._pageInfo.area.push(sticky); } this._toolOn = false; } @@ -384,19 +386,7 @@ export class PDFNode extends React.Component<FieldViewProps> { } - /** - * renders whole lot of shets, including pdf, stickies, and annotations. - */ - - reHighlight = () => { - let div = document.getElementsByClassName("react-pdf__Page__textContent"); - if (div) { - - } - - } - @observable _interactive: boolean = false; @action saveThumbnail = () => { @@ -413,6 +403,7 @@ export class PDFNode extends React.Component<FieldViewProps> { }, 1000); } + @action onLoaded = (page: any) => { if (this._mainDiv.current) { this._mainDiv.current.childNodes.forEach((element) => { @@ -429,10 +420,11 @@ export class PDFNode extends React.Component<FieldViewProps> { } }) } - this.numPage = page.transport.numPages - if (this.perPage.length == 0) { //Makes sure it only runs once - this.perPage = [...Array(this.numPage)] + this._numPages = page.transport.numPages + if (this._perPageInfo.length == 0) { //Makes sure it only runs once + this._perPageInfo = [...Array(this._numPages)] } + this._loaded = true; } @action @@ -448,9 +440,11 @@ export class PDFNode extends React.Component<FieldViewProps> { this.saveThumbnail(); } } - makeUIButtons() { + + @computed + get uIButtons() { return ( - <div className="pdfButton-tray" key="tray"> + <div className="pdfNode-buttonTray" key="tray"> <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button> <button className="pdfButton" onClick={this.onPageForward}>{">"}</button> <button className="pdfButton" onClick={this.selectionTool}>{"Area"}</button> @@ -462,32 +456,45 @@ export class PDFNode extends React.Component<FieldViewProps> { <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Black"}</button> </div>); } - makePdfRenderer() { - let proxy = this.makeImageProxyRenderer(); + + @computed + get pdfContent() { + const renderHeight = 2400; + let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); + let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; + return <div className="pdfNode-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}> + <Document file={window.origin + "/corsProxy/" + `${pdfUrl}`}> + <Measure onResize={this.setScaling}> + {({ measureRef }) => + <div className="pdfNode-page" ref={measureRef}> + <Page height={renderHeight} pageNumber={this._page} onLoadSuccess={this.onLoaded} /> + </div> + } + </Measure> + </Document> + </div >; + } + + @computed + get pdfRenderer() { + let proxy = this._loaded ? (null) : this.imageProxyRenderer; let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) { return proxy; } - const renderHeight = 2400; - let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; return [ - this.pageInfo.area.filter(() => this.pageInfo.area).map((element: any) => element), - this.currAnno.map((element: any) => element), - this.makeUIButtons(), - <div className="pdfContainer" key="container" style={{ transform: `scale(${xf}, ${xf})`, transformOrigin: "left top" }}> - <Document file={window.origin + "/corsProxy/" + `${pdfUrl}`}> - <Measure onResize={this.setScaling}> - {({ measureRef }) => - <div className="pdfNode-content" ref={measureRef}> - <Page height={renderHeight} pageNumber={this.page} onLoadSuccess={this.onLoaded} /> - </div> - } - </Measure> - </Document> - </div > + this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element), + this._currAnno.map((element: any) => element), + this.uIButtons, + <div key="pdfNode-contentShell"> + {this.pdfContent} + {proxy} + </div> ]; } - makeImageProxyRenderer() { + + @computed + get imageProxyRenderer() { let field = this.props.doc.Get(KeyStore.Thumbnail); if (field) { let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : @@ -496,13 +503,11 @@ export class PDFNode extends React.Component<FieldViewProps> { } return (null); } + render() { return ( - <div className="pdfNode-cont" ref={this._mainDiv} - onPointerDown={this.onPointerDown} - onPointerUp={this.onPointerUp} - > - {this.makePdfRenderer()} + <div className="pdfNode-cont" ref={this._mainDiv} onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} > + {this.pdfRenderer} </div > ); } diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts index 700600804..a71325a65 100644 --- a/src/fields/ListField.ts +++ b/src/fields/ListField.ts @@ -40,6 +40,7 @@ export class ListField<T extends Field> extends BasicField<T[]> { this.observeDisposer() } this.data = observable(value); + this.updateProxies(); this.observeList(); } |