dify/web/app/components/workflow/custom-connection-line.tsx
takatost 7753ba2d37
FEAT: NEW WORKFLOW ENGINE (#3160)
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>
2024-04-08 18:51:46 +08:00

40 lines
758 B
TypeScript

import { memo } from 'react'
import type { ConnectionLineComponentProps } from 'reactflow'
import {
Position,
getSimpleBezierPath,
} from 'reactflow'
const CustomConnectionLine = ({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) => {
const [
edgePath,
] = getSimpleBezierPath({
sourceX: fromX,
sourceY: fromY,
sourcePosition: Position.Right,
targetX: toX,
targetY: toY,
targetPosition: Position.Left,
})
return (
<g>
<path
fill="none"
stroke='#D0D5DD'
strokeWidth={2}
d={edgePath}
/>
<rect
x={toX}
y={toY - 4}
width={2}
height={8}
fill='#2970FF'
/>
</g>
)
}
export default memo(CustomConnectionLine)