From 0691dc220f52643f4fd5fa9a29a5c52ef59321aa Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Fri, 29 Oct 2021 10:30:48 -0400
Subject: toggle properties on selection

---
 .../CollectionFreeFormLinkView.tsx                 | 23 +++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 9769453a0..d4ef76221 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -11,6 +11,7 @@ import { SnappingManager } from "../../../util/SnappingManager";
 import { DocumentView } from "../../nodes/DocumentView";
 import "./CollectionFreeFormLinkView.scss";
 import React = require("react");
+import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
 
 
 export interface CollectionFreeFormLinkViewProps {
@@ -138,6 +139,20 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         return left; //top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden";
     }
 
+    @action
+    toggleProperties = () => {
+        if (CurrentUserUtils.propertiesWidth > 0) {
+            CurrentUserUtils.propertiesWidth = 0;
+        } else {
+            CurrentUserUtils.propertiesWidth = 250;
+        }
+    }
+
+    onClickLine = () => {
+        SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true)
+        this.toggleProperties()
+    }
+
     @computed.struct get renderData() {
         this._start; SnappingManager.GetIsDragging();
         const { A, B, LinkDocs } = this.props;
@@ -198,9 +213,11 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const strokeWidth = linkSize === -1 ? "3px" : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + "px";
 
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
-            <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, strokeDasharray: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "2 2" : undefined, stroke, strokeWidth }}
-                onClick={() => SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true)}
-                d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
+            <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "red" : stroke, strokeWidth }}
+                onClick={this.onClickLine}
+                onPointerOver={() => {
+                    console.log(this.props.LinkDocs[0].directed)
+                }} />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
                 {Field.toString(this.props.LinkDocs[0].description as any as Field)}
             </text>}
-- 
cgit v1.2.3-70-g09d2


From 428b90b9e2e902b82f3406a5062f8be6950f4862 Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Fri, 29 Oct 2021 12:05:28 -0400
Subject: style properties panel

---
 src/client/views/PropertiesView.scss               | 38 ++++++++++++++++++++
 src/client/views/PropertiesView.tsx                | 40 +++++++++++-----------
 .../CollectionFreeFormLinkView.tsx                 |  4 +--
 3 files changed, 59 insertions(+), 23 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx')

diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 554f137cb..b75e7182c 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -2,6 +2,7 @@
 
 .propertiesView {
     height: 100%;
+    width: 250;
     font-family: "Roboto";
     cursor: auto;
 
@@ -836,3 +837,40 @@
 .properties-flyout {
     grid-column: 2/4;
 }
+
+.propertiesView-linking {
+    padding: 5%;
+}
+
+.propertiesView-section {
+    padding: 10px 0;
+}
+
+.propertiesView-input {
+    padding: 4px 8px;
+
+    .text {
+        width: 100%;
+    }
+
+    &.first {
+        padding-top: 6px;
+    }
+
+    &.inline {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+.propertiesView-label {
+    font-weight: bold;
+    font-size: 12.5px;
+    padding: 4px;
+    display: flex;
+    color: white;
+    padding-left: 8px;
+    background-color: rgb(51, 51, 51);
+}
\ No newline at end of file
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 334a44b3b..b5bae6652 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1111,25 +1111,25 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="propertiesView-title">
                         Linking
                     </div>
-                    <div className="properties-grid col propertiesView-textInfo">
-                        Information
-                        <div className="row" id="propertiesView-label">
+                    <div className="propertiesView-section">
+                        <p className="propertiesView-label">Information</p>
+                        <div className="propertiesView-input first" id="propertiesView-label">
                             <p>Label</p>
-                            <input type="text" />
+                            <input className="text" type="text" />
                         </div>
-                        <div className="row" id="propertiesView-category">
-                            <p>Label</p>
-                            <input type="text" />
+                        <div className="propertiesView-input" id="propertiesView-category">
+                            <p>Category</p>
+                            <input className="text" type="text" />
                         </div>
-                        <div className="row" id="propertiesView-description">
+                        <div className="propertiesView-input" id="propertiesView-description">
                             <p>Description</p>
-                            <input type="text" />
+                            <input className="text" type="text" />
                         </div>
                     </div>
-                    <div className="propertiesView-behavior">
-                        Behavior
-                        <div id="propertiesView-follow">
-                            Follow
+                    <div className="propertiesView-section">
+                        <p className="propertiesView-label">Behavior</p>
+                        <div className="propertiesView-input inline first" id="propertiesView-follow">
+                            <p>Follow</p>
                             <select name="selectList" id="selectList">
                                 <option value="default">Default</option>
                                 <option value="newLeft">Open in new left pane</option>
@@ -1140,22 +1140,22 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <option value="openTab">Open in new tab</option>
                             </select>
                         </div>
-                        <div id="propertiesView-anchor">
-                            Auto-move anchor
+                        <div className="propertiesView-input inline" id="propertiesView-anchor">
+                            <p>Auto-move anchor</p>
                             <button
-                                style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: 50, height: 50 }}
+                                style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: '2rem', height: '2rem' }}
                                 onClick={this.toggleAnchor}
                             />
                         </div>
