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')

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