small changes

4 files changed, 23 insertions, 5 deletions

diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 9a38d6241..e7655d598 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -32,15 +32,18 @@
     height: 100px;
 }
 
-.pdfBox-cont, .pdfBox-cont-interactive {
+.pdfBox-cont,
+.pdfBox-cont-interactive {
     display: flex;
     flex-direction: row;
     height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
 }
+
 .pdfBox-cont {
     pointer-events: none;
+
     .textlayer {
         pointer-events: none;
 
diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx
index ff77612d6..e88839edd 100644
--- a/src/client/views/pdf/Annotation.tsx
+++ b/src/client/views/pdf/Annotation.tsx
@@ -8,6 +8,7 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { List } from "../../../new_fields/List";
 import PDFMenu from "./PDFMenu";
 import { DocumentManager } from "../../util/DocumentManager";
+import { PresentationView } from "../presentationview/PresentationView";
 
 interface IAnnotationProps {
     anno: Doc;
@@ -101,6 +102,13 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
         PDFMenu.Instance.fadeOut(true);
     }
 
+    pinToPres = () => {
+        let group = FieldValue(Cast(this.props.document.group, Doc));
+        if (group) {
+            PresentationView.Instance.PinDoc(group);
+        }
+    }
+
     @action
     onPointerDown = (e: React.PointerEvent) => {
         if (e.button === 0) {
@@ -114,6 +122,7 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
             PDFMenu.Instance.Delete = this.deleteAnnotation.bind(this);
             PDFMenu.Instance.Pinned = false;
             PDFMenu.Instance.AddTag = this.addTag.bind(this);
+            PDFMenu.Instance.PinToPres = this.pinToPres;
             PDFMenu.Instance.jumpTo(e.clientX, e.clientY, true);
         }
     }
diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx
index aeed5213c..f93b2e59f 100644
--- a/src/client/views/pdf/PDFMenu.tsx
+++ b/src/client/views/pdf/PDFMenu.tsx
@@ -7,6 +7,7 @@ import { emptyFunction, returnZero, returnTrue, returnFalse } from "../../../Uti
 import { Doc } from "../../../new_fields/Doc";
 import { DragManager } from "../../util/DragManager";
 import { DocUtils } from "../../documents/Documents";
+import { PresentationView } from "../presentationview/PresentationView";
 
 @observer
 export default class PDFMenu extends React.Component {
@@ -24,6 +25,7 @@ export default class PDFMenu extends React.Component {
     Delete: () => void = emptyFunction;
     Snippet: (marquee: { left: number, top: number, width: number, height: number }) => void = emptyFunction;
     AddTag: (key: string, value: string) => boolean = returnFalse;
+    PinToPres: () => void = emptyFunction;
 
     @observable public Highlighting: boolean = false;
     @observable public Status: "pdf" | "annotation" | "snippet" | "" = "";
@@ -252,11 +254,12 @@ export default class PDFMenu extends React.Component {
             </button>
         ] : [
                 <button className="pdfMenu-button" title="Delete Anchor" onPointerDown={this.deleteClicked}><FontAwesomeIcon icon="trash-alt" size="lg" key="1" /></button>,
-                <div className="pdfMenu-addTag" key="2">
+                <button className="pdfMenu-button" title="Pin to Presentation" onPointerDown={this.PinToPres}><FontAwesomeIcon icon="map-pin" size="lg" key="2" /></button>,
+                <div className="pdfMenu-addTag" key="3">
                     <input onChange={this.keyChanged} placeholder="Key" style={{ gridColumn: 1 }} />
                     <input onChange={this.valueChanged} placeholder="Value" style={{ gridColumn: 3 }} />
                 </div>,
-                <button className="pdfMenu-button" title={`Add tag: ${this._keyValue} with value: ${this._valueValue}`} onPointerDown={this.addTag}><FontAwesomeIcon style={{ transition: "all .2s" }} color={this._added ? "#42f560" : "white"} icon="check" size="lg" key="3" /></button>,
+                <button className="pdfMenu-button" title={`Add tag: ${this._keyValue} with value: ${this._valueValue}`} onPointerDown={this.addTag}><FontAwesomeIcon style={{ transition: "all .2s" }} color={this._added ? "#42f560" : "white"} icon="check" size="lg" key="4" /></button>,
             ];
 
         return (
diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx
index 782dbd261..e63ac23da 100644
--- a/src/client/views/pdf/Page.tsx
+++ b/src/client/views/pdf/Page.tsx
@@ -183,8 +183,11 @@ export default class Page extends React.Component<IPageProps> {
         let doc = this.props.parent.Document;
         let view = Doc.MakeAlias(doc);
         let data = Doc.MakeDelegate(doc.proto!);
+        data.title = StrCast(data.title) + "_snippet";
         view.proto = data;
         view.nativeHeight = marquee.height;
+        view.height = (doc[WidthSym]() / NumCast(doc.nativeWidth)) * marquee.height;
+        view.nativeWidth = doc.nativeWidth;
         view.startY = marquee.top + this.props.getScrollFromPage(this.props.page);
         view.width = doc[WidthSym]();
         let dragData = new DragManager.DocumentDragData([view], [undefined]);
@@ -341,7 +344,7 @@ export default class Page extends React.Component<IPageProps> {
 
 
         if (PDFMenu.Instance.Highlighting) {
-            this.highlight(undefined, "#f4f442");
+            this.highlight(undefined, "goldenrod");
         }
         else {
             PDFMenu.Instance.StartDrag = this.startDrag;
@@ -402,7 +405,7 @@ export default class Page extends React.Component<IPageProps> {
                 </div>
                 <div className="pdfInkingLayer-cont" ref={this._annotationLayer} style={{ width: "100%", height: "100%", position: "relative", top: "-100%" }}>
                     <div className="pdfViewer-annotationBox" ref={this._marquee}
-                        style={{ left: `${this._marqueeX}px`, top: `${this._marqueeY}px`, width: `${this._marqueeWidth}px`, height: `${this._marqueeHeight}px`, background: "red", border: "10px dashed white" }}>
+                        style={{ left: `${this._marqueeX}px`, top: `${this._marqueeY}px`, width: `${this._marqueeWidth}px`, height: `${this._marqueeHeight}px`, background: "red", border: "10px dashed black" }}>
                         {/* <img ref={this._curly} src="https://static.thenounproject.com/png/331760-200.png" style={{ width: "100%", height: "100%", transform: `${this._rotate}` }} /> */}
                     </div>
                 </div>