aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx12
-rw-r--r--src/client/views/nodes/PDFBox.scss69
-rw-r--r--src/client/views/nodes/PDFBox.tsx61
-rw-r--r--src/client/views/pdf/PDFViewer.scss37
-rw-r--r--src/client/views/pdf/PDFViewer.tsx9
5 files changed, 56 insertions, 132 deletions
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 8fcba99e3..e5d652648 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -9,7 +9,7 @@ import * as ReactDOM from 'react-dom';
import Measure from "react-measure";
import * as GoldenLayout from "../../../client/goldenLayout";
import { DateField } from '../../../new_fields/DateField';
-import { Doc, DocListCast, Field, Opt } from "../../../new_fields/Doc";
+import { Doc, DocListCast, Field, Opt, WidthSym, HeightSym } from "../../../new_fields/Doc";
import { Id } from '../../../new_fields/FieldSymbols';
import { List } from '../../../new_fields/List';
import { FieldId } from "../../../new_fields/RefField";
@@ -30,6 +30,7 @@ import "./CollectionDockingView.scss";
import { SubCollectionViewProps } from "./CollectionSubView";
import React = require("react");
import { ButtonSelector } from './ParentDocumentSelector';
+import { DocumentType } from '../../documents/DocumentTypes';
library.add(faFile);
@observer
@@ -595,12 +596,17 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
}
panelWidth = () => this._document!.ignoreAspect ? this._panelWidth : Math.min(this._panelWidth, Math.max(NumCast(this._document!.width), this.nativeWidth()));
- panelHeight = () => this._document!.ignoreAspect ? this._panelHeight : Math.min(this._panelHeight, Math.max(NumCast(this._document!.height), NumCast(this._document!.nativeHeight, this._panelHeight)));
+ panelHeight = () => this._document!.ignoreAspect ? this._panelHeight : Math.min(this._panelHeight, Math.max(NumCast(this._document!.height), this.nativeHeight()));
nativeWidth = () => !this._document!.ignoreAspect ? NumCast(this._document!.nativeWidth) || this._panelWidth : 0;
nativeHeight = () => !this._document!.ignoreAspect ? NumCast(this._document!.nativeHeight) || this._panelHeight : 0;
contentScaling = () => {
+ if (this._document!.type === DocumentType.PDF) {
+ if (this._panelHeight / NumCast(this._document!.nativeHeight) > this._panelWidth / NumCast(this._document!.nativeWidth))
+ return this._panelWidth / NumCast(this._document!.nativeWidth);
+ else return this._panelHeight / NumCast(this._document!.nativeHeight);
+ }
const nativeH = this.nativeHeight();
const nativeW = this.nativeWidth();
if (!nativeW || !nativeH) return 1;
@@ -619,6 +625,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
get previewPanelCenteringOffset() { return this.nativeWidth() && !BoolCast(this._document!.ignoreAspect) ? (this._panelWidth - this.nativeWidth() / this.ScreenToLocalTransform().Scale) / 2 : 0; }
addDocTab = (doc: Doc, dataDoc: Opt<Doc>, location: string) => {
+ SelectionManager.DeselectAll();
if (doc.dockingConfig) {
MainView.Instance.openWorkspace(doc);
return true;
@@ -635,6 +642,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
return (null);
}
let resolvedDataDoc = this._document.layout instanceof Doc ? this._document : this._dataDoc;
+ console.log("Wid = " + this.panelWidth() + " " + this.panelHeight());
return <DocumentView key={this._document[Id]}
Document={this._document}
DataDoc={resolvedDataDoc}
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 4ceda1986..3fd01c2c1 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -47,29 +47,29 @@
.pdfBox-settingsCont {
position: absolute;
right: 0;
- top: 0;
+ top: 3;
.pdfBox-settingsButton {
border-bottom-left-radius: 50%;
display: flex;
justify-content: space-evenly;
align-items: center;
- height: 70px;
+ height: 30px;
background: none;
padding: 0;
.pdfBox-settingsButton-arrow {
width: 0;
height: 0;
- border-top: 25px solid transparent;
- border-bottom: 25px solid transparent;
- border-right: 25px solid #121721;
+ border-top: 15px solid transparent;
+ border-bottom: 15px solid transparent;
+ border-right: 15px solid #121721;
transition: all 0.5s;
}
.pdfBox-settingsButton-iconCont {
background: #121721;
- height: 50px;
+ height: 30px;
width: 70px;
display: flex;
justify-content: center;
@@ -84,16 +84,15 @@
}
.pdfBox-settingsFlyout {
- width: 600px;
position: absolute;
background: #323232;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
- left: -400px;
+ right: 20px;
border-radius: 7px;
padding: 20px;
display: flex;
flex-direction: column;
- font-size: 30px;
+ font-size: 14px;
transition: all 0.5s;
.pdfBox-settingsFlyout-title {
@@ -108,10 +107,10 @@
}
}
-.pdfViewer-overlayCont {
+.pdfBox-overlayCont {
position: absolute;
width: 100%;
- height: 100px;
+ height: 40px;
background: #121721;
bottom: 0;
display: flex;
@@ -121,36 +120,34 @@
overflow: hidden;
transition: left .5s;
- .pdfViewer-overlaySearchBar {
+ .pdfBox-overlaySearchBar {
width: 70%;
- height: 100%;
- font-size: 30px;
- padding: 5px;
+ font-size: 14px;
}
}
-.pdfViewer-overlayButton {
+.pdfBox-overlayButton {
border-bottom-left-radius: 50%;
display: flex;
justify-content: space-evenly;
align-items: center;
- height: 70px;
+ height: 30px;
background: none;
padding: 0;
position: absolute;
- .pdfViewer-overlayButton-arrow {
+ .pdfBox-overlayButton-arrow {
width: 0;
height: 0;
- border-top: 25px solid transparent;
- border-bottom: 25px solid transparent;
- border-right: 25px solid #121721;
+ border-top: 15px solid transparent;
+ border-bottom: 15px solid transparent;
+ border-right: 15px solid #121721;
transition: all 0.5s;
}
- .pdfViewer-overlayButton-iconCont {
+ .pdfBox-overlayButton-iconCont {
background: #121721;
- height: 50px;
+ height: 30px;
width: 70px;
display: flex;
justify-content: center;
@@ -160,32 +157,8 @@
}
}
-.pdfViewer-overlayButton:hover {
+.pdfBox-overlayButton:hover {
background: none;
}
-.collectionPdfView-buttonTray {
- top: 15px;
- left: 20px;
- position: relative;
- transform-origin: left top;
- position: absolute;
-}
-.collectionPdfView-backward {
- color: white;
- font-size: 24px;
- top: 0px;
- left: 0px;
- position: absolute;
- background-color: rgba(50, 50, 50, 0.2);
-}
-
-.collectionPdfView-forward {
- color: white;
- font-size: 24px;
- top: 0px;
- left: 45px;
- position: absolute;
- background-color: rgba(50, 50, 50, 0.2);
-}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index f57ec406c..e27bc0ca0 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -47,7 +47,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
componentDidMount() {
this.props.setPdfBox && this.props.setPdfBox(this);
- this.props.Document.curPage = 1; // ComputedField.MakeFunction("Math.floor(Number(this.panY) / Number(this.nativeHeight) + 1)");
const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
if (pdfUrl instanceof PdfField) {
@@ -74,31 +73,25 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
}
public GetPage() {
- return Math.floor((this.Document.panY || 0) / (this.Document.nativeHeight || 0)) + 1;
+ return this._pdfViewer!._pdfViewer.currentPageNumber;
}
@action
public BackPage() {
- let cp = Math.ceil((this.Document.panY || 0) / (this.Document.nativeHeight || 0)) + 1;
- cp = cp - 1;
- if (cp > 0) {
- this.Document.panY = (cp - 1) * (this.Document.nativeHeight || 0);
- }
+ this._pdfViewer!._pdfViewer.scrollPageIntoView({ pageNumber: Math.max(1, this.GetPage() - 1) });
+ this.props.Document.curPage = this.GetPage();
}
@action
public GotoPage = (p: number) => {
- if (p > 0 && p <= NumCast(this.dataDoc.numPages)) {
- this.Document.panY = (p - 1) * (this.Document.nativeHeight || 0);
- }
+ this._pdfViewer!._pdfViewer.scrollPageIntoView(p);
+ this.props.Document.curPage = this.GetPage();
}
@action
public ForwardPage() {
- let cp = this.GetPage() + 1;
- if (cp <= NumCast(this.dataDoc.numPages)) {
- this.Document.panY = (cp - 1) * (this.Document.nativeHeight || 0);
- }
+ this._pdfViewer!._pdfViewer.scrollPageIntoView({ pageNumber: Math.min(this._pdfViewer!._pdfViewer.pagesCount, this.GetPage() + 1) });
+ this.props.Document.curPage = this.GetPage();
}
@action
@@ -133,39 +126,39 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
settingsPanel() {
return !this.props.active() ? (null) :
(<>
- <div className="pdfViewer-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()}
+ <div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()}
style={{ bottom: 0, left: `${this._searching ? 0 : 100}%` }}>
- <button className="pdfViewer-overlayButton" title="Open Search Bar" />
- <input className="pdfViewer-overlaySearchBar" placeholder="Search" onChange={this.searchStringChanged}
+ <button className="pdfBox-overlayButton" title="Open Search Bar" />
+ <input className="pdfBox-overlaySearchBar" placeholder="Search" onChange={this.searchStringChanged}
onKeyDown={(e: React.KeyboardEvent) => e.keyCode === KeyCodes.ENTER ? this.search(this._searchString) : e.keyCode === KeyCodes.BACKSPACE ? e.stopPropagation() : true} />
<button title="Search" onClick={() => this.search(this._searchString)}>
- <FontAwesomeIcon icon="search" size="3x" color="white" /></button>
+ <FontAwesomeIcon icon="search" size="sm" color="white" /></button>
</div>
- <button className="pdfViewer-overlayButton" key="search" onClick={action(() => this._searching = !this._searching)} title="Open Search Bar"
- style={{ bottom: 10, right: 0, display: this.props.active() ? "flex" : "none" }}>
- <div className="pdfViewer-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()}></div>
- <div className="pdfViewer-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
- <FontAwesomeIcon style={{ color: "white" }} icon={this._searching ? "times" : "search"} size="3x" /></div>
+ <button className="pdfBox-overlayButton" key="search" onClick={action(() => this._searching = !this._searching)} title="Open Search Bar"
+ style={{ bottom: 8, right: 0, display: this.props.active() ? "flex" : "none" }}>
+ <div className="pdfBox-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()}></div>
+ <div className="pdfBox-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
+ <FontAwesomeIcon style={{ color: "white", padding: 5 }} icon={this._searching ? "times" : "search"} size="3x" /></div>
</button>
- <button className="pdfViewer-overlayButton-iconCont" title="Previous Annotation"
+ <button className="pdfBox-overlayButton-iconCont" title="Previous Annotation"
onClick={e => { e.stopPropagation(); this.prevAnnotation(); }}
onPointerDown={(e) => e.stopPropagation()}
style={{ left: 110, top: 5, height: "30px", position: "absolute", display: this.props.active() ? "flex" : "none" }}>
<FontAwesomeIcon style={{ color: "white" }} icon={"arrow-up"} size="sm" />
</button>
- <button className="pdfViewer-overlayButton-iconCont" title="Next Annotation"
+ <button className="pdfBox-overlayButton-iconCont" title="Next Annotation"
onClick={e => { e.stopPropagation(); this.nextAnnotation(); }}
onPointerDown={(e) => e.stopPropagation()}
style={{ left: 80, top: 5, height: "30px", position: "absolute", display: this.props.active() ? "flex" : "none" }}>
<FontAwesomeIcon style={{ color: "white" }} icon={"arrow-down"} size="sm" />
</button>
- <button className="pdfViewer-overlayButton-iconCont" key="back" title="Page Back"
+ <button className="pdfBox-overlayButton-iconCont" key="back" title="Page Back"
onPointerDown={(e) => { e.stopPropagation() }}
onClick={() => this.BackPage()}
style={{ left: 20, top: 5, height: "30px", position: "absolute", pointerEvents: "all", display: this.props.active() ? "flex" : "none" }}>
<FontAwesomeIcon style={{ color: "white" }} icon={"arrow-left"} size="sm" />
</button>
- <button className="pdfViewer-overlayButton-iconCont" key="fwd" title="Page Forward"
+ <button className="pdfBox-overlayButton-iconCont" key="fwd" title="Page Forward"
onPointerDown={(e) => e.stopPropagation()}
onClick={() => this.ForwardPage()}
style={{ left: 50, top: 5, height: "30px", position: "absolute", pointerEvents: "all", display: this.props.active() ? "flex" : "none" }}>
@@ -173,18 +166,12 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
</button>
<div className="pdfBox-settingsCont" key="settings" onPointerDown={(e) => e.stopPropagation()}>
<button className="pdfBox-settingsButton" onClick={action(() => this._flyout = !this._flyout)} title="Open Annotation Settings" >
- <div className="pdfBox-settingsButton-arrow"
- style={{
- borderTop: `25px solid ${this._flyout ? "#121721" : "transparent"}`,
- borderBottom: `25px solid ${this._flyout ? "#121721" : "transparent"}`,
- borderRight: `25px solid ${this._flyout ? "transparent" : "#121721"}`,
- transform: `scaleX(${this._flyout ? -1 : 1})`
- }} />
+ <div className="pdfBox-settingsButton-arrow" style={{ transform: `scaleX(${this._flyout ? -1 : 1})` }} />
<div className="pdfBox-settingsButton-iconCont">
- <FontAwesomeIcon style={{ color: "white" }} icon="cog" size="3x" />
+ <FontAwesomeIcon style={{ color: "white", padding: 5 }} icon="cog" size="3x" />
</div>
</button>
- <div className="pdfBox-settingsFlyout" style={{ left: `${this._flyout ? -600 : 100}px` }} >
+ <div className="pdfBox-settingsFlyout" style={{ right: `${this._flyout ? 20 : -600}px` }} >
<div className="pdfBox-settingsFlyout-title">
Annotation View Settings
</div>
@@ -213,8 +200,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
}
loaded = (nw: number, nh: number, np: number) => {
- // nh *= .33.33333;
- // nw *= 1.33333;
this.dataDoc.numPages = np;
if (!this.Document.nativeWidth || !this.Document.nativeHeight || !this.Document.scrollHeight) {
let oldaspect = (this.Document.nativeHeight || 0) / (this.Document.nativeWidth || 1);
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index 0ca3fa2d3..456eea7a1 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -32,41 +32,4 @@
opacity: 0.1;
}
}
-
-
-
- .pdfViewer-overlayButton {
- border-bottom-left-radius: 50%;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- height: 70px;
- background: none;
- padding: 0;
- position: absolute;
-
- .pdfViewer-overlayButton-arrow {
- width: 0;
- height: 0;
- border-top: 25px solid transparent;
- border-bottom: 25px solid transparent;
- border-right: 25px solid #121721;
- transition: all 0.5s;
- }
-
- .pdfViewer-overlayButton-iconCont {
- background: #121721;
- height: 50px;
- width: 70px;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-left: -2px;
- border-radius: 3px;
- }
- }
-
- .pdfViewer-overlayButton:hover {
- background: none;
- }
} \ No newline at end of file
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 01f19ebf6..bbd40d970 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -54,7 +54,6 @@ export class PDFViewer extends React.Component<IViewerProps> {
@observable private _marqueeWidth: number = 0;
@observable private _marqueeHeight: number = 0;
- private _resizeReaction: IReactionDisposer | undefined;
private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
private _reactionDisposer?: IReactionDisposer;
private _annotationReactionDisposer?: IReactionDisposer;
@@ -109,7 +108,6 @@ export class PDFViewer extends React.Component<IViewerProps> {
}
componentWillUnmount = () => {
- this._resizeReaction && this._resizeReaction();
this._reactionDisposer && this._reactionDisposer();
this._annotationReactionDisposer && this._annotationReactionDisposer();
this._filterReactionDisposer && this._filterReactionDisposer();
@@ -153,9 +151,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
@action
setupPdfJsViewer = () => {
- this._reactionDisposer = reaction(() => this.props.Document[WidthSym](),
- () => this._pdfViewer.currentScaleValue = (this.props.Document[WidthSym]() / this._pageSizes[0].width));
- document.addEventListener("pagesinit", () => this._pdfViewer.currentScaleValue = (this.props.Document[WidthSym]() / this._pageSizes[0].width));
+ document.addEventListener("pagesinit", () => this._pdfViewer.currentScaleValue = 1);
document.addEventListener("pagerendered", () => console.log("rendered"));
var pdfLinkService = new PDFJSViewer.PDFLinkService();
let pdfFindController = new PDFJSViewer.PDFFindController({
@@ -511,9 +507,8 @@ export class PDFViewer extends React.Component<IViewerProps> {
}
render() {
- let scaling = this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width / this.props.Document[WidthSym]() : 1;
return (<div className="pdfViewer-viewer" onPointerDown={this.onPointerDown} ref={this._mainCont}>
- <div className="pdfViewer-text" style={{ transform: `scale(${scaling})` }}>
+ <div className="pdfViewer-text">
<div key="viewerReal" ref={this._viewer} />
</div>
<div className="pdfViewer-dragAnnotationBox" ref={this._marquee}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 22:40:08 +0000