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
example/index.html
+5 -5
View File
@@ -4,11 +4,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <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> <style>
html, body { html, body {
margin: 0 margin: 0;
} }
html, body, #root { html, body, #root {
height: 100%; height: 100%;
@@ -18,11 +18,11 @@
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
z-index: 4; z-index: 4;
}  }
</style> </style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="index.js"></script> <script src="scripts/index.js"></script>
</body> </body>
</html> </html>
example/index.js
-9
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'))
);
example/SimpleGraph.js → example/scripts/ExampleGraph.js
+17 -41
View File
@@ -1,45 +1,9 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import Graph, { isEdge, removeElements, getOutgoers, Handle, MiniMap } from '../src'; import Graph, { isEdge, removeElements, getOutgoers, MiniMap } from '../../src';
// import Graph, { isEdge, removeElements, getOutgoers, Handle, MiniMap } from '../dist/ReactGraph';
const SpecialNode = ({ data, styles }) => ( import SpecialNode from './SpecialNode';
<div import InputNode from './InputNode';
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>
);
const onNodeDragStop = node => console.log('drag stop', node); const onNodeDragStop = node => console.log('drag stop', node);
@@ -54,7 +18,13 @@ class App extends PureComponent {
return e; 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') { if (e.id === '8') {
return { ...e, data: { ...e.data, input: input || 'write something' } }; return {
...e,
data: {
...e.data,
input: input || 'write something'
}
};
} }
})} })}
)); ));
example/scripts/InputNode.js
+14
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>
);
example/scripts/SpecialNode.js
+32
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>
);
};
example/scripts/index.js
+9
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'))
);