41 lines
722 B
TypeScript
41 lines
722 B
TypeScript
import React, { FC } from 'react';
|
|
import { EdgeProps, getBezierPath } from '@react-flow/core';
|
|
|
|
const CustomEdge: FC<EdgeProps> = ({
|
|
id,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
data,
|
|
}) => {
|
|
const edgePath = getBezierPath({
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition,
|
|
targetX,
|
|
targetY,
|
|
targetPosition,
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<path id={id} className='react-flow__edge-path' d={edgePath} />
|
|
<text>
|
|
<textPath
|
|
href={`#${id}`}
|
|
style={{ fontSize: '12px' }}
|
|
startOffset='50%'
|
|
textAnchor='middle'
|
|
>
|
|
{data.text}
|
|
</textPath>
|
|
</text>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CustomEdge;
|