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 ++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

(limited to 'src/client/views/PropertiesView.scss')

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
-- 
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/PropertiesView.scss')

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