aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/pdf
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/pdf')
-rw-r--r--src/client/views/pdf/AnchorMenu.tsx4
-rw-r--r--src/client/views/pdf/Annotation.tsx4
-rw-r--r--src/client/views/pdf/GPTPopup/GPTPopup.tsx9
-rw-r--r--src/client/views/pdf/PDFViewer.tsx43
4 files changed, 26 insertions, 34 deletions
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 96f025ca0..f5f758ad2 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -25,7 +25,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
private _commentRef = React.createRef<HTMLDivElement>();
private _cropRef = React.createRef<HTMLDivElement>();
- constructor(props: any) {
+ constructor(props: AntimodeMenuProps) {
super(props);
makeObservable(this);
AnchorMenu.Instance = this;
@@ -50,7 +50,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
public OnAudio: (e: PointerEvent) => void = unimplementedFunction;
public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
public StartCropDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
- public Highlight: (color: string) => Opt<Doc> = (/* color: string */) => undefined;
+ public Highlight: (color: string) => void = emptyFunction;
public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = emptyFunction;
public Delete: () => void = unimplementedFunction;
public PinToPres: () => void = unimplementedFunction;
diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx
index 7dd4047c1..1891cfd4c 100644
--- a/src/client/views/pdf/Annotation.tsx
+++ b/src/client/views/pdf/Annotation.tsx
@@ -13,6 +13,7 @@ import { FieldViewProps } from '../nodes/FieldView';
import { OpenWhere } from '../nodes/OpenWhere';
import { AnchorMenu } from './AnchorMenu';
import './Annotation.scss';
+import { Property } from 'csstype';
interface IRegionAnnotationProps {
x: number;
@@ -45,7 +46,7 @@ interface IAnnotationProps extends FieldViewProps {
annoDoc: Doc;
containerDataDoc: Doc;
fieldKey: string;
- pointerEvents?: () => Opt<string>;
+ pointerEvents?: () => Opt<Property.PointerEvents>;
}
@observer
export class Annotation extends ObservableReactComponent<IAnnotationProps> {
@@ -111,6 +112,7 @@ export class Annotation extends ObservableReactComponent<IAnnotationProps> {
outline = () => (this.linkHighlighted ? 'solid 1px lightBlue' : undefined);
background = () => (this._props.annoDoc[Highlight] ? 'orange' : StrCast(this._props.annoDoc.backgroundColor));
render() {
+ const forceRenderHack = [this.background(), this.outline(), this.opacity()]; // forces a re-render when these change -- because RegionAnnotation doesn't do this internally..
return (
<div style={{ display: this._props.annoDoc.textCopied && !Doc.GetBrushHighlightStatus(this._props.annoDoc) ? 'none' : undefined }}>
{StrListCast(this._props.annoDoc.text_inlineAnnotations)
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 13196f06d..002e82332 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, IconButton, Type } from 'browndash-components';
import { action, makeObservable, observable } from 'mobx';
@@ -269,7 +268,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false;
- public createFilteredDoc: (axes?: any) => boolean = () => false;
+ public createFilteredDoc: (axes?: string[]) => boolean = () => false;
public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
@observable quizRespText: string = ''
@@ -439,7 +438,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
* Transfers the image urls to actual image docs
*/
private transferToImage = (source: string) => {
- const textAnchor = this.imgTargetDoc;
+ const textAnchor = this.textAnchor ?? this.imgTargetDoc;
if (!textAnchor) return;
const newDoc = Docs.Create.ImageDocument(source, {
x: NumCast(textAnchor.x) + NumCast(textAnchor._width) + 10,
@@ -641,8 +640,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{this.heading('GENERATED IMAGE')}
<div className="image-content-wrapper">
- {this.imgUrls.map(rawSrc => (
- <div className="img-wrapper">
+ {this.imgUrls.map((rawSrc, i) => (
+ <div key={rawSrc[0] + i} className="img-wrapper">
<div className="img-container">
<img key={rawSrc[0]} src={rawSrc[0]} width={150} height={150} alt="dalle generation" />
</div>
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 709e9a23c..dee0edfae 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';
@@ -30,10 +28,8 @@ import { AnchorMenu } from './AnchorMenu';
import { Annotation } from './Annotation';
import { GPTPopup } from './GPTPopup/GPTPopup';
import './PDFViewer.scss';
-
-// pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`;
// The workerSrc property shall be specified.
-Pdfjs.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@4.2.67/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;
@@ -64,13 +60,13 @@ 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;
- 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>();
@@ -107,7 +103,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(
@@ -211,18 +207,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 }
);
@@ -321,7 +311,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) {
@@ -330,7 +320,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;
@@ -390,8 +380,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.
@@ -491,7 +481,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);
}
}
@@ -520,21 +510,22 @@ 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;
- return isInk ? 'visiblePainted' : 'all';
+ if (isInk) return 'visiblePainted';
+ //return isInk ? 'visiblePainted' : 'all';
}
return this._props.styleProvider?.(doc, props, property);
};
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,
}}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 10:00:43 +0000