-                        <div id="propertiesView-arrow">
-                            Auto-move arrow
+                        <div className="propertiesView-input inline" id="propertiesView-arrow">
+                            <p>Auto-move arrow</p>
                             <button
-                                style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: 50, height: 50 }}
+                                style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: '2rem', height: '2rem' }}
                                 onClick={this.toggleArrow}
                             />
                         </div>
                     </div>
-                </div>;
+                </div >;
             }
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index d4ef76221..5391061b1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -215,9 +215,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
             <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "red" : stroke, strokeWidth }}
                 onClick={this.onClickLine}
-                onPointerOver={() => {
-                    console.log(this.props.LinkDocs[0].directed)
-                }} />
+                d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
                 {Field.toString(this.props.LinkDocs[0].description as any as Field)}
             </text>}
-- 
cgit v1.2.3-70-g09d2


From 6a8eee54689f4bbe24c884895e0d2af1f06c4aad Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Thu, 4 Nov 2021 14:20:58 -0400
Subject: change color of line, remove input

---
 src/client/views/PropertiesView.tsx                                 | 6 +-----
 .../collections/collectionFreeForm/CollectionFreeFormLinkView.tsx   | 3 ++-
 2 files changed, 3 insertions(+), 6 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx')

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 301936219..d65db3a6b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1157,11 +1157,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     </div>
                     <div className="propertiesView-section">
                         <p className="propertiesView-label">Information</p>
-                        <div className="propertiesView-input first" id="propertiesView-label">
-                            <p>Label</p>
-                            <input className="text" type="text" />
-                        </div>
-                        <div className="propertiesView-input" id="propertiesView-category">
+                        <div className="propertiesView-input first" id="propertiesView-category">
                             <p>Category</p>
                             <input className="text" type="text" />
                         </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 5391061b1..9d256f18b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -12,6 +12,7 @@ import { DocumentView } from "../../nodes/DocumentView";
 import "./CollectionFreeFormLinkView.scss";
 import React = require("react");
 import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
+import { Colors } from "../../global/globalEnums";
 
 
 export interface CollectionFreeFormLinkViewProps {
@@ -213,7 +214,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const strokeWidth = linkSize === -1 ? "3px" : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + "px";
 
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
-            <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "red" : stroke, strokeWidth }}
+            <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? Colors.MEDIUM_BLUE : stroke, strokeWidth }}
                 onClick={this.onClickLine}
                 d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
-- 
cgit v1.2.3-70-g09d2


From 8f0353357f58ada81b40bd76d1958e35cbe21ea0 Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Tue, 9 Nov 2021 15:10:48 -0500
Subject: added arrowhead

---
 .../CollectionFreeFormLinkView.tsx                 | 30 +++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 9d256f18b..27a34a9fa 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -154,6 +154,25 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         this.toggleProperties()
     }
 
