React Flow Render点击Edge添加中间节点的实现咨询

我使用react-flow-render包，希望点击连线（Edge）后在两个节点之间添加一个新节点。添加新节点需要获取sourceHandle、targetHandle、source、target参数。注意：我的Node支持多个Handle。以下是自定义节点与连线代码：

customNode.tsx #

import { CSSProperties, FC, Fragment, memo, useMemo } from 'react'
import { Handle, NodeProps, Position } from 'react-flow-renderer'

interface CustomNodeProps {
    label: string
    description?: string
    target: number
    source: number
    icon: string
    style: CSSProperties | undefined
    className?: string
}

const CustomNode: FC<NodeProps<CustomNodeProps>> = ({ isConnectable, data, id, selected }) => {
    const targetHandles = useMemo(
        () =>
            !!data.target &&
            Array(data.target)
                .fill(0)
                .map((_, i) => {
                    const handleId = `target-handle-${i + 1}`
                    return (
                        <Fragment key={handleId}>
                            <Handle id={handleId} isConnectable={isConnectable} position={Position.Top} type='target' />
                        </Fragment>
                    )
                }),
        [],
    )

    const sourceHandles = useMemo(
        () =>
            !!data.source &&
            Array(data.source)
                .fill(0)
                .map((_, i) => {
                    const handleId = `source-handle-${i + 1}`
                    return (
                        <Fragment key={handleId}>
                            <Handle id={handleId} isConnectable={isConnectable} position={Position.Bottom} type='source' />
                        </Fragment>
                    )
                }),
        [],
    )

    return (
        <>
            <div>{targetHandles}</div>
            <div
                className={`react-flow__node-input ${selected ? 'selected' : ''} ${data?.className ? data.className : ''}`}
                style={data.style}
            >
                <div className='toolbar'>
                    <button className='toolbar-btn toolbar-btn-danger'>-</button>
                </div>
                {data.label}
                {data.description && <span className='react-flow__node-description'>{data.description}</span>}
            </div>
            <div>{sourceHandles}</div>
        </>
    )
}

export default memo(CustomNode)

customEdge.tsx #

import { EdgeProps, getEdgeCenter, getSmoothStepPath } from 'react-flow-renderer'

const foreignObjectSize = 40

const Custom = ({
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    style = {},
    markerEnd,
}: EdgeProps) => {
    const edgePath = getSmoothStepPath({
        sourceX,
        sourceY,
        sourcePosition,
        targetX,
        targetY,
        targetPosition,
    })

    const [edgeCenterX, edgeCenterY] = getEdgeCenter({
        sourceX,
        sourceY,
        targetX,
        targetY,
    })

    return (
        <>
            <path id={id} style={style} className='react-flow__edge-path' d={edgePath} markerEnd={markerEnd} />
            <foreignObject
                width={foreignObjectSize}
                height={foreignObjectSize}
                x={edgeCenterX - foreignObjectSize / 2}
                y={edgeCenterY - foreignObjectSize / 2 + 10}
                requiredExtensions='http://www.w3.org/1999/xhtml'
            >
                <div className='wrapper'>
                    <button className='edge-btn edge-btn-danger'>×</button>
                    <button className='edge-btn edge-btn-success'>+</button>
                </div>
            </foreignObject>
        </>
    )
}

export default Custom

内容的提问来源于stack exchange，提问作者Alikhani