From 6283dcc3b7889ff431941e0bcb92591ff7a64e0e Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Wed, 6 Mar 2019 10:34:04 -0500 Subject: floating tooltip rich text menu has some basic functionality --- src/client/util/RichTextSchema.tsx | 223 +++++++++++++++++++++++++++++++++++ src/client/util/TooltipTextMenu.scss | 54 +++++++++ src/client/util/TooltipTextMenu.tsx | 125 ++++++++++++++++++++ 3 files changed, 402 insertions(+) create mode 100644 src/client/util/RichTextSchema.tsx create mode 100644 src/client/util/TooltipTextMenu.scss create mode 100644 src/client/util/TooltipTextMenu.tsx (limited to 'src/client/util') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx new file mode 100644 index 000000000..abf448c9f --- /dev/null +++ b/src/client/util/RichTextSchema.tsx @@ -0,0 +1,223 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray } from "prosemirror-model" +import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands' +import { redo, undo } from 'prosemirror-history' +import { orderedList, bulletList, listItem } from 'prosemirror-schema-list' + +const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], + preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0] + +// :: Object +// [Specs](#model.NodeSpec) for the nodes defined in this schema. +export const nodes: { [index: string]: NodeSpec } = { + // :: NodeSpec The top level document node. + doc: { + content: "block+" + }, + + // :: NodeSpec A plain paragraph textblock. Represented in the DOM + // as a `

` element. + paragraph: { + content: "inline*", + group: "block", + parseDOM: [{ tag: "p" }], + toDOM() { return pDOM } + }, + + // :: NodeSpec A blockquote (`

`) wrapping one or more blocks. + blockquote: { + content: "block+", + group: "block", + defining: true, + parseDOM: [{ tag: "blockquote" }], + toDOM() { return blockquoteDOM } + }, + + // :: NodeSpec A horizontal rule (`
`). + horizontal_rule: { + group: "block", + parseDOM: [{ tag: "hr" }], + toDOM() { return hrDOM } + }, + + // :: NodeSpec A heading textblock, with a `level` attribute that + // should hold the number 1 to 6. Parsed and serialized as `

` to + // `

