diff --git a/src/components/graph/AnimatedEdge.tsx b/src/components/graph/AnimatedEdge.tsx index 5b7272b..e16ef14 100644 --- a/src/components/graph/AnimatedEdge.tsx +++ b/src/components/graph/AnimatedEdge.tsx @@ -1,13 +1,20 @@ -import React from 'react' +import React, { useContext, useMemo } from 'react' import { BaseEdge, getBezierPath, type EdgeProps, } from '@xyflow/react' +import FlowContext from '../../lib/flowContext' const EDGE_STROKE_WIDTH = 2 const DOT_MARKER_R = 1.5 +function getEdgeLabelByTargetType(targetType: string | undefined): string | undefined { + if (targetType === 'render') return 'render' + if (targetType === 'config') return 'add input' + return undefined +} + export function AnimatedEdge({ id, sourceX, @@ -17,17 +24,20 @@ export function AnimatedEdge({ sourcePosition, targetPosition, style, - label, - labelStyle, - labelShowBg, - labelBgStyle, - labelBgPadding, - labelBgBorderRadius, - labelX, - labelY, + label: labelProp, interactionWidth, + target, }: EdgeProps) { - const [edgePath] = getBezierPath({ + const ctx = useContext(FlowContext) + const nodes = ctx?.nodes ?? [] + const targetNode = useMemo(() => nodes.find((n: any) => n.id === target), [nodes, target]) + const derivedLabel = useMemo( + () => getEdgeLabelByTargetType(targetNode?.type), + [targetNode?.type] + ) + const label = labelProp ?? derivedLabel + + const [edgePath, edgeLabelX, edgeLabelY] = getBezierPath({ sourceX, sourceY, targetX, @@ -84,16 +94,29 @@ export function AnimatedEdge({ ...style, }} className="animated-edge-path" - label={label} - labelStyle={labelStyle} - labelShowBg={labelShowBg} - labelBgStyle={labelBgStyle} - labelBgPadding={labelBgPadding} - labelBgBorderRadius={labelBgBorderRadius} - labelX={labelX} - labelY={labelY} interactionWidth={interactionWidth} /> + {label != null && ( + + + + {label} + + + )} ) }