deleting pins and better pin saving

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