Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web into propsRefactor

2 files changed, 150 insertions, 173 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 02e0a18df..80ddd1878 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,10 +1,10 @@
-import { DocumentDecorations } from "../views/DocumentDecorations";
-import { CollectionDockingView } from "../views/collections/CollectionDockingView";
-import { Document } from "../../fields/Document";
 import { action } from "mobx";
+import { Document } from "../../fields/Document";
 import { ImageField } from "../../fields/ImageField";
 import { KeyStore } from "../../fields/KeyStore";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import { CollectionView } from "../views/collections/CollectionView";
+import { DocumentDecorations } from "../views/DocumentDecorations";
 import { DocumentView } from "../views/nodes/DocumentView";
 import { returnFalse } from "../../Utils";
 
@@ -17,7 +17,7 @@ export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc:
         document.removeEventListener('pointerup', onRowUp);
         var dragData = new DragManager.DocumentDragData([docFunc()]);
         dragData.moveDocument = moveFunc;
-        DragManager.StartDocumentDrag([_reference.current!], dragData);
+        DragManager.StartDocumentDrag([_reference.current!], dragData, e.x, e.y);
     });
     let onRowUp = action((e: PointerEvent): void => {
         document.removeEventListener("pointermove", onRowMove);
@@ -123,20 +123,9 @@ export namespace DragManager {
         [id: string]: any;
     }
 
-    export function StartDocumentDrag(
-        eles: HTMLElement[],
-        dragData: DocumentDragData,
-        options?: DragOptions
-    ) {
-        StartDrag(
-            eles,
-            dragData,
-            options,
-            (dropData: { [id: string]: any }) =>
-                (dropData.droppedDocuments = dragData.aliasOnDrop
-                    ? dragData.draggedDocuments.map(d => d.CreateAlias())
-                    : dragData.draggedDocuments)
-        );
+    export function StartDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions) {
+        StartDrag(eles, dragData, downX, downY, options,
+            (dropData: { [id: string]: any }) => (dropData.droppedDocuments = dragData.aliasOnDrop ? dragData.draggedDocuments.map(d => d.CreateAlias()) : dragData.draggedDocuments));
     }
 
     export class LinkDragData {
@@ -147,19 +136,12 @@ export namespace DragManager {
         linkSourceDocumentView: DocumentView;
         [id: string]: any;
     }
-    export function StartLinkDrag(
-        ele: HTMLElement,
-        dragData: LinkDragData,
-        options?: DragOptions
-    ) {
-        StartDrag([ele], dragData, options);
+
+    export function StartLinkDrag(ele: HTMLElement, dragData: LinkDragData, downX: number, downY: number, options?: DragOptions) {
+        StartDrag([ele], dragData, downX, downY, options);
     }
-    function StartDrag(
-        eles: HTMLElement[],
-        dragData: { [id: string]: any },
-        options?: DragOptions,
-        finishDrag?: (dropData: { [id: string]: any }) => void
-    ) {
+
+    function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: { [id: string]: any }) => void) {
         if (!dragDiv) {
             dragDiv = document.createElement("div");
             dragDiv.className = "dragManager-dragDiv";
@@ -198,23 +180,22 @@ export namespace DragManager {
             dragElement.style.width = `${rect.width / scaleX}px`;
             dragElement.style.height = `${rect.height / scaleY}px`;
 
-            // bcz: PDFs don't show up if you clone them because they contain a canvas.
+            // bcz: if PDFs are rendered with svg's, then this code isn't needed
+            // bcz: PDFs don't show up if you clone them when rendered using 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
-            if (docs.length) {
-                var pdfBox = dragElement.getElementsByClassName(
-                    "pdfBox-cont"
-                )[0] as HTMLElement;
-                let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField);
-                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`;
-                    pdfBox.replaceChild(img, pdfBox.children[0])
-                }
-            }
+            // if (docs.length) {
+            //     var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement;
+            //     let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField);
+            //     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`;
+            //         pdfBox.replaceChild(img, pdfBox.children[0])
+            //     }
+            // }
 
             dragDiv.appendChild(dragElement);
             return dragElement;
@@ -230,6 +211,8 @@ export namespace DragManager {
         }
         eles.map(ele => (ele.hidden = hideSource));
 
+        let lastX = downX;
+        let lastY = downY;
         const moveHandler = (e: PointerEvent) => {
             e.stopPropagation();
             e.preventDefault();
@@ -244,12 +227,14 @@ export namespace DragManager {
                     button: 0
                 });
             }
-            dragElements.map(
-                (dragElement, i) =>
-                    (dragElement.style.transform = `translate(${(xs[i] +=
-                        e.movementX)}px, ${(ys[i] += e.movementY)}px) scale(${
-                        scaleXs[i]
-                        }, ${scaleYs[i]})`)
+            //TODO: Why can't we use e.movementX and e.movementY?
+            let moveX = e.pageX - lastX;
+            let moveY = e.pageY - lastY;
+            lastX = e.pageX;
+            lastY = e.pageY;
+            dragElements.map((dragElement, i) => (dragElement.style.transform =
+                `translate(${(xs[i] += moveX)}px, ${(ys[i] += moveY)}px) 
+                scale(${scaleXs[i]}, ${scaleYs[i]})`)
             );
         };
 
@@ -267,13 +252,7 @@ export namespace DragManager {
         document.addEventListener("pointerup", upHandler);
     }
 
-    function FinishDrag(
-        dragEles: HTMLElement[],
-        e: PointerEvent,
-        dragData: { [index: string]: any },
-        options?: DragOptions,
-        finishDrag?: (dragData: { [index: string]: any }) => void
-    ) {
+    function FinishDrag(dragEles: HTMLElement[], e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions, finishDrag?: (dragData: { [index: string]: any }) => void) {
         let removed = dragEles.map(dragEle => {
             let parent = dragEle.parentElement;
             if (parent) parent.removeChild(dragEle);
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 2a613ba8b..913472aa0 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -11,129 +11,127 @@ 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';
+import { faListUl } from '@fortawesome/free-solid-svg-icons';
 
 
 //appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc.
 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") },
-      //this doesn't work currently - look into notion of active block
-      { 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)) {
-          let active = command(view.state, view.dispatch, view);
-          //uncomment this if we want the bullet button to disappear if current selection is bulleted
-          // dom.style.display = active ? "" : "none"
+    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") },
+            //this doesn't work currently - look into notion of active block
+            { 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.target as Node)) {
+                    let active = command(view.state, view.dispatch, view);
+                    //uncomment this if we want the bullet button to disappear if current selection is bulleted
+                    // dom.style.display = active ? "" : "none"
+                }
+            })
+        })
+
+        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;
+    }
+
+    //adapted this method - use it to check if block has a tag (ie bulleting)
+    blockActive(type: NodeType<Schema<string, string>>, state: EditorState) {
+        let attrs = {};
+
+        if (state.selection instanceof NodeSelection) {
+            const sel: NodeSelection = state.selection;
+            let $from = sel.$from;
+            let to = sel.to;
+            let node = sel.node;
+
+            if (node) {
+                return node.hasMarkup(type, attrs);
+            }
+
+            return to <= $from.end() && $from.parent.hasMarkup(type, attrs);
         }
-      })
-    })
-
-    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;
-  }
-
-  //adapted this method - use it to check if block has a tag (ie bulleting)
-  blockActive(type: NodeType<Schema<string, string>>, state: EditorState) {
-    let attrs = {};
-
-    if (state.selection instanceof NodeSelection) {
-      const sel: NodeSelection = state.selection;
-      let $from = sel.$from;
-      let to = sel.to;
-      let node = sel.node;
-
-      if (node) {
-        return node.hasMarkup(type, attrs);
-      }
-
-      return to <= $from.end() && $from.parent.hasMarkup(type, attrs);
     }
-  }
-
-  //this doesn't currently work but could be used to use icons for buttons
-  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")
+
+    //this doesn't currently work but could be used to use icons for buttons
+    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
+
+    //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
+        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 = 122 + "px";
+        this.tooltip.style.bottom = (box.bottom - start.top) + "px";
     }
 
-    // Otherwise, reposition it and update its content
-    this.tooltip.style.display = ""
-    let { from, to } = state.selection
-    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 = 122 + "px";
-    this.tooltip.style.bottom = (box.bottom - start.top) + "px";
-  }
-
-  destroy() { this.tooltip.remove() }
+    destroy() { this.tooltip.remove() }
 }
\ No newline at end of file