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

feat(utils): create helper function for creating edges

Browse Source
This commit is contained in:
moklick
2019-10-08 19:30:04 +02:00
parent 48e9a8e75a
commit 8d19fc9824
5 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
examples/advanced/scripts/ExampleGraph.js
View File

@@ -1,13 +1,11 @@
import React, { PureComponent } from 'react';
import Graph, { isEdge, removeElements, getOutgoers, MiniMap, Controls } from '../../../src';
import Graph, { isEdge, removeElements, addEdge, getOutgoers, MiniMap, Controls } from '../../../src';
import SpecialNode from './SpecialNode';
import InputNode from './InputNode';
const onNodeDragStop = node => console.log('drag stop', node);
let edgeId = 0;
const getEdgeId = () => `edge__${edgeId++}`;
class App extends PureComponent {
constructor() {
@@ -74,9 +72,6 @@ class App extends PureComponent {
{ id: 'e6-7', source: '6', target: '7', style: { stroke: '#FFCC00' }},
]
};
this.onElementClick = this.onElementClick.bind(this);
this.onConnect = this.onConnect.bind(this);
}
onLoad(graphInstance) {
@@ -120,14 +115,13 @@ class App extends PureComponent {
onElementsRemove(elementsToRemove) {
this.setState(prevState => ({
elements: removeElements(prevState.elements, elementsToRemove)
elements: removeElements(elementsToRemove, prevState.elements)
}));
}
onConnect(params) {
console.log('connect', params);
this.setState(prevState => ({
elements: prevState.elements.concat({ id: getEdgeId(), ...params })
elements: addEdge(params, prevState.elements)
}));
}
@@ -135,9 +129,9 @@ class App extends PureComponent {
return (
<Graph
elements={this.state.elements}
onElementClick={this.onElementClick}
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={this.onConnect}
onConnect={params => this.onConnect(params)}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
onLoad={graphInstance => this.onLoad(graphInstance)}

16
examples/basic/scripts/ExampleGraph.js
View File

@@ -1,12 +1,9 @@
import React, { PureComponent } from 'react';
import Graph, { removeElements, getOutgoers } from '../../../src';
import Graph, { removeElements, addEdge, getOutgoers } from '../../../src';
const onNodeDragStop = node => console.log('drag stop', node);
let edgeId = 0;
const getEdgeId = () => `edge__${edgeId++}`;
class App extends PureComponent {
constructor() {
super();
@@ -22,9 +19,6 @@ class App extends PureComponent {
{ id: 'e1-3', source: '1', target: '3' },
]
};
this.onElementClick = this.onElementClick.bind(this);
this.onConnect = this.onConnect.bind(this);
}
onLoad(graphInstance) {
@@ -43,14 +37,14 @@ class App extends PureComponent {
onElementsRemove(elementsToRemove) {
this.setState(prevState => ({
elements: removeElements(prevState.elements, elementsToRemove)
elements: removeElements(elementsToRemove, prevState.elements)
}));
}
onConnect(params) {
console.log('connect', params);
this.setState(prevState => ({
elements: prevState.elements.concat({ id: getEdgeId(), ...params })
elements: addEdge(params, prevState.elements)
}));
}
@@ -59,9 +53,9 @@ class App extends PureComponent {
<Graph
elements={this.state.elements}
onLoad={graphInstance => this.onLoad(graphInstance)}
onElementClick={this.onElementClick}
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={this.onConnect}
onConnect={params => this.onConnect(params)}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
showBackground={false}