mirror of https://github.com/langgenius/dify.git
67 lines
1.3 KiB
TypeScript
67 lines
1.3 KiB
TypeScript
import { memo } from 'react'
|
|
import type { EdgeProps } from 'reactflow'
|
|
import {
|
|
BaseEdge,
|
|
EdgeLabelRenderer,
|
|
Position,
|
|
getSimpleBezierPath,
|
|
} from 'reactflow'
|
|
import BlockSelector from './block-selector'
|
|
|
|
const CustomEdge = ({
|
|
id,
|
|
data,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
selected,
|
|
}: EdgeProps) => {
|
|
const [
|
|
edgePath,
|
|
labelX,
|
|
labelY,
|
|
] = getSimpleBezierPath({
|
|
sourceX: sourceX - 8,
|
|
sourceY,
|
|
sourcePosition: Position.Right,
|
|
targetX: targetX + 8,
|
|
targetY,
|
|
targetPosition: Position.Left,
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<BaseEdge
|
|
id={id}
|
|
path={edgePath}
|
|
style={{
|
|
stroke: (selected || data?._connectedNodeIsHovering) ? '#2970FF' : '#D0D5DD',
|
|
strokeWidth: 2,
|
|
}}
|
|
/>
|
|
<EdgeLabelRenderer>
|
|
{
|
|
data?._hovering && (
|
|
<div
|
|
className='nopan nodrag'
|
|
style={{
|
|
position: 'absolute',
|
|
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
|
|
pointerEvents: 'all',
|
|
}}
|
|
>
|
|
<BlockSelector
|
|
asChild
|
|
onSelect={() => {}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
</EdgeLabelRenderer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default memo(CustomEdge)
|