diff options
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 30 |
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>} |