45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import { FC } from 'react';
|
|
import { EdgeProps, getBezierPath, getMarkerEnd, EdgeText, getEdgeCenter } from 'react-flow-renderer';
|
|
|
|
const CustomEdge: FC<EdgeProps> = ({
|
|
id,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
data,
|
|
arrowHeadType,
|
|
markerEndId,
|
|
}) => {
|
|
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
|
|
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
|
|
const [centerX, centerY] = getEdgeCenter({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
|
|
<EdgeText
|
|
x={centerX}
|
|
y={centerY}
|
|
label={data.text}
|
|
labelStyle={{ fill: 'white' }}
|
|
labelShowBg
|
|
labelBgStyle={{ fill: 'red' }}
|
|
labelBgPadding={[2, 4]}
|
|
labelBgBorderRadius={2}
|
|
onClick={() => console.log(data)}
|
|
/>
|
|
;
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CustomEdge;
|