Develop (#52)

* docs(readme): add plugin section * refactor(examples): use func components * docs(readme): format * refactor: NodeRenderer (#51) * refactor: NodeRenderer * fix getNodesInside partially param * add `skipInvisible` prop * refactor(noderenderer): rename skipInvisble to onlyRenderVisibleNodes closes #40
2019-10-22 21:03:48 +02:00
parent 8ca5c0f84b
commit f85f2f8c9a
17 changed files with 402 additions and 2493 deletions
@@ -1,67 +1,38 @@
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';

-import Graph, { removeElements, addEdge, getOutgoers } from 'react-flow';
+import Graph, { removeElements, addEdge } from 'react-flow';

 const onNodeDragStop = node => console.log('drag stop', node);
+const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
+const onElementClick = element => console.log('click', element);

-class App extends PureComponent {
-  constructor() {
-    super();
+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' },
+];

-    this.state = {
-      graphLoaded: false,
-      elements: [
-        { 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 BasicGraph = () => {
+  const [elements, setElements] = useState(initialElements);
+  const onElementsRemove = (elementsToRemove) =>
+    setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements(els => addEdge(params, els));

-  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)
-    }));
-  }
-
-  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"
-      />
-    );
-  }
+  return (
+    <Graph
+      elements={elements}
+      onLoad={onLoad}
+      onElementClick={onElementClick}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      style={{ width: '100%', height: '100%' }}
+      backgroundType="lines"
+    />
+  );
 }

-export default App;
+export default BasicGraph;