diff options
Diffstat (limited to 'src/client/views/pdf/PDFViewer.tsx')
-rw-r--r-- | src/client/views/pdf/PDFViewer.tsx | 42 |
1 files changed, 17 insertions, 25 deletions
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 99d2ac484..02d310f7d 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -1,10 +1,8 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as Pdfjs from 'pdfjs-dist'; -import 'pdfjs-dist/web/pdf_viewer.css'; import * as PDFJSViewer from 'pdfjs-dist/web/pdf_viewer.mjs'; +import 'pdfjs-dist/webpack.mjs'; // sets the PDF workerSrc import * as React from 'react'; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, returnAll, returnFalse, returnNone, returnZero, smoothScroll } from '../../../ClientUtils'; import { CreateLinkToActiveAudio, Doc, DocListCast, Opt } from '../../../fields/Doc'; @@ -32,12 +30,12 @@ import { GPTPopup } from './GPTPopup/GPTPopup'; import './PDFViewer.scss'; import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT'; import ReactLoading from 'react-loading'; -import html2canvas from 'html2canvas'; -import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'; +// import html2canvas from 'html2canvas'; +// import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'; // pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`; // The workerSrc property shall be specified. -Pdfjs.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@4.4.168/build/pdf.worker.mjs'; +// Pdfjs.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@4.4.168/build/pdf.worker.mjs'; interface IViewerProps extends FieldViewProps { pdfBox: PDFBox; @@ -105,14 +103,14 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { // }; @observable _pageSizes: { width: number; height: number }[] = []; - @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + @observable _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>(); @observable _textSelecting = true; @observable _showWaiting = true; @observable Index: number = -1; @observable private _loading = false; - private _pdfViewer: any; - private _styleRule: any; // stylesheet rule for making hyperlinks clickable + private _pdfViewer!: PDFJSViewer.PDFViewer; + private _styleRule: number | undefined; // stylesheet rule for making hyperlinks clickable private _retries = 0; // number of times tried to create the PDF viewer private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void); private _marqueeref = React.createRef<MarqueeAnnotator>(); @@ -149,7 +147,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { }); this.setupPdfJsViewer(); this._mainCont.current?.addEventListener('scroll', e => { - (e.target as any).scrollLeft = 0; + (e.target as HTMLElement).scrollLeft = 0; }); this._disposers.layout_autoHeight = reaction( @@ -253,18 +251,12 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { }; pagesinit = () => { - if (this._pdfViewer._setDocumentViewerElement?.offsetParent) { - runInAction(() => { - this._pdfViewer.currentScaleValue = this._props.layoutDoc._freeform_scale = 1; - }); - this.gotoPage(NumCast(this._props.Document._layout_curPage, 1)); - } document.removeEventListener('pagesinit', this.pagesinit); let quickScroll: { loc?: string; easeFunc?: 'ease' | 'linear' } | undefined = { loc: this._initialScroll ? this._initialScroll.loc?.toString() : '', easeFunc: this._initialScroll ? this._initialScroll.easeFunc : undefined }; this._disposers.scale = reaction( () => NumCast(this._props.layoutDoc._freeform_scale, 1), scale => { - this._pdfViewer.currentScaleValue = scale; + this._pdfViewer.currentScaleValue = scale + ''; }, { fireImmediately: true } ); @@ -363,7 +355,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { } }; - @observable private _scrollTimer: any = undefined; + @observable private _scrollTimer: NodeJS.Timeout | undefined = undefined; onScroll = () => { if (this._mainCont.current && !this._forcedScroll) { @@ -372,7 +364,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { this._props.layoutDoc._layout_scrollTop = this._mainCont.current.scrollTop; } this._ignoreScroll = false; - if (this._scrollTimer) clearTimeout(this._scrollTimer); // wait until a scrolling pause, then create an anchor to audio + this._scrollTimer && clearTimeout(this._scrollTimer); // wait until a scrolling pause, then create an anchor to audio this._scrollTimer = setTimeout(() => { CreateLinkToActiveAudio(() => this._props.pdfBox.getAnchor(true)!, false); this._scrollTimer = undefined; @@ -432,8 +424,8 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { this._props.select(false); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); this.isAnnotating = true; - const target = e.target as any; - if (e.target && (target.className.includes('endOfContent') || (target.parentElement.className !== 'textLayer' && target.parentElement.parentElement?.className !== 'textLayer'))) { + const target = e.target as HTMLElement; + if (e.target && (target.className.includes('endOfContent') || (target.parentElement?.className !== 'textLayer' && target.parentElement?.parentElement?.className !== 'textLayer'))) { this._textSelecting = false; } else { // if textLayer is hit, then we select text instead of using a marquee so clear out the marquee. @@ -653,7 +645,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { e.stopPropagation(); if (e.ctrlKey) { const curScale = Number(this._pdfViewer.currentScaleValue); - this._pdfViewer.currentScaleValue = Math.max(1, Math.min(10, curScale - (curScale * e.deltaY) / 1000)); + this._pdfViewer.currentScaleValue = Math.max(1, Math.min(10, curScale - (curScale * e.deltaY) / 1000)) + ''; this._props.layoutDoc._freeform_scale = Number(this._pdfViewer.currentScaleValue); } } @@ -682,7 +674,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); transparentFilter = () => [...this._props.childFilters(), ClientUtils.TransparentBackgroundFilter]; opaqueFilter = () => [...this._props.childFilters(), ClientUtils.noDragDocsFilter, ...(SnappingManager.CanEmbed && this._props.isContentActive() ? [] : [ClientUtils.OpaqueBackgroundFilter])]; - childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { + childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { if (doc instanceof Doc && property === StyleProp.PointerEvents) { if (this.inlineTextAnnotations.includes(doc) || this._props.isContentActive() === false) return 'none'; const isInk = doc.layout_isSvg && !props?.LayoutTemplateString; @@ -693,11 +685,11 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { }; childPointerEvents = () => (this._props.isContentActive() !== false ? 'all' : 'none'); - renderAnnotations = (childFilters: () => string[], mixBlendMode?: any, display?: string) => ( + renderAnnotations = (childFilters: () => string[], mixBlendMode?: 'hard-light' | 'multiply', display?: string) => ( <div className="pdfViewerDash-overlay" style={{ - mixBlendMode: mixBlendMode, + mixBlendMode, display: display, pointerEvents: Doc.ActiveTool !== InkTool.None ? 'all' : undefined, }}> |