Skip to content

Commit 0ac8c47

Browse files
lironhlmarcopiii
lironhl
and
marcopiii
authored
allow dashed links (#397)
* add support for dashed link * update snapshots * Added JsDoc for link attributes strokeDasharray, strokeDashoffset and strokeLinecap Co-authored-by: aSlug <[email protected]>
1 parent adf5a1d commit 0ac8c47

File tree

6 files changed

+126
-1
lines changed

6 files changed

+126
-1
lines changed

‎src/components/graph/graph.builder.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,10 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
9292
stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color : config.link.highlightColor;
9393
}
9494

95+
const strokeDasharray = link.strokeDasharray || config.link.strokeDasharray;
96+
const strokeDashoffset = link.strokeDashoffset || config.link.strokeDashoffset;
97+
const strokeLinecap = link.strokeLinecap || config.link.strokeLinecap;
98+
9599
let strokeWidth = (link.strokeWidth || config.link.strokeWidth) * (1 / transform);
96100

97101
if (config.link.semanticStrokeWidth) {
@@ -143,6 +147,9 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
143147
source,
144148
stroke,
145149
strokeWidth,
150+
strokeDasharray,
151+
strokeDashoffset,
152+
strokeLinecap,
146153
target,
147154
onClickLink: linkCallbacks.onClickLink,
148155
onMouseOutLink: linkCallbacks.onMouseOutLink,

‎src/components/graph/graph.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,16 @@
237237
* - "CURVE_FULL" - a semicircumference trajectory unites source and target nodes.
238238
* </br>
239239
* <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
240+
* @param {number} [link.strokeDasharray=0] - <a id="link-stroke-dasharray" href="#link-stroke-dasharray">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray">stroke-dasharray</a>
241+
* The stroke-dasharray attribute defines the pattern of dashes and gaps used to paint the link.
242+
* @param {number} [link.strokeDashoffset=0] - <a id="link-stroke-dashoffset" href="#link-stroke-dashoffset">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a>
243+
* The stroke-dashoffset attribute defines an offset on the rendering of the associated dash array.
244+
* @param {string} [link.strokeLinecap="butt"] - <a id="link-stroke-linecap" href="#link-stroke-linecap">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap">stroke-linecap</a>
245+
* The stroke-linecap attribute defines the shape to be used at the start and end of the link.
246+
* The stroke-linecap options are:
247+
* - "butt"
248+
* - "round"
249+
* - "square"
240250
*
241251
* @example
242252
* // A simple config that uses some properties
@@ -319,5 +329,8 @@ export default {
319329
markerHeight: 6,
320330
markerWidth: 6,
321331
type: "STRAIGHT",
332+
strokeDasharray: 0,
333+
strokeDashoffset: 0,
334+
strokeLinecap: "butt",
322335
},
323336
};

‎src/components/link/Link.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ import React from "react";
2626
* markerId="marker-small"
2727
* strokeWidth=1.5
2828
* stroke="green"
29+
* strokeDasharray="5 1"
30+
* strokeDashoffset="3"
31+
* strokeLinecap="round"
2932
* className="link"
3033
* opacity=1
3134
* mouseCursor="pointer"
@@ -70,6 +73,9 @@ export default class Link extends React.Component {
7073
opacity: this.props.opacity,
7174
fill: "none",
7275
cursor: this.props.mouseCursor,
76+
strokeDasharray: this.props.strokeDasharray,
77+
strokeDashoffset: this.props.strokeDasharray,
78+
strokeLinecap: this.props.strokeLinecap,
7379
};
7480

