aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/PDFBox.scss69
-rw-r--r--src/client/views/nodes/PDFBox.tsx61
2 files changed, 44 insertions, 86 deletions
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);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-24 15:42:07 +0000