` elements. + heading: { + attrs: { level: { default: 1 } }, + content: "inline*", + group: "block", + defining: true, + parseDOM: [{ tag: "h1", attrs: { level: 1 } }, + { tag: "h2", attrs: { level: 2 } }, + { tag: "h3", attrs: { level: 3 } }, + { tag: "h4", attrs: { level: 4 } }, + { tag: "h5", attrs: { level: 5 } }, + { tag: "h6", attrs: { level: 6 } }], + toDOM(node: any) { return ["h" + node.attrs.level, 0] } + }, + + // :: NodeSpec A code listing. Disallows marks or non-text inline + // nodes by default. Represented as a `
` element with a
+  // `` element inside of it.
+  code_block: {
+    content: "text*",
+    marks: "",
+    group: "block",
+    code: true,
+    defining: true,
+    parseDOM: [{ tag: "pre", preserveWhitespace: "full" }],
+    toDOM() { return preDOM }
+  },
+
+  // :: NodeSpec The text node.
+  text: {
+    group: "inline"
+  },
+
+  // :: NodeSpec An inline image (``) node. Supports `src`,
+  // `alt`, and `href` attributes. The latter two default to the empty
+  // string.
+  image: {
+    inline: true,
+    attrs: {
+      src: {},
+      alt: { default: null },
+      title: { default: null }
+    },
+    group: "inline",
+    draggable: true,
+    parseDOM: [{
+      tag: "img[src]", getAttrs(dom: any) {
+        return {
+          src: dom.getAttribute("src"),
+          title: dom.getAttribute("title"),
+          alt: dom.getAttribute("alt")
+        }
+      }
+    }],
+    toDOM(node: any) { return ["img", node.attrs] }
+  },
+
+  // :: NodeSpec A hard line break, represented in the DOM as `
`.
+  hard_break: {
+    inline: true,
+    group: "inline",
+    selectable: false,
+    parseDOM: [{ tag: "br" }],
+    toDOM() { return brDOM }
+  },
+
+  ordered_list: {
+    ...orderedList,
+    content: 'list_item+',
+    group: 'block'
+  },
+  bullet_list: {
+    content: 'list_item+',
+    group: 'block',
+    parseDOM: [{ tag: "ul" }, { style: "list-style-type=disc;" }],
+    toDOM() { return ulDOM }
+  },
+  list_item: {
+    ...listItem,
+    content: 'paragraph block*'
+  }
+}
+
+const emDOM: DOMOutputSpecArray = ["em", 0];
+const strongDOM: DOMOutputSpecArray = ["strong", 0];
+const codeDOM: DOMOutputSpecArray = ["code", 0];
+const underlineDOM: DOMOutputSpecArray = ["underline", 0];
+
+// :: Object [Specs](#model.MarkSpec) for the marks in the schema.
+export const marks: { [index: string]: MarkSpec } = {
+  // :: MarkSpec A link. Has `href` and `title` attributes. `title`
+  // defaults to the empty string. Rendered and parsed as an ``
+  // element.
+  link: {
+    attrs: {
+      href: {},
+      title: { default: null }
+    },
+    inclusive: false,
+    parseDOM: [{
+      tag: "a[href]", getAttrs(dom: any) {
+        return { href: dom.getAttribute("href"), title: dom.getAttribute("title") }
+      }
+    }],
+    toDOM(node: any) { return ["a", node.attrs, 0] }
+  },
+
+  // :: MarkSpec An emphasis mark. Rendered as an `` element.
+  // Has parse rules that also match `` and `font-style: italic`.
+  em: {
+    parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style=italic" }],
+    toDOM() { return emDOM }
+  },
+
+  // :: MarkSpec A strong mark. Rendered as ``, parse rules
+  // also match `` and `font-weight: bold`.
+  strong: {
+    parseDOM: [{ tag: "strong" },
+    { tag: "b" },
+    { style: "font-weight" }],
+    toDOM() { return strongDOM }
+  },
+
+  underline: {
+    parseDOM: [
+      { tag: 'u' },
+      { style: 'text-decoration=underline' }
+    ],
+    toDOM: () => ['span', {
+      style: 'text-decoration:underline'
+    }]
+  },
+
+  strikethrough: {
+    parseDOM: [
+      { tag: 'strike' },
+      { style: 'text-decoration=line-through' },
+      { style: 'text-decoration-line=line-through' }
+    ],
+    toDOM: () => ['span', {
+      style: 'text-decoration-line:line-through'
+    }]
+  },
+
+  subscript: {
+    excludes: 'superscript',
+    parseDOM: [
+      { tag: 'sub' },
+      { style: 'vertical-align=sub' }
+    ],
+    toDOM: () => ['sub']
+  },
+
+  superscript: {
+    excludes: 'subscript',
+    parseDOM: [
+      { tag: 'sup' },
+      { style: 'vertical-align=super' }
+    ],
+    toDOM: () => ['sup']
+  },
+
+
+  // :: MarkSpec Code font mark. Represented as a `` element.
+  code: {
+    parseDOM: [{ tag: "code" }],
+    toDOM() { return codeDOM }
+  }
+}
+
+// :: Schema
+// This schema rougly corresponds to the document schema used by
+// [CommonMark](http://commonmark.org/), minus the list elements,
+// which are defined in the [`prosemirror-schema-list`](#schema-list)
+// module.
+//
+// To reuse elements from this schema, extend or read from its
+// `spec.nodes` and `spec.marks` [properties](#model.Schema.spec).
+export const schema = new Schema({ nodes, marks })
\ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
new file mode 100644
index 000000000..fa43f5326
--- /dev/null
+++ b/src/client/util/TooltipTextMenu.scss
@@ -0,0 +1,54 @@
+
+.tooltipMenu {
+    position: absolute;
+    z-index: 20;
+    background: rgb(19, 18, 18);
+    border: 1px solid silver;
+    border-radius: 4px;
+    padding: 2px 10px;
+    margin-bottom: 7px;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.tooltipMenu:before {
+    content: "";
+    height: 0; width: 0;
+    position: absolute;
+    left: 50%;
+    margin-left: -5px;
+    bottom: -6px;
+    border: 5px solid transparent;
+    border-bottom-width: 0;
+    border-top-color: silver;
+  }
+  .tooltipMenu:after {
+    content: "";
+    height: 0; width: 0;
+    position: absolute;
+    left: 50%;
+    margin-left: -5px;
+    bottom: -4.5px;
+    border: 5px solid transparent;
+    border-bottom-width: 0;
+    border-top-color: black;
+  }
+
+  .menuicon {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    //color: rgb(19, 18, 18);
+    color: white;
+    line-height: 1;
+    padding: 0px 2px;
+    margin: 1px;
+    cursor: pointer;
+    text-align: center;
+    min-width: 10px;
+  }
+  .strong, .heading { font-weight: bold; }
+  .em { font-style: italic; }
+  .underline {text-decoration: underline}
+  .superscript {vertical-align:super}
+  .subscript { vertical-align:sub }
+  .strikethrough {text-decoration-line:line-through}
\ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
new file mode 100644
index 000000000..3b87fe9de
--- /dev/null
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -0,0 +1,125 @@
+import { action, IReactionDisposer, reaction } from "mobx";
+import { baseKeymap } from "prosemirror-commands";
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+const { exampleSetup } = require("prosemirror-example-setup")
+import { EditorState, Transaction, } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { schema } from "./RichTextSchema";
+import React = require("react")
+import "./TooltipTextMenu.scss";
+const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { wrapInList, bulletList } from 'prosemirror-schema-list'
+import {
+  faListUl,
+} from '@fortawesome/free-solid-svg-icons';
+
+
+
+export class TooltipTextMenu {
+
+  private tooltip: HTMLElement;
+
+  constructor(view: EditorView) {
+    this.tooltip = document.createElement("div");
+    this.tooltip.className = "tooltipMenu";
+
+    //add the div which is the tooltip
+    view.dom.parentNode!.appendChild(this.tooltip);
+
+    //add additional icons
+    library.add(faListUl);
+
+    //add the buttons to the tooltip
+    let items = [
+      { command: toggleMark(schema.marks.strong), dom: this.icon("B", "strong") },
+      { command: toggleMark(schema.marks.em), dom: this.icon("i", "em") },
+      { command: toggleMark(schema.marks.underline), dom: this.icon("U", "underline") },
+      { command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough") },
+      { command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript") },
+      { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") },
+      { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }
+    ]
+    items.forEach(({ dom }) => this.tooltip.appendChild(dom));
+
+    //pointer down handler to activate button effects
+    this.tooltip.addEventListener("pointerdown", e => {
+      e.preventDefault();
+      view.focus();
+      items.forEach(({ command, dom }) => {
+        if (dom.contains(e.srcElement)) {
+          command(view.state, view.dispatch, view)
+        }
+      })
+    })
+
+    this.update(view, undefined);
+  }
+
+  // Helper function to create menu icons
+  icon(text: string, name: string) {
+    let span = document.createElement("span");
+    span.className = "menuicon " + name;
+    span.title = name;
+    span.textContent = text;
+    return span;
+  }
+
+  blockActive(view: EditorView) {
+    const { $from, to } = view.state.selection
+
+    return to <= $from.end() && $from.parent.hasMarkup(schema.nodes.bulletList);
+  }
+
+  //this doesn't currently work but hopefully will soon
+  unorderedListIcon(): HTMLSpanElement {
+    let span = document.createElement("span");
+    let icon = document.createElement("FontAwesomeIcon");
+    icon.className = "menuicon fa fa-smile-o";
+    span.appendChild(icon);
+    return span;
+  }
+
+  // Create an icon for a heading at the given level
+  heading(level: number) {
+    return {
+      command: setBlockType(schema.nodes.heading, { level }),
+      dom: this.icon("H" + level, "heading")
+    }
+  }
+
+  //updates the tooltip menu when the selection changes
+  update(view: EditorView, lastState: EditorState | undefined) {
+    let state = view.state
+    // Don't do anything if the document/selection didn't change
+    if (lastState && lastState.doc.eq(state.doc) &&
+      lastState.selection.eq(state.selection)) return
+
+    // Hide the tooltip if the selection is empty
+    if (state.selection.empty) {
+      this.tooltip.style.display = "none"
+      return
+    }
+
+    // Otherwise, reposition it and update its content
+    this.tooltip.style.display = ""
+    let { from, to } = state.selection
+    // These are in screen coordinates
+    //check this - tranform
+    let start = view.coordsAtPos(from), end = view.coordsAtPos(to)
+    // The box in which the tooltip is positioned, to use as base
+    let box = this.tooltip.offsetParent!.getBoundingClientRect()
+    // Find a center-ish x position from the selection endpoints (when
+    // crossing lines, end may be more to the left)
+    let left = Math.max((start.left + end.left) / 2, start.left + 3)
+    this.tooltip.style.left = (left - box.left) + "px"
+    let width = Math.abs(start.left - end.left) / 2;
+    let mid = Math.min(start.left, end.left) + width;
+    //THIS WIDTH IS 15 * NUMBER OF ICONS + 15
+    this.tooltip.style.width = 120 + "px";
+    this.tooltip.style.bottom = (box.bottom - start.top) + "px";
+  }
+
+  destroy() { this.tooltip.remove() }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From c0f6d5b4ef67a60b4bd52b98e5bda29746765969 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik 
Date: Thu, 7 Mar 2019 00:02:57 -0500
Subject: added image caching for pdfs

---
 package-lock.json                  | 33 ++++++++++++-------------------
 package.json                       |  3 ++-
 src/client/util/DragManager.ts     | 18 ++++++++++++++---
 src/client/views/nodes/PDFNode.tsx | 40 +++++++++++++++++++++++++++++++++++---
 src/fields/KeyStore.ts             |  1 +
 5 files changed, 67 insertions(+), 28 deletions(-)

(limited to 'src/client/util')

diff --git a/package-lock.json b/package-lock.json
index 4c26734f6..b8f18acbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3412,14 +3412,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "resolved": false,
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "optional": true
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3434,20 +3432,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "resolved": false,
-          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "optional": true
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "optional": true
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
-          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "optional": true
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3564,8 +3559,7 @@
         "inherits": {
           "version": "2.0.3",
           "resolved": false,
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "optional": true
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
         },
         "ini": {
           "version": "1.3.5",
@@ -3577,7 +3571,6 @@
           "version": "1.0.0",
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3592,7 +3585,6 @@
           "version": "3.0.4",
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3600,14 +3592,12 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": false,
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "optional": true
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": false,
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3626,7 +3616,6 @@
           "version": "0.5.1",
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3707,8 +3696,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "resolved": false,
-          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "optional": true
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3720,7 +3708,6 @@
           "version": "1.4.0",
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3842,7 +3829,6 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4332,6 +4318,11 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
+    "html-to-image": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-0.1.0.tgz",
+      "integrity": "sha512-/VLH+jjGQgLDs+BlVDVAzI1rdghYfFWFcPmFHChiD3UHMmckyDuvJpH3N3lli0elJkWfyv/EKrWNXTxm3mg4oQ=="
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
diff --git a/package.json b/package.json
index 7112d3672..271acfd0b 100644
--- a/package.json
+++ b/package.json
@@ -67,8 +67,8 @@
     "@types/socket.io-client": "^1.4.32",
     "@types/typescript": "^2.0.0",
     "@types/uuid": "^3.4.4",
-    "babel-runtime": "^6.26.0",
     "@types/webpack": "^4.4.24",
+    "babel-runtime": "^6.26.0",
     "bcrypt-nodejs": "0.0.3",
     "bluebird": "^3.5.3",
     "body-parser": "^1.18.3",
@@ -80,6 +80,7 @@
     "expressjs": "^1.0.1",
     "flexlayout-react": "^0.3.3",
     "golden-layout": "^1.5.9",
+    "html-to-image": "^0.1.0",
     "i": "^0.3.6",
     "jsonwebtoken": "^8.4.0",
     "jsx-to-string": "^1.4.0",
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, 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 {
             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 {
             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 {
      */
     @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 {
             }
             this._toolOn = false;
         }
-
+        this._interactive = true;
     }
 
     /**
@@ -392,7 +396,22 @@ export class PDFNode extends React.Component {
 
     }
 
+    @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.
@@ -402,8 +421,23 @@ export class PDFNode extends React.Component {
         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 (
+                

+                    
+                
);
+        }
         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");
 }
-- 
cgit v1.2.3-70-g09d2


From 20599dce380b63af37433614d74778fb4f3e20b6 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik 
Date: Thu, 7 Mar 2019 01:45:20 -0500
Subject: cleaned up PDF render and fixed dragging to show annotations.

---
 src/client/util/DragManager.ts     |  34 ++++-----
 src/client/views/nodes/PDFNode.tsx | 144 ++++++++++++++++++-------------------
 2 files changed, 87 insertions(+), 91 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 63f5616a9..a7af399e2 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -108,18 +108,7 @@ export namespace DragManager {
         let x = rect.left, y = rect.top;
         // const offsetX = e.x - rect.left, offsetY = e.y - rect.top;
 
-        // 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;
-
+        let dragElement = ele.cloneNode(true) as HTMLElement;
         dragElement.style.opacity = "0.7";
         dragElement.style.position = "absolute";
         dragElement.style.bottom = "";
@@ -129,10 +118,23 @@ export namespace DragManager {
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         dragElement.style.width = `${rect.width / scaleX}px`;
         dragElement.style.height = `${rect.height / scaleY}px`;
-        // It seems like the above code should be able to just be this:
-        // dragElement.style.transform = `translate(${x}px, ${y}px)`;
-        // dragElement.style.width = `${rect.width}px`;
-        // dragElement.style.height = `${rect.height}px`;
+
+        // bcz: PDFs don't show up if you clone them because they contain a canvas.
+        //      however, PDF's have a thumbnail field that contains an image of their canvas.
+        //      So we replace the pdf's canvas with the image thumbnail
+        const docView: DocumentView = dragData["documentView"];
+        const doc: Document = docView ? docView.props.Document : dragData["document"];
+        var pdfNode = dragElement.getElementsByClassName("pdfNode-cont")[0] as HTMLElement;
+        let thumbnail = doc.GetT(KeyStore.Thumbnail, ImageField);
+        if (pdfNode && pdfNode.childElementCount && thumbnail) {
+            let img = new Image();
+            img!.src = thumbnail.toString();
+            img!.style.position = "absolute";
+            img!.style.width = `${rect.width / scaleX}px`;
+            img!.style.height = `${rect.height / scaleY}px`;
+            pdfNode.replaceChild(img!, pdfNode.children[0])
+        }
+
         dragDiv.appendChild(dragElement);
 
         let hideSource = false;
diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx
index 0390d5e0d..b6829f086 100644
--- a/src/client/views/nodes/PDFNode.tsx
+++ b/src/client/views/nodes/PDFNode.tsx
@@ -412,6 +412,29 @@ export class PDFNode extends React.Component {
                 });
         }, 1000);
     }
+
+    onLoaded = (page: any) => {
+        if (this._mainDiv.current) {
+            this._mainDiv.current.childNodes.forEach((element) => {
+                if (element.nodeName == "DIV") {
+                    element.childNodes[0].childNodes.forEach((e) => {
+
+                        if (e instanceof HTMLCanvasElement) {
+                            this._pdfCanvas = e;
+                            this._pdfContext = e.getContext("2d")
+
+                        }
+
+                    })
+                }
+            })
+        }
+        this.numPage = page.transport.numPages
+        if (this.perPage.length == 0) { //Makes sure it only runs once
+            this.perPage = [...Array(this.numPage)]
+        }
+    }
+
     @action
     setScaling = (r: any) => {
         // bcz: the nativeHeight should really be set when the document is imported.
@@ -425,90 +448,61 @@ export class PDFNode extends React.Component {
             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 (
-                

-                    
-                
);
+    makeUIButtons() {
+        return (
+            

+                
+                
+                
+                
+                
+                
+                
+                
+                
+            
);
+    }
+    makePdfRenderer() {
+        let proxy = this.makeImageProxyRenderer();
+        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
+        if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) {
+            return proxy;
         }
         const renderHeight = 2400;
         let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
-        var pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
-        if (!pdfUrl || pdfUrl == FieldWaiting) {
-            return (null);
+        return [
+            this.pageInfo.area.filter(() => this.pageInfo.area).map((element: any) => element),
+            this.currAnno.map((element: any) => element),
+            this.makeUIButtons(),
+            

+                
+                    
+                        {({ measureRef }) =>
+                            

+                                
+                            

+                        }
+                    
+                
+            

+        ];
+    }
+    makeImageProxyRenderer() {
+        let field = this.props.doc.Get(KeyStore.Thumbnail);
+        if (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 ;
         }
+        return (null);
+    }
+    render() {
         return (
             

-
-                {this.pageInfo.area.filter(() => {
-                    return this.pageInfo.area
-                }).map((element: any) => {
-                    return element
-                })
-                }
-                {this.currAnno.map((element: any) => {
-                    return element
-                })}
-
-                

-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                

-
-                

-                    
-                        
-                            {({ measureRef }) =>
-                                

-                                     {
-                                                if (this._mainDiv.current) {
-                                                    this._mainDiv.current.childNodes.forEach((element) => {
-                                                        if (element.nodeName == "DIV") {
-                                                            element.childNodes[0].childNodes.forEach((e) => {
-
-                                                                if (e instanceof HTMLCanvasElement) {
-                                                                    this._pdfCanvas = e;
-                                                                    this._pdfContext = e.getContext("2d")
-
-                                                                }
-
-                                                            })
-                                                        }
-                                                    })
-                                                }
-                                                this.numPage = page.transport.numPages
-                                                if (this.perPage.length == 0) { //Makes sure it only runs once
-                                                    this.perPage = [...Array(this.numPage)]
-                                                }
-                                            }
-                                        }
-                                    />
-                                

-                            }
-                        
-                    
-                

+                {this.makePdfRenderer()}
             

         );
     }
-- 
cgit v1.2.3-70-g09d2


From 4796d17b089824df4455788c564414526c08eaa4 Mon Sep 17 00:00:00 2001
From: bob 
Date: Fri, 8 Mar 2019 09:21:18 -0500
Subject: merged with master

---
 src/client/documents/Documents.ts                  |   5 +-
 src/client/util/DragManager.ts                     |   6 +-
 .../views/collections/CollectionFreeFormView.tsx   |  16 +-
 src/client/views/nodes/DocumentView.tsx            |   4 +-
 src/client/views/nodes/PDFBox.scss                 |  15 +
 src/client/views/nodes/PDFBox.tsx                  | 515 +++++++++++++++++++++
 src/client/views/nodes/PDFNode.scss                |  15 -
 src/client/views/nodes/PDFNode.tsx                 | 515 ---------------------
 8 files changed, 544 insertions(+), 547 deletions(-)
 create mode 100644 src/client/views/nodes/PDFBox.scss
 create mode 100644 src/client/views/nodes/PDFBox.tsx
 delete mode 100644 src/client/views/nodes/PDFNode.scss
 delete mode 100644 src/client/views/nodes/PDFNode.tsx

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 47b8ea844..f73823603 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -14,9 +14,8 @@ import { HtmlField } from "../../fields/HtmlField";
 import { Key } from "../../fields/Key"
 import { Field } from "../../fields/Field";
 import { KeyValueBox } from "../views/nodes/KeyValueBox"
-import { KVPField } from "../../fields/KVPField";
 import { PDFField } from "../../fields/PDFField";
-import { PDFNode } from "../views/nodes/PDFNode";
+import { PDFBox } from "../views/nodes/PDFBox";
 
 export interface DocumentOptions {
     x?: number;
@@ -100,7 +99,7 @@ export namespace Documents {
         if (!pdfProto) {
             pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionView.LayoutString("AnnotationsKey"),
                 { x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] });
-            pdfProto.SetText(KeyStore.BackgroundLayout, PDFNode.LayoutString());
+            pdfProto.SetText(KeyStore.BackgroundLayout, PDFBox.LayoutString());
         }
         return pdfProto;
     }
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index a7af399e2..513a6ac9e 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -124,15 +124,15 @@ export namespace DragManager {
         //      So we replace the pdf's canvas with the image thumbnail
         const docView: DocumentView = dragData["documentView"];
         const doc: Document = docView ? docView.props.Document : dragData["document"];
-        var pdfNode = dragElement.getElementsByClassName("pdfNode-cont")[0] as HTMLElement;
+        var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement;
         let thumbnail = doc.GetT(KeyStore.Thumbnail, ImageField);
-        if (pdfNode && pdfNode.childElementCount && thumbnail) {
+        if (pdfBox && pdfBox.childElementCount && thumbnail) {
             let img = new Image();
             img!.src = thumbnail.toString();
             img!.style.position = "absolute";
             img!.style.width = `${rect.width / scaleX}px`;
             img!.style.height = `${rect.height / scaleY}px`;
-            pdfNode.replaceChild(img!, pdfNode.children[0])
+            pdfBox.replaceChild(img!, pdfBox.children[0])
         }
 
         dragDiv.appendChild(dragElement);
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 86d9a10e3..74e70ef33 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,30 +1,28 @@
-import { observable, action, computed } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { FieldWaiting } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { TextField } from "../../../fields/TextField";
+import { Documents } from "../../documents/Documents";
 import { DragManager } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionView } from "../collections/CollectionView";
+import { InkingCanvas } from "../InkingCanvas";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
-import { PDFNode } from "../nodes/PDFNode";
+import { KeyValueBox } from "../nodes/KeyValueBox";
+import { PDFBox } from "../nodes/PDFBox";
 import { WebBox } from "../nodes/WebBox";
-import { KeyValueBox } from "../nodes/KeyValueBox"
 import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
-import { Documents } from "../../documents/Documents";
-import { InkingCanvas } from "../InkingCanvas";
-import { InkingControl } from "../InkingControl";
-import { InkTool } from "../../../fields/InkField";
 import React = require("react");
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
@@ -250,7 +248,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
             ( {
     }
     @computed get mainContent() {
         return  {
+    public static LayoutString() { return FieldView.LayoutString(PDFBox); }
+
+    private _mainDiv = React.createRef()
+    private _pdf = React.createRef();
+
+    //very useful for keeping track of X and y position throughout the PDF Canvas
+    private initX: number = 0;
+    private initY: number = 0;
+
+    //checks if tool is on
+    private _toolOn: boolean = false; //checks if tool is on
+    private _pdfContext: any = null; //gets pdf context
+    private bool: Boolean = false; //general boolean debounce
+    private currSpan: any;//keeps track of current span (for highlighting)
+
+    private _currTool: any; //keeps track of current tool button reference
+    private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool 
+    private _drawTool = React.createRef()//drawing tool button reference
+
+    private _colorTool = React.createRef(); //color button reference
+    private _currColor: string = "black"; //current color that user selected (for ink/pen)
+
+    private _highlightTool = React.createRef(); //highlighter button reference
+    private _highlightToolOn: boolean = false;
+    private _pdfCanvas: any;
+
+    @observable private _perPageInfo: Object[] = []; //stores pageInfo
+    @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
+
+    @observable private _currAnno: any = []
+    @observable private _page: number = 1; //default is the first page. 
+    @observable private _numPages: number = 1; //default number of pages
+    @observable private _interactive: boolean = false;
+    @observable private _loaded: boolean = false;
+
+    /**
+     * for pagination backwards
+     */
+    @action
+    onPageBack = () => {
+        if (this._page > 1) {
+            this._page -= 1;
+            this._currAnno = [];
+            this._perPageInfo[this._page] = this._pageInfo
+            this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
+            if (this._perPageInfo[this._page - 1]) {
+                this._pageInfo = this._perPageInfo[this._page - 1];
+            }
+            this.saveThumbnail();
+        }
+    }
+
+    /**
+     * for pagination forwards
+     */
+    @action
+    onPageForward = () => {
+        if (this._page < this._numPages) {
+            this._page += 1;
+            this._currAnno = [];
+            this._perPageInfo[this._page - 2] = this._pageInfo;
+            this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
+            if (this._perPageInfo[this._page - 1]) {
+                this._pageInfo = this._perPageInfo[this._page - 1];
+            }
+            this.saveThumbnail();
+        }
+    }
+
+    /**
+     * selection tool used for area highlighting (stickies). Kinda temporary
+     */
+    selectionTool = () => {
+        this._toolOn = true;
+    }
+    /**
+     * when user draws on the canvas. When mouse pointer is down 
+     */
+    drawDown = (e: PointerEvent) => {
+        this.initX = e.offsetX;
+        this.initY = e.offsetY;
+        this._pdfContext.beginPath();
+        this._pdfContext.lineTo(this.initX, this.initY);
+        this._pdfContext.strokeStyle = this._currColor;
+        this._pdfCanvas.addEventListener("pointermove", this.drawMove);
+        this._pdfCanvas.addEventListener("pointerup", this.drawUp);
+
+    }
+    //when user drags 
+    drawMove = (e: PointerEvent): void => {
+        //x and y mouse movement
+        let x = this.initX += e.movementX,
+            y = this.initY += e.movementY;
+        //connects the point 
+        this._pdfContext.lineTo(x, y);
+        this._pdfContext.stroke();
+    }
+
+    drawUp = (e: PointerEvent) => {
+        this._pdfContext.closePath();
+        this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
+        this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
+        this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
+    }
+
+
+    /**
+     * highlighting helper function
+     */
+    makeEditableAndHighlight = (colour: string) => {
+        var range, sel = window.getSelection();
+        if (sel.rangeCount && sel.getRangeAt) {
+            range = sel.getRangeAt(0);
+        }
+        document.designMode = "on";
+        if (!document.execCommand("HiliteColor", false, colour)) {
+            document.execCommand("HiliteColor", false, colour);
+        }
+
+        if (range) {
+            sel.removeAllRanges();
+            sel.addRange(range);
+
+            let obj: Object = { parentDivs: [], spans: [] };
+            //@ts-ignore
+            if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case
+                obj = this.highlightNodes(range.commonAncestorContainer.childNodes)
+            } else { //single line highlighting case
+                let parentDiv = range.commonAncestorContainer.parentElement
+                if (parentDiv) {
+                    if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten
+                        obj = this.highlightNodes(parentDiv.childNodes)
+                    } else {
+                        parentDiv.childNodes.forEach((child) => {
+                            if (child.nodeName == 'SPAN') {
+                                //@ts-ignore
+                                obj.parentDivs.push(parentDiv)
+                                //@ts-ignore
+                                child.id = "highlighted"
+                                //@ts-ignore
+                                obj.spans.push(child)
+                                child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
+                            }
+                        })
+                    }
+                }
+            }
+            this._pageInfo.divs.push(obj);
+
+        }
+        document.designMode = "off";
+    }
+
+    highlightNodes = (nodes: NodeListOf) => {
+        let temp = { parentDivs: [], spans: [] }
+        nodes.forEach((div) => {
+            div.childNodes.forEach((child) => {
+                if (child.nodeName == 'SPAN') {
+                    //@ts-ignore
+                    temp.parentDivs.push(div)
+                    //@ts-ignore
+                    child.id = "highlighted"
+                    //@ts-ignore
+                    temp.spans.push(child)
+                    child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
+                }
+            })
+
+        })
+        return temp;
+    }
+
+    /**
+     * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
+     */
+    @action
+    onEnter = (e: any) => {
+        let span: HTMLSpanElement = e.toElement;
+        let index: any;
+        this._pageInfo.divs.forEach((obj: any) => {
+            obj.spans.forEach((element: any) => {
+                if (element == span) {
+                    if (!index) {
+                        index = this._pageInfo.divs.indexOf(obj);
+                    }
+                }
+            })
+        })
+
+        if (this._pageInfo.anno.length >= index + 1) {
+            if (this._currAnno.length == 0) {
+                this._currAnno.push(this._pageInfo.anno[index]);
+            }
+        } else {
+            if (this._currAnno.length == 0) { //if there are no current annotation
+                let div = span.offsetParent;
+                //@ts-ignore
+                let divX = div.style.left
+                //@ts-ignore
+                let divY = div.style.top
+                //slicing "px" from the end
+                divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span)
+                divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span)
+                let annotation = 
+                this._pageInfo.anno.push(annotation);
+                this._currAnno.push(annotation);
+            }
+        }
+
+    }
+
+    /**
+     * highlight function for highlighting actual text. This works fine. 
+     */
+    highlight = (color: string) => {
+        if (window.getSelection()) {
+            try {
+                if (!document.execCommand("hiliteColor", false, color)) {
+                    this.makeEditableAndHighlight(color);
+                }
+            } catch (ex) {
+                this.makeEditableAndHighlight(color)
+            }
+        }
+    }
+
+    /**
+     * controls the area highlighting (stickies) Kinda temporary
+     */
+    onPointerDown = (e: React.PointerEvent) => {
+        if (this._toolOn) {
+            let mouse = e.nativeEvent;
+            this.initX = mouse.offsetX;
+            this.initY = mouse.offsetY;
+
+        }
+    }
+
+    /**
+     * controls area highlighting and partially highlighting. Kinda temporary
+     */
+    @action
+    onPointerUp = (e: React.PointerEvent) => {
+        if (this._highlightToolOn) {
+            this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. 
+            this._highlightToolOn = false;
+        }
+        if (this._toolOn) {
+            let mouse = e.nativeEvent;
+            let finalX = mouse.offsetX;
+            let finalY = mouse.offsetY;
+            let width = Math.abs(finalX - this.initX); //width
+            let height = Math.abs(finalY - this.initY); //height
+
+            //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky
+            if (finalX < this.initX) {
+                this.initX = finalX;
+            }
+            if (finalY < this.initY) {
+                this.initY = finalY;
+            }
+
+            if (this._mainDiv.current) {
+                let sticky = 
+                this._pageInfo.area.push(sticky);
+            }
+            this._toolOn = false;
+        }
+        this._interactive = true;
+    }
+
+    /**
+     * starts drawing the line when user presses down. 
+     */
+    onDraw = () => {
+        if (this._currTool != null) {
+            this._currTool.style.backgroundColor = "grey";
+        }
+
+        if (this._drawTool.current) {
+            this._currTool = this._drawTool.current;
+            if (this._drawToolOn) {
+                this._drawToolOn = false;
+                this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
+                this._pdfCanvas.removeEventListener("pointerup", this.drawUp);
+                this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
+                this._drawTool.current.style.backgroundColor = "grey";
+            } else {
+                this._drawToolOn = true;
+                this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
+                this._drawTool.current.style.backgroundColor = "cyan";
+            }
+        }
+    }
+
+
+    /**
+     * for changing color (for ink/pen)
+     */
+    onColorChange = (e: React.PointerEvent) => {
+        if (e.currentTarget.innerHTML == "Red") {
+            this._currColor = "red";
+        } else if (e.currentTarget.innerHTML == "Blue") {
+            this._currColor = "blue";
+        } else if (e.currentTarget.innerHTML == "Green") {
+            this._currColor = "green";
+        } else if (e.currentTarget.innerHTML == "Black") {
+            this._currColor = "black";
+        }
+
+    }
+
+
+    /**
+     * For highlighting (text drag highlighting)
+     */
+    onHighlight = () => {
+        this._drawToolOn = false;
+        if (this._currTool != null) {
+            this._currTool.style.backgroundColor = "grey";
+        }
+        if (this._highlightTool.current) {
+            this._currTool = this._drawTool.current;
+            if (this._highlightToolOn) {
+                this._highlightToolOn = false;
+                this._highlightTool.current.style.backgroundColor = "grey";
+            } else {
+                this._highlightToolOn = true;
+                this._highlightTool.current.style.backgroundColor = "orange";
+            }
+        }
+    }
+
+
+
+
+    @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
+    onLoaded = (page: any) => {
+        if (this._mainDiv.current) {
+            this._mainDiv.current.childNodes.forEach((element) => {
+                if (element.nodeName == "DIV") {
+                    element.childNodes[0].childNodes.forEach((e) => {
+
+                        if (e instanceof HTMLCanvasElement) {
+                            this._pdfCanvas = e;
+                            this._pdfContext = e.getContext("2d")
+
+                        }
+
+                    })
+                }
+            })
+        }
+        this._numPages = page._transport.numPages;
+        if (this._perPageInfo.length == 0) { //Makes sure it only runs once
+            this._perPageInfo = [...Array(this._numPages)]
+        }
+        this._loaded = true;
+    }
+
+    @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
+        //      so this design is flawed.
+        var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
+        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();
+        }
+    }
+
+    @computed
+    get uIButtons() {
+        return (
+            

+                
+                
+                
+                
+                
+                
+                
+                
+                
+            
);
+    }
+
+    @computed
+    get pdfContent() {
+        const renderHeight = 2400;
+        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
+        let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
+        return 

+            
+                
+                    {({ measureRef }) =>
+                        

+                            
+                        

+                    }
+                
+            
+        
;
+    }
+
+    @computed
+    get pdfRenderer() {
+        let proxy = this._loaded ? (null) : this.imageProxyRenderer;
+        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
+        if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) {
+            return proxy;
+        }
+        return [
+            this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element),
+            this._currAnno.map((element: any) => element),
+            this.uIButtons,
+            

+                {this.pdfContent}
+                {proxy}
+            

+        ];
+    }
+
+    @computed
+    get imageProxyRenderer() {
+        let field = this.props.doc.Get(KeyStore.Thumbnail);
+        if (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 ;
+        }
+        return (null);
+    }
+
+    render() {
+        return (
+            

+                {this.pdfRenderer}
+            

+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/PDFNode.scss b/src/client/views/nodes/PDFNode.scss
deleted file mode 100644
index 18ebca952..000000000
--- a/src/client/views/nodes/PDFNode.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.react-pdf__Page {
-    transform-origin: left top;
-    position: absolute;
-}
-.react-pdf__Document {
-    position: absolute;
-}
-.pdfNode-buttonTray {
-    position:absolute;
-    z-index: 25;
-}
-.pdfNode-contentContainer {
-    position: absolute;
-    transform-origin: "left top";
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx
deleted file mode 100644
index 648bd3e62..000000000
--- a/src/client/views/nodes/PDFNode.tsx
+++ /dev/null
@@ -1,515 +0,0 @@
-import { action, observable, _interceptReads, computed } from 'mobx';
-import { observer } from "mobx-react";
-import Measure from "react-measure";
-import 'react-image-lightbox/style.css';
-//@ts-ignore
-import { Document, Page } from "react-pdf";
-import 'react-pdf/dist/Page/AnnotationLayer.css';
-import { Utils } from '../../../Utils';
-import { Annotation } from './Annotation';
-import { FieldView, FieldViewProps } from './FieldView';
-import "./ImageBox.scss";
-import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
-import React = require("react")
-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, 
- * area selection (I call it stickies), embedded ink node for directly annotating using a pen or 
- * mouse, and pagination. 
- *
- * 
- * HOW TO USE: 
- * AREA selection: 
- *          1) Click on Area button. 
- *          2) click on any part of the PDF, and drag to get desired sized area shape
- *          3) You can write on the area (hence the reason why it's called sticky)
- *          4) to make another area, you need to click on area button AGAIN. 
- * 
- * HIGHLIGHT: (Buggy. No multiline/multidiv text highlighting for now...)
- *          1) just click and drag on a text
- *          2) click highlight
- *          3) for annotation, just pull your cursor over to that text
- *          4) another method: click on highlight first and then drag on your desired text
- *          5) To make another highlight, you need to reclick on the button 
- * 
- * Draw:
- *          1) click draw and select color. then just draw like there's no tomorrow.
- *          2) once you finish drawing your masterpiece, just reclick on the draw button to end your drawing session. 
- * 
- * Pagination:
- *          1) click on arrows. You'll notice that stickies will stay in those page. But... highlights won't. 
- *          2) to test this out, make few area/stickies and then click on next page then come back. You'll see that they are all saved. 
- *
- * 
- * written by: Andrew Kim 
- */
-@observer
-export class PDFNode extends React.Component {
-    public static LayoutString() { return FieldView.LayoutString(PDFNode); }
-
-    private _mainDiv = React.createRef()
-    private _pdf = React.createRef();
-
-    //very useful for keeping track of X and y position throughout the PDF Canvas
-    private initX: number = 0;
-    private initY: number = 0;
-
-    //checks if tool is on
-    private _toolOn: boolean = false; //checks if tool is on
-    private _pdfContext: any = null; //gets pdf context
-    private bool: Boolean = false; //general boolean debounce
-    private currSpan: any;//keeps track of current span (for highlighting)
-
-    private _currTool: any; //keeps track of current tool button reference
-    private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool 
-    private _drawTool = React.createRef()//drawing tool button reference
-
-    private _colorTool = React.createRef(); //color button reference
-    private _currColor: string = "black"; //current color that user selected (for ink/pen)
-
-    private _highlightTool = React.createRef(); //highlighter button reference
-    private _highlightToolOn: boolean = false;
-    private _pdfCanvas: any;
-
-    @observable private _perPageInfo: Object[] = []; //stores pageInfo
-    @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
-
-    @observable private _currAnno: any = []
-    @observable private _page: number = 1; //default is the first page. 
-    @observable private _numPages: number = 1; //default number of pages
-    @observable private _interactive: boolean = false;
-    @observable private _loaded: boolean = false;
-
-    /**
-     * for pagination backwards
-     */
-    @action
-    onPageBack = () => {
-        if (this._page > 1) {
-            this._page -= 1;
-            this._currAnno = [];
-            this._perPageInfo[this._page] = this._pageInfo
-            this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
-            if (this._perPageInfo[this._page - 1]) {
-                this._pageInfo = this._perPageInfo[this._page - 1];
-            }
-            this.saveThumbnail();
-        }
-    }
-
-    /**
-     * for pagination forwards
-     */
-    @action
-    onPageForward = () => {
-        if (this._page < this._numPages) {
-            this._page += 1;
-            this._currAnno = [];
-            this._perPageInfo[this._page - 2] = this._pageInfo;
-            this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
-            if (this._perPageInfo[this._page - 1]) {
-                this._pageInfo = this._perPageInfo[this._page - 1];
-            }
-            this.saveThumbnail();
-        }
-    }
-
-    /**
-     * selection tool used for area highlighting (stickies). Kinda temporary
-     */
-    selectionTool = () => {
-        this._toolOn = true;
-    }
-    /**
-     * when user draws on the canvas. When mouse pointer is down 
-     */
-    drawDown = (e: PointerEvent) => {
-        this.initX = e.offsetX;
-        this.initY = e.offsetY;
-        this._pdfContext.beginPath();
-        this._pdfContext.lineTo(this.initX, this.initY);
-        this._pdfContext.strokeStyle = this._currColor;
-        this._pdfCanvas.addEventListener("pointermove", this.drawMove);
-        this._pdfCanvas.addEventListener("pointerup", this.drawUp);
-
-    }
-    //when user drags 
-    drawMove = (e: PointerEvent): void => {
-        //x and y mouse movement
-        let x = this.initX += e.movementX,
-            y = this.initY += e.movementY;
-        //connects the point 
-        this._pdfContext.lineTo(x, y);
-        this._pdfContext.stroke();
-    }
-
-    drawUp = (e: PointerEvent) => {
-        this._pdfContext.closePath();
-        this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
-        this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
-        this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
-    }
-
-
-    /**
-     * highlighting helper function
-     */
-    makeEditableAndHighlight = (colour: string) => {
-        var range, sel = window.getSelection();
-        if (sel.rangeCount && sel.getRangeAt) {
-            range = sel.getRangeAt(0);
-        }
-        document.designMode = "on";
-        if (!document.execCommand("HiliteColor", false, colour)) {
-            document.execCommand("HiliteColor", false, colour);
-        }
-
-        if (range) {
-            sel.removeAllRanges();
-            sel.addRange(range);
-
-            let obj: Object = { parentDivs: [], spans: [] };
-            //@ts-ignore
-            if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case
-                obj = this.highlightNodes(range.commonAncestorContainer.childNodes)
-            } else { //single line highlighting case
-                let parentDiv = range.commonAncestorContainer.parentElement
-                if (parentDiv) {
-                    if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten
-                        obj = this.highlightNodes(parentDiv.childNodes)
-                    } else {
-                        parentDiv.childNodes.forEach((child) => {
-                            if (child.nodeName == 'SPAN') {
-                                //@ts-ignore
-                                obj.parentDivs.push(parentDiv)
-                                //@ts-ignore
-                                child.id = "highlighted"
-                                //@ts-ignore
-                                obj.spans.push(child)
-                                child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
-                            }
-                        })
-                    }
-                }
-            }
-            this._pageInfo.divs.push(obj);
-
-        }
-        document.designMode = "off";
-    }
-
-    highlightNodes = (nodes: NodeListOf) => {
-        let temp = { parentDivs: [], spans: [] }
-        nodes.forEach((div) => {
-            div.childNodes.forEach((child) => {
-                if (child.nodeName == 'SPAN') {
-                    //@ts-ignore
-                    temp.parentDivs.push(div)
-                    //@ts-ignore
-                    child.id = "highlighted"
-                    //@ts-ignore
-                    temp.spans.push(child)
-                    child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
-                }
-            })
-
-        })
-        return temp;
-    }
-
-    /**
-     * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
-     */
-    @action
-    onEnter = (e: any) => {
-        let span: HTMLSpanElement = e.toElement;
-        let index: any;
-        this._pageInfo.divs.forEach((obj: any) => {
-            obj.spans.forEach((element: any) => {
-                if (element == span) {
-                    if (!index) {
-                        index = this._pageInfo.divs.indexOf(obj);
-                    }
-                }
-            })
-        })
-
-        if (this._pageInfo.anno.length >= index + 1) {
-            if (this._currAnno.length == 0) {
-                this._currAnno.push(this._pageInfo.anno[index]);
-            }
-        } else {
-            if (this._currAnno.length == 0) { //if there are no current annotation
-                let div = span.offsetParent;
-                //@ts-ignore
-                let divX = div.style.left
-                //@ts-ignore
-                let divY = div.style.top
-                //slicing "px" from the end
-                divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span)
-                divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span)
-                let annotation = 
-                this._pageInfo.anno.push(annotation);
-                this._currAnno.push(annotation);
-            }
-        }
-
-    }
-
-    /**
-     * highlight function for highlighting actual text. This works fine. 
-     */
-    highlight = (color: string) => {
-        if (window.getSelection()) {
-            try {
-                if (!document.execCommand("hiliteColor", false, color)) {
-                    this.makeEditableAndHighlight(color);
-                }
-            } catch (ex) {
-                this.makeEditableAndHighlight(color)
-            }
-        }
-    }
-
-    /**
-     * controls the area highlighting (stickies) Kinda temporary
-     */
-    onPointerDown = (e: React.PointerEvent) => {
-        if (this._toolOn) {
-            let mouse = e.nativeEvent;
-            this.initX = mouse.offsetX;
-            this.initY = mouse.offsetY;
-
-        }
-    }
-
-    /**
-     * controls area highlighting and partially highlighting. Kinda temporary
-     */
-    @action
-    onPointerUp = (e: React.PointerEvent) => {
-        if (this._highlightToolOn) {
-            this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. 
-            this._highlightToolOn = false;
-        }
-        if (this._toolOn) {
-            let mouse = e.nativeEvent;
-            let finalX = mouse.offsetX;
-            let finalY = mouse.offsetY;
-            let width = Math.abs(finalX - this.initX); //width
-            let height = Math.abs(finalY - this.initY); //height
-
-            //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky
-            if (finalX < this.initX) {
-                this.initX = finalX;
-            }
-            if (finalY < this.initY) {
-                this.initY = finalY;
-            }
-
-            if (this._mainDiv.current) {
-                let sticky = 
-                this._pageInfo.area.push(sticky);
-            }
-            this._toolOn = false;
-        }
-        this._interactive = true;
-    }
-
-    /**
-     * starts drawing the line when user presses down. 
-     */
-    onDraw = () => {
-        if (this._currTool != null) {
-            this._currTool.style.backgroundColor = "grey";
-        }
-
-        if (this._drawTool.current) {
-            this._currTool = this._drawTool.current;
-            if (this._drawToolOn) {
-                this._drawToolOn = false;
-                this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
-                this._pdfCanvas.removeEventListener("pointerup", this.drawUp);
-                this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
-                this._drawTool.current.style.backgroundColor = "grey";
-            } else {
-                this._drawToolOn = true;
-                this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
-                this._drawTool.current.style.backgroundColor = "cyan";
-            }
-        }
-    }
-
-
-    /**
-     * for changing color (for ink/pen)
-     */
-    onColorChange = (e: React.PointerEvent) => {
-        if (e.currentTarget.innerHTML == "Red") {
-            this._currColor = "red";
-        } else if (e.currentTarget.innerHTML == "Blue") {
-            this._currColor = "blue";
-        } else if (e.currentTarget.innerHTML == "Green") {
-            this._currColor = "green";
-        } else if (e.currentTarget.innerHTML == "Black") {
-            this._currColor = "black";
-        }
-
-    }
-
-
-    /**
-     * For highlighting (text drag highlighting)
-     */
-    onHighlight = () => {
-        this._drawToolOn = false;
-        if (this._currTool != null) {
-            this._currTool.style.backgroundColor = "grey";
-        }
-        if (this._highlightTool.current) {
-            this._currTool = this._drawTool.current;
-            if (this._highlightToolOn) {
-                this._highlightToolOn = false;
-                this._highlightTool.current.style.backgroundColor = "grey";
-            } else {
-                this._highlightToolOn = true;
-                this._highlightTool.current.style.backgroundColor = "orange";
-            }
-        }
-    }
-
-
-
-
-    @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
-    onLoaded = (page: any) => {
-        if (this._mainDiv.current) {
-            this._mainDiv.current.childNodes.forEach((element) => {
-                if (element.nodeName == "DIV") {
-                    element.childNodes[0].childNodes.forEach((e) => {
-
-                        if (e instanceof HTMLCanvasElement) {
-                            this._pdfCanvas = e;
-                            this._pdfContext = e.getContext("2d")
-
-                        }
-
-                    })
-                }
-            })
-        }
-        this._numPages = page.transport.numPages
-        if (this._perPageInfo.length == 0) { //Makes sure it only runs once
-            this._perPageInfo = [...Array(this._numPages)]
-        }
-        this._loaded = true;
-    }
-
-    @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
-        //      so this design is flawed.
-        var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
-        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();
-        }
-    }
-
-    @computed
-    get uIButtons() {
-        return (
-            

-                
-                
-                
-                
-                
-                
-                
-                
-                
-            
);
-    }
-
-    @computed
-    get pdfContent() {
-        const renderHeight = 2400;
-        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
-        let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
-        return 

-            
-                
-                    {({ measureRef }) =>
-                        

-                            
-                        

-                    }
-                
-            
-        
;
-    }
-
-    @computed
-    get pdfRenderer() {
-        let proxy = this._loaded ? (null) : this.imageProxyRenderer;
-        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
-        if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) {
-            return proxy;
-        }
-        return [
-            this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element),
-            this._currAnno.map((element: any) => element),
-            this.uIButtons,
-            

-                {this.pdfContent}
-                {proxy}
-            

-        ];
-    }
-
-    @computed
-    get imageProxyRenderer() {
-        let field = this.props.doc.Get(KeyStore.Thumbnail);
-        if (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 ;
-        }
-        return (null);
-    }
-
-    render() {
-        return (
-            

-                {this.pdfRenderer}
-            

-        );
-    }
-
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2