aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/PDFBox.scss23
-rw-r--r--src/client/views/nodes/PDFBox.tsx3
-rw-r--r--src/client/views/pdf/PDFViewer.tsx57
3 files changed, 70 insertions, 13 deletions
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 449408a61..f4d455be7 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -2,39 +2,52 @@
transform-origin: left top;
position: absolute;
top: 0;
- left:0;
+ left: 0;
}
+
.react-pdf__Page__textContent span {
user-select: text;
}
+
.react-pdf__Document {
position: absolute;
}
+
.pdfBox-buttonTray {
- position:absolute;
+ position: absolute;
top: 0;
- left:0;
+ left: 0;
z-index: 25;
pointer-events: all;
}
+
.pdfBox-thumbnail {
position: absolute;
width: 100%;
}
+
.pdfButton {
pointer-events: all;
width: 100px;
- height:100px;
+ height: 100px;
}
+
.pdfBox-cont {
- pointer-events: none ;
+ pointer-events: none;
+ display: flex;
+ flex-direction: row;
+
span {
pointer-events: none !important;
}
}
+
.pdfBox-cont-interactive {
pointer-events: all;
+ display: flex;
+ flex-direction: row;
}
+
.pdfBox-contentContainer {
position: absolute;
transform-origin: left top;
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 5b118185b..4214a6777 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -19,6 +19,7 @@ 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);
@@ -43,6 +44,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
onScroll = (e: React.UIEvent<HTMLDivElement>) => {
if (e.currentTarget) {
this._scrollY = e.currentTarget.scrollTop;
+ // e.currentTarget.scrollTo({ top: 1000, behavior: "smooth" });
}
}
@@ -57,6 +59,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
style={{ overflowY: "scroll", overflowX: "hidden", height: `${NumCast(this.props.Document.nativeHeight ? this.props.Document.nativeHeight : 300)}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> */}
</div>
);
}
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index e54dfea6f..fe442c906 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -152,7 +152,7 @@ class Viewer extends React.Component<IViewerProps> {
}
}
- makeAnnotationDocuments = (sourceDoc: Doc): Doc => {
+ makeAnnotationDocument = (sourceDoc: Doc): Doc => {
let annoDocs: Doc[] = [];
this._savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => {
for (let anno of value) {
@@ -179,7 +179,7 @@ class Viewer extends React.Component<IViewerProps> {
drop = async (e: Event, de: DragManager.DropEvent) => {
if (de.data instanceof DragManager.LinkDragData) {
let sourceDoc = de.data.linkSourceDocument;
- let destDoc = this.makeAnnotationDocuments(sourceDoc);
+ let destDoc = this.makeAnnotationDocument(sourceDoc);
let targetAnnotations = DocListCast(this.props.parent.Document.annotations);
if (targetAnnotations) {
targetAnnotations.push(destDoc);
@@ -280,7 +280,7 @@ class Viewer extends React.Component<IViewerProps> {
makePin={this.createPinAnnotation}
createAnnotation={this.createAnnotation}
sendAnnotations={this.receiveAnnotations}
- makeAnnotationDocuments={this.makeAnnotationDocuments}
+ makeAnnotationDocuments={this.makeAnnotationDocument}
receiveAnnotations={this.sendAnnotations}
{...this.props} />
));
@@ -322,7 +322,7 @@ class Viewer extends React.Component<IViewerProps> {
renderAnnotations={this.renderAnnotations}
createAnnotation={this.createAnnotation}
sendAnnotations={this.receiveAnnotations}
- makeAnnotationDocuments={this.makeAnnotationDocuments}
+ makeAnnotationDocuments={this.makeAnnotationDocument}
receiveAnnotations={this.sendAnnotations}
{...this.props} />
);
@@ -492,29 +492,70 @@ class PinAnnotation extends React.Component<IAnnotationProps> {
@observable private _backgroundColor: string = "green";
@observable private _display: string = "initial";
- private _selected: boolean = true;
+ private _mainCont: React.RefObject<HTMLDivElement>;
+
+ constructor(props: IAnnotationProps) {
+ super(props);
+ this._mainCont = React.createRef();
+ }
+
+ componentDidMount = () => {
+ let selected = this.props.document.selected;
+ if (selected && BoolCast(selected)) {
+ runInAction(() => {
+ this._backgroundColor = "green";
+ this._display = "initial";
+ })
+ }
+ else {
+ runInAction(() => {
+ this._backgroundColor = "red";
+ this._display = "none";
+ })
+ }
+ }
@action
pointerDown = (e: React.PointerEvent) => {
- if (this._selected) {
+ let selected = this.props.document.selected;
+ if (selected && BoolCast(selected)) {
this._backgroundColor = "red";
this._display = "none";
- this._selected = false;
+ this.props.document.selected = false;
}
else {
this._backgroundColor = "green";
this._display = "initial";
- this._selected = true;
+ this.props.document.selected = true;
}
e.preventDefault();
e.stopPropagation();
}
+ @action
+ doubleClick = (e: React.MouseEvent) => {
+ if (this._mainCont.current) {
+ let annotations = DocListCast(this.props.parent.props.parent.Document.annotations);
+ if (annotations && annotations.length) {
+ let index = annotations.indexOf(this.props.document);
+ annotations.splice(index, 1);
+ this.props.parent.props.parent.Document.annotations = new List<Doc>(annotations);
+ }
+ // this._mainCont.current.childNodes.forEach(e => e.remove());
+ this._mainCont.current.style.display = "none";
+ // if (this._mainCont.current.parentElement) {
+ // this._mainCont.current.remove();
+ // }
+ }
+ e.stopPropagation();
+ }
+
render() {
let targetDoc = Cast(this.props.document.target, Doc);
if (targetDoc instanceof Doc) {
return (
<div className="pdfViewer-pinAnnotation" onPointerDown={this.pointerDown}
+ onDoubleClick={this.doubleClick} ref={this._mainCont}
style={{
top: this.props.y - PinRadius / 2, left: this.props.x - PinRadius / 2, width: PinRadius,
height: PinRadius, pointerEvents: "all", backgroundColor: this._backgroundColor