import React , { memo } from 'react' ; import EdgeText from './EdgeText' ; import { getMarkerEnd , getCenter } from './utils' ; import { EdgeProps , Position } from '../../types' ; interface GetBezierPathParams { sourceX : number ; sourceY : number ; sourcePosition ? : Position ; targetX : number ; targetY : number ; targetPosition ? : Position ; centerX ? : number ; centerY ? : number ; } export function getBezierPath ( { sourceX , sourceY , sourcePosition = Position . Bottom , targetX , targetY , targetPosition = Position . Top , centerX , centerY , } ) { const [ _centerX , _centerY ] = getCenter ( { sourceX , sourceY , targetX , targetY } ) ; const leftAndRight = [ Position . Left , Position . Right ] ; const cX = typeof centerX !== 'undefined' ? centerX : _centerX ; const cY = typeof centerY !== 'undefined' ? centerY : _centerY ; let path = `M${ sourceX },${ sourceY } C${ sourceX },${ cY } ${ targetX },${ cY } ${ targetX },${ targetY }` ; if ( leftAndRight . includes ( sourcePosition ) && leftAndRight . includes ( targetPosition ) ) { path = `M${ sourceX },${ sourceY } C${ cX },${ sourceY } ${ cX },${ targetY } ${ targetX },${ targetY }` ; } else if ( leftAndRight . includes ( targetPosition ) ) { path = `M${ sourceX },${ sourceY } Q${ sourceX },${ targetY } ${ targetX },${ targetY }` ; } else if ( leftAndRight . includes ( sourcePosition ) ) { path = `M${ sourceX },${ sourceY } Q${ targetX },${ sourceY } ${ targetX },${ targetY }` ; } return path ; } export default memo ( ( { sourceX , sourceY , targetX , targetY , sourcePosition = Position . Bottom , targetPosition = Position . Top , label , labelStyle , labelShowBg , labelBgStyle , labelBgPadding , labelBgBorderRadius , style , arrowHeadType , markerEndId , } ) => { const [ centerX , centerY ] = getCenter ( { sourceX , sourceY , targetX , targetY , sourcePosition , targetPosition } ) ; const path = getBezierPath ( { sourceX , sourceY , sourcePosition , targetX , targetY , targetPosition , } ) ; const text = label ? ( < EdgeText x = { centerX } y = { centerY } label = { label } labelStyle = { labelStyle } labelShowBg = { labelShowBg } labelBgStyle = { labelBgStyle } labelBgPadding = { labelBgPadding } labelBgBorderRadius = { labelBgBorderRadius } / > ) : null ; const markerEnd = getMarkerEnd ( arrowHeadType , markerEndId ) ; return ( < > < path style = { style } d = { path } className = "react-flow__edge-path" markerEnd = { markerEnd } / > { text } < />); } ) ;