added arrowhead

1 files changed, 29 insertions, 1 deletions

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>}