3 files changed, 53 insertions, 6 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 60910a40b..63f5616a9 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -3,6 +3,8 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie
 import { Document } from "../../fields/Document"
 import { action } from "mobx";
 import { DocumentView } from "../views/nodes/DocumentView";
+import { ImageField } from "../../fields/ImageField";
+import { KeyStore } from "../../fields/KeyStore";
 
 export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document) {
     let onRowMove = action((e: PointerEvent): void => {
@@ -105,7 +107,19 @@ export namespace DragManager {
         const scaleX = rect.width / w, scaleY = rect.height / h;
         let x = rect.left, y = rect.top;
         // const offsetX = e.x - rect.left, offsetY = e.y - rect.top;
-        let dragElement = ele.cloneNode(true) as HTMLElement;
+
+        // bcz: PDFs don't show up if you clone them -- presumably because they contain a canvas.
+        //      however, PDF's have a thumbnail field that contains an image of the current page.
+        //      so we use this image instead of the cloned element if it's present.
+        const docView: DocumentView = dragData["documentView"];
+        const doc: Document = docView ? docView.props.Document : dragData["document"];
+        let thumbnail = doc.GetT(KeyStore.Thumbnail, ImageField);
+        let img = thumbnail ? new Image() : null;
+        if (thumbnail) {
+            img!.src = thumbnail.toString();
+        }
+        let dragElement = img ? img : ele.cloneNode(true) as HTMLElement;
+
         dragElement.style.opacity = "0.7";
         dragElement.style.position = "absolute";
         dragElement.style.bottom = "";
@@ -140,8 +154,6 @@ export namespace DragManager {
             y += e.movementY;
             if (e.shiftKey) {
                 abortDrag();
-                const docView: DocumentView = dragData["documentView"];
-                const doc: Document = docView ? docView.props.Document : dragData["document"];
                 CollectionDockingView.Instance.StartOtherDrag(doc, { pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 });
             }
             dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx
index b80283065..0390d5e0d 100644
--- a/src/client/views/nodes/PDFNode.tsx
+++ b/src/client/views/nodes/PDFNode.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, _interceptReads } from 'mobx';
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import 'react-image-lightbox/style.css';
@@ -15,6 +15,9 @@ import { KeyStore } from '../../../fields/KeyStore';
 import "./PDFNode.scss";
 import { PDFField } from '../../../fields/PDFField';
 import { FieldWaiting } from '../../../fields/Field';
+import { ImageField } from '../../../fields/ImageField';
+import * as htmlToImage from "html-to-image";
+import { url } from 'inspector';
 
 /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
  * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
@@ -94,6 +97,7 @@ export class PDFNode extends React.Component<FieldViewProps> {
             if (this.perPage[this.page - 1]) {
                 this.pageInfo = this.perPage[this.page - 1];
             }
+            this.saveThumbnail();
         }
     }
 
@@ -110,6 +114,7 @@ export class PDFNode extends React.Component<FieldViewProps> {
             if (this.perPage[this.page - 1]) {
                 this.pageInfo = this.perPage[this.page - 1];
             }
+            this.saveThumbnail();
         }
     }
 
@@ -288,7 +293,6 @@ export class PDFNode extends React.Component<FieldViewProps> {
      */
     @action
     onPointerUp = (e: React.PointerEvent) => {
-
         if (this._highlightToolOn) {
             this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. 
             this._highlightToolOn = false;
@@ -314,7 +318,7 @@ export class PDFNode extends React.Component<FieldViewProps> {
             }
             this._toolOn = false;
         }
-
+        this._interactive = true;
     }
 
     /**
@@ -392,8 +396,23 @@ export class PDFNode extends React.Component<FieldViewProps> {
 
     }
 
+    @observable _interactive: boolean = false;
 
     @action
+    saveThumbnail = () => {
+        setTimeout(() => {
+            var me = this;
+            htmlToImage.toPng(this._mainDiv.current!,
+                { width: me.props.doc.GetNumber(KeyStore.NativeWidth, 0), height: me.props.doc.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 })
+                .then(function (dataUrl: string) {
+                    me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField);
+                })
+                .catch(function (error: any) {
+                    console.error('oops, something went wrong!', error);
+                });
+        }, 1000);
+    }
+    @action
     setScaling = (r: any) => {
         // bcz: the nativeHeight should really be set when the document is imported.
         //      also, the native dimensions could be different for different pages of the PDF
@@ -402,8 +421,23 @@ export class PDFNode extends React.Component<FieldViewProps> {
         if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) {
             this.props.doc.SetNumber(KeyStore.NativeHeight, nativeWidth * r.entry.height / r.entry.width);
         }
+        if (!this.props.doc.GetT(KeyStore.Thumbnail, ImageField)) {
+            this.saveThumbnail();
+        }
     }
     render() {
+        let field = this.props.doc.Get(KeyStore.Thumbnail);
+        if (!this._interactive && field) {
+            let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+                field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
+            return (
+                <div className="pdfNode-cont" ref={this._mainDiv}
+                    onPointerDown={this.onPointerDown}
+                    onPointerUp={this.onPointerUp}
+                >
+                    <img src={path} width="100%" />
+                </div>);
+        }
         const renderHeight = 2400;
         let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
         var pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index a3b39735d..1327bd9f4 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -26,4 +26,5 @@ export namespace KeyStore {
     export const Caption = new Key("Caption");
     export const ActiveFrame = new Key("ActiveFrame");
     export const DocumentText = new Key("DocumentText");
+    export const Thumbnail = new Key("Thumbnail");
 }