React-flow-renderer免费版：组节点添加、拖拽入子节点及位置异常问题

核心结论 #

React Flow免费版完全支持你需要的所有功能：点击添加组节点、组节点调整大小、拖拽节点入组，无需付费版权限。

问题根源：拖拽入组的坐标转换错误 #

你遇到的位置偏移问题，本质是子节点的位置是相对于父组左上角的相对坐标，而非画布绝对坐标。直接用拖拽结束时的画布坐标设置子节点位置，就会导致偏移。

完整解决方案 #

1. 点击按钮添加可调整大小的组节点 #

给组节点设置type: 'group'和resizable: true，同时监听resize事件更新组的尺寸：

// 添加组节点的函数
const addGroup = () => {
  const newGroup = {
    id: `group-${Date.now()}`,
    type: 'group',
    position: { x: 100, y: 100 },
    data: { label: '子流程组' },
    style: { backgroundColor: '#f0f0f0', border: '2px solid #ddd' },
    resizable: true // 开启调整大小
  };
  setNodes(prev => [...prev, newGroup]);
};

// 监听组节点的resize事件，更新尺寸
const onResize = (event, node) => {
  setNodes(prevNodes =>
    prevNodes.map(n =>
      n.id === node.id ? { ...n, width: node.width, height: node.height } : n
    )
  );
};

2. 修复拖拽节点入组的位置偏移问题 #

修改你的onDragEnd函数，添加坐标转换逻辑，将画布绝对坐标转为组内相对坐标：

const onDragEnd = (event, node) => {
  // 筛选出所有组节点
  const groups = nodes.filter(n => n.type === 'group');
  // 判断当前节点是否被拖入某个组内
  const targetGroup = groups.find(group => {
    // 构建节点和组的矩形边界
    const nodeRect = {
      x: node.position.x,
      y: node.position.y,
      width: node.width || 150, // 节点默认宽度，可根据你的节点类型调整
      height: node.height || 80 // 节点默认高度
    };
    const groupRect = {
      x: group.position.x,
      y: group.position.y,
      width: group.width || 300,
      height: group.height || 200
    };

    // 判断节点是否与组矩形重叠（可根据需求调整判断逻辑，比如要求节点完全在组内）
    return (
      nodeRect.x < groupRect.x + groupRect.width &&
      nodeRect.x + nodeRect.width > groupRect.x &&
      nodeRect.y < groupRect.y + groupRect.height &&
      nodeRect.y + nodeRect.height > groupRect.y
    );
  });

  if (targetGroup) {
    // 计算节点相对于组左上角的位置
    const relativeX = node.position.x - targetGroup.position.x;
    const relativeY = node.position.y - targetGroup.position.y;

    // 更新节点：设置父组ID + 相对位置
    setNodes(prevNodes =>
      prevNodes.map(n =>
        n.id === node.id
          ? {
              ...n,
              parentNode: targetGroup.id,
              position: { x: relativeX, y: relativeY }
            }
          : n
      )
    );
  } else {
    // 如果拖出组，移除父组关联
    setNodes(prevNodes =>
      prevNodes.map(n =>
        n.id === node.id ? { ...n, parentNode: null } : n
      )
    );
  }
};

3. React Flow组件基础配置 #

确保你的React Flow组件开启了节点拖拽权限：

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onDragEnd={onDragEnd}
  onResize={onResize}
  nodesDraggable={true} // 允许节点拖拽
  fitView
/>

关键注意事项 #

• 组节点的width和height必须实时更新：通过onResize事件保存调整后的尺寸，否则坐标计算会出错。
• 子节点的position永远是相对父组的：不要直接设置画布绝对坐标，必须通过父组的位置转换得到相对坐标。
• 可自定义入组判断逻辑：比如要求节点完全在组内才关联父组，只需调整targetGroup判断里的矩形重叠条件即可。

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