aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/views/collections/CollectionPDFView.tsx32
-rw-r--r--src/client/views/nodes/PDFBox.tsx13
-rw-r--r--src/client/views/pdf/PDFViewer.scss1
-rw-r--r--src/client/views/pdf/PDFViewer.tsx30
-rw-r--r--src/client/views/pdf/Page.tsx2
6 files changed, 64 insertions, 16 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index dfbe2e136..91d3707f6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -170,7 +170,7 @@ export namespace Docs {
return textProto;
}
function CreatePdfPrototype(): Doc {
- let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", PDFBox.LayoutString(),
+ let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("annotations"),
{ x: 0, y: 0, width: 300, height: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1 });
return pdfProto;
}
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index 62e8adbec..4af89d780 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, IReactionDisposer, reaction } from "mobx";
import { observer } from "mobx-react";
import { ContextMenu } from "../ContextMenu";
import "./CollectionPDFView.scss";
@@ -9,12 +9,36 @@ import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from ".
import { emptyFunction } from "../../../Utils";
import { NumCast } from "../../../new_fields/Types";
import { Id } from "../../../new_fields/FieldSymbols";
+import { HeightSym, WidthSym } from "../../../new_fields/Doc";
@observer
export class CollectionPDFView extends React.Component<FieldViewProps> {
+ private _reactionDisposer?: IReactionDisposer;
+ private _buttonTray: React.RefObject<HTMLDivElement>;
+
constructor(props: FieldViewProps) {
super(props);
+
+ this._buttonTray = React.createRef();
+ }
+
+ componentDidMount() {
+ this._reactionDisposer = reaction(
+ () => NumCast(this.props.Document.scrollY),
+ () => {
+ // let transform = this.props.ScreenToLocalTransform();
+ if (this._buttonTray.current) {
+ // console.log(this._buttonTray.current.offsetHeight);
+ // console.log(NumCast(this.props.Document.scrollY));
+ let scale = this.nativeWidth() / this.props.Document[WidthSym]();
+ this.props.Document.panY = NumCast(this.props.Document.scrollY);
+ // console.log(scale);
+ }
+ // console.log(this.props.Document[HeightSym]());
+ },
+ { fireImmediately: true }
+ )
}
public static LayoutString(fieldKey: string = "data") {
@@ -52,12 +76,12 @@ export class CollectionPDFView extends React.Component<FieldViewProps> {
private get uIButtons() {
let ratio = (this.curPage - 1) / this.numPages * 100;
return (
- <div className="collectionPdfView-buttonTray" key="tray" style={{ height: "100%" }}>
+ <div className="collectionPdfView-buttonTray" ref={this._buttonTray} key="tray" style={{ height: "100%" }}>
<button className="collectionPdfView-backward" onClick={this.onPageBack}>{"<"}</button>
<button className="collectionPdfView-forward" onClick={this.onPageForward}>{">"}</button>
- <div className="collectionPdfView-slider" onPointerDown={this.onThumbDown} style={{ top: 60, left: -20, width: 50, height: `calc(100% - 80px)` }} >
+ {/* <div className="collectionPdfView-slider" onPointerDown={this.onThumbDown} style={{ top: 60, left: -20, width: 50, height: `calc(100% - 80px)` }} >
<div className="collectionPdfView-thumb" onPointerDown={this.onThumbDown} style={{ top: `${ratio}%`, width: 50, height: 50 }} />
- </div>
+ </div> */}
</div>
);
}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 4214a6777..acb430deb 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -36,6 +36,10 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
doc.nativeWidth = nw;
doc.nativeHeight = nh;
+ let ccv = this.props.ContainingCollectionView;
+ if (ccv) {
+ ccv.props.Document.pdfHeight = nh;
+ }
doc.height = nh * (doc[WidthSym]() / nw);
}
}
@@ -45,6 +49,10 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
if (e.currentTarget) {
this._scrollY = e.currentTarget.scrollTop;
// e.currentTarget.scrollTo({ top: 1000, behavior: "smooth" });
+ let ccv = this.props.ContainingCollectionView;
+ if (ccv) {
+ ccv.props.Document.scrollY = this._scrollY;
+ }
}
}
@@ -56,7 +64,10 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
return (
<div onScroll={this.onScroll}
- style={{ overflowY: "scroll", overflowX: "hidden", height: `${NumCast(this.props.Document.nativeHeight ? this.props.Document.nativeHeight : 300)}px` }}
+ style={{
+ overflowY: "scroll", overflowX: "hidden", height: `${NumCast(this.props.Document.nativeHeight ? this.props.Document.nativeHeight : 300)}px`,
+ marginTop: `${NumCast(this.props.ContainingCollectionView!.props.Document.panY)}px`
+ }}
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.scss b/src/client/views/pdf/PDFViewer.scss
index 57be04b93..a73df2d58 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -33,7 +33,6 @@
.pdfViewer-annotationLayer {
position: absolute;
top: 0;
- overflow: visible hidden;
}
.pdfViewer-pinAnnotation {
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index fe442c906..144fca9e0 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -188,8 +188,8 @@ class Viewer extends React.Component<IViewerProps> {
else {
this.props.parent.Document.annotations = new List<Doc>([destDoc]);
}
+ e.stopPropagation();
}
- e.stopPropagation();
}
componentWillUnmount = () => {
@@ -465,7 +465,7 @@ class Viewer extends React.Component<IViewerProps> {
{this._visibleElements}
</div>
<div className="pdfViewer-annotationLayer" style={{ height: this.props.parent.Document.nativeHeight, width: `100%`, pointerEvents: this._pointerEvents }}>
- <div className="pdfViewer-annotationLayer-subCont" style={{ transform: `translateY(${-this.scrollY}px)` }} ref={this._annotationLayer}>
+ <div className="pdfViewer-annotationLayer-subCont" ref={this._annotationLayer}>
{this._annotations.map(anno => this.renderAnnotation(anno))}
</div>
</div>
@@ -501,17 +501,31 @@ class PinAnnotation extends React.Component<IAnnotationProps> {
componentDidMount = () => {
let selected = this.props.document.selected;
- if (selected && BoolCast(selected)) {
+ if (!BoolCast(selected)) {
runInAction(() => {
- this._backgroundColor = "green";
- this._display = "initial";
- })
+ this._backgroundColor = "red";
+ this._display = "none";
+ });
+ }
+ if (selected) {
+ if (BoolCast(selected)) {
+ runInAction(() => {
+ this._backgroundColor = "green";
+ this._display = "initial";
+ });
+ }
+ else {
+ runInAction(() => {
+ this._backgroundColor = "red";
+ this._display = "none";
+ });
+ }
}
else {
runInAction(() => {
this._backgroundColor = "red";
this._display = "none";
- })
+ });
}
}
@@ -572,7 +586,7 @@ class PinAnnotation extends React.Component<IAnnotationProps> {
PanelWidth={() => NumCast(this.props.parent.props.parent.Document.nativeWidth)}
PanelHeight={() => NumCast(this.props.parent.props.parent.Document.nativeHeight)}
focus={emptyFunction}
- selectOnLoad={false}
+ selectOnLoad={true}
parentActive={this.props.parent.props.parent.props.active}
whenActiveChanged={this.props.parent.props.parent.props.whenActiveChanged}
bringToFront={emptyFunction}
diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx
index 9e3bf4954..1c305caa3 100644
--- a/src/client/views/pdf/Page.tsx
+++ b/src/client/views/pdf/Page.tsx
@@ -257,7 +257,7 @@ export default class Page extends React.Component<IPageProps> {
let ratio = this._marqueeWidth / this._marqueeHeight;
if (ratio > 1.5) {
// vertical
- transform = "rotate(90deg) scale(1, 2)";
+ transform = "rotate(90deg) scale(1, 5)";
}
else if (ratio < 0.5) {
// horizontal
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 05:01:35 +0000