135 lines
2.8 KiB
TypeScript
135 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import ReactFlow, { Node, Edge, Position, MarkerType } from 'reactflow';
|
|
|
|
const nodes: Node[] = [
|
|
// LTR
|
|
{
|
|
id: '1',
|
|
position: { x: 50, y: -100 },
|
|
data: { label: 'Source' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Right,
|
|
style: { background: 'rgba(255,255,255,0.5)' },
|
|
},
|
|
{
|
|
id: '2',
|
|
position: { x: -100, y: 0 },
|
|
data: { label: 'Target' },
|
|
sourcePosition: Position.Left,
|
|
targetPosition: Position.Left,
|
|
style: { background: 'rgba(255,255,255,0.5)' },
|
|
},
|
|
// Right Right
|
|
{
|
|
id: '3',
|
|
position: { x: -100, y: 250 },
|
|
data: { label: 'Source' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Right,
|
|
style: { background: 'rgba(255,255,255,0.5)' },
|
|
},
|
|
{
|
|
id: '4',
|
|
position: { x: 50, y: 150 },
|
|
data: { label: 'Target' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Right,
|
|
style: { background: 'rgba(255,255,255,0.5)' },
|
|
},
|
|
// Right Top
|
|
{
|
|
id: '5',
|
|
position: { x: -100, y: 450 },
|
|
data: { label: 'Source' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Right,
|
|
style: { background: 'rgba(255,255,255,0.5)' },
|
|
},
|
|
{
|
|
id: '6',
|
|
position: { x: 100, y: 400 },
|
|
data: { label: 'Target' },
|
|
sourcePosition: Position.Top,
|
|
targetPosition: Position.Top,
|
|
style: { background: 'rgba(255,255,255,0.5)' },
|
|
},
|
|
// Right Bottom
|
|
{
|
|
id: '7',
|
|
position: { x: 100, y: 700 },
|
|
data: { label: 'Source' },
|
|
sourcePosition: Position.Right,
|
|
targetPosition: Position.Right,
|
|
style: { background: 'rgba(255,255,255,0.5)' },
|
|
},
|
|
{
|
|
id: '8',
|
|
position: { x: -100, y: 600 },
|
|
data: { label: 'Target' },
|
|
sourcePosition: Position.Bottom,
|
|
targetPosition: Position.Bottom,
|
|
style: { background: 'rgba(255,255,255,0.5)' },
|
|
},
|
|
];
|
|
|
|
const edges: Edge[] = [
|
|
{
|
|
id: 'e1-2',
|
|
source: '1',
|
|
target: '2',
|
|
type: 'smoothstep',
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
},
|
|
pathOptions: {
|
|
offset: 30,
|
|
},
|
|
interactionWidth: 0,
|
|
},
|
|
{
|
|
id: 'e3-4',
|
|
source: '3',
|
|
target: '4',
|
|
type: 'smoothstep',
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
},
|
|
pathOptions: {
|
|
borderRadius: 2,
|
|
},
|
|
interactionWidth: 0,
|
|
},
|
|
|
|
{
|
|
id: 'e4-5',
|
|
source: '5',
|
|
target: '6',
|
|
type: 'smoothstep',
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
},
|
|
},
|
|
|
|
{
|
|
id: 'e7-8',
|
|
source: '7',
|
|
target: '8',
|
|
type: 'smoothstep',
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
},
|
|
},
|
|
];
|
|
|
|
const defaultEdgeOptions = {
|
|
style: {
|
|
strokeWidth: 1,
|
|
},
|
|
};
|
|
|
|
const SimpleEdge = () => {
|
|
return <ReactFlow defaultNodes={nodes} defaultEdges={edges} fitView defaultEdgeOptions={defaultEdgeOptions} />;
|
|
};
|
|
|
|
export default SimpleEdge;
|