Merge branch 'newDocs' of https://github.com/browngraphicslab/Dash-Web into newDocs

9 files changed, 252 insertions, 150 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 0dfa6f0ff..ecddb8b06 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,5 +1,6 @@
 @import "globalCssVariables";
 
+$linkGap : 3px;
 .documentDecorations {
     position: absolute;
 }
@@ -72,6 +73,7 @@
     }
 }
 
+
 .documentDecorations-closeButton {
     background: $alt-accent;
     opacity: 0.8;
@@ -103,36 +105,77 @@
     opacity: 0.1;
 }
 
+//     position: absolute;
+//     display: grid;
+//     z-index: 1000;
+//     grid-template-rows: 20px 1fr 20px 0px;
+//     grid-template-columns: 20px 1fr 20px;
+//     pointer-events: none;
+//     #documentDecorations-centerCont {
+//         background: none;
+//     }
+//     .documentDecorations-resizer {
+//         pointer-events: auto;
+//         background: lightblue;
+//         opacity: 0.4;
+//     }
+//     #documentDecorations-topLeftResizer,
+//     #documentDecorations-bottomRightResizer {
+//         cursor: nwse-resize;
+//     }
+//     #documentDecorations-topRightResizer,
+//     #documentDecorations-bottomLeftResizer {
+//         cursor: nesw-resize;
+//     }
+//     #documentDecorations-topResizer,
+//     #documentDecorations-bottomResizer {
+//         cursor: ns-resize;
+//     }
+//     #documentDecorations-leftResizer,
+//     #documentDecorations-rightResizer {
+//         cursor: ew-resize;
+//     }
+// }
 .linkFlyout {
+    grid-column: 2/4;
+    margin-top: $linkGap;
+}
+
+.linkButton-empty:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.linkButton-nonempty:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.link-button-container {
     grid-column: 1/4;
-    margin-left: 25px;
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-direction: row;
 }
 
 .linkButton-linker {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
+    margin-left: 5px;
+    margin-top: $linkGap;
     height: 20px;
     width: 20px;
-    margin-top: 10px;
-    margin-right: 5px;
+    text-align: center;
     border-radius: 50%;
-    opacity: 0.9;
     pointer-events: auto;
     color: $dark-color;
     border: $dark-color 1px solid;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    transition: transform 0.2s;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
 
-.linkButton-tray {
-    grid-column: 1/4;
+.linkButton-linker:hover {
+    cursor: pointer;
+    transform: scale(1.05);
 }
 
 .linkButton-empty, .linkButton-nonempty {
@@ -164,38 +207,50 @@
     bottom: 0;
     left: 50px;
     pointer-events: auto;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 75%;
+    transition: transform 0.2s;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
-    .templating-button {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        opacity: 0.9;
-        background-color: $dark-color;
-        color: $light-color;
-        text-align: center;
-        cursor: pointer;
+.fa-icon-link {
+    margin-top: 3px;
+}
+.templating-button {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    opacity: 0.9;
+    font-size:14;
+    background-color: $dark-color;
+    color: $light-color;
+    text-align: center;
+    cursor: pointer;
 
-        &:hover {
-            background: $main-accent;
-            transform: scale(1.05);
-        }
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
     }
+}
+
+#template-list {
+    position: absolute;
+    top: 0;
+    left: 30px;
+    width: 150px;
+    line-height: 25px;
+    max-height: 175px;
+    font-family: $sans-serif;
+    font-size: 12px;
+    background-color: $light-color-secondary;
+    padding: 2px 12px;
+    list-style: none;
 
-    #template-list {
-        position: absolute;
-        top: 0;
-        left: 30px;
-        width: 150px;
-        line-height: 25px;
-        max-height: 175px;
-        font-family: $sans-serif;
-        font-size: 12px;
-        background-color: $light-color-secondary;
-        padding: 2px 12px;
-        list-style: none;
-
-        input {
-            margin-right: 10px;
-        }
+    input {
+        margin-right: 10px;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8ee6a5b64..3ed8ba3b2 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -21,6 +21,11 @@ import { List } from "../../new_fields/List";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+library.add(faLink);
 
 @observer
 export class DocumentDecorations extends React.Component<{}, { value: string }> {
@@ -29,7 +34,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     private _resizing = "";
     private keyinput: React.RefObject<HTMLInputElement>;
     private _resizeBorderWidth = 16;
-    private _linkBoxHeight = 20;
+    private _linkBoxHeight = 20 + 3; // link button height + margin
     private _titleHeight = 20;
     private _linkButton = React.createRef<HTMLDivElement>();
     private _linkerButton = React.createRef<HTMLDivElement>();
@@ -550,10 +555,17 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-
-                <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
-                <div className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>∞</div>
-                <TemplateMenu doc={doc} templates={templates} />
+                <div className="link-button-container">
+                    <div className="linkButtonWrapper">
+                        <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
+                    </div>
+                    <div className="linkButtonWrapper">
+                        <div title="Drag Link" className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
+                            <FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
+                        </div>
+                    </div>
+                    <TemplateMenu doc={doc} templates={templates} />
+                </div>
             </div >
         </div>
         );
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 89fdf595a..cbf920793 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,5 +1,6 @@
 @import "globalCssVariables";
 @import "nodeModuleOverrides";
+
 html,
 body {
     width: 100%;
@@ -7,9 +8,9 @@ body {
     overflow: auto;
     font-family: $sans-serif;
     margin: 0;
-    position:absolute;
+    position: absolute;
     top: 0;
-    left:0;
+    left: 0;
 }
 
 div {
@@ -120,6 +121,7 @@ button:hover {
     position: absolute;
     bottom: 62px;
     left: 24px;
+
     .toolbar-button {
         display: block;
         margin-bottom: 10px;
@@ -129,8 +131,9 @@ button:hover {
 // add nodes menu. Note that the + button is actually an input label, not an actual button.
 #add-nodes-menu {
     position: absolute;
-    bottom: 24px;
+    bottom: 22px;
     left: 24px;
+
     label {
         background: $dark-color;
         color: $light-color;
@@ -143,44 +146,51 @@ button:hover {
         cursor: pointer;
         transition: transform 0.2s;
     }
+
     label p {
         padding-left: 10.5px;
-        padding-top: 3px;
     }
+
     label:hover {
         background: $main-accent;
         transform: scale(1.15);
     }
+
     input {
         display: none;
     }
+
     input:not(:checked)~#add-options-content {
         display: none;
     }
+
     input:checked~label {
         transform: rotate(45deg);
         transition: transform 0.5s;
         cursor: pointer;
     }
 }
+
 #root {
     overflow: visible;
 }
+
 #main-div {
-    width:100%;
-    height:100%;
-    position:absolute;
+    width: 100%;
+    height: 100%;
+    position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     overflow: scroll;
 }
 #mainContent-div {
-    width:100%;
-    height:100%;
-    position:absolute;
+    width: 100%;
+    height: 100%;
+    position: absolute;
     top: 0;
-    left:0;
+    left: 0;
 }
+
 #add-options-content {
     display: table;
     opacity: 1;
@@ -194,7 +204,8 @@ button:hover {
 
 ul#add-options-list {
     list-style: none;
-    padding: 0;
+    padding: 5 0 0 0;
+
     li {
         display: inline-block;
         padding: 0;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 67a0e532c..cb849b325 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,91 +1,103 @@
 @import "../../globalCssVariables";
-.collectionfreeformview {
-  position: inherit;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform-origin: left top;
-  pointer-events: none;
+
+.collectionfreeformview-ease {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: left top;
+    transition: transform 1s;
 }
-.collectionfreeformview-container {
-  .collectionfreeformview > .jsx-parser {
+
+.collectionfreeformview-none {
     position: inherit;
-    height: 100%;
+    top: 0;
+    left: 0;
     width: 100%;
-  }
+    height: 100%;
+    transform-origin: left top;
+}
 
-  //nested freeform views
-  // .collectionfreeformview-container {
+.collectionfreeformview-container {
+    .collectionfreeformview>.jsx-parser {
+        position: inherit;
+        height: 100%;
+        width: 100%;
+    }
+
+    //nested freeform views
+    // .collectionfreeformview-container {
     // background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px),
     //   linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px);
     // background-size: 30px 30px;
-  // }
-
-  border-width: $COLLECTION_BORDER_WIDTH;
-  box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
-  border-color:  $light-color-secondary;
-  border-style: solid; 
-  border-radius: $border-radius;
-  box-sizing: border-box;
-  position: absolute;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+    // }
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
+    border: 0px solid $light-color-secondary;
+    border-radius: $border-radius;
+    box-sizing: border-box;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
+  
+
 .collectionfreeformview-overlay {
-  .collectionfreeformview > .jsx-parser {
-    position: inherit;
-    height: 100%;
-  }
-  .formattedTextBox-cont {
-    background: $light-color-secondary;
-    overflow: visible;
-  }
- 
-  opacity: 0.99;
-  border-width: 0; 
-  border-color: transparent;
-  border-style: solid; 
-  border-radius: $border-radius;
-  box-sizing: border-box;
-  position: absolute;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  .collectionfreeformview {
+    .collectionfreeformview>.jsx-parser {
+        position: inherit;
+        height: 100%;
+    }
+
     .formattedTextBox-cont {
-        background:yellow;
+        background: $light-color-secondary;
+        overflow: visible;
+    }
+
+    opacity: 0.99;
+    border: 0px solid transparent;
+    border-radius: $border-radius;
+    box-sizing: border-box;
+    position:absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    .collectionfreeformview {
+        .formattedTextBox-cont {
+            background: yellow;
+        }
     }
-  }
 }
 
 // selection border...?
 .border {
-  border-style: solid;
-  box-sizing: border-box;
-  width: 98%;
-  height: 98%;
-  border-radius: $border-radius;
+    border-style: solid;
+    box-sizing: border-box;
+    width: 98%;
+    height: 98%;
+    border-radius: $border-radius;
 }
 
 //this is an animation for the blinking cursor!
 @keyframes blink {
-  0% {
-    opacity: 0;
-  }
-  49% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
+
+    49% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
 }
 
 #prevCursor {
-  animation: blink 1s infinite;
-}
+    animation: blink 1s infinite;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e54553d2b..4b759b948 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -237,10 +237,15 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
 
     focusDocument = (doc: Doc) => {
+        SelectionManager.DeselectAll();
+        this.props.Document.panTransformType = "Ease";
         this.setPan(
             NumCast(doc.x) + NumCast(doc.width) / 2,
             NumCast(doc.y) + NumCast(doc.height) / 2);
         this.props.focus(this.props.Document);
+        if (this.props.Document.panTransformType === "Ease") {
+            setTimeout(() => this.props.Document.panTransformType = "None", 2000);  // wait 3 seconds, then reset to false
+        }
     }
 
 
@@ -292,6 +297,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     private childViews = () => [...this.views, <CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />];
     render() {
         const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`;
+        const easing = () => this.props.Document.panTransformType === "Ease";
         return (
             <div className={containerName} ref={this.createDropTarget} onWheel={this.onPointerWheel}
                 style={{ borderRadius: "inherit" }}
@@ -300,7 +306,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                     addDocument={this.addDocument} removeDocument={this.props.removeDocument} addLiveTextDocument={this.addLiveTextBox}
                     getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
                     <CollectionFreeFormViewPannableContents centeringShiftX={this.centeringShiftX} centeringShiftY={this.centeringShiftY}
-                        zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
+                        easing={easing} zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
+
                         <CollectionFreeFormLinksView {...this.props} key="freeformLinks">
                             <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} >
                                 {this.childViews}
@@ -347,17 +354,19 @@ interface CollectionFreeFormViewPannableContentsProps {
     panX: () => number;
     panY: () => number;
     zoomScaling: () => number;
+    easing: () => boolean;
 }
 
 @observer
 class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{
     render() {
+        let freeformclass = "collectionfreeformview" + (this.props.easing() ? "-ease" : "-none");
         const cenx = this.props.centeringShiftX();
         const ceny = this.props.centeringShiftY();
         const panx = -this.props.panX();
         const pany = -this.props.panY();
         const zoom = this.props.zoomScaling();// needs to be a variable outside of the <Measure> otherwise, reactions won't fire
-        return <div className="collectionfreeformview" style={{ borderRadius: "inherit", transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
+        return <div className={freeformclass} style={{ borderRadius: "inherit", transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
             {this.props.children}
         </div>;
     }
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index 8bc70b48f..639f83b38 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,14 +1,14 @@
 @import "../globalCssVariables";
 .link-container {
     width: 100%;
-    height: 35px;
+    height: 50px;
     display: flex;
     flex-direction: row;
     border-top: 0.5px solid #bababa;
 }
 
 .info-container {
-    width: 55%;
+    width: 65%;
     padding-top: 5px;
     padding-left: 5px;
     display: flex;
@@ -24,7 +24,8 @@
 }
 
 .button-container {
-    width: 45%;
+    width: 35%;
+    padding-top: 8px;
     display: flex;
     flex-direction: row;
 }
@@ -49,17 +50,17 @@
     cursor: pointer;
 }
 
-.fa-icon-view {
-    margin-left: 3px;
-    margin-top: 5px;
-}
+// .fa-icon-view {
+//     margin-left: 3px;
+//     margin-top: 5px;
+// }
 
 .fa-icon-edit {
-    margin-left: 5px;
-    margin-top: 5px;
+    margin-left: 6px;
+    margin-top: 6px;
 }
 
 .fa-icon-delete {
-    margin-left: 6px;
-    margin-top: 5px;
+    margin-left: 7px;
+    margin-top: 6px;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 9bb90de0d..b1e7fd6d7 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -10,6 +10,7 @@ import React = require("react");
 import { Doc } from '../../../new_fields/Doc';
 import { Cast, NumCast } from '../../../new_fields/Types';
 import { listSpec } from '../../../new_fields/Schema';
+import { action } from 'mobx';
 
 
 library.add(faEye);
@@ -45,6 +46,7 @@ export class LinkBox extends React.Component<Props> {
                 }
                 let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
                 if (contextView) {
+                    contextDoc.panTransformType = "Ease";
                     contextView.props.focus(contextDoc);
                 } else {
                     CollectionDockingView.Instance.AddRightSplit(contextDoc);
@@ -59,6 +61,7 @@ export class LinkBox extends React.Component<Props> {
         this.props.showEditor();
     }
 
+    @action
     onDeleteButtonPressed = async (e: React.PointerEvent): Promise<void> => {
         e.stopPropagation();
         const [linkedFrom, linkedTo] = await Promise.all([Cast(this.props.linkDoc.linkedFrom, Doc), Cast(this.props.linkDoc.linkedTo, Doc)]);
@@ -91,8 +94,8 @@ export class LinkBox extends React.Component<Props> {
                 </div>
 
                 <div className="button-container">
-                    <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}>
-                        <FontAwesomeIcon className="fa-icon-view" icon="eye" size="sm" /></div>
+                    {/* <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}>
+                        <FontAwesomeIcon className="fa-icon-view" icon="eye" size="sm" /></div> */}
                     <div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}>
                         <FontAwesomeIcon className="fa-icon-edit" icon="edit" size="sm" /></div>
                     <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}>
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index ea2e7289c..9629585d7 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -22,7 +22,7 @@
 
 .save-button {
     width: 50px;
-    height: 20px;
+    height: 22px;
     pointer-events: auto;
     background-color: $dark-color;
     color: $light-color;
@@ -38,6 +38,5 @@
 
 .save-button:hover {
     background: $main-accent;
-    transform: scale(1.05);
     cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index c4ad5ae95..113380ce8 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -166,7 +166,7 @@ export namespace Doc {
     export function MakeLink(source: Doc, target: Doc) {
         UndoManager.RunInBatch(() => {
             let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
-            linkDoc.title = "New Link";
+            linkDoc.title = "-link name-";
             linkDoc.linkDescription = "";
             linkDoc.linkTags = "Default";