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

fix(provider): handle changed nodes and edges

Browse Source
This commit is contained in:
moklick
2019-07-15 17:26:55 +02:00
parent 39d8981ccc
commit 81835a4e2c
4 changed files with 53 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
example/SimpleGraph.js
View File

@@ -2,6 +2,24 @@ import React, { PureComponent } from 'react';
import Graph from '../src';
class App extends PureComponent {
constructor() {
super();
this.state = {
elements: [
{ data: { id: '1', label: 'Tests', type: 'input' }, position: { x: 0, y: 0 } },
{ data: { id: '2', label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ data: { id: '3', label: 'This is a node' }, position: { x: 100, y: 200 }, style: { background: '#222', color: '#fff' } },
{ data: { id: '4', label: 'nody nodes', type: 'output' }, position: { x: 50, y: 300 } },
{ data: { id: '5', label: 'Another node', type: 'output' }, position: { x: 400, y: 300 } },
{ data: { source: '1', target: '2' } },
{ data: { source: '2', target: '3' } },
{ data: { source: '3', target: '4' } },
{ data: { source: '3', target: '5' } }
]
}
}
onLoad(graphInstance) {
this.graphInstance = graphInstance;
@@ -22,22 +40,17 @@ class App extends PureComponent {
this.graphInstance.fitView();
}
render() {
const elements = [
{ data: { id: '1', label: 'Tests', type: 'input' }, position: { x: 0, y: 0 } },
{ data: { id: '2', label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ data: { id: '3', label: 'This is a node' }, position: { x: 100, y: 200 }, style: { background: '#222', color: '#fff' } },
{ data: { id: '4', label: 'nody nodes', type: 'output' }, position: { x: 50, y: 300 } },
{ data: { id: '5', label: 'Another node', type: 'output' }, position: { x: 400, y: 300 } },
{ data: { source: '1', target: '2' } },
{ data: { source: '2', target: '3' } },
{ data: { source: '3', target: '4' } },
{ data: { source: '3', target: '5' } }
];
onAdd() {
this.setState(prevState => ({
...prevState,
elements: prevState.elements.concat({ data: { id: (prevState.elements.length + 1).toString(), label: 'added', type: 'input' }, position: { x: 50, y: 50 } })
}))
}
render() {
return (
<Graph
elements={elements}
elements={this.state.elements}
onNodeClick={node => console.log(node)}
style={{ width: '100%', height: '100%' }}
onLoad={graphInstance => this.onLoad(graphInstance)}
@@ -50,6 +63,13 @@ class App extends PureComponent {
>
fit
</button>
<button
type="button"
style={{ position: 'absolute', bottom: '10px', left: '10px' }}
onClick={() => this.onAdd()}
>
add
</button>
</Graph>
);
}