Files
xyflow/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx
2022-07-25 16:21:40 +02:00

32 lines
607 B
TypeScript

import React, { FC } from 'react';
import { ConnectionLineComponentProps } from '@react-flow/core';
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;