reactjs - Bagaimana mencegah persimpangan edge dan node di react-flow?

Saya membutuhkan jenis tepi yang tidak bersinggungan dengan sebuah node. Saya menggunakan pegangan node sumber dan node target secara vertikal sebagai aturan bisnis. Ketika saya menghubungkan pegangan bawah dari satu node yang berada di bawah node lain ke pegangan atas node lain, tepinya bersinggungan dengan kedua node. Hal ini membuat alur kerja sulit untuk dipahami.

Yang saya harapkan adalah tepi tidak boleh berpotongan dengan kedua node. Harus melingkar. Pada saat yang sama, koneksi dengan node lain yang tidak berada langsung di atas node harus berbentuk bezier seperti dalam kode di bawah ini.

Kode edge saya:

import {BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath} from 'reactflow'

import './styles.scss'
import {useDispatch} from 'react-redux'
import {setSelectedWorkflowItem} from '../../../../redux/slices/WorkflowReducer'

function CustomEdges(props) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    style = {},
    markerEnd,
    data,
    selected,
  }: EdgeProps = props
  const dispacth = useDispatch()
  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  })

  const onEdgeClick = (evt, id) => {
    evt.stopPropagation()
    dispacth(setSelectedWorkflowItem({item: props}))
  }
  
  const styleProps = data.isDefault
    ? {...style, strokeWidth: 3}
    : data.selected
    ? {...style, strokeWidth: 2}
    : {...style, strokeWidth: 1.5}

  return (
    <>
      <BaseEdge path={edgePath} markerEnd={markerEnd} style={styleProps} />
      <EdgeLabelRenderer>
        <div
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            fontSize: 12,
            // everything inside EdgeLabelRenderer has no pointer events by default
            // if you have an interactive element, set pointer-events: all
            pointerEvents: 'all',
          }}
          className='nodrag nopan'
        >
          <button
            className={`edgebutton background-workflow ${
              data.selected && 'background-workflow-active'
            }`}
            onClick={(event) => onEdgeClick(event, id)}
          >
            {data?.displayName}
          </button>
        </div>
      </EdgeLabelRenderer>
    </>
  )
}

export default CustomEdges

Anda dapat memeriksa masalah GitHub yang memiliki gambar detail: https://github.com/wbkd/react-flow/issues/3341