From 4ccb4dc950600cc0f73af066edc7aff31e03f8ae Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 29 Mar 2021 23:21:29 -0400 Subject: simplified PDFViewer to use props from PDFbox --- src/client/views/nodes/PDFBox.tsx | 3 ++ src/client/views/pdf/PDFViewer.tsx | 97 +++++++++++++++++--------------------- 2 files changed, 46 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index d4cd44a61..107959ebb 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -238,6 +238,9 @@ export class PDFBox extends ViewBoxAnnotatableComponent
; -const PdfDocument = makeInterface(documentSchema, pageSchema); - interface IViewerProps extends FieldViewProps { + Document: Doc; + rootDoc: Doc; + dataDoc: Doc; + layoutDoc: Doc; + fieldKey: string; pdf: Pdfjs.PDFDocumentProxy; url: string; startupLive: boolean; @@ -62,7 +54,7 @@ interface IViewerProps extends FieldViewProps { * Handles rendering and virtualization of the pdf */ @observer -export class PDFViewer extends ViewBoxAnnotatableComponent(PdfDocument) { +export class PDFViewer extends React.Component { static _annotationStyle: any = addStyleSheet(); @observable private _pageSizes: { width: number, height: number }[] = []; @observable private _savedAnnotations = new ObservableMap(); @@ -93,22 +85,24 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; private _forcedScroll = true; + + // key where data is stored @computed get allAnnotations() { - return DocUtils.FilterDocs(DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]), this.props.docFilters(), this.props.docRangeFilters(), undefined); + return DocUtils.FilterDocs(DocListCast(this.props.dataDoc[this.props.fieldKey + "-annotations"]), this.props.docFilters(), this.props.docRangeFilters(), undefined); } @computed get inlineTextAnnotations() { return this.allAnnotations.filter(a => a.textInlineAnnotations); } componentDidMount = async () => { // change the address to be the file address of the PNG version of each page // file address of the pdf - const { url: { href } } = Cast(this.dataDoc[this.props.fieldKey], PdfField)!; + const { url: { href } } = Cast(this.props.dataDoc[this.props.fieldKey], PdfField)!; const { url: relative } = this.props; if (relative.includes("/pdfs/")) { const pathComponents = relative.split("/pdfs/")[1].split("/"); const coreFilename = pathComponents.pop()!.split(".")[0]; const params: any = { coreFilename, - pageNum: Math.min(this.props.pdf.numPages, Math.max(1, this.Document._curPage || 1)), + pageNum: Math.min(this.props.pdf.numPages, Math.max(1, NumCast(this.props.Document._curPage, 1))), }; if (pathComponents.length) { params.subtree = `${pathComponents.join("/")}/`; @@ -117,7 +111,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent (e.target as any).scrollLeft = 0); - this._disposers.autoHeight = reaction(() => this.layoutDoc._autoHeight, + this._disposers.autoHeight = reaction(() => this.props.layoutDoc._autoHeight, () => { - this.layoutDoc._nativeHeight = NumCast(this.props.Document[this.fieldKey + "-nativeHeight"]); - this.props.setHeight(NumCast(this.props.Document[this.fieldKey + "-nativeHeight"]) * (this.props.scaling?.() || 1)); + this.props.layoutDoc._nativeHeight = NumCast(this.props.Document[this.props.fieldKey + "-nativeHeight"]); + this.props.setHeight(NumCast(this.props.Document[this.props.fieldKey + "-nativeHeight"]) * (this.props.scaling?.() || 1)); }); - this._disposers.searchMatch = reaction(() => Doc.IsSearchMatch(this.rootDoc), + this._disposers.searchMatch = reaction(() => Doc.IsSearchMatch(this.props.rootDoc), m => { if (m) (this._lastSearch = true) && this.search(Doc.SearchQuery(), m.searchMatch > 0); else !(this._lastSearch = false) && setTimeout(() => !this._lastSearch && this.search("", false, true), 200); @@ -146,7 +140,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this.Document._curPage, + this._disposers.curPage = reaction(() => Cast(this.props.Document._curPage, "number", null), (page) => page !== undefined && page !== this._pdfViewer?.currentPageNumber && this.gotoPage(page), { fireImmediately: true } ); @@ -158,7 +152,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { - if (this.isContentActive() && e.clipboardData) { + if (this.props.isContentActive() && e.clipboardData) { e.clipboardData.setData("text/plain", this._selectionText); e.preventDefault(); } @@ -180,7 +174,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent size + page.height, 0) * 96 / 72; + this.props.Document.scrollHeight = this._pageSizes.reduce((size, page) => size + page.height, 0) * 96 / 72; } } @@ -189,8 +183,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { const mainCont = this._mainCont.current; let focusSpeed: Opt; - if (doc !== this.rootDoc && mainCont && this._pdfViewer) { - const scrollTo = Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1)); + if (doc !== this.props.rootDoc && mainCont && this._pdfViewer) { + const scrollTo = Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.props.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1)); if (scrollTo !== undefined) { focusSpeed = 500; @@ -212,7 +206,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent ScriptCast(this.Document.filterScript), + () => ScriptCast(this.props.Document.filterScript), action(scriptField => { const oldScript = this._script.originalScript; this._script = scriptField?.script.compiled ? scriptField.script : CompileScript("return true") as CompiledScript; @@ -228,16 +222,16 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { if (this._pdfViewer._setDocumentViewerElement.offsetParent) { runInAction(() => this._pdfViewer.currentScaleValue = this._zoomed = 1); - this.gotoPage(this.Document._curPage || 1); + this.gotoPage(NumCast(this.props.Document._curPage, 1)); } document.removeEventListener("pagesinit", this.pagesinit); var quickScroll: string | undefined = this._initialScroll ? this._initialScroll.toString() : ""; this._disposers.scroll = reaction( - () => Math.abs(NumCast(this.Document._scrollTop)), + () => Math.abs(NumCast(this.props.Document._scrollTop)), (pos) => { if (!this._ignoreScroll) { (this._showCover || this._showWaiting) && this.setupPdfJsViewer(); - const viewTrans = quickScroll ?? StrCast(this.Document._viewTransition); + const viewTrans = quickScroll ?? StrCast(this.props.Document._viewTransition); const durationMiliStr = viewTrans.match(/([0-9]*)ms/); const durationSecStr = viewTrans.match(/([0-9.]*)s/); const duration = durationMiliStr ? Number(durationMiliStr[1]) : durationSecStr ? Number(durationSecStr[1]) * 1000 : 0; @@ -324,7 +318,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { - return this._mainCont.current ? this.props.ScreenToLocalTransform().translate(0, this.layoutDoc._scrollTop || 0) : this.props.ScreenToLocalTransform(); + return this._mainCont.current ? this.props.ScreenToLocalTransform().translate(0, NumCast(this.props.layoutDoc._scrollTop)) : this.props.ScreenToLocalTransform(); } onClick = (e: React.MouseEvent) => { @@ -469,12 +463,12 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { if (!this.props.Document[HeightSym]() || !Doc.NativeHeight(this.props.Document)) { setTimeout((() => { - this.Document._height = this.Document[WidthSym]() * this._coverPath.height / this._coverPath.width; - Doc.SetNativeWidth(this.Document, (Doc.NativeWidth(this.Document) || 0) * this._coverPath.height / this._coverPath.width); + this.props.Document._height = this.props.Document[WidthSym]() * this._coverPath.height / this._coverPath.width; + Doc.SetNativeWidth(this.props.Document, (Doc.NativeWidth(this.props.Document) || 0) * this._coverPath.height / this._coverPath.width); }).bind(this), 0); } - const nativeWidth = Doc.NativeWidth(this.Document); - const nativeHeight = Doc.NativeHeight(this.Document); + const nativeWidth = Doc.NativeWidth(this.props.Document); + const nativeHeight = Doc.NativeHeight(this.props.Document); const resolved = Utils.prepend(this._coverPath.path); return this._coverPath.path = "http://www.cs.brown.edu/~bcz/face.gif")} onLoad={action(() => this._showWaiting = false)} style={{ position: "absolute", display: "inline-block", top: 0, left: 0, width: `${nativeWidth}px`, height: `${nativeHeight}px` }} />; @@ -482,7 +476,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { - if (this.isContentActive(true)) { + if (this.props.isContentActive(true)) { e.stopPropagation(); if (e.ctrlKey) { const curScale = Number(this._pdfViewer.currentScaleValue); @@ -493,9 +487,9 @@ export class PDFViewer extends ViewBoxAnnotatableComponent + return
{this.inlineTextAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => - ) + ) }
; } @@ -522,19 +516,14 @@ export class PDFViewer extends ViewBoxAnnotatableComponent -
this.props.addDocument!(doc)} finishMarquee={this.finishMarquee} docView={this.props.docViewPath().lastElement()} getPageFromScroll={this.getPageFromScroll} -- cgit v1.2.3-70-g09d2