7581
const lineProps = {

‎test/graph/__snapshots__/graph.snapshot.spec.js.snap‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
130130
"fill": "none",
131131
"opacity": 1,
132132
"stroke": "#d3d3d3",
133+
"strokeDasharray": 0,
134+
"strokeDashoffset": 0,
135+
"strokeLinecap": "butt",
133136
"strokeWidth": 1.5,
134137
}
135138
}
@@ -150,6 +153,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
150153
"fill": "none",
151154
"opacity": 1,
152155
"stroke": "#d3d3d3",
156+
"strokeDasharray": 0,
157+
"strokeDashoffset": 0,
158+
"strokeLinecap": "butt",
153159
"strokeWidth": 1.5,
154160
}
155161
}
@@ -170,6 +176,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
170176
"fill": "none",
171177
"opacity": 1,
172178
"stroke": "#d3d3d3",
179+
"strokeDasharray": 0,
180+
"strokeDashoffset": 0,
181+
"strokeLinecap": "butt",
173182
"strokeWidth": 1.5,
174183
}
175184
}
@@ -190,6 +199,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
190199
"fill": "none",
191200
"opacity": 1,
192201
"stroke": "#d3d3d3",
202+
"strokeDasharray": 0,
203+
"strokeDashoffset": 0,
204+
"strokeLinecap": "butt",
193205
"strokeWidth": 1.5,
194206
}
195207
}
@@ -210,6 +222,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
210222
"fill": "none",
211223
"opacity": 1,
212224
"stroke": "#d3d3d3",
225+
"strokeDasharray": 0,
226+
"strokeDashoffset": 0,
227+
"strokeLinecap": "butt",
213228
"strokeWidth": 1.5,
214229
}
215230
}
@@ -230,6 +245,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
230245
"fill": "none",
231246
"opacity": 1,
232247
"stroke": "#d3d3d3",
248+
"strokeDasharray": 0,
249+
"strokeDashoffset": 0,
250+
"strokeLinecap": "butt",
233251
"strokeWidth": 1.5,
234252
}
235253
}
@@ -250,6 +268,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
250268
"fill": "none",
251269
"opacity": 1,
252270
"stroke": "#d3d3d3",
271+
"strokeDasharray": 0,
272+
"strokeDashoffset": 0,
273+
"strokeLinecap": "butt",
253274
"strokeWidth": 1.5,
254275
}
255276
}
@@ -270,6 +291,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
270291
"fill": "none",
271292
"opacity": 1,
272293
"stroke": "#d3d3d3",
294+
"strokeDasharray": 0,
295+
"strokeDashoffset": 0,
296+
"strokeLinecap": "butt",
273297
"strokeWidth": 1.5,
274298
}
275299
}
@@ -290,6 +314,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
290314
"fill": "none",
291315
"opacity": 1,
292316
"stroke": "#d3d3d3",
317+
"strokeDasharray": 0,
318+
"strokeDashoffset": 0,
319+
"strokeLinecap": "butt",
293320
"strokeWidth": 1.5,
294321
}
295322
}
@@ -310,6 +337,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
310337
"fill": "none",
311338
"opacity": 1,
312339
"stroke": "#d3d3d3",
340+
"strokeDasharray": 0,
341+
"strokeDashoffset": 0,
342+
"strokeLinecap": "butt",
313343
"strokeWidth": 1.5,
314344
}
315345
}
@@ -330,6 +360,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
330360
"fill": "none",
331361
"opacity": 1,
332362
"stroke": "#d3d3d3",
363+
"strokeDasharray": 0,
364+
"strokeDashoffset": 0,
365+
"strokeLinecap": "butt",
333366
"strokeWidth": 1.5,
334367
}
335368
}
@@ -350,6 +383,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
350383
"fill": "none",
351384
"opacity": 1,
352385
"stroke": "#d3d3d3",
386+
"strokeDasharray": 0,
387+
"strokeDashoffset": 0,
388+
"strokeLinecap": "butt",
353389
"strokeWidth": 1.5,
354390
}
355391
}
@@ -370,6 +406,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
370406
"fill": "none",
371407
"opacity": 1,
372408
"stroke": "#d3d3d3",
409+
"strokeDasharray": 0,
410+
"strokeDashoffset": 0,
411+
"strokeLinecap": "butt",
373412
"strokeWidth": 1.5,
374413
}
375414
}
@@ -390,6 +429,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
390429
"fill": "none",
391430
"opacity": 1,
392431
"stroke": "#d3d3d3",
432+
"strokeDasharray": 0,
433+
"strokeDashoffset": 0,
434+
"strokeLinecap": "butt",
393435
"strokeWidth": 1.5,
394436
}
395437
}
@@ -410,6 +452,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
410452
"fill": "none",
411453
"opacity": 1,
412454
"stroke": "#d3d3d3",
455+
"strokeDasharray": 0,
456+
"strokeDashoffset": 0,
457+
"strokeLinecap": "butt",
413458
"strokeWidth": 1.5,
414459
}
415460
}
@@ -430,6 +475,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
430475
"fill": "none",
431476
"opacity": 1,
432477
"stroke": "#d3d3d3",
478+
"strokeDasharray": 0,
479+
"strokeDashoffset": 0,
480+
"strokeLinecap": "butt",
433481
"strokeWidth": 1.5,
434482
}
435483
}
@@ -450,6 +498,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
450498
"fill": "none",
451499
"opacity": 1,
452500
"stroke": "#d3d3d3",
501+
"strokeDasharray": 0,
502+
"strokeDashoffset": 0,
503+
"strokeLinecap": "butt",
453504
"strokeWidth": 1.5,
454505
}
455506
}
@@ -470,6 +521,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
470521
"fill": "none",
471522
"opacity": 1,
472523
"stroke": "#d3d3d3",
524+
"strokeDasharray": 0,
525+
"strokeDashoffset": 0,
526+
"strokeLinecap": "butt",
473527
"strokeWidth": 1.5,
474528
}
475529
}
@@ -490,6 +544,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
490544
"fill": "none",
491545
"opacity": 1,
492546
"stroke": "#d3d3d3",
547+
"strokeDasharray": 0,
548+
"strokeDashoffset": 0,
549+
"strokeLinecap": "butt",
493550
"strokeWidth": 1.5,
494551
}
495552
}
@@ -510,6 +567,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
510567
"fill": "none",
511568
"opacity": 1,
512569
"stroke": "#d3d3d3",
570+
"strokeDasharray": 0,
571+
"strokeDashoffset": 0,
572+
"strokeLinecap": "butt",
513573
"strokeWidth": 1.5,
514574
}
515575
}
@@ -530,6 +590,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
530590
"fill": "none",
531591
"opacity": 1,
532592
"stroke": "#d3d3d3",
593+
"strokeDasharray": 0,
594+
"strokeDashoffset": 0,
595+
"strokeLinecap": "butt",
533596
"strokeWidth": 1.5,
534597
}
535598
}
@@ -550,6 +613,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
550613
"fill": "none",
551614
"opacity": 1,
552615
"stroke": "#d3d3d3",
616+
"strokeDasharray": 0,
617+
"strokeDashoffset": 0,
618+
"strokeLinecap": "butt",
553619
"strokeWidth": 1.5,
554620
}
555621
}
@@ -570,6 +636,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
570636
"fill": "none",
571637
"opacity": 1,
572638
"stroke": "#d3d3d3",
639+
"strokeDasharray": 0,
640+
"strokeDashoffset": 0,
641+
"strokeLinecap": "butt",
573642
"strokeWidth": 1.5,
574643
}
575644
}
@@ -590,6 +659,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
590659
"fill": "none",
591660
"opacity": 1,
592661
"stroke": "#d3d3d3",
662+
"strokeDasharray": 0,
663+
"strokeDashoffset": 0,
664+
"strokeLinecap": "butt",
593665
"strokeWidth": 1.5,
594666
}
595667
}
@@ -610,6 +682,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
610682
"fill": "none",
611683
"opacity": 1,
612684
"stroke": "#d3d3d3",
685+
"strokeDasharray": 0,
686+
"strokeDashoffset": 0,
687+
"strokeLinecap": "butt",
613688
"strokeWidth": 1.5,
614689
}
615690
}
@@ -630,6 +705,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
630705
"fill": "none",
631706
"opacity": 1,
632707
"stroke": "#d3d3d3",
708+
"strokeDasharray": 0,
709+
"strokeDashoffset": 0,
710+
"strokeLinecap": "butt",
633711
"strokeWidth": 1.5,
634712
}
635713
}
@@ -650,6 +728,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
650728
"fill": "none",
651729
"opacity": 1,
652730
"stroke": "#d3d3d3",
731+
"strokeDasharray": 0,
732+
"strokeDashoffset": 0,
733+
"strokeLinecap": "butt",
653734
"strokeWidth": 1.5,
654735
}
655736
}
@@ -670,6 +751,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
670751
"fill": "none",
671752
"opacity": 1,
672753
"stroke": "#d3d3d3",
754+
"strokeDasharray": 0,
755+
"strokeDashoffset": 0,
756+
"strokeLinecap": "butt",
673757
"strokeWidth": 1.5,
674758
}
675759
}

‎test/link/__snapshots__/link.snapshot.spec.js.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ exports[`Snapshot - Link Component should match snapshot 1`] = `
1313
"fill": "none",
1414
"opacity": "1",
1515
"stroke": "red",
16+
"strokeDasharray": 0,
17+
"strokeDashoffset": 0,
18+
"strokeLinecap": "butt",
1619
"strokeWidth": "2",
1720
}
1821
}

‎test/link/link.snapshot.spec.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,19 @@ describe("Snapshot - Link Component", () => {
1010
that.callbackMock = jest.fn();
1111

1212
that.link = renderer.create(
13-
<Link x1="2" y1="2" x2="4" y2="4" opacity="1" stroke="red" strokeWidth="2" onClickLink={that.callbackMock} />
13+
<Link
14+
x1="2"
15+
y1="2"
16+
x2="4"
17+
y2="4"
18+
opacity="1"
19+
stroke="red"
20+
strokeWidth="2"
21+
onClickLink={that.callbackMock}
22+
strokeDasharray={0}
23+
strokeDashoffset={0}
24+
strokeLinecap="butt"
25+
/>
1426
);
1527

1628
that.tree = that.link.toJSON();

0 commit comments

Comments
 (0)