0

In React Flow diagrams how to Make Paths lines moveable and selectable that connects nodes just like draw.io diagrams where we can change position of path lines and they are selectable and moveable below is my code of Path line. Any guidance appreciated thanks.

`

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} />
   </>
 )
}

` enter image description here

  • 2
    You can already select edges, and you can already drag edges at specific handle points to reconnect them ([example](https://reactflow.dev/docs/examples/edges/updatable-edge/)). If you're asking how to move edges entirely independently of nodes, like their own shapes, you probably can't. I would also ask in their Discord rather than Stackoverflow. – Andy Ray Jul 09 '23 at 18:20
  • It just highlight the edge and I can't able to move or change its position just like draw.io – Rizwan Saleem Jul 09 '23 at 18:22

0 Answers0