connection.tsx 521 B

12345678910111213141516
  1. import type { ConnectionLineComponent } from '@xyflow/react';
  2. const HALF = 0.5;
  3. export const Connection: ConnectionLineComponent = ({ fromX, fromY, toX, toY }) => (
  4. <g>
  5. <path
  6. className="animated"
  7. d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}
  8. fill="none"
  9. stroke="var(--color-ring)"
  10. strokeWidth={1}
  11. />
  12. <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="var(--color-ring)" strokeWidth={1} />
  13. </g>
  14. );