72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
BaseEdge,
|
|
EdgeLabelRenderer,
|
|
EdgeProps,
|
|
getSmoothStepPath,
|
|
} from 'reactflow'
|
|
import type { Condition } from '@/types/flowchart'
|
|
|
|
type ConditionalEdgeData = {
|
|
condition?: Condition
|
|
}
|
|
|
|
export default function ConditionalEdge({
|
|
id,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
data,
|
|
markerEnd,
|
|
selected,
|
|
}: EdgeProps<ConditionalEdgeData>) {
|
|
const [edgePath, labelX, labelY] = getSmoothStepPath({
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition,
|
|
targetX,
|
|
targetY,
|
|
targetPosition,
|
|
})
|
|
|
|
const hasCondition = !!data?.condition
|
|
|
|
// Format condition as readable label
|
|
const conditionLabel = hasCondition
|
|
? `${data.condition!.variableName} ${data.condition!.operator} ${data.condition!.value}`
|
|
: null
|
|
|
|
return (
|
|
<>
|
|
<BaseEdge
|
|
id={id}
|
|
path={edgePath}
|
|
markerEnd={markerEnd}
|
|
style={{
|
|
strokeDasharray: hasCondition ? '5 5' : undefined,
|
|
stroke: selected ? '#3b82f6' : hasCondition ? '#f59e0b' : '#64748b',
|
|
strokeWidth: selected ? 2 : 1.5,
|
|
}}
|
|
/>
|
|
{conditionLabel && (
|
|
<EdgeLabelRenderer>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
|
|
pointerEvents: 'all',
|
|
}}
|
|
className="rounded border border-amber-300 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-800 dark:border-amber-600 dark:bg-amber-900 dark:text-amber-200"
|
|
>
|
|
{conditionLabel}
|
|
</div>
|
|
</EdgeLabelRenderer>
|
|
)}
|
|
</>
|
|
)
|
|
}
|