add labels

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 && (
+        <g transform={`translate(${edgeLabelX}, ${edgeLabelY})`} className="nodrag nopan">
+          <rect
+            x={-32}
+            y={-9}
+            width={64}
+            height={18}
+            rx={4}
+            ry={4}
+            className="fill-background stroke-border"
+            strokeWidth={1}
+          />
+          <text
+            textAnchor="middle"
+            dominantBaseline="middle"
+            className="fill-foreground text-[10px] font-medium"
+          >
+            {label}
+          </text>
+        </g>
+      )}
     </>
   )
 }