+    componentToHex = (c: number) => {
+        let hex = c.toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+    }
+
+    rgbToHex = (rgbString: string) => {
+        let rgbVals = []
+        for (let i = 0; i < rgbString.length; i++) {
+            if (parseInt(rgbString[i])) {
+                let curr = ''
+                while (parseInt(rgbString[i]) != NaN) {
+                    curr += (rgbString[i])
+                }
+                rgbVals.push(parseInt(curr))
+            }
+        }
+        return "#" + this.componentToHex(rgbVals[0]) + this.componentToHex(rgbVals[1]) + this.componentToHex(rgbVals[2]);
+    }
+
     @computed.struct get renderData() {
         this._start; SnappingManager.GetIsDragging();
         const { A, B, LinkDocs } = this.props;
@@ -208,15 +227,24 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
 
         //access stroke color using index of the relationship in the color list (default black)
         const stroke = currRelationshipIndex === -1 || currRelationshipIndex >= linkColorList.length ? "black" : linkColorList[currRelationshipIndex];
+        console.log(stroke)
+        console.log(this.rgbToHex(stroke))
 
         //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has)
         //thickness varies linearly from 3px to 12px for increasing link count
         const strokeWidth = linkSize === -1 ? "3px" : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + "px";
 
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
+            <defs>
+                <marker id="arrowhead" markerWidth="4" markerHeight="3"
+                    refX="0" refY="1.5" orient="auto">
+                    <polygon points="0 0, 3 1.5, 0 3" fill={this.rgbToHex(stroke)} />
+                </marker>
+            </defs>
             <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? Colors.MEDIUM_BLUE : stroke, strokeWidth }}
                 onClick={this.onClickLine}
-                d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
+                d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`}
+                marker-end="url(#arrowhead)" />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
                 {Field.toString(this.props.LinkDocs[0].description as any as Field)}
             </text>}
-- 
cgit v1.2.3-70-g09d2


From fc9d892e1ae344bf12b5bc3fc7ff0fb5867d7dba Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Thu, 11 Nov 2021 15:53:16 -0500
Subject: color arrow head

---
 .../CollectionFreeFormLinkView.tsx                 | 25 +++++++++++-----------
 1 file changed, 12 insertions(+), 13 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 27a34a9fa..43f181849 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -160,17 +160,17 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
     }
 
     rgbToHex = (rgbString: string) => {
-        let rgbVals = []
-        for (let i = 0; i < rgbString.length; i++) {
-            if (parseInt(rgbString[i])) {
-                let curr = ''
-                while (parseInt(rgbString[i]) != NaN) {
-                    curr += (rgbString[i])
+        if (rgbString != "black") {
+            const splitString = rgbString.split(/rgb|\(|\)|,| /)
+            let values: number[] = []
+            splitString.forEach(elt => {
+                if (elt) {
+                    values.push(parseInt(elt))
                 }
-                rgbVals.push(parseInt(curr))
-            }
+            })
+            return "#" + this.componentToHex(values[0]) + this.componentToHex(values[1]) + this.componentToHex(values[2]);
         }
-        return "#" + this.componentToHex(rgbVals[0]) + this.componentToHex(rgbVals[1]) + this.componentToHex(rgbVals[2]);
+        return "#000000"
     }
 
     @computed.struct get renderData() {
@@ -227,8 +227,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
 
         //access stroke color using index of the relationship in the color list (default black)
         const stroke = currRelationshipIndex === -1 || currRelationshipIndex >= linkColorList.length ? "black" : linkColorList[currRelationshipIndex];
-        console.log(stroke)
-        console.log(this.rgbToHex(stroke))
+        const hexStroke = this.rgbToHex(stroke)
 
         //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has)
         //thickness varies linearly from 3px to 12px for increasing link count
@@ -238,13 +237,13 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             <defs>
                 <marker id="arrowhead" markerWidth="4" markerHeight="3"
                     refX="0" refY="1.5" orient="auto">
-                    <polygon points="0 0, 3 1.5, 0 3" fill={this.rgbToHex(stroke)} />
+                    <polygon points="0 0, 3 1.5, 0 3" fill={hexStroke} />
                 </marker>
             </defs>
             <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? Colors.MEDIUM_BLUE : stroke, strokeWidth }}
                 onClick={this.onClickLine}
                 d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`}
