Fix/on drag node handler (#42)

* Fix on _onDragMove d3 handler

* Remove unnecessary nodeIndexMapping data structure from state

* Small improvement in _onDragMove docs

src/components/graph/helper.jsx

@@ -337,7 +337,7 @@ function initializeGraphState({data, id, config}, state) {
 
     validateGraphData(data);
 
-    if (state && state.nodes && state.links && state.nodeIndexMapping) {
+    if (state && state.nodes && state.links) {
         // absorb existent positioning
         graph = {
             nodes: data.nodes.map(n => Object.assign({}, n, state.nodes[n.id])),
@@ -353,16 +353,15 @@ function initializeGraphState({data, id, config}, state) {
     graph.links = data.links.map(l => Object.assign({}, l));
 
     let newConfig = Object.assign({}, utils.merge(DEFAULT_CONFIG, config || {}));
-    let {nodes, nodeIndexMapping} = initializeNodes(graph.nodes);
-    let links = initializeLinks(graph.links); // Matrix of graph connections
+    let nodes = initializeNodes(graph.nodes);
+    let links = initializeLinks(graph.links); // matrix of graph connections
     const {nodes: d3Nodes, links: d3Links} = graph;
     const formatedId = id.replace(/ /g, '_');
     const simulation = createForceSimulation(newConfig.width, newConfig.height);
 
     return {
         id: formatedId,
         config: newConfig,
-        nodeIndexMapping,
         links,
         d3Links,
         nodes,
@@ -411,13 +410,11 @@ function initializeLinks(graphLinks) {
  * of nodes. This is needed because d3 callbacks such as node click and link click return the index of the node.
  * @param  {Object[]} graphNodes - the array of nodes provided by the rd3g consumer.
  * @returns {Object} returns the nodes ready to be used within rd3g with additional properties such as x, y
- * and highlighted values. Returns also the index mapping object of type Object.<number, string>.
+ * and highlighted values.
  * @memberof Graph/helper
  */
 function initializeNodes(graphNodes) {
     let nodes = {};
-    let nodeIndexMapping = {};
-
     const n = graphNodes.length;
 
     for (let i=0; i < n; i++) {
@@ -429,10 +426,9 @@ function initializeNodes(graphNodes) {
         if (!node.hasOwnProperty('y')) { node['y'] = 0; }
 
         nodes[node.id.toString()] = node;
-        nodeIndexMapping[i] = node.id;
     }
 
-    return { nodes, nodeIndexMapping };
+    return nodes;
 }
 
 /**

src/components/graph/index.jsx

@@ -74,7 +74,7 @@ const D3_CONST = {
  * const onClickLink = function(source, target) {
  *      window.alert(`Clicked link between ${source} and ${target}`);
  * };
- * 
+ *
  * const onMouseOverLink = function(source, target) {
  *      window.alert(`Mouse over in link between ${source} and ${target}`);
  * };
@@ -104,18 +104,24 @@ export default class Graph extends React.Component {
 
     /**
      * Handles d3 'drag' event.
-     * @param  {Object} ev - event.
+     * @param  {Object} ev - if not undefined it will contain event data.
      * @param  {number} index - index of the node that is being dragged.
+     * @param  {Array.<Object>} nodeList - array of d3 nodes. This list of nodes is provided by d3, each
+     * node contains all information that was previously fed by rd3g.
+     *
+     * {@link https://github.com/d3/d3-drag/blob/master/README.md#drag_subject|more about d3 drag}
      */
-    _onDragMove = (ev, index) => {
+    _onDragMove = (ev, index, nodeList) => {
+        const id = nodeList[index].id;
+
         if (!this.state.config.staticGraph) {
-            // This is where d3 and react bind
-            let draggedNode = this.state.nodes[this.state.nodeIndexMapping[index]];
+            // this is where d3 and react bind
+            let draggedNode = this.state.nodes[id];
 
             draggedNode.x += d3Event.dx;
             draggedNode.y += d3Event.dy;
 
-            // Set nodes fixing coords fx and fy
+            // set nodes fixing coords fx and fy
             draggedNode['fx'] = draggedNode.x;
             draggedNode['fy'] = draggedNode.y;
 
@@ -300,7 +306,7 @@ export default class Graph extends React.Component {
         const state = newGraphElements ? graphHelper.initializeGraphState(nextProps, this.state) : this.state;
         const config = configUpdated ? utils.merge(DEFAULT_CONFIG, nextProps.config || {}) : this.state.config;
 
-        // In order to properly update graph data we need to pause eventual d3 ongoing animations
+        // in order to properly update graph data we need to pause eventual d3 ongoing animations
         newGraphElements && this.pauseSimulation();
 
         const transform = nextProps.config.panAndZoom !== this.state.config.panAndZoom ? 1 : this.state.transform;
@@ -315,7 +321,7 @@ export default class Graph extends React.Component {
     }
 
     componentDidUpdate() {
-        // If the property staticGraph was activated we want to stop possible ongoing simulation
+        // if the property staticGraph was activated we want to stop possible ongoing simulation
         this.state.config.staticGraph && this.state.simulation.stop();
 
         if (!this.state.config.staticGraph && this.state.newGraphElements) {
@@ -335,7 +341,7 @@ export default class Graph extends React.Component {
             this._graphForcesConfig();
         }
 
-        // Graph zoom and drag&drop all network
+        // graph zoom and drag&drop all network
         this._zoomConfig();
     }