Feature/new config static graph with drag and drop (#217)

* Add staticGraphWithDragAndDrop to graph.config

* Add stat dataset

* Code new functionality for property staticGraphWithDragAndDrop

README.md

@@ -20,9 +20,10 @@
 
 You can also load different datasets and configurations via URL query parameter, here are the links:
 
-*   [small dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=small) - small example.
-*   [custom node dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=custom-node) - sample config with custom views.
-*   [marvel dataset!](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=marvel) - sample config with directed collapsible graph and custom svg nodes.
+-   [small dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=small) - small example.
+-   [custom node dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=custom-node) - sample config with custom views.
+-   [marvel dataset!](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=marvel) - sample config with directed collapsible graph and custom svg nodes.
+-   [static dataset!](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=static) - small sample config statically positioned nodes.
 
 Do you want to visualize your own data set on the live sandbox? Just submit a PR! You're welcome 😁
 
@@ -48,33 +49,32 @@ npm install react-d3-graph
 > npm WARN react-d3-graph@2.0.1 requires a peer of d3@^5.5.0 but none is installed. You must install peer dependencies yourself.
 > npm WARN react-d3-graph@2.0.1 requires a peer of react@^16.4.1 but none is installed. You must install peer dependencies yourself.
 
-
 ## Usage sample
 
 Graph component is the main component for react-d3-graph components, its interface allows its user to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).
 The code for the [live example](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) can be consulted [here](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx).
 
 ```javascript
-import { Graph } from 'react-d3-graph';
+import { Graph } from "react-d3-graph";
 
 // graph payload (with minimalist structure)
 const data = {
-    nodes: [{ id: 'Harry' }, { id: 'Sally' }, { id: 'Alice' }],
-    links: [{ source: 'Harry', target: 'Sally' }, { source: 'Harry', target: 'Alice' }]
+    nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
+    links: [{ source: "Harry", target: "Sally" }, { source: "Harry", target: "Alice" }],
 };
 
 // the graph configuration, you only need to pass down properties
 // that you want to override, otherwise default ones will be used
 const myConfig = {
     nodeHighlightBehavior: true,
     node: {
-        color: 'lightgreen',
+        color: "lightgreen",
         size: 120,
-        highlightStrokeColor: 'blue'
+        highlightStrokeColor: "blue",
     },
     link: {
-        highlightColor: 'lightblue'
-    }
+        highlightColor: "lightblue",
+    },
 };
 
 // graph event callbacks

sandbox/data/static/static.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+    height: 400,
+    width: 800,
+    nodeHighlightBehavior: true,
+    linkHighlightBehavior: true,
+    staticGraphWithDragAndDrop: true,
+    node: {
+        fontSize: 12,
+        highlightFontSize: 12,
+        highlightFontWeight: "bold",
+        highlightStrokeColor: "blue",
+        labelProperty: "name",
+        size: 500,
+        strokeWidth: 2,
+    },
+    link: {
+        highlightColor: "blue",
+        renderLabel: true,
+        highlightFontWeight: "bold",
+        semanticStrokeWidth: true,
+        fontSize: 12,
+    },
+    d3: {
+        gravity: -400,
+        linkLength: 180,
+    },
+};

sandbox/data/static/static.data.js

@@ -0,0 +1,50 @@
+module.exports = {
+    links: [
+        {
+            source: 1,
+            target: 2,
+            label: "A-B",
+        },
+        {
+            source: 1,
+            target: 3,
+            label: "A-C",
+        },
+        {
+            source: 1,
+            target: 4,
+            label: "A-D",
+        },
+        {
+            source: 3,
+            target: 4,
+            label: "C-D",
+        },
+    ],
+    nodes: [
+        {
+            id: 1,
+            name: "A",
+            x: 50,
+            y: 310,
+        },
+        {
+            id: 2,
+            name: "B",
+            x: 300,
+            y: 50,
+        },
+        {
+            id: 3,
+            name: "C",
+            x: 400,
+            y: 100,
+        },
+        {
+            id: 4,
+            name: "D",
+            x: 400,
+            y: 200,
+        },
+    ],
+};

src/components/graph/Graph.jsx

@@ -464,11 +464,17 @@ export default class Graph extends React.Component {
 
     componentDidUpdate() {
         // if the property staticGraph was activated we want to stop possible ongoing simulation
-        this.state.config.staticGraph && this.pauseSimulation();
+        const shouldPause = this.state.config.staticGraph || this.state.config.staticGraphWithDragAndDrop;
+
+        if (shouldPause) {
+            this.pauseSimulation();
+        }
 
         if (!this.state.config.staticGraph && (this.state.newGraphElements || this.state.d3ConfigUpdated)) {
             this._graphForcesConfig();
-            this.restartSimulation();
+            if (!this.state.config.staticGraphWithDragAndDrop) {
+                this.restartSimulation();
+            }
             this.setState({ newGraphElements: false, d3ConfigUpdated: false });
         }
 

src/components/graph/graph.config.js

@@ -7,7 +7,7 @@
  * **Note about performance**<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** to **true** *<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
@@ -82,6 +82,9 @@
  * 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
  * 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 {Object} d3 d3 object is explained in next section. ⬇️
@@ -219,6 +222,7 @@ export default {
     nodeHighlightBehavior: false,
     panAndZoom: false,
     staticGraph: false,
+    staticGraphWithDragAndDrop: false,
     width: 800,
     d3: {
         alphaTarget: 0.05,