react-d3-graph - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

CHANGELOG.md

 # Change Log
 
-## [2.4.0](https://github.com/danielcaldas/react-d3-graph/tree/2.4.0)
+## [2.4.1](https://github.com/danielcaldas/react-d3-graph/tree/2.4.1)
 
-[Full Changelog](https://github.com/danielcaldas/react-d3-graph/compare/2.3.0...2.4.0)
+[Full Changelog](https://github.com/danielcaldas/react-d3-graph/compare/2.3.0...2.4.1)
 
@@ -60,2 +60,6 @@ **Special announcement:**
 
+## [2.4.0](https://github.com/danielcaldas/react-d3-graph/tree/2.4.0)
+
+⚠️ This distribution is not valid, it not up to date with the changes described in its previous _CHANGELOG_.md. **Please use version 2.4.1 of this library instead**. Issue reported in [The release version does not contain some fixes #314](https://github.com/danielcaldas/react-d3-graph/issues/314).
+
 ## [2.3.0](https://github.com/danielcaldas/react-d3-graph/tree/2.3.0)
@@ -62,0 +66,0 @@

lib/components/graph/collapse.helper.js

@@ -14,5 +14,7 @@ "use strict";
 
+var _utils = require("../../utils");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -119,3 +121,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  var rootConnectionsNodesIds = Object.keys(linksMatrix[rootNodeId]);
+  var rootConnectionsNodesIds = linksMatrix[rootNodeId] ? Object.keys(linksMatrix[rootNodeId]) : [];
   return rootConnectionsNodesIds.reduce(function (leafConnections, target) {
@@ -148,2 +150,12 @@ if (_isLeaf(target, linksMatrix, directed)) {
 function isNodeVisible(nodeId, nodes, linksMatrix) {
+  var node = nodes[nodeId];
+
+  if (!node) {
+    if (process.env.NODE_ENV === "development") {
+      (0, _utils.logError)("graph/collapse.helper", "Trying to check if node ".concat(nodeId, " is visible but its not present in nodes: "), nodes);
+    }
+
+    return false;
+  }
+
   if (nodes[nodeId]._orphan) {
@@ -150,0 +162,0 @@ return true;

lib/components/graph/graph.builder.js

@@ -19,3 +19,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -73,2 +73,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
   var y2 = (nodes === null || nodes === void 0 ? void 0 : (_nodes$target2 = nodes[target]) === null || _nodes$target2 === void 0 ? void 0 : _nodes$target2.y) || 0;
+  var type = link.type || config.link.type;
   var d = (0, _link.buildLinkPathDefinition)({
@@ -83,3 +84,3 @@ source: {
     }
-  }, config.link.type);
+  }, type);
   var mainNodeParticipates = false;
@@ -202,2 +203,3 @@
 
+  var labelPosition = node.labelPosition || config.node.labelPosition;
   var strokeWidth = node.strokeWidth || config.node.strokeWidth;
@@ -227,5 +229,6 @@
     label: label,
+    labelPosition: labelPosition,
     opacity: opacity,
     overrideGlobalViewGenerator: !node.viewGenerator && node.svg,
-    renderLabel: config.node.renderLabel,
+    renderLabel: node.renderLabel || config.node.renderLabel,
     size: nodeSize * t,
@@ -232,0 +235,0 @@ stroke: stroke,

lib/components/graph/graph.config.js

@@ -10,13 +10,13 @@ "use strict";
  * <div style="text-align: right;"><i>This is certainly the only extra piece of documentation that you will ever need</i></div>
- * <br/><br/>
+ * </br></br>
  * Here you can consult a detailed description of each graph configurable property as well as the default values
  * of those properties.
  *
- * **Note about performance**<br/>
+ * <b>Note about performance</b></br>
  * Some of the properties have a major performance impact when toggled while rendering graphs of medium or large dimensions (hundreds or thousand of elements).
- * These properties are marked with 🚅🚅🚅.<br/>
- * ⭐ **tip** *to achieve smoother interactions you may want to provide a toggle to set **staticGraph** or (better) **staticGraphWithDragAndDrop** to **true** *<br/>
- * <br/>
- * **Note about granularity**<br/>
- * Some of the properties listed in the {@link #config-node|Node section} are marked with 🔍🔍🔍. This means that this properties
+ * These properties are marked with 🚅🚅🚅.</br>
+ * ⭐ <b>tip</b> <i>to achieve smoother interactions you may want to provide a toggle to set <b>staticGraph</b> or (better) <b>staticGraphWithDragAndDrop</b> to <b>true</b></i></br>
+ * </br>
+ * <b>Note about granularity</b></br>
+ * Some of the properties listed in the <a href="#config-node">Node section</a> are marked with 🔍🔍🔍. This means that this properties
  * have a higher level of granularity. These properties can be defined in the graph payload at a node level. (sample payload below)
@@ -37,3 +37,3 @@ * ```javascript
  *
- * <br/>
+ * </br>
  *
@@ -45,20 +45,24 @@ * - <a href="#config-global">Graph global configurations</a>
  *
- * <br/>
+ * </br>
  *
  * <h2 id="config-global"><a href="#config-global">#</a>  Graph global configurations</h2>
- * @param {boolean} [automaticRearrangeAfterDropNode=false] - 🚅🚅🚅 when true performing a node drag and drop should automatically
- * rearrange all nodes positions based on new position of dragged node (note: **staticGraph** should be false).
- * @param {boolean} [collapsible=false] - 🚅🚅🚅 Allow leaf neighbors nodes to be collapsed (folded), this will allow users to clear the way out and focus on the parts of the graph that really matter.
- * To see an example of this behavior you can access this sandbox link that has a specific set up to experiment this feature. **NOTE**: At this moment
- * nodes without connections (orphan nodes) are not rendered when this property is activated (see [react-d3-graph/issues/#129](https://github.com/danielcaldas/react-d3-graph/issues/129)).
- * <br/>
+ * @param {boolean} [automaticRearrangeAfterDropNode=false] - <a id="automatic-rearrange-after-drop-node" href="#automatic-rearrange-after-drop-node">🔗</a> 🚅🚅🚅 when true performing a node drag and drop should automatically
+ * rearrange all nodes positions based on new position of dragged node (note: <b>staticGraph</b> should be false). A few notes on this property:
+ * <ul>
+ * <li><b>automaticRearrangeAfterDropNode</b> needs to be set before the first graph render. Only the first set value will take effect.</li>
+ * <li><b>automaticRearrangeAfterDropNode</b> won't work together with <b>nodeHighlightBehavior</b> (currently a known limitation, to be address in the future <a href="https://github.com/danielcaldas/react-d3-graph/issues/261" target="_blank">GitHub issue #261</a>).</li>
+ * </ul>
+ * @param {boolean} [collapsible=false] - <a id="collapsible" href="#collapsible">🔗</a> 🚅🚅🚅 Allow leaf neighbors nodes to be collapsed (folded), this will allow users to clear the way out and focus on the parts of the graph that really matter.
+ * To see an example of this behavior you can access this sandbox link that has a specific set up to experiment this feature. <b>NOTE</b>: At this moment
+ * nodes without connections (orphan nodes) are not rendered when this property is activated (see <a target="_blank" href="https://github.com/danielcaldas/react-d3-graph/issues/129">GitHub issue #129</a>).
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-collapsible.gif?raw=true" width="820" height="480"/>
- * @param {boolean} [directed=false] - This property makes react-d3-graph handle your graph as a directed graph. It will
+ * @param {boolean} [directed=false] - <a id="directed" href="#directed">🔗</a> This property makes react-d3-graph handle your graph as a directed graph. It will
  * out of the box provide the look and feel of a directed graph and add directional semantic to links. You can see a sample in the image below.
- * <br/>
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-directed.gif?raw=true" width="820" height="480"/>
- * @param {number} [focusZoom=1] - zoom that will be applied when the graph view is focused in a node. Its value must be between
- * *minZoom* and *maxZoom*. If the specified *focusZoom* is out of this range, *minZoom* or *maxZoom* will be applied instead.
- * **NOTE:** This animation is not trigger by default. In order to trigger it you need to pass down to `react-d3-graph` the
- * node that you want to focus via prop `focusedNodeId` along side with nodes and links:
+ * @param {number} [focusZoom=1] - <a id="focus-zoom" href="#focus-zoom">🔗</a> zoom that will be applied when the graph view is focused in a node. Its value must be between
+ * <i>minZoom</i> and <i>maxZoom</i>. If the specified <i>focusZoom</i> is out of this range, <i>minZoom</i> or <i>maxZoom</i> will be applied instead.</br>
+ * <b>NOTE</b>: This animation is not trigger by default. In order to trigger it you need to pass down to <code>react-d3-graph</code> the
+ * node that you want to focus via prop <code>focusedNodeId</code> along side with nodes and links:
  *
@@ -75,56 +79,67 @@ * ```javascript
  *
- * @param {number} [focusAnimationDuration=0.75] - duration (in seconds) for the animation that takes place when focusing the graph on a node.
- * @param {number} [height=400] - the height of the (svg) area where the graph will be rendered.
- * @param {boolean} [nodeHighlightBehavior=false] - 🚅🚅🚅 when user mouse hovers a node that node and adjacent common
- * connections will be highlighted (depending on the *highlightDegree* value). All the remaining nodes and links assume opacity value equal to **highlightOpacity**.
- * @param {boolean} [linkHighlightBehavior=false] - 🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior
- * to *nodeHighlightBehavior* but for links <small>(just for historical reference this property was introduced in **v1.0.0**)</small>.
- * @param {number} [highlightDegree=1] - **Possible values: 0, 1 or 2**. This value represents the range of the
- * highlight behavior when some node is highlighted. If the value is set to **0** only the selected node will be
- * highlighted. If the value is set to **1** the selected node and his 1st degree connections will be highlighted. If
- * the value is set to **2** the selected node will be highlighted as well as the 1st and 2nd common degree connections.
- * @param {number} [highlightOpacity=1] - this value is used to highlight nodes in the network. The lower
- * the value the more the less highlighted nodes will be visible (related to *nodeHighlightBehavior*).
- * @param {number} [maxZoom=8] - max zoom that can be performed against the graph.
- * @param {number} [minZoom=0.1] - min zoom that can be performed against the graph.
- * @param {boolean} [panAndZoom=false] - 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
- * a similar functionality may be consulted {@link https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39|here}.
- * @param {boolean} [staticGraph=false] - when setting this value to true the graph will be completely static, thus
+ * @param {number} [focusAnimationDuration=0.75] - <a id="focus-animation-duration" href="#focus-animation-duration">🔗</a> duration (in seconds) for the animation that takes place when focusing the graph on a node.
+ * @param {number} [height=400] - <a id="height" href="#height">🔗</a> the height of the (svg) area where the graph will be rendered.
+ * @param {boolean} [nodeHighlightBehavior=false] - <a id="node-highlight-behavior" href="#node-highlight-behavior">🔗</a> 🚅🚅🚅 when user mouse hovers a node that node and adjacent common
+ * connections will be highlighted (depending on the <i>highlightDegree</i> value). All the remaining nodes and links assume opacity value equal to <b>highlightOpacity</b>.
+ * @param {boolean} [linkHighlightBehavior=false] - <a id="link-highlight-behavior" href="#link-highlight-behavior">🔗</a> 🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior
+ * to <i>nodeHighlightBehavior</i> but for links <small>(just for historical reference this property was introduced in <a target="_blank" href="https://github.com/danielcaldas/react-d3-graph/releases/tag/1.0.0">v1.0.0</a>)</small>.
+ * @param {number} [highlightDegree=1] - <a id="highlight-degree" href="#highlight-degree">🔗</a> <b>Possible values: 0, 1 or 2</b>. This value represents the range of the
+ * highlight behavior when some node is highlighted. If the value is set to <b>0</b> only the selected node will be
+ * highlighted. If the value is set to <b>1</b> the selected node and his 1st degree connections will be highlighted. If
+ * the value is set to <b>2</b> the selected node will be highlighted as well as the 1st and 2nd common degree connections.
+ * @param {number} [highlightOpacity=1] - <a id="highlight-opacity" href="#highlight-opacity">🔗</a> this value is used to highlight nodes in the network. The lower
+ * the value the more the less highlighted nodes will be visible (related to <i>nodeHighlightBehavior</i>).
+ * @param {number} [maxZoom=8] - <a id="max-zoom" href="#max-zoom">🔗</a> max zoom that can be performed against the graph.
+ * @param {number} [minZoom=0.1] - <a id="min-zoom" href="#min-zoom">🔗</a> min zoom that can be performed against the graph.
+ * @param {boolean} [panAndZoom=false] - <a id="pan-and-zoom" href="#pan-and-zoom">🔗</a> 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
+ * a similar functionality may be consulted <a target="_blank" href="https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39">here</a>.
+ * @param {boolean} [staticGraph=false] - <a id="static-graph" href="#static-graph">🔗</a> when setting this value to true the graph will be completely static, thus
  * all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be
- * rendered with the initial provided **x and y coordinates** (links positions will be automatically set
+ * rendered with the initial provided <b>x and y coordinates</b> (links positions will be automatically set
  * from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
- * @param {boolean} [staticGraphWithDragAndDrop] - exactly the same as above `staticGraph`, but it will allow users to drag&drop nodes.
- * **Note**: If `staticGraph` is set to `true`, then `staticGraphWithDragAndDrop` will not produce the desired behaviour, make sure
- * to set only one of them to `true`.
- * @param {number} [width=800] - the width of the (svg) area where the graph will be rendered.
- * <br/>
+ * @param {boolean} [staticGraphWithDragAndDrop] - <a id="static-graph-with-drag-and-drop" href="#static-graph-with-drag-and-drop">🔗</a> exactly the same as above <code>staticGraph</code>, but it will allow users to drag&drop nodes.
+ * <b>Note</b>: If <code>staticGraph</code> is set to <code>true</code>, then <code>staticGraphWithDragAndDrop</code> will not produce the desired behaviour, make sure
+ * to set only one of them to <code>true</code>.
+ * @param {number} [width=800] - <a id="width" href="#width">🔗</a> the width of the (svg) area where the graph will be rendered.
+ * </br>
  * @param {Object} d3 d3 object is explained in next section. ⬇️
  * <h2 id="config-d3"><a href="#config-d3">#</a> d3 level configurations</h2>
- * @param {number} [d3.alphaTarget=0.05] - [see d3-force simulation.alphaTarget](https://github.com/d3/d3-force#simulation_alphaTarget)
- * @param {number} [d3.gravity=-100] - this will define how close nodes are to each other ([see d3 reference for forces](https://github.com/d3/d3-force#forces)).
+ * @param {number} [d3.alphaTarget=0.05] - <a id="d3-alpha-target" href="#d3-alpha-target">🔗</a> <a target="_blank" href="https://github.com/d3/d3-force#simulation_alphaTarget">see d3-force simulation.alphaTarget</a>
+ * @param {number} [d3.gravity=-100] - <a id="d3-gravity" href="#d3-gravity">🔗</a> this will define how close nodes are to each other <a target="_blank" href="https://github.com/d3/d3-force#forces">see d3 reference for forces</a>.
  *  - If value is positive, nodes will attract each other.
  *  - If value is negative, nodes will repel each other. Most of the times this is what we want, so nodes don"t overlap.
- * @param {number} [d3.linkLength=100] - the length of each link from the center of the nodes it joins.
- * @param {number} [d3.linkStrength=1] - [see d3-force link.strength](https://github.com/d3/d3-force#link_strength)
- * <br/>
+ * @param {number} [d3.linkLength=100] - <a id="d3-link-length" href="#d3-link-length">🔗</a> the length of each link from the center of the nodes it joins.
+ * @param {number} [d3.linkStrength=1] - <a id="d3-link-strength" href="#d3-link-strength">🔗</a> <a target="_blank" href="https://github.com/d3/d3-force#link_strength">see d3-force link.strength</a>
+ * @param {number} [d3.disableLinkForce=false] - <a id="d3-disable-link-force" href="#d3-disable-link-force">🔗</a> ⚠️🧪EXPERIMENTAL🧪⚠️ it completely disables d3 force link and simulation to re-trigger so that one can obtain
+ * precise render of node positions as described by the author <a target="_blank" href="https://github.com/antoninklopp">@antoninklopp</a> in <a target="_blank" href="https://github.com/danielcaldas/react-d3-graph/pull/278">the Pull Request description</a>.
+ * </br>
  * @param {Object} node node object is explained in next section. ⬇️
  * <h2 id="config-node"><a href="#config-node">#</a> Node level configurations</h2>
- * @param {string} [node.color="#d3d3d3"] - 🔍🔍🔍 this is the color that will be applied to the node if no **color property**
- * is found inside the node itself (yes **you can pass a property "color" inside the node and that color will override the
- * this default one**).
- * @param {string} [node.fontColor="black"] - 🔍🔍🔍 fill color for node"s <text> svg label.
- * @param {number} [node.fontSize=8] - {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control|font-size}
+ * @param {string} [node.color="#d3d3d3"] - <a id="node-color" href="#node-color">🔗</a> 🔍🔍🔍 this is the color that will be applied to the node if no <b>color property</b></br>
+ * is found inside the node itself (yes <b>you can pass a property "color" inside</b></br>
+ * <b>the node and that color will override the this default one</b>).
+ * @param {string} [node.fontColor="black"] - <a id="node-font-color" href="#node-font-color">🔗</a> 🔍🔍🔍 fill color for node"s <text> svg label.
+ * @param {number} [node.fontSize=8] - <a id="node-font-size" href="#node-font-size">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control">font-size</a>
  * property for all nodes" labels.
- * @param {string} [node.fontWeight="normal"] - {@link https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control|font-weight}
+ * @param {string} [node.fontWeight="normal"] - <a id="node-font-weight" href="#node-font-weight">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control">font-weight</a>
  * property for all nodes" labels.
- * @param {string} [node.highlightColor="SAME"] - color for all highlighted nodes (use string "SAME" if you
+ * @param {string} [node.highlightColor="SAME"] - <a id="node-highlight-color" href="#node-highlight-color">🔗</a> color for all highlighted nodes (use string "SAME" if you
  * want the node to keep its color in highlighted state).
- * @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="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
- * to obtain the `label` value on the fly, as a client you will receive all the node information that you passed down into react-d3-graph,
+ * @param {number} [node.highlightFontSize=8] - <a id="node-highlight-font-size" href="#node-highlight-font-size">🔗</a> fontSize in highlighted state.
+ * @param {string} [node.highlightFontWeight="normal"] - <a id="node-highlight-font-weight" href="#node-highlight-font-weight">🔗</a> fontWeight in highlighted state.
+ * @param {string} [node.highlightStrokeColor="SAME"] - <a id="node-stroke-color" href="#node-stroke-color">🔗</a> strokeColor in highlighted state.
+ * @param {number} [node.highlightStrokeWidth="SAME"] - <a id="node-stroke-width" href="#node-stroke-width">🔗</a> strokeWidth in highlighted state.
+ * @param {string} [node.labelPosition=null] - <a id="node-label-position" href="#node-label-position">🔗</a> 🔍🔍🔍 location to place node label relative to node.
+ * The placement options are:
+ *   - "left"
+ *   - "right"
+ *   - "top"
+ *   - "bottom"
+ *   - "center"
+ *
+ * <b>[note]</b> not specifying a label position will fallback to the original placement scheme of to the right of the node. This is different than the implementation for "right", which has the label shifted very slightly upward compared to the original.
+ * @param {string|Function} [node.labelProperty="id"] - <a id="node-label-property" href="#node-label-property">🔗</a> this is the node property that will be used in runtime to</br>
+ * fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set</br>
+ * node.labelProperty to be <b>"firstName"</b>. <b>This can also be a function!</b>, if you pass a function here it will be called</br>
+ * to obtain the <code>label</code> value on the fly, as a client you will receive all the node information that you passed down into react-d3-graph,</br>
  * so the signature of the function would be:
@@ -137,18 +152,18 @@ * ```javascript
  * ```
- * Then you just need to make sure that you pass this function in the config in `config.node.labelProperty`.
- * <br/>
- * @param {string} [node.mouseCursor="pointer"] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
+ * Then you just need to make sure that you pass this function in the config in <code>config.node.labelProperty</code>.
+ * </br>
+ * @param {string} [node.mouseCursor="pointer"] - <a id="node-pointer" href="#node-pointer">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control">cursor</a>
  * property for when some node is mouse hovered.
- * @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
+ * @param {number} [node.opacity=1] - <a id="node-opacity" href="#node-opacity">🔗</a> 🔍🔍🔍 by default all nodes will have this opacity value.
+ * @param {boolean} [node.renderLabel=true] - <a id="node-render-label" href="#node-render-label">🔗</a> 🔍🔍🔍 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 {string} [node.svg=""] - 🔍🔍🔍 render custom svg for nodes in alternative to **node.symbolType**. This svg can
+ * @param {number} [node.size=200] - <a id="node-size" href="#node-size">🔗</a> 🔍🔍🔍 defines the size of all nodes.
+ * @param {string} [node.strokeColor="none"] - <a id="node-stroke-color" href="#node-stroke-color">🔗</a> 🔍🔍🔍  this is the stroke color that will be applied to the node if no <b>strokeColor property</b> is found inside the node itself (yes <b>you can pass a property "strokeColor" inside the node and that stroke color will override this default one</b>).
+ * @param {number} [node.strokeWidth=1.5] - <a id="node-stroke-width" href="#node-stroke-width">🔗</a> 🔍🔍🔍 the width of the all node strokes.
+ * @param {string} [node.svg=""] - <a id="node-svg" href="#node-svg">🔗</a> 🔍🔍🔍 render custom svg for nodes in alternative to <b>node.symbolType</b>. This svg can
  * be provided as a string to either a remote svg resource or for a local one.
- * <br/>
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-custom-svg.gif?raw=true" width="820" height="480"/>
- * @param {string} [node.symbolType="circle"] - 🔍🔍🔍 the <span id="node-symbol-type">shape</span> of the node.
- * Use the following values under a property **type** inside each node (nodes may have different types, same as colors):
+ * @param {string} [node.symbolType="circle"] - <a id="node-symbol-type" href="#node-symbol-type">🔗</a> 🔍🔍🔍 the <a id="node-symbol-type">shape</span> of the node.
+ * Use the following values under a property <b>type</b> inside each node (nodes may have different types, same as colors):
  *   - "circle"
@@ -162,30 +177,30 @@ *   - "cross"
  *
- * **[note]** react-d3-graph will map this values to [d3 symbols](https://github.com/d3/d3-shape#symbols)
- * @param {Function} [node.viewGenerator=null] - 🔍🔍🔍 function that receives a node and returns a JSX view.
- * <br/>
+ * <b>[note]</b> react-d3-graph will map this values to <a target="_blank" href="https://github.com/d3/d3-shape#symbols">d3 symbols</a>
+ * @param {Function} [node.viewGenerator=null] - <a id="node-view-generator" href="#node-view-generator">🔗</a> 🔍🔍🔍 function that receives a node and returns a JSX view.
+ * </br>
  * @param {Object} link link object is explained in the next section. ⬇️
  * <h2 id="config-link"><a href="#config-link">#</a> Link level configurations</h2>
- * @param {string} [link.color="#d3d3d3"] - 🔍🔍🔍 the color for links
+ * @param {string} [link.color="#d3d3d3"] - <a id="link-color" href="#link-color">🔗</a> 🔍🔍🔍 the color for links
  * (from version 1.3.0 this property can be configured at link level).
- * @param {string} [link.fontColor="black"] - 🔍🔍🔍 fill color for link's <text> svg label.
- * @param {number} [link.fontSize=8] - {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control|font-size}
+ * @param {string} [link.fontColor="black"] - <a id="link-font-color" href="#link-font-color">🔗</a> 🔍🔍🔍 fill color for link's <text> svg label.
+ * @param {number} [link.fontSize=8] - <a id="link-font-size" href="#link-font-size">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control">font-size</a>
  * property for all links' labels.
- * @param {string} [link.fontWeight="normal"] - {@link https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control|font-weight}
+ * @param {string} [link.fontWeight="normal"] - <a id="link-font-weight" href="#link-font-weight">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control">font-weight</a>
  * property for all links' labels.
- * @param {string} [link.highlightColor="#d3d3d3"] - links' color in highlight state.
+ * @param {string} [link.highlightColor="SAME"] - <a id="link-highlight-color" href="#link-highlight-color">🔗</a> links' color in highlight state, default being the same color as `link.color`.
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
- * @param {number} [link.highlightFontSize=8] - fontSize in highlighted state.
- * @param {string} [link.highlightFontWeight="normal"] - fontWeight in highlighted state.
- * @param {string|Function} [link.labelProperty="label"] - the property that will be rendered as label within some link. Note that
- * this property needs to be passed along the link payload (along side with source and target). This property can also be a function
- * that receives the link itself as argument and returns a custom string, similarly to what happens with `node.labelProperty`.
- * @param {string} [link.mouseCursor="pointer"] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
+ * @param {number} [link.highlightFontSize=8] - <a id="link-highlight-font-size" href="#link-highlight-font-size">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control">font-size</a> in highlighted state.
+ * @param {string} [link.highlightFontWeight="normal"] - <a id="link-highlight-font-weight" href="#link-highlight-font-weight">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control">font-weight</a> in highlighted state.
+ * @param {string|Function} [link.labelProperty="label"] - <a id="link-label-property" href="#link-label-property">🔗</a> the property that will be rendered as label within some link. Note that</br>
+ * this property needs to be passed along the link payload (along side with source and target). This property can also be a function</br>
+ * that receives the link itself as argument and returns a custom string, similarly to what happens with <code>node.labelProperty</code>.</br>
+ * @param {string} [link.mouseCursor="pointer"] - <a id="link-mouse-cursor" href="#link-mouse-cursor">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control">cursor</a>
  * property for when link is mouse hovered.
- * @param {number} [link.opacity=1] 🔍🔍🔍 - the default opacity value for links.
- * @param {boolean} [link.renderLabel=false] - when set to true labels will appear along side links in the
- * graph. **Note**: this will only happen of course if proper label is passed within the link, check also `link.labelProperty`.
- * <br/>
+ * @param {number} [link.opacity=1] 🔍🔍🔍 - <a href="#link-opacity" href="">🔗</a> the default opacity value for links.
+ * @param {boolean} [link.renderLabel=false] - <a id="link-render-label" href="#link-render-label">🔗</a> when set to true labels will appear along side links in the
+ * graph. <b>Note</b>: this will only happen of course if proper label is passed within the link, check also <code>link.labelProperty</code>.
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-link-render-label.png?raw=true" width="820" height="480"/>
- * @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.
+ * @param {boolean} [link.semanticStrokeWidth=false] - <a id="link-semantic-stroke-width" href="#link-semantic-stroke-width">🔗</a> when set to true all links will have
+ * <i>"semantic width"</i>, 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:
@@ -195,3 +210,3 @@ * ```javascript
  * ```
- * @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] - <a id="link-stroke-width" href="#link-stroke-width">🔗</a> 🔍🔍🔍 strokeWidth for all links. By default the actual value is obtain by the
  * following expression:
@@ -201,7 +216,11 @@ * ```javascript
  * ```
- * @param {string} [link.type="STRAIGHT"] - the type of line to draw, available types at this point are:
+ * @param {number} [link.markerHeight=6] - <a id="link-marker-height" href="#link-marker-height">🔗</a> <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 id="link-marker-width" href="#link-marker-width">🔗</a> <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"] - <a id="link-type" href="#link-type">🔗</a> 🔍🔍🔍 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
  * - "CURVE_FULL" - a semicircumference trajectory unites source and target nodes.
- * <br/>
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
@@ -246,3 +265,4 @@ *
     linkLength: 100,
-    linkStrength: 1
+    linkStrength: 1,
+    disableLinkForce: false
   },
@@ -260,2 +280,3 @@ node: {
     labelProperty: "id",
+    labelPosition: null,
     mouseCursor: "pointer",
@@ -276,4 +297,3 @@ opacity: 1,
     fontWeight: "normal",
-    // FIXME: highlightColor default should be "SAME", breaking change
-    highlightColor: "#d3d3d3",
+    highlightColor: "SAME",
     highlightFontSize: 8,
@@ -287,2 +307,4 @@ highlightFontWeight: "normal",
     strokeWidth: 1.5,
+    markerHeight: 6,
+    markerWidth: 6,
     type: "STRAIGHT"
@@ -289,0 +311,0 @@ }

lib/components/graph/graph.const.js

@@ -14,3 +14,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -17,0 +17,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

lib/components/graph/graph.helper.js

@@ -29,3 +29,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -209,5 +209,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  * @param  {Object} data - Same as {@link #initializeGraphState|data in initializeGraphState}.
- * @throws can throw the following error msg:
+ * @throws can throw the following error or warning msg:
  * INSUFFICIENT_DATA - msg if no nodes are provided
  * INVALID_LINKS - if links point to nonexistent nodes
+ * INSUFFICIENT_LINKS - if no links are provided
  * @returns {undefined}
@@ -223,2 +224,7 @@ * @memberof Graph/helper
 
+  if (!data.links || !data.links.length) {
+    (0, _utils.logWarning)("Graph", _err["default"].INSUFFICIENT_LINKS);
+    data.links = [];
+  }
+
   var n = data.links.length;
@@ -225,0 +231,0 @@

lib/components/graph/Graph.js

@@ -34,3 +34,3 @@ "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -41,3 +41,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -97,4 +97,5 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  *
- * // graph event callbacks
- * const onClickGraph = function() {
+ * // Callback to handle click on the graph.
+ * // @param {Object} event click dom event
+ * const onClickGraph = function(event) {
  *      window.alert('Clicked the graph background');
@@ -159,5 +160,3 @@ * };
  */
-var Graph =
-/*#__PURE__*/
-function (_React$Component) {
+var Graph = /*#__PURE__*/function (_React$Component) {
   _inherits(Graph, _React$Component);
@@ -207,5 +206,7 @@
     value: function _graphBindD3ToReactComponent() {
-      this.state.simulation.nodes(this.state.d3Nodes).on("tick", this._tick);
+      if (!this.state.config.d3.disableLinkForce) {
+        this.state.simulation.nodes(this.state.d3Nodes).on("tick", this._tick);
 
-      this._graphLinkForceConfig();
+        this._graphLinkForceConfig();
+      }
 
@@ -253,2 +254,4 @@ this._graphNodeDragConfig();
     _defineProperty(_assertThisInitialized(_this), "_onDragEnd", function () {
+      _this.isDraggingNode = false;
+
       if (_this.state.draggedNode) {
@@ -286,2 +289,4 @@ _this.onNodePositionChange(_this.state.draggedNode);
     _defineProperty(_assertThisInitialized(_this), "_onDragStart", function () {
+      _this.isDraggingNode = true;
+
       _this.pauseSimulation();
@@ -336,3 +341,3 @@
       if (tagName.toUpperCase() === "SVG" && name === svgContainerName) {
-        _this.props.onClickGraph && _this.props.onClickGraph();
+        _this.props.onClickGraph && _this.props.onClickGraph(e);
       }
@@ -378,2 +383,6 @@ });
     _defineProperty(_assertThisInitialized(_this), "onMouseOverNode", function (id) {
+      if (_this.isDraggingNode) {
+        return;
+      }
+
       _this.props.onMouseOverNode && _this.props.onMouseOverNode(id);
@@ -384,2 +393,6 @@ _this.state.config.nodeHighlightBehavior && _this._setNodeHighlightedValue(id, true);
     _defineProperty(_assertThisInitialized(_this), "onMouseOutNode", function (id) {
+      if (_this.isDraggingNode) {
+        return;
+      }
+
       _this.props.onMouseOutNode && _this.props.onMouseOutNode(id);
@@ -422,12 +435,6 @@ _this.state.config.nodeHighlightBehavior && _this._setNodeHighlightedValue(id, false);
       var id = node.id,
-          oldX = node.oldX,
-          oldY = node.oldY,
           x = node.x,
           y = node.y;
-      var deltaX = x - oldX;
-      var deltaY = y - oldY;
 
-      if (deltaX !== 0 || deltaY !== 0) {
-        _this.props.onNodePositionChange(id, x, y);
-      }
+      _this.props.onNodePositionChange(id, x, y);
     });
@@ -466,2 +473,3 @@
     _this.nodeClickTimer = null;
+    _this.isDraggingNode = false;
     _this.state = (0, _graph3.initializeGraphState)(_this.props, _this.state);
@@ -468,0 +476,0 @@ return _this;

lib/components/graph/graph.renderer.js

@@ -32,3 +32,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -129,27 +129,31 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
     var large = small + _marker.MARKER_LARGE_OFFSET * config.maxZoom / 3;
-    cachedDefs = _react["default"].createElement("defs", null, _react["default"].createElement(_Marker["default"], {
+    var markerProps = {
+      markerWidth: config.link.markerWidth,
+      markerHeight: config.link.markerHeight
+    };
+    cachedDefs = _react["default"].createElement("defs", null, _react["default"].createElement(_Marker["default"], _extends({
       id: _marker.MARKERS.MARKER_S,
       refX: small,
       fill: config.link.color
-    }), _react["default"].createElement(_Marker["default"], {
+    }, markerProps)), _react["default"].createElement(_Marker["default"], _extends({
       id: _marker.MARKERS.MARKER_SH,
       refX: small,
       fill: config.link.highlightColor
-    }), _react["default"].createElement(_Marker["default"], {
+    }, markerProps)), _react["default"].createElement(_Marker["default"], _extends({
       id: _marker.MARKERS.MARKER_M,
       refX: medium,
       fill: config.link.color
-    }), _react["default"].createElement(_Marker["default"], {
+    }, markerProps)), _react["default"].createElement(_Marker["default"], _extends({
       id: _marker.MARKERS.MARKER_MH,
       refX: medium,
       fill: config.link.highlightColor
-    }), _react["default"].createElement(_Marker["default"], {
+    }, markerProps)), _react["default"].createElement(_Marker["default"], _extends({
       id: _marker.MARKERS.MARKER_L,
       refX: large,
       fill: config.link.color
-    }), _react["default"].createElement(_Marker["default"], {
+    }, markerProps)), _react["default"].createElement(_Marker["default"], _extends({
       id: _marker.MARKERS.MARKER_LH,
       refX: large,
       fill: config.link.highlightColor
-    }));
+    }, markerProps)));
     return cachedDefs;
@@ -156,0 +160,0 @@ };

lib/components/link/Link.js

@@ -12,3 +12,3 @@ "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -69,5 +69,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  */
-var Link =
-/*#__PURE__*/
-function (_React$Component) {
+var Link = /*#__PURE__*/function (_React$Component) {
   _inherits(Link, _React$Component);
@@ -74,0 +72,0 @@

lib/components/marker/Marker.js

@@ -12,3 +12,3 @@ "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -37,5 +37,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  */
-var Marker =
-/*#__PURE__*/
-function (_React$Component) {
+var Marker = /*#__PURE__*/function (_React$Component) {
   _inherits(Marker, _React$Component);
@@ -51,3 +49,2 @@
     key: "render",
-    // TODO: make Marker configurable in the future (markerWidth, markerHeight)
     value: function render() {
@@ -60,4 +57,4 @@ return _react["default"].createElement("marker", {
         refY: "0",
-        markerWidth: "6",
-        markerHeight: "6",
+        markerWidth: this.props.markerWidth,
+        markerHeight: this.props.markerHeight,
         orient: "auto",
@@ -64,0 +61,0 @@ fill: this.props.fill

lib/components/node/node.const.js

@@ -16,3 +16,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -19,0 +19,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

lib/components/node/node.helper.js

@@ -74,6 +74,65 @@ "use strict";
 }
+/**
+ * return dx, dy, and potentially alignmentBaseline and textAnchor props to put label in correct position relative to node
+ * @param {number | undefined} dx - default computed offset of label to the right of the node
+ * @param {'left' | 'right' | 'top' | 'bottom' | 'center' | undefined} labelPosition - user specified position of label relative to node
+ * @returns {{dx: string, dy: string} | {dx: string, dy: string, textAnchor: string, dominantBaseline: string}}
+ * props to put text svg for label in correct spot. default case returns just dx and dy, without textAnchor and dominantBaseline
+ */
 
+
+function getLabelPlacementProps(dx, labelPosition) {
+  switch (labelPosition) {
+    case "right":
+      return {
+        dx: dx ? "".concat(dx) : _node["default"].NODE_LABEL_DX,
+        dy: "0",
+        dominantBaseline: "middle",
+        textAnchor: "start"
+      };
+
+    case "left":
+      return {
+        dx: dx ? "".concat(-dx) : "-".concat(_node["default"].NODE_LABEL_DX),
+        dy: "0",
+        dominantBaseline: "middle",
+        textAnchor: "end"
+      };
+
+    case "top":
+      return {
+        dx: "0",
+        dy: dx ? "".concat(-dx) : "-".concat(_node["default"].NODE_LABEL_DX),
+        dominantBaseline: "baseline",
+        textAnchor: "middle"
+      };
+
+    case "bottom":
+      return {
+        dx: "0",
+        dy: dx ? "".concat(dx) : _node["default"].NODE_LABEL_DX,
+        dominantBaseline: "hanging",
+        textAnchor: "middle"
+      };
+
+    case "center":
+      return {
+        dx: "0",
+        dy: "0",
+        dominantBaseline: "middle",
+        textAnchor: "middle"
+      };
+
+    default:
+      return {
+        dx: dx ? "".concat(dx) : _node["default"].NODE_LABEL_DX,
+        dy: _node["default"].NODE_LABEL_DY
+      };
+  }
+}
+
 var _default = {
-  buildSvgSymbol: buildSvgSymbol
+  buildSvgSymbol: buildSvgSymbol,
+  getLabelPlacementProps: getLabelPlacementProps
 };
 exports["default"] = _default;

lib/components/node/Node.js

@@ -10,12 +10,14 @@ "use strict";
 
-var _node = _interopRequireDefault(require("./node.const"));
+var _node = _interopRequireDefault(require("./node.helper"));
 
-var _node2 = _interopRequireDefault(require("./node.helper"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -43,17 +45,21 @@
  * const onClickNode = function(nodeId) {
- *      window.alert('Clicked node', nodeId);
+ *     window.alert('Clicked node', nodeId);
  * };
  *
  * const onRightClickNode = function(nodeId) {
- *      window.alert('Right clicked node', nodeId);
+ *     window.alert('Right clicked node', nodeId);
  * }
  *
  * const onMouseOverNode = function(nodeId) {
- *      window.alert('Mouse over node', nodeId);
+ *     window.alert('Mouse over node', nodeId);
  * };
  *
  * const onMouseOutNode = function(nodeId) {
- *      window.alert('Mouse out node', nodeId);
+ *     window.alert('Mouse out node', nodeId);
  * };
  *
+ * const generateCustomNode(node) {
+ *     return <CustomComponent node={node} />;
+ * }
+ *
  * <Node
@@ -69,2 +75,3 @@ *     id='nodeId'
  *     label='label text'
+ *     labelPosition='top'
  *     opacity=1
@@ -77,3 +84,3 @@ *     renderLabel=true
  *     type='square'
- *     viewGenerator=(node) => <CustomComponent node={node} />
+ *     viewGenerator={generateCustomNode}
  *     className='node'
@@ -85,5 +92,3 @@ *     onClickNode={onClickNode}
  */
-var Node =
-/*#__PURE__*/
-function (_React$Component) {
+var Node = /*#__PURE__*/function (_React$Component) {
   _inherits(Node, _React$Component);
@@ -134,5 +139,4 @@
       };
-      var textProps = {
-        dx: this.props.dx || _node["default"].NODE_LABEL_DX,
-        dy: _node["default"].NODE_LABEL_DY,
+
+      var textProps = _objectSpread({}, _node["default"].getLabelPlacementProps(this.props.dx, this.props.labelPosition), {
         fill: this.props.fontColor,
@@ -142,3 +146,4 @@ fontSize: this.props.fontSize,
         opacity: this.props.opacity
-      };
+      });
+
       var size = this.props.size;
@@ -188,3 +193,3 @@ var gtx = this.props.cx,
       } else {
-        nodeProps.d = _node2["default"].buildSvgSymbol(size, this.props.type);
+        nodeProps.d = _node["default"].buildSvgSymbol(size, this.props.type);
         nodeProps.fill = this.props.fill;
@@ -191,0 +196,0 @@ nodeProps.stroke = this.props.stroke;

lib/err.js

@@ -11,2 +11,3 @@ "use strict";
   GRAPH_NO_ID_PROP: "id prop not defined! id property is mandatory and it should be unique.",
+  INSUFFICIENT_LINKS: "you are passing invalid data to react-d3-graph. You must include a links array in the data object you're passing down to the <Graph> component.",
   INVALID_LINKS: "you provided a invalid links data structure. Links source and target attributes must point to an existent node",
@@ -13,0 +14,0 @@ INSUFFICIENT_DATA: "you have not provided enough data for react-d3-graph to render something. You need to provide at least one node",

lib/utils.js

@@ -13,4 +13,6 @@ "use strict";
 exports.throwErr = throwErr;
+exports.logError = logError;
+exports.logWarning = logWarning;
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -205,2 +207,16 @@ /**
 /**
+ * Formats an error message with fallbacks for the given parameters.
+ * @param {string} component component name.
+ * @param {string} msg message to log.
+ * @returns {string} the error message.
+ * @memberof utils
+ */
+
+
+function buildFormattedErrorMessage() {
+  var component = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "N/A";
+  var msg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "N/A";
+  return "react-d3-graph :: ".concat(component, " :: ").concat(msg);
+}
+/**
  * Helper function for customized error logging.
@@ -215,4 +231,28 @@ * @param  {string} component - the name of the component where the error is to be thrown.
 function throwErr(component, msg) {
-  var error = "react-d3-graph :: ".concat(component, " :: ").concat(msg);
-  throw Error(error);
+  throw Error(buildFormattedErrorMessage(component, msg));
+}
+/**
+ * Logs formatted `react-d3-graph` error with `console.error`.
+ * @param {string} component component name.
+ * @param {string} msg message to log.
+ * @returns {undefined}
+ * @memberof utils
+ */
+
+
+function logError(component, msg) {
+  console.error(buildFormattedErrorMessage(component, msg));
+}
+/**
+ * Helper function for customized warning logging.
+ * @param  {string} component - the name of the component where the warning is to be thrown.
+ * @param  {string} msg - the message contain a more detailed explanation about the error.
+ * @returns {Warning} the thrown warning.
+ * @memberof utils
+ */
+
+
+function logWarning(component, msg) {
+  var warning = "react-d3-graph :: ".concat(component, " :: ").concat(msg);
+  console.warn(warning);
 }

package.json

 {
   "name": "react-d3-graph",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "React component to build interactive and configurable graphs with d3 effortlessly",
@@ -81,2 +81,3 @@ "author": "Daniel Caldas",
     "react-toastify": "5.5.0",
+    "react-tooltip": "3.11.6",
     "style-loader": "0.18.2",
@@ -113,6 +114,3 @@ "typescript": "3.8.3",
     }
-  },
-  "dependencies": {
-    "react-tooltip": "^3.11.1"
   }
 }

src/components/graph/graph.builder.js

@@ -181,2 +181,4 @@ /**
 
+    let labelPosition = node.labelPosition || config.node.labelPosition;
+
     let strokeWidth = node.strokeWidth || config.node.strokeWidth;
@@ -208,2 +210,3 @@
         label,
+        labelPosition,
         opacity,
@@ -210,0 +213,0 @@ overrideGlobalViewGenerator: !node.viewGenerator && node.svg,

src/components/graph/graph.config.js

@@ -121,2 +121,11 @@ /**
  * @param {number} [node.highlightStrokeWidth="SAME"] - <a id="node-stroke-width" href="#node-stroke-width">🔗</a> strokeWidth in highlighted state.
+ * @param {string} [node.labelPosition=null] - <a id="node-label-position" href="#node-label-position">🔗</a> 🔍🔍🔍 location to place node label relative to node.
+ * The placement options are:
+ *   - "left"
+ *   - "right"
+ *   - "top"
+ *   - "bottom"
+ *   - "center"
+ *
+ * <b>[note]</b> not specifying a label position will fallback to the original placement scheme of to the right of the node. This is different than the implementation for "right", which has the label shifted very slightly upward compared to the original.
  * @param {string|Function} [node.labelProperty="id"] - <a id="node-label-property" href="#node-label-property">🔗</a> this is the node property that will be used in runtime to</br>
@@ -256,2 +265,3 @@ * fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set</br>
         labelProperty: "id",
+        labelPosition: null,
         mouseCursor: "pointer",
@@ -258,0 +268,0 @@ opacity: 1,

src/components/node/node.helper.js

@@ -62,4 +62,57 @@ /**
 
+/**
+ * return dx, dy, and potentially alignmentBaseline and textAnchor props to put label in correct position relative to node
+ * @param {number | undefined} dx - default computed offset of label to the right of the node
+ * @param {'left' | 'right' | 'top' | 'bottom' | 'center' | undefined} labelPosition - user specified position of label relative to node
+ * @returns {{dx: string, dy: string} | {dx: string, dy: string, textAnchor: string, dominantBaseline: string}}
+ * props to put text svg for label in correct spot. default case returns just dx and dy, without textAnchor and dominantBaseline
+ */
+function getLabelPlacementProps(dx, labelPosition) {
+    switch (labelPosition) {
+        case "right":
+            return {
+                dx: dx ? `${dx}` : CONST.NODE_LABEL_DX,
+                dy: "0",
+                dominantBaseline: "middle",
+                textAnchor: "start",
+            };
+        case "left":
+            return {
+                dx: dx ? `${-dx}` : `-${CONST.NODE_LABEL_DX}`,
+                dy: "0",
+                dominantBaseline: "middle",
+                textAnchor: "end",
+            };
+        case "top":
+            return {
+                dx: "0",
+                dy: dx ? `${-dx}` : `-${CONST.NODE_LABEL_DX}`,
+                dominantBaseline: "baseline",
+                textAnchor: "middle",
+            };
+        case "bottom":
+            return {
+                dx: "0",
+                dy: dx ? `${dx}` : CONST.NODE_LABEL_DX,
+                dominantBaseline: "hanging",
+                textAnchor: "middle",
+            };
+        case "center":
+            return {
+                dx: "0",
+                dy: "0",
+                dominantBaseline: "middle",
+                textAnchor: "middle",
+            };
+        default:
+            return {
+                dx: dx ? `${dx}` : CONST.NODE_LABEL_DX,
+                dy: CONST.NODE_LABEL_DY,
+            };
+    }
+}
+
 export default {
     buildSvgSymbol,
+    getLabelPlacementProps,
 };

src/components/node/Node.jsx

 import React from "react";
 
-import CONST from "./node.const";
-
 import nodeHelper from "./node.helper";
@@ -40,2 +38,3 @@
  *     label='label text'
+ *     labelPosition='top'
  *     opacity=1
@@ -92,4 +91,3 @@ *     renderLabel=true
         const textProps = {
-            dx: this.props.dx || CONST.NODE_LABEL_DX,
-            dy: CONST.NODE_LABEL_DY,
+            ...nodeHelper.getLabelPlacementProps(this.props.dx, this.props.labelPosition),
             fill: this.props.fontColor,
@@ -96,0 +94,0 @@ fontSize: this.props.fontSize,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

424688

decreased by-19.5%

Dev dependency count

46

increased by2.22%

Number of package files

55

decreased by-3.51%

Lines of code

5499

decreased by-25.32%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• - Removedreact-tooltip@^3.11.1

• - Removedreact-tooltip@3.11.6(transitive)