File size: 2,176 Bytes
074d4cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import React from 'react';
import { MarkerType, Position } from 'reactflow';
export const nodes = [
{
id: '1',
type: 'input',
data: {
label: 'Input Node',
},
position: { x: 250, y: 0 },
},
{
id: '2',
data: {
label: 'Default Node',
},
position: { x: 100, y: 100 },
},
{
id: '3',
type: 'output',
data: {
label: 'Output Node',
},
position: { x: 400, y: 100 },
},
{
id: '4',
type: 'custom',
position: { x: 100, y: 200 },
data: {
selects: {
'handle-0': 'smoothstep',
'handle-1': 'smoothstep',
},
},
},
{
id: '5',
type: 'output',
data: {
label: 'custom style',
},
className: 'circle',
style: {
background: '#2B6CB0',
color: 'white',
},
position: { x: 400, y: 200 },
sourcePosition: Position.Right,
targetPosition: Position.Left,
},
{
id: '6',
type: 'output',
style: {
background: '#63B3ED',
color: 'white',
width: 100,
},
data: {
label: 'Node',
},
position: { x: 400, y: 325 },
sourcePosition: Position.Right,
targetPosition: Position.Left,
},
{
id: '7',
type: 'default',
className: 'annotation',
data: {
label: (
<>
On the bottom left you see the <strong>Controls</strong> and the bottom right the{' '}
<strong>MiniMap</strong>. This is also just a node 🥳
</>
),
},
draggable: false,
selectable: false,
position: { x: 150, y: 400 },
},
];
export const edges = [
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3', animated: true },
{
id: 'e4-5',
source: '4',
target: '5',
type: 'smoothstep',
sourceHandle: 'handle-0',
data: {
selectIndex: 0,
},
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e4-6',
source: '4',
target: '6',
type: 'smoothstep',
sourceHandle: 'handle-1',
data: {
selectIndex: 1,
},
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
]; |