More granular resolution of node and link parameters (#166)

* * node level setting for opacity and strokeWidth
* link level setting for opacity

* * add eyeglasses to config for node opacity and strokeWidth
* add eyeglasses to config for link opacity

* add prepare script so npm can install from github

* pass linting

* Update for code review:
- revert version bump
- set default strokeWidth to SAME
- add link level resolution to strokeWidth (for issue 149)

* add eyeglasses to link.strokeWidth

* remove prepare script

src/components/graph/graph.builder.js

@@ -33,7 +33,7 @@ function _getNodeOpacity(node, highlightedNode, highlightedLink, config) {
     } else if (someNodeHighlighted) {
         opacity = highlight ? config.node.opacity : config.highlightOpacity;
     } else {
-        opacity = config.node.opacity;
+        opacity = node.opacity || config.node.opacity;
     }
 
     return opacity;
@@ -81,7 +81,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
         target === (highlightedLink && highlightedLink.target);
     const highlight = reasonNode || reasonLink;
 
-    let opacity = config.link.opacity;
+    let opacity = link.opacity || config.link.opacity;
 
     if (highlightedNode || (highlightedLink && highlightedLink.source)) {
         opacity = highlight ? config.link.opacity : config.highlightOpacity;
@@ -93,7 +93,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
         stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color : config.link.highlightColor;
     }
 
-    let strokeWidth = config.link.strokeWidth * (1 / transform);
+    let strokeWidth = (link.strokeWidth || config.link.strokeWidth) * (1 / transform);
 
     if (config.link.semanticStrokeWidth) {
         const linkValue = links[source][target] || links[target][source] || 1;
@@ -137,6 +137,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
         (node.id === (highlightedLink && highlightedLink.source) ||
             node.id === (highlightedLink && highlightedLink.target));
     const opacity = _getNodeOpacity(node, highlightedNode, highlightedLink, config);
+
     let fill = node.color || config.node.color;
 
     if (highlight && config.node.highlightColor !== CONST.KEYWORDS.SAME) {
@@ -155,11 +156,16 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
         label = config.node.labelProperty(node);
     }
 
+    let strokeWidth = node.strokeWidth || config.node.strokeWidth;
+
+    if (highlight && config.node.highlightStrokeWidth !== CONST.KEYWORDS.SAME) {
+        strokeWidth = config.node.highlightStrokeWidth;
+    }
+
     const t = 1 / transform;
     const nodeSize = node.size || config.node.size;
     const fontSize = highlight ? config.node.highlightFontSize : config.node.fontSize;
     const dx = fontSize * t + nodeSize / 100 + 1.5;
-    const strokeWidth = highlight ? config.node.highlightStrokeWidth : config.node.strokeWidth;
     const svg = node.svg || config.node.svg;
     const fontColor = node.fontColor || config.node.fontColor;
 

src/components/graph/graph.config.js

@@ -107,7 +107,7 @@
  * @param {number} [node.highlightFontSize=8] - fontSize in highlighted state.
  * @param {string} [node.highlightFontWeight='normal'] - fontWeight in highlighted state.
  * @param {string} [node.highlightStrokeColor='SAME'] - strokeColor in highlighted state.
- * @param {number} [node.highlightStrokeWidth=1.5] - strokeWidth in highlighted state.
+ * @param {number} [node.highlightStrokeWidth='SAME'] - strokeWidth in highlighted state.
  * @param {string|Function} [node.labelProperty='id'] - this is the node property that will be used in runtime to
  * fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set
  * node.labelProperty to be **'firstName'**. **This can also be a function!**, if you pass a function here it will be called
@@ -123,12 +123,12 @@
  * <br/>
  * @param {string} [node.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
  * property for when some node is mouse hovered.
- * @param {number} [node.opacity=1] - by default all nodes will have this opacity value.
+ * @param {number} [node.opacity=1] 🔍🔍🔍 - by default all nodes will have this opacity value.
  * @param {boolean} [node.renderLabel=true] - when set to false no labels will appear along side nodes in the
  * graph.
  * @param {number} [node.size=200] - 🔍🔍🔍 defines the size of all nodes.
  * @param {string} [node.strokeColor='none'] - 🔍🔍🔍  this is the stroke color that will be applied to the node if no **strokeColor property** is found inside the node itself (yes **you can pass a property 'strokeColor' inside the node and that stroke color will override this default one** ).
- * @param {number} [node.strokeWidth=1.5] - the width of the all node strokes.
+ * @param {number} [node.strokeWidth=1.5] 🔍🔍🔍 - the width of the all node strokes.
  * @param {string} [node.svg=''] - 🔍🔍🔍 render custom svg for nodes in alternative to **node.symbolType**. This svg can
  * be provided as a string to either a remote svg resource or for a local one.
  * <br/>
@@ -154,14 +154,14 @@
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
  *  @param {string} [link.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
  * property for when link is mouse hovered.
- * @param {number} [link.opacity=1] - the default opacity value for links.
+ * @param {number} [link.opacity=1] 🔍🔍🔍 - the default opacity value for links.
  * @param {boolean} [link.semanticStrokeWidth=false] - when set to true all links will have
  * *"semantic width"*, this means that the width of the connections will be proportional to the value of each link.
  * This is how link strokeWidth will be calculated:
  * ```javascript
  * strokeWidth += (linkValue * strokeWidth) / 10;
  * ```
- * @param {number} [link.strokeWidth=1.5] - strokeWidth for all links. By default the actual value is obtain by the
+ * @param {number} [link.strokeWidth=1.5] 🔍🔍🔍 - strokeWidth for all links. By default the actual value is obtain by the
  * following expression:
  * ```javascript
  * link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value
@@ -219,7 +219,7 @@ export default {
         highlightFontSize: 8,
         highlightFontWeight: "normal",
         highlightStrokeColor: "SAME",
-        highlightStrokeWidth: 1.5,
+        highlightStrokeWidth: "SAME",
         labelProperty: "id",
         mouseCursor: "pointer",
         opacity: 1,