Files
xyflow/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx
2022-08-09 18:55:32 +02:00

20 lines
546 B
TypeScript

import React, { FC } from 'react';
import { ConnectionLineComponentProps } from '@react-flow/bundle';
const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, toY }) => {
return (
<g>
<path
fill="none"
stroke="#222"
strokeWidth={1.5}
className="animated"
d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
/>
<circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
</g>
);
};
export default ConnectionLine;