refactor(examples): use func components
This commit is contained in:
moklick
19
README.md
19
README.md
@@ -1,6 +1,6 @@
|
||||
# :ocean: React Flow
|
||||
|
||||
React library for building node-based flow editors.
|
||||
React library for building node-based graphs.
|
||||
|
||||
# Installation
|
||||
|
||||
@@ -8,6 +8,23 @@ React library for building node-based flow editors.
|
||||
npm install github:wbkd/react-flow
|
||||
```
|
||||
|
||||
# Usage
|
||||
|
||||
This is a very basic example of how to use react-flow. There are more advanced examples in the [example](/example) folder.
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
import Graph from 'react-flow';
|
||||
|
||||
const elements = [
|
||||
{ id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
|
||||
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
];
|
||||
|
||||
const BasicGraph = () => <Graph elements={elements} style={{ width: '100%', height: '100%' }} />;
|
||||
```
|
||||
|
||||
# Props
|
||||
|
||||
- `elements`: array with nodes and edges
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,84 +1,48 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Graph, { removeElements, addEdge, getOutgoers, MiniMap } from 'react-flow';
|
||||
import Graph, { removeElements, addEdge, MiniMap, Controls } 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();
|
||||
|
||||
this.state = {
|
||||
graphLoaded: false,
|
||||
elements: []
|
||||
const EmptyGraph = () => {
|
||||
const [elements, setElements] = useState([]);
|
||||
const onElementsRemove = (elementsToRemove) =>
|
||||
setElements(els => removeElements(elementsToRemove, els));
|
||||
const onConnect = (params) => setElements(els => addEdge(params, els));
|
||||
const onAdd = () => {
|
||||
const nodeId = (elements.length + 1).toString();
|
||||
const newNode = {
|
||||
id: nodeId,
|
||||
data: { label: `Node: ${nodeId}` },
|
||||
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
|
||||
};
|
||||
}
|
||||
setElements(els => els.concat(newNode));
|
||||
};
|
||||
|
||||
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"
|
||||
>
|
||||
<MiniMap />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => this.onAdd()}
|
||||
style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
|
||||
>
|
||||
add
|
||||
</button>
|
||||
</Graph>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Graph
|
||||
elements={elements}
|
||||
onLoad={onLoad}
|
||||
onElementClick={onElementClick}
|
||||
onElementsRemove={onElementsRemove}
|
||||
onConnect={p => onConnect(p)}
|
||||
onNodeDragStop={onNodeDragStop}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
backgroundType="lines"
|
||||
>
|
||||
<MiniMap />
|
||||
<Controls />
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
|
||||
>
|
||||
add
|
||||
</button>
|
||||
</Graph>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default EmptyGraph;
|
||||
|
||||
Reference in New Issue
Block a user