From 755769e3604d48148ad1670ce3cce1a785c1766d Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Tue, 9 Apr 2019 20:06:29 -0400
Subject: slow link button fixed

---
 src/client/views/DocumentDecorations.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/client/views/DocumentDecorations.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 28af46358..bb4437a6a 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -18,6 +18,11 @@ import { FieldWaiting } from "../../fields/Field";
 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 }> {
@@ -435,9 +440,12 @@ 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>
+                <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}>
+                        <FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
+                    </div>
+                </div>
             </div >
         </div>
         );
-- 
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/DocumentDecorations.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 32ad476cb98d140586af8147c3d2431623325385 Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Tue, 16 Apr 2019 17:01:34 -0400
Subject: hacky fix for the buttons switchig around

---
 src/client/views/DocumentDecorations.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'src/client/views/DocumentDecorations.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 4a329dd36..b730912b5 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -441,9 +441,13 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 <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 className="link-button-container">
-                    <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
-                    <div title="Drag Link" className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
-                        <FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
+                    <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>
 
                 </div>
-- 
cgit v1.2.3-70-g09d2

