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

refactor(example): cleanup

Browse Source
This commit is contained in:
moklick
2019-09-25 18:50:33 +02:00
parent 4d97a7939f
commit f6513eff10
6 changed files with 77 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
example/index.html
View File

@@ -4,11 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" type="text/css" href="../dist/ReactGraph.css">-->
<title>Document</title>
<title>react-flow example</title>
<style>
html, body {
margin: 0
margin: 0;
}
html, body, #root {
height: 100%;
@@ -18,11 +18,11 @@
bottom: 10px;
left: 10px;
z-index: 4;
} 
}
</style>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>

9
example/index.js
View File

@@ -1,9 +0,0 @@
import React from 'react';
import { render } from 'react-dom';
import { unstable_trace as trace } from "scheduler/tracing";
import SimpleGraph from './SimpleGraph';
trace('initial render', performance.now(), () =>
render(<SimpleGraph />, document.getElementById('root'))
);

58
example/SimpleGraph.js → example/scripts/ExampleGraph.js
View File

@@ -1,45 +1,9 @@
import React, { PureComponent } from 'react';
import Graph, { isEdge, removeElements, getOutgoers, Handle, MiniMap } from '../src';
// import Graph, { isEdge, removeElements, getOutgoers, Handle, MiniMap } from '../dist/ReactGraph';
import Graph, { isEdge, removeElements, getOutgoers, MiniMap } from '../../src';
const SpecialNode = ({ data, styles }) => (
<div
style={{ background: '#FFCC00', padding: 10, borderRadius: 2, ...styles }}
>
<Handle
type="target"
position="top"
id="a"
style={{ left: 10, background: '#999' }}
onConnect={params => console.log('handle onConnect', params)}
/>
<Handle
type="target"
position="top"
id="b"
style={{ left: 30, background: '#999' }}
/>
<div>I am <strong>special</strong>!<br />{data.label}</div>
<select onChange={(e) => data.onChange(e.target.value, data)}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<Handle type="source" position="bottom" style={{ left: 10, background: '#999' }} />
</div>
);
const InputNode = ({ data, styles }) => (
<div
style={{ background: '#FFCC00', padding: 10, borderRadius: 2, ...styles }}
>
<Handle type="target" position="left" style={{ background: '#999' }} />
<div>{data.input}</div>
<input onChange={(e) => data.onChange(e.target.value, data)} />
<Handle type="source" position="right" style={{ background: '#999' }} />
</div>
);
import SpecialNode from './SpecialNode';
import InputNode from './InputNode';
const onNodeDragStop = node => console.log('drag stop', node);
@@ -54,7 +18,13 @@ class App extends PureComponent {
return e;
}
return { ...e, data: { ...e.data, label: `Option ${option} selected.` } };
return {
...e,
data: {
...e.data,
label: `Option ${option} selected.`
}
};
})}
));
}
@@ -67,7 +37,13 @@ class App extends PureComponent {
}
if (e.id === '8') {
return { ...e, data: { ...e.data, input: input || 'write something' } };
return {
...e,
data: {
...e.data,
input: input || 'write something'
}
};
}
})}
));

14
example/scripts/InputNode.js Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { Handle } from '../../src';
export default({ data, styles }) => (
<div
style={{ background: '#FFCC00', padding: 10, borderRadius: 2, ...styles }}
>
<Handle type="target" position="left" style={{ background: '#999' }} />
<div>{data.input}</div>
<input onChange={(e) => data.onChange(e.target.value, data)} />
<Handle type="source" position="right" style={{ background: '#999' }} />
</div>
);

32
example/scripts/SpecialNode.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import { Handle } from '../../src';
export default ({ data, styles }) => {
return (
<div
style={{ background: '#FFCC00', padding: 10, borderRadius: 2, ...styles }}
>
<Handle
type="target"
position="top"
id="a"
style={{ left: 10, background: '#999' }}
onConnect={params => console.log('handle onConnect', params)}
/>
<Handle
type="target"
position="top"
id="b"
style={{ left: 30, background: '#999' }}
/>
<div>I am <strong>special</strong>!<br />{data.label}</div>
<select onChange={(e) => data.onChange(e.target.value, data)}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<Handle type="source" position="bottom" style={{ left: 10, background: '#999' }} />
</div>
);
};

9
example/scripts/index.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
import { render } from 'react-dom';
import { unstable_trace as trace } from 'scheduler/tracing';
import ExampleGraph from './ExampleGraph';
trace('initial render', performance.now(), () =>
render(<ExampleGraph />, document.getElementById('root'))
);