Graph Prop: isInteractive (#56)

* feat(props): add isInteractive

* refactor(selection): dont allow if not interactive

* feat(renderer): add class if is interactive

* chore(inactive): add tests

* refactor(inactive): no connection line, no edge selection

closes #49

example/src/Inactive/index.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+import Graph, { MiniMap, Controls } from 'react-flow';
+
+const initialElements = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+const EmptyGraph = () => {
+  const [isInteractive, setIsInteractive] = useState(false);
+  const onToggleInteractive = (evt) => {
+    setIsInteractive(evt.target.checked);
+  };
+
+  return (
+    <Graph
+      elements={initialElements}
+      style={{ width: '100%', height: '100%' }}
+      backgroundType="lines"
+      isInteractive={isInteractive}
+    >
+      <MiniMap />
+      <Controls />
+      <div
+        style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
+      >
+        <label>
+          interactive
+          <input
+            type="checkbox"
+            checked={isInteractive}
+            onChange={onToggleInteractive}
+            className="react-flow__interactive"
+          />
+        </label>
+      </div>
+    </Graph>
+  );
+}
+
+export default EmptyGraph;

example/src/index.css

@@ -1,3 +1,7 @@
+body {
+  font-family: sans-serif;
+}
+
 html, body {
   margin: 0;
 }

example/src/index.js

@@ -5,6 +5,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import CustomNodes from './CustomNodes';
 import Basic from './Basic';
 import Empty from './Empty';
+import Inactive from './Inactive';
 
 import './index.css';
 
@@ -17,6 +18,9 @@ ReactDOM.render((
       <Route path="/empty">
         <Empty />
       </Route>
+      <Route path="/inactive">
+        <Inactive />
+      </Route>
       <Route path="/">
         <CustomNodes />
       </Route>