107 lines
1.9 KiB
JavaScript
107 lines
1.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import ReactFlow, {
|
|
ReactFlowProvider,
|
|
Background,
|
|
Controls,
|
|
addEdge,
|
|
} from 'react-flow-renderer';
|
|
|
|
import TeaserFlow from 'components/TeaserFlow';
|
|
import { baseColors } from 'themes';
|
|
|
|
const initialElements = [
|
|
{
|
|
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 onLoad = (rf) => rf.fitView({ padding: 0.2 });
|
|
|
|
export default () => {
|
|
const [elements, setElements] = useState(initialElements);
|
|
const onConnect = (params) => setElements((els) => addEdge(params, els));
|
|
|
|
return (
|
|
<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."
|
|
>
|
|
<ReactFlowProvider>
|
|
<ReactFlow
|
|
elements={elements}
|
|
onLoad={onLoad}
|
|
zoomOnScroll={false}
|
|
onConnect={onConnect}
|
|
>
|
|
<Background color={baseColors.silverDarken60} gap={15} />
|
|
<Controls showInteractive={false} />
|
|
</ReactFlow>
|
|
</ReactFlowProvider>
|
|
</TeaserFlow>
|
|
);
|
|
};
|