From 93ee735e435de5949a0eec54c07537c4de2eedf4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 7 Jan 2025 01:24:55 -0500 Subject: fixed pdfs/marqueeAnnotator so that you can add rectangle annotations. --- src/client/views/pdf/PDFViewer.tsx | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) (limited to 'src/client/views/pdf') diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 722492e8d..ca7f72811 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -30,6 +30,7 @@ import { GPTPopup } from './GPTPopup/GPTPopup'; import './PDFViewer.scss'; import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT'; import ReactLoading from 'react-loading'; +import { Transform } from '../../util/Transform'; interface IViewerProps extends FieldViewProps { pdfBox: PDFBox; @@ -40,7 +41,7 @@ interface IViewerProps extends FieldViewProps { pdf: Pdfjs.PDFDocumentProxy; url: string; sidebarAddDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean; - loaded?: (nw: number, nh: number, np: number) => void; + loaded: (p: { width: number; height: number }, pages: number) => void; // eslint-disable-next-line no-use-before-define setPdfViewer: (view: PDFViewer) => void; anchorMenuClick?: () => undefined | ((anchor: Doc) => void); @@ -151,24 +152,21 @@ export class PDFViewer extends ObservableReactComponent { } initialLoad = () => { + const page0or180 = (page: { rotate: number }) => page.rotate === 0 || page.rotate === 180; if (this._pageSizes.length === 0) { const devicePixelRatio = window.devicePixelRatio; document.documentElement?.style.setProperty('--devicePixelRatio', window.devicePixelRatio.toString()); // set so that css can use this to adjust various PDFJs divs Promise.all( numberRange(this._props.pdf.numPages).map(i => - this._props.pdf.getPage(i + 1).then(page => { - const page0or180 = page.rotate === 0 || page.rotate === 180; - return { - width: page.view[page0or180 ? 2 : 3] * devicePixelRatio - page.view[page0or180 ? 0 : 1] * devicePixelRatio, - height: page.view[page0or180 ? 3 : 2] * devicePixelRatio - page.view[page0or180 ? 1 : 0] * devicePixelRatio, - }; - }) + this._props.pdf.getPage(i + 1).then(page => ({ + width: (page.view[page0or180(page) ? 2 : 3] - page.view[page0or180(page) ? 0 : 1]) * devicePixelRatio, + height: (page.view[page0or180(page) ? 3 : 2] - page.view[page0or180(page) ? 1 : 0]) * devicePixelRatio, + })) ) ).then( action(pages => { this._pageSizes = pages; - const lastPage = pages.lastElement(); - this._props.loaded?.(lastPage.width, lastPage.height, this._props.pdf.numPages); + this._props.loaded(pages.lastElement(), this._props.pdf.numPages); this.createPdfViewer(); }) ); @@ -599,6 +597,7 @@ export class PDFViewer extends ObservableReactComponent { } savedAnnotations = () => this._savedAnnotations; addDocumentWrapper = (doc: Doc | Doc[]) => this._props.addDocument!(doc); + screenToMarqueeXf = () => this.props.pdfBox.DocumentView?.()?.screenToContentsTransform().scale(Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS) ?? Transform.Identity(); render() { TraceMobx(); return ( @@ -618,17 +617,17 @@ export class PDFViewer extends ObservableReactComponent { {this.annotationLayer} {this.overlayLayer} {this._showWaiting ? : null} - {!this._mainCont.current || !this._annotationLayer.current ? null : ( + {!this._mainCont.current || !this._annotationLayer.current || !this.props.pdfBox.DocumentView ? null : (