mirror of
https://github.com/langgenius/dify.git
synced 2026-02-15 23:44:57 +08:00
85cda47c70
Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: jyong <718720800@qq.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com> Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: quicksand <quicksandzn@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Hanqing Zhao <sherry9277@gmail.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Harry <xh001x@hotmail.com>
102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
import {
|
|
memo,
|
|
useMemo,
|
|
} from 'react'
|
|
import type { EdgeProps } from 'reactflow'
|
|
import {
|
|
BaseEdge,
|
|
Position,
|
|
getBezierPath,
|
|
} from 'reactflow'
|
|
import { NodeRunningStatus } from '@/app/components/workflow/types'
|
|
import { getEdgeColor } from '@/app/components/workflow/utils'
|
|
import CustomEdgeLinearGradientRender from '@/app/components/workflow/custom-edge-linear-gradient-render'
|
|
import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
|
|
|
|
const CustomEdge = ({
|
|
id,
|
|
data,
|
|
sourceHandleId,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
selected,
|
|
}: EdgeProps) => {
|
|
const [
|
|
edgePath,
|
|
] = getBezierPath({
|
|
sourceX: sourceX - 8,
|
|
sourceY,
|
|
sourcePosition: Position.Right,
|
|
targetX: targetX + 8,
|
|
targetY,
|
|
targetPosition: Position.Left,
|
|
curvature: 0.16,
|
|
})
|
|
const {
|
|
_sourceRunningStatus,
|
|
_targetRunningStatus,
|
|
} = data
|
|
|
|
const linearGradientId = useMemo(() => {
|
|
if (
|
|
(
|
|
_sourceRunningStatus === NodeRunningStatus.Succeeded
|
|
|| _sourceRunningStatus === NodeRunningStatus.Failed
|
|
|| _sourceRunningStatus === NodeRunningStatus.Exception
|
|
) && (
|
|
_targetRunningStatus === NodeRunningStatus.Succeeded
|
|
|| _targetRunningStatus === NodeRunningStatus.Failed
|
|
|| _targetRunningStatus === NodeRunningStatus.Exception
|
|
|| _targetRunningStatus === NodeRunningStatus.Running
|
|
)
|
|
)
|
|
return id
|
|
}, [_sourceRunningStatus, _targetRunningStatus, id])
|
|
|
|
const stroke = useMemo(() => {
|
|
if (selected)
|
|
return getEdgeColor(NodeRunningStatus.Running)
|
|
|
|
if (linearGradientId)
|
|
return `url(#${linearGradientId})`
|
|
|
|
if (data?._connectedNodeIsHovering)
|
|
return getEdgeColor(NodeRunningStatus.Running, sourceHandleId === ErrorHandleTypeEnum.failBranch)
|
|
|
|
return getEdgeColor()
|
|
}, [data._connectedNodeIsHovering, linearGradientId, selected, sourceHandleId])
|
|
|
|
return (
|
|
<>
|
|
{
|
|
linearGradientId && (
|
|
<CustomEdgeLinearGradientRender
|
|
id={linearGradientId}
|
|
startColor={getEdgeColor(_sourceRunningStatus)}
|
|
stopColor={getEdgeColor(_targetRunningStatus)}
|
|
position={{
|
|
x1: sourceX,
|
|
y1: sourceY,
|
|
x2: targetX,
|
|
y2: targetY,
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
<BaseEdge
|
|
id={id}
|
|
path={edgePath}
|
|
style={{
|
|
stroke,
|
|
strokeWidth: 2,
|
|
opacity: data._waitingRun ? 0.7 : 1,
|
|
}}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default memo(CustomEdge)
|