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

chore(examples): undirectional

Browse Source
This commit is contained in:
moklick
2021-04-06 18:53:14 +02:00
parent 46665a2f90
commit 417c6fd169
2 changed files with 144 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Undirectional/index.tsx
+142 -9
View File
@@ -12,30 +12,163 @@ import ReactFlow, {
ConnectionLineType,
ConnectionMode,
updateEdge,
ArrowHeadType,
} from 'react-flow-renderer';
import CustomNode from './CustomNode';
const initialElements: Elements = [
{
id: '1',
id: '00',
type: 'custom',
position: { x: 150, y: 100 },
position: { x: 300, y: 250 },
},
{
id: '2',
id: '01',
type: 'custom',
position: { x: 300, y: 100 },
position: { x: 100, y: 50 },
},
{
id: '3',
id: '02',
type: 'custom',
position: { x: 450, y: 100 },
position: { x: 500, y: 50 },
},
{
id: 'e1-2',
source: '2',
target: '3',
id: '03',
type: 'custom',
position: { x: 500, y: 500 },
},
{
id: '04',
type: 'custom',
position: { x: 100, y: 500 },
},
{
id: '10',
type: 'custom',
position: { x: 300, y: 5 },
},
{
id: '20',
type: 'custom',
position: { x: 600, y: 250 },
},
{
id: '30',
type: 'custom',
position: { x: 300, y: 600 },
},
{
id: '40',
type: 'custom',
position: { x: 5, y: 250 },
},
{
id: 'e0-1a',
source: '00',
target: '01',
sourceHandle: 'left',
targetHandle: 'bottom',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-1b',
source: '00',
target: '01',
sourceHandle: 'top',
targetHandle: 'right',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-2a',
source: '00',
target: '02',
sourceHandle: 'top',
targetHandle: 'left',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-2b',
source: '00',
target: '02',
sourceHandle: 'right',
targetHandle: 'bottom',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-3a',
source: '00',
target: '03',
sourceHandle: 'right',
targetHandle: 'top',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-3b',
source: '00',
target: '03',
sourceHandle: 'bottom',
targetHandle: 'left',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-4a',
source: '00',
target: '04',
sourceHandle: 'bottom',
targetHandle: 'right',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-4b',
source: '00',
target: '04',
sourceHandle: 'left',
targetHandle: 'top',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-10',
source: '00',
target: '10',
sourceHandle: 'top',
targetHandle: 'bottom',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-20',
source: '00',
target: '20',
sourceHandle: 'right',
targetHandle: 'left',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-30',
source: '00',
target: '30',
sourceHandle: 'bottom',
targetHandle: 'top',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-40',
source: '00',
target: '40',
sourceHandle: 'left',
targetHandle: 'right',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
];