-                marker-end="url(#arrowhead)" />
+                markerEnd="url(#arrowhead)" />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
                 {Field.toString(this.props.LinkDocs[0].description as any as Field)}
             </text>}
-- 
cgit v1.2.3-70-g09d2


From f350591b82012d94a8217d5096094de183de7bb8 Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Thu, 18 Nov 2021 11:34:38 -0500
Subject: added arrow toggling functionality

---
 src/client/views/PropertiesView.scss                    |  4 ++++
 src/client/views/PropertiesView.tsx                     | 17 ++++++++++++++++-
 .../collectionFreeForm/CollectionFreeFormLinkView.tsx   |  8 +++++++-
 src/fields/documentSchemas.ts                           |  1 +
 4 files changed, 28 insertions(+), 2 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx')

diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index b75e7182c..437df4739 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -863,6 +863,10 @@
         align-items: center;
         justify-content: space-between;
     }
+
+    .propertiesButton {
+        width: 4rem;
+    }
 }
 
 .propertiesView-label {
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 2d461f7ef..936003dce 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAnchor } from '@fortawesome/free-solid-svg-icons'
+import { faAnchor, faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { Checkbox, Tooltip } from "@material-ui/core";
 import { intersection } from "lodash";
 import { action, autorun, computed, Lambda, observable } from "mobx";
@@ -1187,6 +1187,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.linkAutoMove = !this.selectedDoc.linkAutoMove)));
     }
 
+    toggleArrow = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.displayArrow = !this.selectedDoc.displayArrow)));
+    }
+
     @computed
     get editRelationship() {
         return <input
@@ -1279,10 +1283,21 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             <button
                                 style={{ background: this.selectedDoc.hidden ? "gray" : !this.selectedDoc.linkAutoMove ? "" : "#4476f7", borderRadius: 3 }}
                                 onPointerDown={this.toggleAnchor} onClick={e => e.stopPropagation()}
+                                className="propertiesButton"
                             >
                                 <FontAwesomeIcon className="fa-icon" icon={faAnchor} size="lg" />
                             </button>
                         </div>
+                        <div className="propertiesView-input inline" id="propertiesView-displayArrow">
+                            <p>Display arrow</p>
+                            <button
+                                style={{ background: this.selectedDoc.hidden ? "gray" : !this.selectedDoc.displayArrow ? "" : "#4476f7", borderRadius: 3 }}
+                                onPointerDown={this.toggleArrow} onClick={e => e.stopPropagation()}
+                                className="propertiesButton"
+                            >
+                                <FontAwesomeIcon className="fa-icon" icon={faArrowRight} size="lg" />
+                            </button>
+                        </div>
                     </div>
                 </div >;
             }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 43f181849..da4edbaa2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -233,6 +233,12 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         //thickness varies linearly from 3px to 12px for increasing link count
         const strokeWidth = linkSize === -1 ? "3px" : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + "px";
 
+        console.log(this.props.LinkDocs[0].displayArrow)
+
+        if (this.props.LinkDocs[0].displayArrow == undefined) {
+            this.props.LinkDocs[0].displayArrow = false;
+        }
+
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
             <defs>
                 <marker id="arrowhead" markerWidth="4" markerHeight="3"
