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

refactor(example): use create-react-app instead of parcel

Browse Source
This commit is contained in:
moklick
2019-10-09 19:04:25 +02:00
parent 3eea88d533
commit e144c9cd72
30 changed files with 31016 additions and 40214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
examples/advanced.html
View File

@@ -1,34 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react-flow example</title>
<style>
html, body {
margin: 0;
}
html, body, #root {
height: 100%;
}
.controls {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 4;
}
.react-flow__handle.connecting {
background: orange;
}
.react-flow__handle.valid {
background: green;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="advanced/scripts/index.js"></script>
</body>
</html>

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

@@ -1,170 +0,0 @@
import React, { PureComponent } from 'react';
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);
class App extends PureComponent {
constructor() {
super();
const onChange = (option, d) => {
this.setState(prevState => (
{elements: prevState.elements.map(e => {
if (isEdge(e) || e.id !== '6') {
return e;
}
return {
...e,
data: {
...e.data,
label: `Option ${option} selected.`
}
};
})}
));
}
const onChangeInput = (input, d) => {
this.setState(prevState => (
{elements: prevState.elements.map(e => {
if (isEdge(e) || e.id !== '8') {
return e;
}
if (e.id === '8') {
return {
...e,
data: {
...e.data,
input: input || 'write something'
}
};
}
})}
));
}
this.state = {
graphLoaded: false,
elements: [
{ id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
{ id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
{ id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
{ id: '6', type: 'special', data: { onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },
{ id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
{ id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 350, y: 100 } },
{ id: '9', type: 'text', data: { label: 'right' }, position: { x: 600, y: 100 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-8', source: '1', target: '8', animated: true },
{ id: 'e8-9', source: '8', target: '9', animated: true },
{ id: 'e2-3', source: '2', target: '3' },
{ id: 'e3-4', source: '3', target: '4', type: 'step' },
{ id: 'e3-5', source: '3', target: '5' },
{ id: 'e5-6b', source: '5', target: '6__b' },
{ id: 'e5-6a', source: '5', target: '6__a', type: 'step', animated: true, style: { stroke: '#FFCC00' } },
{ id: 'e6-7', source: '6', target: '7', style: { stroke: '#FFCC00' }},
]
};
}
onLoad(graphInstance) {
console.log('graph loaded:', graphInstance);
window.rg = graphInstance;
this.graphInstance = graphInstance;
this.graphInstance.fitView({ padding: 0.1 });
this.setState({
graphLoaded: true
});
}
onFitView() {
this.graphInstance.fitView();
}
onAdd() {
this.setState(prevState => ({
...prevState,
elements: prevState.elements.concat({
id: (prevState.elements.length + 1).toString(),
data: { label: 'Added node' },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
})
}));
}
onElementClick(element) {
console.log('click', element);
console.log('outgoers', getOutgoers(element, this.state.elements));
}
onZoomIn() {
this.graphInstance.zoomIn();
}
onZoomOut() {
this.graphInstance.zoomOut();
}
onElementsRemove(elementsToRemove) {
this.setState(prevState => ({
elements: removeElements(elementsToRemove, prevState.elements)
}));
}
onConnect(params) {
this.setState(prevState => ({
elements: addEdge(params, prevState.elements)
}));
}
render() {
return (
<Graph
elements={this.state.elements}
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={params => this.onConnect(params)}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
onLoad={graphInstance => this.onLoad(graphInstance)}
nodeTypes={{
special: SpecialNode,
text: InputNode
}}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
backgroundColor="#888"
backgroundGap={16}
>
<MiniMap
style={{ position: 'absolute', right: 10, bottom: 10 }}
nodeColor={n => {
if (n.type === 'input') return 'blue';
if (n.type === 'output') return 'green';
if (n.type === 'default') return 'red';
return '#FFCC00';
}}
/>
<Controls />
<button
type="button"
onClick={() => this.onAdd()}
style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
>
add
</button>
</Graph>
);
}
}
export default App;

19
examples/advanced/scripts/InputNode.js
View File

@@ -1,19 +0,0 @@
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' }}
isValidConnection={connection => +connection.target % 2 === 0}
/>
</div>
);

36
examples/advanced/scripts/SpecialNode.js
View File

@@ -1,36 +0,0 @@
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
examples/advanced/scripts/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 ExampleGraph from './ExampleGraph';
trace('initial render', performance.now(), () =>
render(<ExampleGraph />, document.getElementById('root'))
);

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

@@ -1,67 +0,0 @@
import React, { PureComponent } from 'react';
import Graph, { removeElements, addEdge, getOutgoers } from '../../../src';
const onNodeDragStop = node => console.log('drag stop', node);
class App extends PureComponent {
constructor() {
super();
this.state = {
graphLoaded: false,
elements: [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
]
};
}
onLoad(graphInstance) {
console.log('graph loaded:', graphInstance);
this.graphInstance = graphInstance;
this.setState({
graphLoaded: true
});
}
onElementClick(element) {
console.log('click', element);
console.log('outgoers', getOutgoers(element, this.state.elements));
}
onElementsRemove(elementsToRemove) {
this.setState(prevState => ({
elements: removeElements(elementsToRemove, prevState.elements)
}));
}
onConnect(params) {
console.log('connect', params);
this.setState(prevState => ({
elements: addEdge(params, prevState.elements)
}));
}
render() {
return (
<Graph
elements={this.state.elements}
onLoad={graphInstance => this.onLoad(graphInstance)}
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={params => this.onConnect(params)}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
backgroundType="lines"
/>
);
}
}
export default App;

9
examples/basic/scripts/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 ExampleGraph from './ExampleGraph';
trace('initial render', performance.now(), () =>
render(<ExampleGraph />, document.getElementById('root'))
);

28
examples/index.html
View File

@@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react-flow example</title>
<style>
html, body {
margin: 0;
}
html, body, #root {
height: 100%;
}
.controls {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 4;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="basic/scripts/index.js"></script>
</body>
</html>