Making Marker height and width configurable (#245)

* Making Marker height and Width configurable * Reducing line size * Adding defaults to config file * Make markerWidth and markerHeight numbers by default. Small note on docs. Update sandbox to make marker width and height read only properties * Update snapshots * Remove old todo not from Marker.jsx
danielcaldas · Oct 7, 2019 · 3ef7be2 · 3ef7be2
1 parent 98ea211
commit 3ef7be2
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 23 deletions.
diff --git a/sandbox/Sandbox.jsx b/sandbox/Sandbox.jsx
@@ -41,6 +41,8 @@ export default class Sandbox extends React.Component {
                 .reduce(tooltipReducer, schemaProps),
             height: { "ui:readonly": "true" },
             width: { "ui:readonly": "true" },
+            "link.markerWidth": { "ui:readonly": "true" },
+            "link.markerHeight": { "ui:readonly": "true" },
         };
 
         this.state = {

diff --git a/src/components/graph/graph.config.js b/src/components/graph/graph.config.js
@@ -184,6 +184,10 @@
  * ```javascript
  * link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value
  * ```
+ * @param {number} [link.markerHeight=6] - <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/SVG/Attribute/markerHeight">markerHeight</a>
+ * property for the link arrowhead height. *Note: this property can only be set in the first mount, it does not update dynamically.*
+ * @param {number} [link.markerWidth=6] - <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/SVG/Attribute/markerWidth">markerWidth</a>
+ * property for the link arrowhead width. *Note: this property can only be set in the first mount, it does not update dynamically.*
  * @param {string} [link.type="STRAIGHT"] - the type of line to draw, available types at this point are:
  * - "STRAIGHT" <small>(default)</small> - a straight line.
  * - "CURVE_SMOOTH" - a slight curve between two nodes
@@ -266,6 +270,8 @@ export default {
         renderLabel: false,
         semanticStrokeWidth: false,
         strokeWidth: 1.5,
+        markerHeight: 6,
+        markerWidth: 6,
         type: "STRAIGHT",
     },
 };
diff --git a/src/components/graph/graph.renderer.jsx b/src/components/graph/graph.renderer.jsx
@@ -109,14 +109,19 @@ function _renderDefs() {
         const medium = small + (MARKER_MEDIUM_OFFSET * config.maxZoom) / 3;
         const large = small + (MARKER_LARGE_OFFSET * config.maxZoom) / 3;
 
+        const markerProps = {
+            markerWidth: config.link.markerWidth,
+            markerHeight: config.link.markerHeight,
+        };
+
         cachedDefs = (
             <defs>
-                <Marker id={MARKERS.MARKER_S} refX={small} fill={config.link.color} />
-                <Marker id={MARKERS.MARKER_SH} refX={small} fill={config.link.highlightColor} />
-                <Marker id={MARKERS.MARKER_M} refX={medium} fill={config.link.color} />
-                <Marker id={MARKERS.MARKER_MH} refX={medium} fill={config.link.highlightColor} />
-                <Marker id={MARKERS.MARKER_L} refX={large} fill={config.link.color} />
-                <Marker id={MARKERS.MARKER_LH} refX={large} fill={config.link.highlightColor} />
+                <Marker id={MARKERS.MARKER_S} refX={small} fill={config.link.color} {...markerProps} />
+                <Marker id={MARKERS.MARKER_SH} refX={small} fill={config.link.highlightColor} {...markerProps} />
+                <Marker id={MARKERS.MARKER_M} refX={medium} fill={config.link.color} {...markerProps} />
+                <Marker id={MARKERS.MARKER_MH} refX={medium} fill={config.link.highlightColor} {...markerProps} />
+                <Marker id={MARKERS.MARKER_L} refX={large} fill={config.link.color} {...markerProps} />
+                <Marker id={MARKERS.MARKER_LH} refX={large} fill={config.link.highlightColor} {...markerProps} />
             </defs>
         );
 

diff --git a/src/components/marker/Marker.jsx b/src/components/marker/Marker.jsx
@@ -7,7 +7,6 @@ import React from "react";
  * <Marker id="marker-id" fill="black" />
  */
 export default class Marker extends React.Component {
-    // TODO: make Marker configurable in the future (markerWidth, markerHeight)
     render() {
         return (
             <marker
@@ -16,8 +15,8 @@ export default class Marker extends React.Component {
                 viewBox="0 -5 10 10"
                 refX={this.props.refX}
                 refY="0"
-                markerWidth="6"
-                markerHeight="6"
+                markerWidth={this.props.markerWidth}
+                markerHeight={this.props.markerHeight}
                 orient="auto"
                 fill={this.props.fill}
             >

diff --git a/test/graph/__snapshots__/graph.snapshot.spec.js.snap b/test/graph/__snapshots__/graph.snapshot.spec.js.snap
@@ -19,8 +19,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         className="marker"
         fill="#d3d3d3"
         id="marker-small"
-        markerHeight="6"
-        markerWidth="6"
+        markerHeight={6}
+        markerWidth={6}
         orient="auto"
         refX={16}
         refY="0"
@@ -34,8 +34,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         className="marker"
         fill="blue"
         id="marker-small-highlighted"
-        markerHeight="6"
-        markerWidth="6"
+        markerHeight={6}
+        markerWidth={6}
         orient="auto"
         refX={16}
         refY="0"
@@ -49,8 +49,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         className="marker"
         fill="#d3d3d3"
         id="marker-medium"
-        markerHeight="6"
-        markerWidth="6"
+        markerHeight={6}
+        markerWidth={6}
         orient="auto"
         refX={21.333333333333332}
         refY="0"
@@ -64,8 +64,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         className="marker"
         fill="blue"
         id="marker-medium-highlighted"
-        markerHeight="6"
-        markerWidth="6"
+        markerHeight={6}
+        markerWidth={6}
         orient="auto"
         refX={21.333333333333332}
         refY="0"
@@ -79,8 +79,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         className="marker"
         fill="#d3d3d3"
         id="marker-large"
-        markerHeight="6"
-        markerWidth="6"
+        markerHeight={6}
+        markerWidth={6}
         orient="auto"
         refX={26.666666666666664}
         refY="0"
@@ -94,8 +94,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         className="marker"
         fill="blue"
         id="marker-large-highlighted"
-        markerHeight="6"
-        markerWidth="6"
+        markerHeight={6}
+        markerWidth={6}
         orient="auto"
         refX={26.666666666666664}
         refY="0"

diff --git a/test/marker/__snapshots__/marker.snapshot.spec.js.snap b/test/marker/__snapshots__/marker.snapshot.spec.js.snap
@@ -5,8 +5,6 @@ exports[`Snapshot - Marker Component should match snapshot 1`] = `
   className="marker"
   fill="green"
   id="id"
-  markerHeight="6"
-  markerWidth="6"
   orient="auto"
   refX="5"
   refY="0"