@@ -243,7 +249,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? Colors.MEDIUM_BLUE : stroke, strokeWidth }}
                 onClick={this.onClickLine}
                 d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`}
-                markerEnd="url(#arrowhead)" />
+                markerEnd={this.props.LinkDocs[0].displayArrow ? "url(#arrowhead)" : ""} />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
                 {Field.toString(this.props.LinkDocs[0].description as any as Field)}
             </text>}
diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts
index db2c6ca5b..73157d268 100644
--- a/src/fields/documentSchemas.ts
+++ b/src/fields/documentSchemas.ts
@@ -93,6 +93,7 @@ export const documentSchema = createSchema({
     layers: listSpec("string"), // which layers the document is part of
     _lockedPosition: "boolean",  // whether the document can be moved (dragged)
     _lockedTransform: "boolean",// whether a freeformview can pan/zoom
+    displayArrow: "boolean", // toggles directed arrows
 
     // drag drop properties
     _stayInCollection: "boolean",// whether document can be dropped into a different collection
-- 
cgit v1.2.3-70-g09d2


From dc66d6b71bb723df43a2bbc4cd0611fdcc6fe886 Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Thu, 18 Nov 2021 11:36:19 -0500
Subject: remove console.log statement

---
 .../views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index da4edbaa2..f2e33cf23 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -233,8 +233,6 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         //thickness varies linearly from 3px to 12px for increasing link count
         const strokeWidth = linkSize === -1 ? "3px" : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + "px";
 
-        console.log(this.props.LinkDocs[0].displayArrow)
-
         if (this.props.LinkDocs[0].displayArrow == undefined) {
             this.props.LinkDocs[0].displayArrow = false;
         }
-- 
cgit v1.2.3-70-g09d2


From d94a9f8500e832a853ffb344acac4d5ec4b5e5d3 Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Thu, 18 Nov 2021 11:42:24 -0500
Subject: change arrow color

---
 .../CollectionFreeFormLinkView.tsx                 | 38 +++++++++++-----------
 1 file changed, 19 insertions(+), 19 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index f2e33cf23..a9a997853 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -154,24 +154,24 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         this.toggleProperties()
     }
 
-    componentToHex = (c: number) => {
-        let hex = c.toString(16);
-        return hex.length == 1 ? "0" + hex : hex;
-    }
+    // componentToHex = (c: number) => {
+    //     let hex = c.toString(16);
+    //     return hex.length == 1 ? "0" + hex : hex;
+    // }
 
-    rgbToHex = (rgbString: string) => {
-        if (rgbString != "black") {
-            const splitString = rgbString.split(/rgb|\(|\)|,| /)
-            let values: number[] = []
-            splitString.forEach(elt => {
-                if (elt) {
-                    values.push(parseInt(elt))
-                }
-            })
-            return "#" + this.componentToHex(values[0]) + this.componentToHex(values[1]) + this.componentToHex(values[2]);
-        }
-        return "#000000"
-    }
+    // rgbToHex = (rgbString: string) => {
+    //     if (rgbString != "black") {
+    //         const splitString = rgbString.split(/rgb|\(|\)|,| /)
+    //         let values: number[] = []
+    //         splitString.forEach(elt => {
+    //             if (elt) {
+    //                 values.push(parseInt(elt))
+    //             }
+    //         })
+    //         return "#" + this.componentToHex(values[0]) + this.componentToHex(values[1]) + this.componentToHex(values[2]);
+    //     }
+    //     return "#000000"
+    // }
 
     @computed.struct get renderData() {
         this._start; SnappingManager.GetIsDragging();
@@ -227,7 +227,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
 
         //access stroke color using index of the relationship in the color list (default black)
         const stroke = currRelationshipIndex === -1 || currRelationshipIndex >= linkColorList.length ? "black" : linkColorList[currRelationshipIndex];
-        const hexStroke = this.rgbToHex(stroke)
+        // const hexStroke = this.rgbToHex(stroke)
 
         //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has)
         //thickness varies linearly from 3px to 12px for increasing link count
@@ -241,7 +241,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             <defs>
                 <marker id="arrowhead" markerWidth="4" markerHeight="3"
                     refX="0" refY="1.5" orient="auto">
-                    <polygon points="0 0, 3 1.5, 0 3" fill={hexStroke} />
+                    <polygon points="0 0, 3 1.5, 0 3" fill={Colors.DARK_GRAY} />
                 </marker>
             </defs>
             <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? Colors.MEDIUM_BLUE : stroke, strokeWidth }}
-- 
cgit v1.2.3-70-g09d2