在React Flow中如何使连接节点的路径线像draw.io图一样可移动

Question

在React流程图中，如何使连接节点的路径线可移动和可选择，就像draw.io图一样，我们可以更改路径线的位置，并且它们是可选择和可移动的，下面是我的路径线代码。 任何指导表示感谢。

`

import { getBezierPath, Position, Edge } from 'reactflow'

// type copied from library, they aren't exporting it for some reason
interface GetBezierPathParams {
  sourceX: number
  sourceY: number
  sourcePosition?: Position
  targetX: number
  targetY: number
  targetPosition?: Position
  curvature?: number
}

export default function BendyEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style,
}: Edge & GetBezierPathParams) {
   const midPoint = (targetY - sourceY) / 2 + sourceY
   // values here are hardcoded for the sake of the example, you can calculate them dynamically later on, no time for that now
   const [edgePath] = getBezierPath({
   sourceX,
   sourceY,
   sourcePosition,
   targetX: targetX + 150,
   targetY: midPoint,
   targetPosition,
 })
 const [edgePath2] = getBezierPath({
   sourceX: targetX + 150,
   sourceY: midPoint,
   sourcePosition,
   targetX,
   targetY,
   targetPosition,
 })

 return (
   <>
     <path id={id} style={style} className="react-flow__edge-path" d={edgePath + edgePath2} />
   </>
 )
}

`

Answer 1

最后我找到了解决方案，您可以利用自定义边缘来实现此行为，现在路径线可移动和可选择，连接节点就像draw.io图一样，我们可以更改路径线的位置，并且它们是可选择和可移动的下面是代码。

代码：https://codesandbox.io/p/sandbox/elated-fog-wzj9c4