89 lines
1.3 KiB
JavaScript
89 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
|
|
import TeaserFlow from 'components/TeaserFlow';
|
|
|
|
const elements = [
|
|
{
|
|
id: '1',
|
|
type: 'input',
|
|
position: {
|
|
x: 200,
|
|
y: 5,
|
|
},
|
|
data: {
|
|
label: 'Input',
|
|
},
|
|
},
|
|
{
|
|
id: '2',
|
|
position: {
|
|
x: 0,
|
|
y: 150,
|
|
},
|
|
data: {
|
|
label: 'Default',
|
|
},
|
|
},
|
|
{
|
|
id: '3',
|
|
position: {
|
|
x: 400,
|
|
y: 150,
|
|
},
|
|
data: {
|
|
label: 'Default',
|
|
},
|
|
},
|
|
{
|
|
id: '4',
|
|
type: 'output',
|
|
position: {
|
|
x: 200,
|
|
y: 300,
|
|
},
|
|
data: {
|
|
label: 'Output',
|
|
},
|
|
},
|
|
{
|
|
id: 'e1',
|
|
source: '1',
|
|
target: '2',
|
|
label: 'default edge',
|
|
},
|
|
{
|
|
id: 'e2',
|
|
source: '1',
|
|
target: '3',
|
|
animated: true,
|
|
label: 'animated edge',
|
|
},
|
|
{
|
|
id: 'e3',
|
|
source: '2',
|
|
target: '4',
|
|
type: 'smoothstep',
|
|
},
|
|
{
|
|
id: 'e4',
|
|
source: '3',
|
|
target: '4',
|
|
type: 'smoothstep',
|
|
},
|
|
];
|
|
|
|
const flowProps = {
|
|
elements,
|
|
onLoad: (rf) => rf.fitView({ padding: 0.2 }),
|
|
};
|
|
|
|
export default () => (
|
|
<TeaserFlow
|
|
title="Feature-rich"
|
|
description="React Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls, several event handlers and more."
|
|
flowProps={flowProps}
|
|
withControls
|
|
fitView
|
|
/>
|
|
);
|