52 lines
1003 B
TypeScript
52 lines
1003 B
TypeScript
'use client'
|
|
|
|
import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/react'
|
|
|
|
export default function AnimatedPipeEdge({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
data,
|
|
style,
|
|
}: EdgeProps) {
|
|
const [edgePath] = getBezierPath({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
})
|
|
|
|
const flowRate = (data as any)?.flowRate ?? 3
|
|
const pipeWidth = Math.max(2, Math.min(12, flowRate * 2))
|
|
|
|
return (
|
|
<>
|
|
{/* Outer wall */}
|
|
<path
|
|
d={edgePath}
|
|
fill="none"
|
|
stroke="#2dd4bf"
|
|
strokeWidth={pipeWidth + 4}
|
|
strokeOpacity={0.15}
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Inner flow with animation */}
|
|
<path
|
|
d={edgePath}
|
|
fill="none"
|
|
stroke="#2dd4bf"
|
|
strokeWidth={pipeWidth}
|
|
strokeOpacity={0.5}
|
|
strokeLinecap="round"
|
|
className="animate-pipe-flow"
|
|
style={style}
|
|
/>
|
|
</>
|
|
)
|
|
}
|