From 0bc5f59932edae2d32ac378db1afc2733044eb9c Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Tue, 9 Apr 2019 19:07:31 -0400
Subject: all styling stuff done

---
 src/client/views/nodes/LinkBox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes/LinkBox.tsx')

diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index b016a3d48..ca1b97eba 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -110,8 +110,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}>
-- 
cgit v1.2.3-70-g09d2


From f8d4fa3d161da88e63e51c4a8940a3c44d0ae62e Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Tue, 9 Apr 2019 22:01:44 -0400
Subject: for now

---
 src/client/views/DocumentDecorations.scss          |   9 +-
 src/client/views/DocumentDecorations.tsx           |   3 +-
 .../collectionFreeForm/CollectionFreeFormView.scss | 140 ++++++++++++---------
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  15 ++-
 src/client/views/nodes/LinkBox.tsx                 |   1 +
 src/fields/KeyStore.ts                             |   1 +
 6 files changed, 102 insertions(+), 67 deletions(-)

(limited to 'src/client/views/nodes/LinkBox.tsx')

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index ecc738076..3871be35b 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -69,6 +69,7 @@
     }
 }
 
+
 .documentDecorations-closeButton {
     background: $alt-accent;
     opacity: 0.8;
@@ -125,6 +126,10 @@
 //     }
 // }
 
+.linkFlyout {
+    grid-column: 2/4;
+}
+
 .linkButton-empty:hover {
     background: $main-accent;
     transform: scale(1.05);
@@ -162,10 +167,6 @@
     transform: scale(1.05);
 }
 
-.linkButton-tray {
-    grid-column: 1/4;
-}
-
 .linkButton-empty {
     height: 20px;
     width: 20px;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index bb4437a6a..4a329dd36 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -442,9 +442,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div className="link-button-container">
                     <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
-                    <div className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
+                    <div title="Drag Link" className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
                         <FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
                     </div>
+
                 </div>
             </div >
         </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 81f2146e4..f9d786c9b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,92 +1,110 @@
 @import "../../global_variables";
+
 .collectionfreeformview-measure {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-  }
-.collectionfreeformview {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform-origin: left top;
 }
-.collectionfreeformview-container {
-  .collectionfreeformview > .jsx-parser {
+
+.collectionfreeformview-ease {
     position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
+    transform-origin: left top;
+    transition: transform 2s;
+}
+
+.collectionfreeformview-none {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-  }
+    height: 100%;
+    transform-origin: left top;
+}
+
+.collectionfreeformview-container {
+    .collectionfreeformview>.jsx-parser {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
 
-  //nested freeform views
-  // .collectionfreeformview-container {
+    //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;
-  // }
+    // }
 
-  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 {
+    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%;
-  }
-  .formattedTextBox-cont {
-    background: $light-color-secondary;
-  }
- 
-  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 {
+}
+
+.collectionfreeformview-overlay {
+    .collectionfreeformview>.jsx-parser {
+        position: absolute;
+        height: 100%;
+    }
+
     .formattedTextBox-cont {
-        background:yellow;
+        background: $light-color-secondary;
+    }
+
+    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 1feb30db1..4562fd8a7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -206,6 +206,7 @@ export class CollectionFreeFormView extends CollectionSubView {
         const newPanY = Math.min((1 - 1 / x1) * this.nativeHeight, Math.max(0, panY));
         this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
         this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
+
     }
 
     @action
@@ -249,10 +250,16 @@ export class CollectionFreeFormView extends CollectionSubView {
     }
 
     focusDocument = (doc: Document) => {
+        this.props.Document.SetText(KeyStore.PanTransformType, "Ease");
         let x = doc.GetNumber(KeyStore.X, 0) + doc.GetNumber(KeyStore.Width, 0) / 2;
         let y = doc.GetNumber(KeyStore.Y, 0) + doc.GetNumber(KeyStore.Height, 0) / 2;
         this.SetPan(x, y);
         this.props.focus(this.props.Document);
+        //     if(this.props.Document.GetText(KeyStore.PanTransformType, "") === "Ease") {
+        //         setTimeout(function(){
+        //              this.props.Document.SetText(KeyStore.PanTransformType, "None");
+        //         }.bind(this),5000);  // wait 5 seconds, then reset to false
+        //    }
     }
 
     getDocumentViewProps(document: Document): DocumentViewProps {
@@ -311,6 +318,12 @@ export class CollectionFreeFormView extends CollectionSubView {
         const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
 
+        if (this.props.Document.GetText(KeyStore.PanTransformType, "") === "Ease") {
+            var freeformclass = "collectionfreeformview-ease";
+        } else {
+            var freeformclass = "collectionfreeformview-none";
+        }
+
         return (
             <Measure onResize={(r: any) => runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height })}>
                 {({ measureRef }) => (
@@ -324,7 +337,7 @@ export class CollectionFreeFormView extends CollectionSubView {
                                 getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
                                 <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox}
                                     getContainerTransform={this.getContainerTransform} getTransform={this.getTransform} >
-                                    <div className="collectionfreeformview" ref={this._canvasRef}
+                                    <div className={freeformclass} ref={this._canvasRef}
                                         style={{ transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}>
                                         {this.backgroundView}
                                         <CollectionFreeFormLinksView {...this.props}>
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index ca1b97eba..396f5f577 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -54,6 +54,7 @@ export class LinkBox extends React.Component<Props> {
                             }
                             let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
                             if (contextView) {
+                                contextDoc.SetText(KeyStore.PanTransformType, "Ease");
                                 contextView.props.focus(contextDoc);
                             } else {
                                 CollectionDockingView.Instance.AddRightSplit(contextDoc);
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 425408273..3a57d0f0a 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -47,6 +47,7 @@ export namespace KeyStore {
     export const Workspaces = new Key("Workspaces");
     export const Minimized = new Key("Minimized");
     export const CopyDraggedItems = new Key("CopyDraggedItems");
+    export const PanTransformType = new Key("PanTransformType");
 
     export const KeyList: Key[] = [Prototype, X, Y, Page, Title, Author, PanX, PanY, Scale, NativeWidth, NativeHeight,
         Width, Height, ZIndex, Data, Annotations, ViewType, Layout, BackgroundColor, BackgroundLayout, OverlayLayout, LayoutKeys,
-- 
cgit v1.2.3-70-g09d2


From 97ed2e452597d5f1f2e8d0abfc06e94b4aa5d448 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 30 Apr 2019 22:03:30 -0400
Subject: fixed template button

---
 src/client/views/DocumentDecorations.scss |  3 +--
 src/client/views/nodes/LinkBox.tsx        | 23 +++++++++++++----------
 2 files changed, 14 insertions(+), 12 deletions(-)

(limited to 'src/client/views/nodes/LinkBox.tsx')

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index b00b48c9e..ecddb8b06 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -207,8 +207,6 @@ $linkGap : 3px;
     bottom: 0;
     left: 50px;
     pointer-events: auto;
-    background-color: $dark-color;
-    color: $light-color;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 75%;
@@ -227,6 +225,7 @@ $linkGap : 3px;
     height: 20px;
     border-radius: 50%;
     opacity: 0.9;
+    font-size:14;
     background-color: $dark-color;
     color: $light-color;
     text-align: center;
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 89c06e7b3..8f979fdd7 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -11,6 +11,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import './LinkBox.scss';
 import React = require("react");
+import { runInAction } from 'mobx';
 
 
 library.add(faEye);
@@ -70,20 +71,22 @@ export class LinkBox extends React.Component<Props> {
         e.stopPropagation();
         this.props.linkDoc.GetTAsync(KeyStore.LinkedFromDocs, Document, field => {
             if (field) {
-                field.GetTAsync<ListField<Document>>(KeyStore.LinkedToDocs, ListField, field => {
-                    if (field) {
-                        field.Data.splice(field.Data.indexOf(this.props.linkDoc));
-                    }
-                });
+                field.GetTAsync<ListField<Document>>(KeyStore.LinkedToDocs, ListField, field =>
+                    runInAction(() => {
+                        if (field) {
+                            field.Data.splice(field.Data.indexOf(this.props.linkDoc));
+                        }
+                    }));
             }
         });
         this.props.linkDoc.GetTAsync(KeyStore.LinkedToDocs, Document, field => {
             if (field) {
-                field.GetTAsync<ListField<Document>>(KeyStore.LinkedFromDocs, ListField, field => {
-                    if (field) {
-                        field.Data.splice(field.Data.indexOf(this.props.linkDoc));
-                    }
-                });
+                field.GetTAsync<ListField<Document>>(KeyStore.LinkedFromDocs, ListField, field =>
+                    runInAction(() => {
+                        if (field) {
+                            field.Data.splice(field.Data.indexOf(this.props.linkDoc));
+                        }
+                    }));
             }
         });
     }
-- 
cgit v1.2.3-70-g09d2

