Develop (#35)

* refactor(ts): add ReactFlowProps

* Refactor/grid.tsx (#24)

* chore(deps-dev): bump start-server-and-test from 1.10.4 to 1.10.5

Bumps [start-server-and-test](https://github.com/bahmutov/start-server-and-test) from 1.10.4 to 1.10.5.
- [Release notes](https://github.com/bahmutov/start-server-and-test/releases)
- [Commits](https://github.com/bahmutov/start-server-and-test/compare/v1.10.4...v1.10.5)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* chore(deps-dev): bump typescript from 3.6.3 to 3.6.4

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.6.3 to 3.6.4.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v3.6.3...v3.6.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* refactor: grid.js -> grid.tsx

* refactor(bg): remove unused renderer

* refactor(connectionline): use ts

* refactor(ts): edges

* chore(build): update

* Refactor/typescript (WIP) (#25)

* refactor(store): use ts

* refactor(edgewrapper): use ts

* fix(handle): provide onConnect default func

* refactor(nodeselection): use ts

* refactor(userselction): use ts

* refactor(plugins): use ts

* refactor(hooks): use ts

* refactor(nodes): use ts

* refactor(edgerenderer): use ts

* refactor(graphview): use ts

* refactor(utils): rename js to ts

* refactor(app): fix ts errors

* fix(ts): errors

* fix(app): ts errors

* refactor(app): ts erros

* refactor(app): ts errors

* fix(utils): removeElements

* feat(example): add empty renderer closes #34

* fix(connect): dont drag node on connect

* chore(build): update

example/src/Empty/index.js

@@ -0,0 +1,83 @@
+import React, { PureComponent } from 'react';
+
+import Graph, { removeElements, addEdge, getOutgoers } from 'react-flow';
+
+const onNodeDragStop = node => console.log('drag stop', node);
+
+class App extends PureComponent {
+  constructor() {
+    super();
+
+    this.state = {
+      graphLoaded: false,
+      elements: []
+    };
+  }
+
+  onLoad(graphInstance) {
+    console.log('graph loaded:', graphInstance);
+
+    this.graphInstance = graphInstance;
+    this.setState({
+      graphLoaded: true
+    });
+  }
+
+  onElementClick(element) {
+    console.log('click', element);
+    console.log('outgoers', getOutgoers(element, this.state.elements));
+  }
+
+  onElementsRemove(elementsToRemove) {
+    this.setState(prevState => ({
+      elements: removeElements(elementsToRemove, prevState.elements)
+    }));
+  }
+
+  onConnect(params) {
+    console.log('connect', params);
+    this.setState(prevState => ({
+      elements: addEdge(params, prevState.elements)
+    }));
+  }
+
+  onAdd() {
+    this.setState((prevState) => {
+      const nodeId =  (prevState.elements.length + 1).toString();
+
+      return {
+        ...prevState,
+        elements: prevState.elements.concat({
+          id: nodeId,
+          data: { label: `Node: ${nodeId}` },
+          position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
+        })
+      };
+    });
+  }
+
+  render() {
+    return (
+      <Graph
+        elements={this.state.elements}
+        onLoad={graphInstance => this.onLoad(graphInstance)}
+        onElementClick={element => this.onElementClick(element)}
+        onElementsRemove={elements => this.onElementsRemove(elements)}
+        onConnect={params => this.onConnect(params)}
+        onNodeDragStop={onNodeDragStop}
+        style={{ width: '100%', height: '100%' }}
+        backgroundType="lines"
+      >
+      <button
+        type="button"
+        onClick={() => this.onAdd()}
+        style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
+      >
+        add
+      </button>
+      </Graph>
+    );
+  }
+}
+
+export default App;

example/src/index.js

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import Advanced from './Advanced';
 import Basic from './Basic';
+import Empty from './Empty';
 
 import './index.css';
 
@@ -13,6 +14,9 @@ ReactDOM.render((
       <Route path="/basic">
         <Basic />
       </Route>
+      <Route path="/empty">
+        <Empty />
+      </Route>
       <Route path="/">
         <Advanced />
       </Route>