More granular resolution of node and link parameters

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-d3-graph",
-    "version": "2.0.0-rc2",
+    "version": "2.0.0-rc3",
     "description": "React component to build interactive and configurable graphs with d3 effortlessly",
     "author": "Daniel Caldas",
     "license": "MIT",
@@ -22,6 +22,7 @@
         "lint:test": "node_modules/eslint/bin/eslint.js --config=.eslintrc.test.config.js \"test/**/*.spec.js\"",
         "lint": "npm run lint:src && npm run lint:test && npm run docs:lint",
         "precommit": "lint-staged",
+        "prepare": "npm run dist:transpile",
         "start": "http-server ./sandbox/ -p 8888 -c-1",
         "test:clean": "jest --no-cache --updateSnapshot --verbose --coverage --config jest.config.js",
         "test:watch": "jest --verbose --coverage --watchAll --config jest.config.js",

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;
@@ -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

@@ -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,7 +154,7 @@
  * <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: