React Flow如何实现边曲线的动态拖拽调整？

问题场景 #

使用React Flow开发React应用组件时，需要实现边的曲线可通过拖拽标记动态调整的功能。查阅官方文档及搜索后未找到原生支持，尝试基于Floating Edge自定义边，并给EdgeLabelRenderer添加拖拽事件，但无法获取/设置边的中心控制点来调整曲线形态。

解决方案 #

核心是给自定义边添加可拖拽的控制点，通过维护边的自定义数据存储控制点偏移量，以此计算贝塞尔曲线的路径，实现动态调整。

1. 自定义可拖拽曲线边组件 #

基于FloatingEdge扩展，添加拖拽控制点并处理偏移量更新：

import React, { useState, useRef } from 'react';
import { FloatingEdge, getBezierPath } from '@xyflow/react';

const DraggableCurveEdge = ({ id, sourceX, sourceY, targetX, targetY, data, updateEdge }) => {
  // 初始化控制点偏移量，优先使用边data中存储的值
  const [offset, setOffset] = useState(data.offset || { x: 0, y: -50 });
  const dragHandleRef = useRef(null);

  // 计算贝塞尔曲线的中心控制点
  const midX = (sourceX + targetX) / 2;
  const midY = (sourceY + targetY) / 2;
  const controlX = midX + offset.x;
  const controlY = midY + offset.y;

  // 生成曲线路径
  const path = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    centerX: controlX,
    centerY: controlY,
  });

  // 拖拽开始标记
  const handleDragStart = (e) => {
    e.dataTransfer.setData('edgeId', id);
    e.dataTransfer.effectAllowed = 'move';
  };

  // 拖拽结束更新偏移量与边数据
  const handleDragEnd = (e) => {
    // 计算新的偏移量（基于边中点的相对位移）
    const newOffset = {
      x: e.clientX - midX,
      y: e.clientY - midY,
    };
    setOffset(newOffset);
    // 更新边的自定义数据，持久化偏移状态
    updateEdge({
      id,
      data: { ...data, offset: newOffset },
    });
  };

  return (
    <>
      {/* 渲染曲线边 */}
      <FloatingEdge path={path} />
      {/* 可拖拽的控制点 */}
      <circle
        ref={dragHandleRef}
        cx={controlX}
        cy={controlY}
        r={8}
        fill="#ffffff"
        stroke="#333333"
        strokeWidth={2}
        style={{ cursor: 'move', pointerEvents: 'all' }}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
        draggable
      />
    </>
  );
};

export default DraggableCurveEdge;

2. 在React Flow中注册并使用自定义边 #

在主组件中配置edgeTypes，将自定义边纳入可用类型：

import React from 'react';
import ReactFlow, { Background, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import DraggableCurveEdge from './DraggableCurveEdge';

const initialNodes = [
  { id: '1', position: { x: 150, y: 150 }, data: { label: '节点1' } },
  { id: '2', position: { x: 550, y: 150 }, data: { label: '节点2' } },
];

const initialEdges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'draggable-curve',
    data: { offset: { x: 0, y: -80 } }, // 初始偏移值，控制初始曲线形态
  },
];

// 注册自定义边类型
const edgeTypes = {
  'draggable-curve': DraggableCurveEdge,
};

const FlowContainer = () => {
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <ReactFlow
        nodes={initialNodes}
        edges={initialEdges}
        edgeTypes={edgeTypes}
        fitView
      >
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
};

export default FlowContainer;

关键细节说明 #

• 控制点逻辑：以边的起点和终点的中点为基准，通过偏移量offset计算贝塞尔曲线的控制点，保证拖拽调整的直观性。
• 状态持久化：将偏移量存储在边的data字段中，通过updateEdge方法更新，确保组件重新渲染（如节点移动）时保留调整后的曲线形态。
• 交互优化：给控制点设置pointerEvents: 'all'，确保拖拽事件能被正确触发，避免被边的路径遮挡。

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