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

feat(nodes): add selection

Browse Source
This commit is contained in:
moklick
2019-07-16 15:41:31 +02:00
parent d65121d197
commit a66f707f11
7 changed files with 289 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
example/SimpleGraph.js
View File

@@ -3,9 +3,13 @@ import React, { PureComponent } from 'react';
import Graph from '../src';
// import Graph from '../dist/ReactGraph';
const SpecialNode = ({ data, styles }) =>
<div style={{ background: '#FFCC00', padding: 10, borderRadius: 30, ...styles }}>I am Special!<br />{data.label}</div>
;
const SpecialNode = ({ data, styles }) => (
<div
style={{ background: '#FFCC00', padding: 10, borderRadius: 30, ...styles }}
>
I am <strong>special</strong>!<br />{data.label}
</div>
);
class App extends PureComponent {
constructor() {
@@ -18,7 +22,7 @@ class App extends PureComponent {
{ 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: 'default' }, position: { x: 400, y: 300 } },
{ data: { id: '6', label: 'A label', type: 'special' }, position: { x: 400, y: 400 } },
{ data: { id: '6', label: 'I am label', type: 'special' }, position: { x: 400, y: 400 } },
{ data: { source: '1', target: '2' } },
{ data: { source: '2', target: '3' } },
{ data: { source: '3', target: '4' } },
@@ -51,8 +55,11 @@ class App extends PureComponent {
onAdd() {
this.setState(prevState => ({
...prevState,
elements: prevState.elements.concat({ data: { id: prevState.elements.length + 1, label: 'Added node' }, position: { x: 50, y: 50 } })
}))
elements: prevState.elements.concat({
data: { id: prevState.elements.length + 1, label: 'Added node' },
position: { x: 50, y: 50 }
})
}));
}
render() {