aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionPDFView.tsx48
-rw-r--r--src/client/views/nodes/DocumentView.tsx1
-rw-r--r--src/client/views/nodes/FieldView.tsx2
-rw-r--r--src/client/views/nodes/PDFBox.tsx62
-rw-r--r--src/client/views/pdf/PDFViewer.tsx6
-rw-r--r--src/client/views/pdf/Page.tsx12
6 files changed, 72 insertions, 59 deletions
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index 4af89d780..b62d3f7bb 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -1,19 +1,21 @@
-import { action, observable, IReactionDisposer, reaction } from "mobx";
+import { action, IReactionDisposer, observable, reaction } from "mobx";
import { observer } from "mobx-react";
+import { WidthSym } from "../../../new_fields/Doc";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { NumCast } from "../../../new_fields/Types";
+import { emptyFunction } from "../../../Utils";
import { ContextMenu } from "../ContextMenu";
+import { FieldView, FieldViewProps } from "../nodes/FieldView";
+import { CollectionBaseView, CollectionRenderProps, CollectionViewType } from "./CollectionBaseView";
+import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
import "./CollectionPDFView.scss";
import React = require("react");
-import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
-import { FieldView, FieldViewProps } from "../nodes/FieldView";
-import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from "./CollectionBaseView";
-import { emptyFunction } from "../../../Utils";
-import { NumCast } from "../../../new_fields/Types";
-import { Id } from "../../../new_fields/FieldSymbols";
-import { HeightSym, WidthSym } from "../../../new_fields/Doc";
+import { PDFBox } from "../nodes/PDFBox";
@observer
export class CollectionPDFView extends React.Component<FieldViewProps> {
+ private _pdfBox?: PDFBox;
private _reactionDisposer?: IReactionDisposer;
private _buttonTray: React.RefObject<HTMLDivElement>;
@@ -46,31 +48,12 @@ export class CollectionPDFView extends React.Component<FieldViewProps> {
}
@observable _inThumb = false;
- private set curPage(value: number) { this.props.Document.curPage = value; }
+ private set curPage(value: number) { this._pdfBox && this._pdfBox.GotoPage(value); }
private get curPage() { return NumCast(this.props.Document.curPage, -1); }
private get numPages() { return NumCast(this.props.Document.numPages); }
- @action onPageBack = () => this.curPage > 1 ? (this.props.Document.curPage = this.curPage - 1) : -1;
- @action onPageForward = () => this.curPage < this.numPages ? (this.props.Document.curPage = this.curPage + 1) : -1;
+ @action onPageBack = () => this._pdfBox && this._pdfBox.BackPage();
+ @action onPageForward = () => this._pdfBox && this._pdfBox.ForwardPage();
- @action
- onThumbDown = (e: React.PointerEvent) => {
- document.addEventListener("pointermove", this.onThumbMove, false);
- document.addEventListener("pointerup", this.onThumbUp, false);
- e.stopPropagation();
- this._inThumb = true;
- }
- @action
- onThumbMove = (e: PointerEvent) => {
- let pso = (e.clientY - (e as any).target.parentElement.getBoundingClientRect().top) / (e as any).target.parentElement.getBoundingClientRect().height;
- this.curPage = Math.trunc(Math.min(this.numPages, pso * this.numPages + 1));
- e.stopPropagation();
- }
- @action
- onThumbUp = (e: PointerEvent) => {
- this._inThumb = false;
- document.removeEventListener("pointermove", this.onThumbMove);
- document.removeEventListener("pointerup", this.onThumbUp);
- }
nativeWidth = () => NumCast(this.props.Document.nativeWidth);
nativeHeight = () => NumCast(this.props.Document.nativeHeight);
private get uIButtons() {
@@ -92,11 +75,14 @@ export class CollectionPDFView extends React.Component<FieldViewProps> {
}
}
+ setPdfBox = (pdfBox: PDFBox) => { this._pdfBox = pdfBox; };
+
+
private subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => {
let props = { ...this.props, ...renderProps };
return (
<>
- <CollectionFreeFormView {...props} CollectionView={this} />
+ <CollectionFreeFormView {...props} setPdfBox={this.setPdfBox} CollectionView={this} />
{renderProps.active() ? this.uIButtons : (null)}
</>
);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 583fa3e1a..0d5df550a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -453,7 +453,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
render() {
var scaling = this.props.ContentScaling();
var nativeWidth = this.nativeWidth > 0 ? `${this.nativeWidth}px` : "100%";
- let ph = this.props.PanelHeight();
var nativeHeight = BoolCast(this.props.Document.ignoreAspect) ? this.props.PanelHeight() / this.props.ContentScaling() : this.nativeHeight > 0 ? `${this.nativeHeight}px` : "100%";
return (
<div className={`documentView-node${this.props.isTopMost ? "-topmost" : ""}`}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 5a83de8e3..cf6d2012f 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -18,6 +18,7 @@ import { FormattedTextBox } from "./FormattedTextBox";
import { IconBox } from "./IconBox";
import { ImageBox } from "./ImageBox";
import { VideoBox } from "./VideoBox";
+import { PDFBox } from "./PDFBox";
//
@@ -44,6 +45,7 @@ export interface FieldViewProps {
PanelWidth: () => number;
PanelHeight: () => number;
setVideoBox?: (player: VideoBox) => void;
+ setPdfBox?: (player: PDFBox) => void;
}
@observer
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index b9ccd79e4..243982a3b 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -1,25 +1,22 @@
-import * as htmlToImage from "html-to-image";
-import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
+import { action, IReactionDisposer, observable, reaction, trace, untracked } from 'mobx';
import { observer } from "mobx-react";
import 'react-image-lightbox/style.css';
-import Measure from "react-measure";
+import { WidthSym } from "../../../new_fields/Doc";
+import { makeInterface } from "../../../new_fields/Schema";
+import { Cast, NumCast } from "../../../new_fields/Types";
+import { PdfField } from "../../../new_fields/URLField";
//@ts-ignore
// import { Document, Page } from "react-pdf";
// import 'react-pdf/dist/Page/AnnotationLayer.css';
import { RouteStore } from "../../../server/RouteStore";
import { DocComponent } from "../DocComponent";
import { InkingControl } from "../InkingControl";
+import { PDFViewer } from "../pdf/PDFViewer";
import { positionSchema } from "./DocumentView";
import { FieldView, FieldViewProps } from './FieldView';
import { pageSchema } from "./ImageBox";
import "./PDFBox.scss";
import React = require("react");
-import { NumCast, StrCast, Cast } from "../../../new_fields/Types";
-import { makeInterface } from "../../../new_fields/Schema";
-import { PDFViewer } from "../pdf/PDFViewer";
-import { PdfField } from "../../../new_fields/URLField";
-import { HeightSym, WidthSym } from "../../../new_fields/Doc";
-import { CollectionStackingView } from "../collections/CollectionStackingView";
type PdfDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>;
const PdfDocument = makeInterface(positionSchema, pageSchema);
@@ -31,19 +28,50 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
@observable private _alt = false;
@observable private _scrollY: number = 0;
private _reactionDisposer?: IReactionDisposer;
- _targetDiv: any = undefined;
- componentDidMount: () => void = () => {
+ componentDidMount() {
+ if (this.props.setPdfBox) this.props.setPdfBox(this);
+ }
+
+ public GetPage() {
+ return Math.floor(NumCast(this.props.Document.scrollY) / NumCast(this.Document.pdfHeight)) + 1;
+ }
+ public BackPage() {
+ let cp = Math.ceil(NumCast(this.props.Document.scrollY) / NumCast(this.Document.pdfHeight)) + 1;
+ cp = cp - 1;
+ if (cp > 0) {
+ this.props.Document.curPage = cp;
+ this.props.Document.scrollY = (cp - 1) * NumCast(this.Document.pdfHeight);
+ }
+ }
+ public GotoPage(p: number) {
+ if (p > 0 && p <= NumCast(this.props.Document.numPages)) {
+ this.props.Document.curPage = p;
+ this.props.Document.scrollY = (p - 1) * NumCast(this.Document.pdfHeight);
+ }
+ }
+
+ public ForwardPage() {
+ let cp = this.GetPage() + 1;
+ if (cp <= NumCast(this.props.Document.numPages)) {
+ this.props.Document.curPage = cp;
+ this.props.Document.scrollY = (cp - 1) * NumCast(this.Document.pdfHeight);
+ }
+ }
+
+ createRef = (ele: HTMLDivElement | null) => {
if (this._reactionDisposer) this._reactionDisposer();
- this._reactionDisposer = reaction(() => this.props.Document.scrollY, () =>
- this._targetDiv && this._targetDiv.scrollTo({ top: NumCast(this.Document.scrollY), behavior: "smooth" })
- );
+ this._reactionDisposer = reaction(() => this.props.Document.scrollY, () => {
+ ele && ele.scrollTo({ top: NumCast(this.Document.scrollY), behavior: "smooth" });
+ });
}
- loaded = (nw: number, nh: number) => {
+ loaded = (nw: number, nh: number, np: number) => {
if (this.props.Document) {
- if (this.props.Document.nativeWidth && this.props.Document.nativeHeight) return;
let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
+ console.log("pages = " + np);
+ doc.numPages = np;
+ if (doc.nativeWidth && doc.nativeHeight) return;
let oldaspect = NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1);
doc.nativeWidth = nw;
if (doc.nativeHeight) doc.nativeHeight = nw * oldaspect;
@@ -59,7 +87,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
@action
onScroll = (e: React.UIEvent<HTMLDivElement>) => {
if (e.currentTarget) {
- this._targetDiv = e.currentTarget;
this._scrollY = e.currentTarget.scrollTop;
// e.currentTarget.scrollTo({ top: 1000, behavior: "smooth" });
let ccv = this.props.ContainingCollectionView;
@@ -82,6 +109,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
overflowY: "scroll", overflowX: "hidden",
marginTop: `${NumCast(this.props.ContainingCollectionView!.props.Document.panY)}px`
}}
+ ref={this.createRef}
onWheel={(e: React.WheelEvent) => e.stopPropagation()} className={classname}>
<PDFViewer url={pdfUrl.url.href} loaded={this.loaded} scrollY={this._scrollY} parent={this} />
{/* <div style={{ width: "100px", height: "300px" }}></div> */}
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 17f65c7a6..dee891ba6 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -23,7 +23,7 @@ import { Dictionary } from "typescript-collections";
interface IPDFViewerProps {
url: string;
- loaded: (nw: number, nh: number) => void;
+ loaded: (nw: number, nh: number, np: number) => void;
scrollY: number;
parent: PDFBox;
}
@@ -61,7 +61,7 @@ export class PDFViewer extends React.Component<IPDFViewerProps> {
interface IViewerProps {
pdf: Opt<Pdfjs.PDFDocumentProxy>;
- loaded: (nw: number, nh: number) => void;
+ loaded: (nw: number, nh: number, np: number) => void;
scrollY: number;
parent: PDFBox;
mainCont: React.RefObject<HTMLDivElement>;
@@ -400,7 +400,7 @@ class Viewer extends React.Component<IViewerProps> {
return;
}
let numPages = this.props.pdf ? this.props.pdf.numPages : 0;
- this.props.loaded(page.width, page.height);
+ this.props.loaded(page.width, page.height, numPages);
this._pageSizes[index - 1] = { width: page.width, height: page.height };
this._pagesLoaded++;
if (this._pagesLoaded === numPages) {
diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx
index 44c502a04..e3dbeaebe 100644
--- a/src/client/views/pdf/Page.tsx
+++ b/src/client/views/pdf/Page.tsx
@@ -132,16 +132,14 @@ export default class Page extends React.Component<IPageProps> {
}
}
- highlight = (targetDoc: Doc | undefined) => {
+ highlight = (targetDoc?: Doc) => {
// creates annotation documents for current highlights
let annotationDoc = this.props.makeAnnotationDocuments(targetDoc);
- let targetAnnotations = DocListCast(this.props.parent.Document.annotations);
- if (targetAnnotations) {
+ let targetAnnotations = Cast(this.props.parent.Document.annotations, listSpec(Doc));
+ if (targetAnnotations === undefined) {
+ Doc.GetProto(this.props.parent.Document).annotations = new List([annotationDoc]);
+ } else {
targetAnnotations.push(annotationDoc);
- this.props.parent.Document.annotations = new List<Doc>(targetAnnotations);
- }
- else {
- this.props.parent.Document.annotations = new List<Doc>([annotationDoc]);
}
return annotationDoc;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 05:31:34 +0000