aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/DragManager.ts14
-rw-r--r--src/client/views/DocumentDecorations.tsx2
-rw-r--r--src/client/views/nodes/PDFBox.tsx2
-rw-r--r--src/client/views/pdf/PDFViewer.scss20
-rw-r--r--src/client/views/pdf/PDFViewer.tsx89
5 files changed, 76 insertions, 51 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 43c352a90..ddc8fb62c 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -417,8 +417,7 @@ export namespace DragManager {
}
}
- // we're dragging a documentView, but it may be a child of a CollectionFreeFormDocumentView. If it is, we want to hide that as well -- this should be generalized somehow in case other draggable things might contain a DocumentView.
- eles.map(ele => (ele.hidden = hideSource));
+ eles.map(ele => ele.hidden = hideSource);
let lastX = downX;
let lastY = downY;
@@ -446,12 +445,9 @@ export namespace DragManager {
);
};
- let hideDragElements = () => {
+ let hideDragShowOriginalElements = () => {
dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
- eles.map(ele => {
- ele.hidden = false;
- (ele.parentElement && ele.parentElement.className.indexOf("collectionFreeFormDocumentView") !== -1 && (ele.parentElement.hidden = false));
- });
+ eles.map(ele => ele.hidden = false);
};
let endDrag = () => {
document.removeEventListener("pointermove", moveHandler, true);
@@ -462,12 +458,12 @@ export namespace DragManager {
};
AbortDrag = () => {
- hideDragElements();
+ hideDragShowOriginalElements();
SelectionManager.SetIsDragging(false);
endDrag();
};
const upHandler = (e: PointerEvent) => {
- hideDragElements();
+ hideDragShowOriginalElements();
dispatchDrag(eles, e, dragData, options, finishDrag);
SelectionManager.SetIsDragging(false);
endDrag();
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7ec316bf9..cacaddcc8 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -617,7 +617,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
</div>
<div className="documentDecorations-container" style={{
width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
- height: (bounds.b - bounds.y + this._resizeBorderWidth + this._linkBoxHeight + this._titleHeight) + "px",
+ height: (bounds.b - bounds.y + this._resizeBorderWidth + this._linkBoxHeight + this._titleHeight + 3) + "px",
left: bounds.x - this._resizeBorderWidth / 2,
top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight,
opacity: this._opacity
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index eb4803cec..0fcbaaa7c 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -170,7 +170,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
let classname = "pdfBox-cont" + (InkingControl.Instance.selectedTool || !this.active ? "" : "-interactive");
return (!(pdfUrl instanceof PdfField) || !this._pdf ?
<div>{`pdf, ${this.dataDoc[this.props.fieldKey]}, not found`}</div> :
- <div className={classname} onWheel={(e: React.WheelEvent) => e.stopPropagation()} onPointerDown={(e: React.PointerEvent) => {
+ <div className={classname} onPointerDown={(e: React.PointerEvent) => {
let hit = document.elementFromPoint(e.clientX, e.clientY);
if (hit && hit.localName === "span" && this.props.isSelected()) {
e.button === 0 && e.stopPropagation();
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index 0b74a8ad4..c5a397691 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -1,9 +1,10 @@
-.pdfViewer-viewer {
+
+.pdfViewer-viewer, .pdfViewer-viewer-zoomed {
pointer-events: inherit;
width: 100%;
height: 100%;
position: absolute;
- overflow-y: scroll;
+ overflow-y: auto;
overflow-x: hidden;
// .canvasWrapper {
@@ -28,6 +29,15 @@
opacity: 0.1;
}
+ .pdfViewer-overlay {
+ transform: scale(2.14359);
+ transform-origin: left top;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ display: inline-block;
+ width:100%;
+ }
.pdfViewer-annotationLayer {
position: absolute;
top: 0;
@@ -40,4 +50,8 @@
opacity: 0.1;
}
}
-} \ No newline at end of file
+}
+.pdfViewer-viewer-zoomed {
+ overflow-x: scroll;
+}
+ \ No newline at end of file
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index c28469fcc..016445538 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -72,6 +72,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
@observable private _marqueeing: boolean = false;
@observable private _showWaiting = true;
@observable private _showCover = false;
+ @observable private _zoomed = 1;
public pdfViewer: any;
private _isChildActive = false;
@@ -186,10 +187,10 @@ export class PDFViewer extends React.Component<IViewerProps> {
document.removeEventListener("copy", this.copy);
document.addEventListener("copy", this.copy);
- document.addEventListener("pagesinit", () => {
- this.pdfViewer.currentScaleValue = 1;
+ document.addEventListener("pagesinit", action(() => {
+ this.pdfViewer.currentScaleValue = this._zoomed = 1;
this.gotoPage(NumCast(this.props.Document.curPage, 1));
- });
+ }));
document.addEventListener("pagerendered", action(() => this._showCover = this._showWaiting = false));
var pdfLinkService = new PDFJSViewer.PDFLinkService();
let pdfFindController = new PDFJSViewer.PDFFindController({
@@ -618,10 +619,20 @@ export class PDFViewer extends React.Component<IViewerProps> {
style={{ position: "absolute", display: "inline-block", top: 0, left: 0, width: `${nativeWidth}px`, height: `${nativeHeight}px` }} />;
}
+
+ @action
+ onZoomWheel = (e: React.WheelEvent) => {
+ e.stopPropagation();
+ if (e.ctrlKey) {
+ let curScale = Number(this.pdfViewer.currentScaleValue);
+ this.pdfViewer.currentScaleValue = Math.max(1, Math.min(10, curScale + curScale * e.deltaY / 1000));
+ this._zoomed = Number(this.pdfViewer.currentScaleValue);
+ }
+ }
render() {
trace();
- return (<div className="pdfViewer-viewer" onScroll={this.onScroll} onPointerDown={this.onPointerDown} onWheel={(e) => e.stopPropagation()} onClick={this.onClick} ref={this._mainCont}>
+ return (<div className={"pdfViewer-viewer" + (this._zoomed !== 1 ? "-zoomed" : "")} onScroll={this.onScroll} onWheel={this.onZoomWheel} onPointerDown={this.onPointerDown} onClick={this.onClick} ref={this._mainCont}>
<div className="pdfViewer-text" ref={this._viewer} style={{ transformOrigin: "left top" }} />
{!this._marqueeing ? (null) : <div className="pdfViewer-dragAnnotationBox" ref={this._marquee}
style={{
@@ -630,41 +641,45 @@ export class PDFViewer extends React.Component<IViewerProps> {
border: `${this._marqueeWidth === 0 ? "" : "2px dashed black"}`
}}>
</div>}
- <div className="pdfViewer-annotationLayer" style={{ height: NumCast(this.props.Document.nativeHeight) }} ref={this._annotationLayer}>
- {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map((anno, index) =>
- <Annotation {...this.props} anno={anno} key={`${anno[Id]}-annotation`} />)}
+ <div className="pdfViewer-overlay" style={{ transform: `scale(${this._zoomed})` }}>
+ <div className="pdfViewer-annotationLayer" style={{ height: NumCast(this.props.Document.nativeHeight) }} ref={this._annotationLayer}>
+ {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map((anno, index) =>
+ <Annotation {...this.props} anno={anno} key={`${anno[Id]}-annotation`} />)}
+ </div>
+ <CollectionFreeFormView {...this.props}
+ setPreviewCursor={this.setPreviewCursor}
+ PanelHeight={() => NumCast(this.props.Document.scrollHeight, NumCast(this.props.Document.nativeHeight))}
+ PanelWidth={() => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : NumCast(this.props.Document.nativeWidth)}
+ focus={emptyFunction}
+ isSelected={this.props.isSelected}
+ select={emptyFunction}
+ active={this.active}
+ ContentScaling={returnOne}
+ whenActiveChanged={this.whenActiveChanged}
+ removeDocument={this.removeDocument}
+ moveDocument={this.moveDocument}
+ addDocument={(doc: Doc, allow: boolean | undefined) => { Doc.AddDocToList(this.props.fieldExtensionDoc, this.props.fieldExt, doc); return true; }}
+ CollectionView={this.props.ContainingCollectionView}
+ ScreenToLocalTransform={this.scrollXf}
+ ruleProvider={undefined}
+ renderDepth={this.props.renderDepth + 1}
+ ContainingCollectionDoc={this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document}
+ chromeCollapsed={true}>
+ </CollectionFreeFormView>
</div>
- <CollectionFreeFormView {...this.props}
- setPreviewCursor={this.setPreviewCursor}
- PanelHeight={() => NumCast(this.props.Document.scrollHeight, NumCast(this.props.Document.nativeHeight))}
- PanelWidth={() => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : NumCast(this.props.Document.nativeWidth)}
- focus={emptyFunction}
- isSelected={this.props.isSelected}
- select={emptyFunction}
- active={this.active}
- ContentScaling={returnOne}
- whenActiveChanged={this.whenActiveChanged}
- removeDocument={this.removeDocument}
- moveDocument={this.moveDocument}
- addDocument={(doc: Doc, allow: boolean | undefined) => { Doc.AddDocToList(this.props.fieldExtensionDoc, this.props.fieldExt, doc); return true; }}
- CollectionView={this.props.ContainingCollectionView}
- ScreenToLocalTransform={this.scrollXf}
- ruleProvider={undefined}
- renderDepth={this.props.renderDepth + 1}
- ContainingCollectionDoc={this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document}
- chromeCollapsed={true}>
- </CollectionFreeFormView>
{this._showCover ? this.getCoverImage() : (null)}
- {this._showWaiting ? <img src={"/assets/loading.gif"}
- style={{
- width: "70%",
- height: "70%",
- margin: "15%",
- transition: "0.4s opacity ease",
- opacity: 0.7,
- position: "absolute",
- zIndex: 10
- }} /> : (null)}
+ {
+ this._showWaiting ? <img src={"/assets/loading.gif"}
+ style={{
+ width: "70%",
+ height: "70%",
+ margin: "15%",
+ transition: "0.4s opacity ease",
+ opacity: 0.7,
+ position: "absolute",
+ zIndex: 10
+ }} /> : (null)
+ }
</div >);
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 07:24:23 +0000