aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorLauren Choi <laurenchoi@gmail.com>2021-11-11 15:53:16 -0500
committerLauren Choi <laurenchoi@gmail.com>2021-11-11 15:53:16 -0500
commitfc9d892e1ae344bf12b5bc3fc7ff0fb5867d7dba (patch)
treed199f949abd26639f39138d2626a7b65d328e0e7 /src
parent8f0353357f58ada81b40bd76d1958e35cbe21ea0 (diff)
color arrow head
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx25
1 files changed, 12 insertions, 13 deletions
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>}