alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(examples): rename Advanced to CustomNodes, use func component

Browse Source
This commit is contained in:
moklick
2019-10-22 22:37:05 +02:00
parent bd60ad0ecd
commit 02005917f8
14 changed files with 2291 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Advanced/index.js
-174
View File
@@ -1,174 +0,0 @@
import React, { PureComponent } from 'react';
import Graph, { isEdge, removeElements, addEdge, getOutgoers, MiniMap, Controls } from 'react-flow';
import SpecialNode from './SpecialNode';
import InputNode from './InputNode';
const onNodeDragStop = node => console.log('drag stop', node);
class App extends PureComponent {
constructor() {
super();
const onChange = (option, d) => {
this.setState(prevState => (
{elements: prevState.elements.map(e => {
if (isEdge(e) || e.id !== '6') {
return e;
}
return {
...e,
data: {
...e.data,
label: `Option ${option} selected.`
}
};
})}
));
}
const onChangeInput = (input, d) => {
this.setState(prevState => (
{elements: prevState.elements.map(e => {
if (isEdge(e) || e.id !== '8') {
return e;
}
if (e.id === '8') {
return {
...e,
data: {
...e.data,
input: input || 'write something'
}
};
} else {
return e;
}
})}
));
}
this.state = {
graphLoaded: false,
elements: [
{ id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
{ id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
{ id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
{ id: '6', type: 'special', data: { onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },
{ id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
{ id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 350, y: 100 } },
{ id: '9', type: 'text', data: { label: 'right' }, position: { x: 600, y: 100 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-8', source: '1', target: '8', animated: true },
{ id: 'e8-9', source: '8', target: '9', animated: true },
{ id: 'e2-3', source: '2', target: '3' },
{ id: 'e3-4', source: '3', target: '4', type: 'step' },
{ id: 'e3-5', source: '3', target: '5' },
{ id: 'e5-6b', source: '5', target: '6__b' },
{ id: 'e5-6a', source: '5', target: '6__a', type: 'step', animated: true, style: { stroke: '#FFCC00' } },
{ id: 'e6-7', source: '6', target: '7', style: { stroke: '#FFCC00' }},
]
};
}
onLoad(graphInstance) {
console.log('graph loaded:', graphInstance);
window.rg = graphInstance;
this.graphInstance = graphInstance;
this.graphInstance.fitView({ padding: 0.1 });
this.setState({
graphLoaded: true
});
}
onFitView() {
this.graphInstance.fitView();
}
onAdd() {
this.setState(prevState => ({
...prevState,
elements: prevState.elements.concat({
id: (prevState.elements.length + 1).toString(),
data: { label: 'Added node' },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
})
}));
}
onElementClick(element) {
console.log('click', element);
console.log('outgoers', getOutgoers(element, this.state.elements));
}
onZoomIn() {
this.graphInstance.zoomIn();
}
onZoomOut() {
this.graphInstance.zoomOut();
}
onElementsRemove(elementsToRemove) {
this.setState(prevState => ({
elements: removeElements(elementsToRemove, prevState.elements)
}));
}
onConnect(params) {
this.setState(prevState => ({
elements: addEdge(params, prevState.elements)
}));
}
render() {
return (
<Graph
elements={this.state.elements}
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={params => this.onConnect(params)}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
onLoad={graphInstance => this.onLoad(graphInstance)}
nodeTypes={{
special: SpecialNode,
text: InputNode
}}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
backgroundColor="#888"
backgroundGap={16}
snapToGrid={true}
snapGrid={[16, 16]}
>
<MiniMap
style={{ position: 'absolute', right: 10, bottom: 10, backgroundColor: '#f8f8f8'}}
nodeColor={n => {
if (n.type === 'input') return 'blue';
if (n.type === 'output') return 'green';
if (n.type === 'default') return 'red';
return '#FFCC00';
}}
/>
<Controls />
<button
type="button"
onClick={() => this.onAdd()}
style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
>
add
</button>
</Graph>
);
}
}
export default App;
example/src/Advanced/InputNode.js → example/src/CustomNodes/InputNode.js
View File
example/src/Advanced/SpecialNode.js → example/src/CustomNodes/SpecialNode.js
View File
example/src/CustomNodes/index.js
+119
View File
@@ -0,0 +1,119 @@
import React, { useState, useEffect } from 'react';
import Graph, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow';
import SpecialNode from './SpecialNode';
import InputNode from './InputNode';
const onNodeDragStop = node => console.log('drag stop', node);
const onElementClick = element => console.log('click', element);
const onLoad = (graph) => console.log('graph loaded:', graph);
const CustomNodesGraph = () => {
const [elements, setElements] = useState([]);
useEffect(() => {
const onChange = (option, d) => {
setElements(els => els.map(e => {
if (isEdge(e) || e.id !== '6') {
return e;
}
return {
...e,
data: {
...e.data,
label: `Option ${option} selected.`
}
};
}));
};
const onChangeInput = (input, d) => {
setElements(els => els.map(e => {
if (isEdge(e) || e.id !== '8') {
return e;
}
return {
...e,
data: {
...e.data,
input: input || 'write something'
}
};
}));
};
setElements([
{ id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
{ id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
{ id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
{ id: '6', type: 'special', data: { onChange: onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },
{ id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
{ id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 350, y: 100 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-8', source: '1', target: '8', animated: true },
{ id: 'e2-3', source: '2', target: '3', animated: true },
{ id: 'e3-4', source: '3', target: '4', animated: true },
{ id: 'e3-5', source: '3', target: '5', animated: true },
{ id: 'e5-6b', source: '5', target: '6__b', animated: true },
{ id: 'e5-6a', source: '5', target: '6__a', animated: true },
{ id: 'e6-7', source: '6', target: '7', animated: true },
])
}, []);
const addRandomNode = () => {
setElements(els => els.concat({
id: (els.length + 1).toString(),
data: { label: 'Added node' },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
}));
};
const onElementsRemove = (elementsToRemove) => setElements(els => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements(els => addEdge(params, els));
return (
<Graph
elements={elements}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
onLoad={onLoad}
nodeTypes={{
special: SpecialNode,
text: InputNode
}}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
backgroundColor="#888"
backgroundGap={16}
snapToGrid={true}
snapGrid={[16, 16]}
>
<MiniMap
nodeColor={n => {
if (n.type === 'input') return 'blue';
if (n.type === 'output') return 'green';
if (n.type === 'default') return 'red';
return '#FFCC00';
}}
/>
<Controls />
<button
type="button"
onClick={addRandomNode}
style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
>
add node
</button>
</Graph>
);
}
export default CustomNodesGraph;
example/src/Empty/index.js
+3 -3
View File
@@ -11,7 +11,7 @@ const EmptyGraph = () => {
const onElementsRemove = (elementsToRemove) =>
setElements(els => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements(els => addEdge(params, els));
const onAdd = () => {
const addRandomNode = () => {
const nodeId = (elements.length + 1).toString();
const newNode = {
id: nodeId,
@@ -36,10 +36,10 @@ const EmptyGraph = () => {
<Controls />
<button
type="button"
onClick={onAdd}
onClick={addRandomNode}
style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
>
add
add node
</button>
</Graph>
);
example/src/index.js
+2 -2
View File
@@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Advanced from './Advanced';
import CustomNodes from './CustomNodes';
import Basic from './Basic';
import Empty from './Empty';
@@ -18,7 +18,7 @@ ReactDOM.render((
<Empty />
</Route>
<Route path="/">
<Advanced />
<CustomNodes />
</Route>
</Switch>
</Router>