aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/pdf/PDFViewer.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/pdf/PDFViewer.tsx')
-rw-r--r--src/client/views/pdf/PDFViewer.tsx42
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,
}}>