allow dashed links (#397)

* add support for dashed link * update snapshots * Added JsDoc for link attributes strokeDasharray, strokeDashoffset and strokeLinecap Co-authored-by: aSlug <marpi93@icloud.com>
danielcaldas · Nov 30, 2020 · 0ac8c47 · 0ac8c47
1 parent adf5a1d
commit 0ac8c47
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 1 deletion.
diff --git a/src/components/graph/graph.builder.js b/src/components/graph/graph.builder.js
@@ -92,6 +92,10 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
     stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color : config.link.highlightColor;
   }
 
+  const strokeDasharray = link.strokeDasharray || config.link.strokeDasharray;
+  const strokeDashoffset = link.strokeDashoffset || config.link.strokeDashoffset;
+  const strokeLinecap = link.strokeLinecap || config.link.strokeLinecap;
+
   let strokeWidth = (link.strokeWidth || config.link.strokeWidth) * (1 / transform);
 
   if (config.link.semanticStrokeWidth) {
@@ -143,6 +147,9 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
     source,
     stroke,
     strokeWidth,
+    strokeDasharray,
+    strokeDashoffset,
+    strokeLinecap,
     target,
     onClickLink: linkCallbacks.onClickLink,
     onMouseOutLink: linkCallbacks.onMouseOutLink,

diff --git a/src/components/graph/graph.config.js b/src/components/graph/graph.config.js
@@ -237,6 +237,16 @@
  * - "CURVE_FULL" - a semicircumference trajectory unites source and target nodes.
  * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
+ * @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>
+ * The stroke-dasharray attribute defines the pattern of dashes and gaps used to paint the link.
+ * @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>
+ * The stroke-dashoffset attribute defines an offset on the rendering of the associated dash array.
+ * @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>
+ * The stroke-linecap attribute defines the shape to be used at the start and end of the link.
+ * The stroke-linecap options are:
+ *   - "butt"
+ *   - "round"
+ *   - "square"
  *
  * @example
  * // A simple config that uses some properties
@@ -319,5 +329,8 @@ export default {
     markerHeight: 6,
     markerWidth: 6,
     type: "STRAIGHT",
+    strokeDasharray: 0,
+    strokeDashoffset: 0,
+    strokeLinecap: "butt",
   },
 };
diff --git a/src/components/link/Link.jsx b/src/components/link/Link.jsx
@@ -26,6 +26,9 @@ import React from "react";
  *     markerId="marker-small"
  *     strokeWidth=1.5
  *     stroke="green"
+ *     strokeDasharray="5 1"
+ *     strokeDashoffset="3"
+ *     strokeLinecap="round"
  *     className="link"
  *     opacity=1
  *     mouseCursor="pointer"
@@ -70,6 +73,9 @@ export default class Link extends React.Component {
       opacity: this.props.opacity,
       fill: "none",
       cursor: this.props.mouseCursor,
+      strokeDasharray: this.props.strokeDasharray,
+      strokeDashoffset: this.props.strokeDasharray,
+      strokeLinecap: this.props.strokeLinecap,
     };
 
     const lineProps = {

diff --git a/test/graph/__snapshots__/graph.snapshot.spec.js.snap b/test/graph/__snapshots__/graph.snapshot.spec.js.snap
@@ -130,6 +130,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -150,6 +153,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -170,6 +176,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -190,6 +199,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -210,6 +222,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -230,6 +245,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -250,6 +268,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -270,6 +291,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -290,6 +314,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -310,6 +337,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -330,6 +360,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -350,6 +383,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -370,6 +406,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -390,6 +429,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -410,6 +452,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -430,6 +475,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -450,6 +498,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -470,6 +521,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -490,6 +544,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -510,6 +567,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -530,6 +590,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -550,6 +613,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -570,6 +636,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -590,6 +659,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -610,6 +682,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -630,6 +705,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -650,6 +728,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }
@@ -670,6 +751,9 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
               "fill": "none",
               "opacity": 1,
               "stroke": "#d3d3d3",
+              "strokeDasharray": 0,
+              "strokeDashoffset": 0,
+              "strokeLinecap": "butt",
               "strokeWidth": 1.5,
             }
           }

diff --git a/test/link/__snapshots__/link.snapshot.spec.js.snap b/test/link/__snapshots__/link.snapshot.spec.js.snap
@@ -13,6 +13,9 @@ exports[`Snapshot - Link Component should match snapshot 1`] = `
         "fill": "none",
         "opacity": "1",
         "stroke": "red",
+        "strokeDasharray": 0,
+        "strokeDashoffset": 0,
+        "strokeLinecap": "butt",
         "strokeWidth": "2",
       }
     }

diff --git a/test/link/link.snapshot.spec.js b/test/link/link.snapshot.spec.js
@@ -10,7 +10,19 @@ describe("Snapshot - Link Component", () => {
     that.callbackMock = jest.fn();
 
     that.link = renderer.create(
-      <Link x1="2" y1="2" x2="4" y2="4" opacity="1" stroke="red" strokeWidth="2" onClickLink={that.callbackMock} />
+      <Link
+        x1="2"
+        y1="2"
+        x2="4"
+        y2="4"
+        opacity="1"
+        stroke="red"
+        strokeWidth="2"
+        onClickLink={that.callbackMock}
+        strokeDasharray={0}
+        strokeDashoffset={0}
+        strokeLinecap="butt"
+      />
     );
 
     that.tree = that.link.toJSON();