ReactFlow外部侧边栏拖拽节点无法设置为父节点子节点

问题 #

从外部侧边栏拖拽节点至ReactFlow画布时，无法将新节点设置为已有节点的子节点。参考官方文档的两种碰撞检测方案，均未实现预期效果。

已尝试的实现代码 #

方案1：基于中心点位的碰撞检测 #

const centerX = newNode.position.x + newNode.width / 2;
const centerY = newNode.position.y + newNode.height / 2;

// 查找中心落在其范围内的目标节点
const targetNode = nodes.find(
    (n) =>
        centerX > n.position.x &&
        centerX < n.position.x + n.width! &&
        centerY > n.position.y &&
        centerY < n.position.y + n.height! &&
        n.id !== newNode.id // 排除自身，避免误匹配
);

方案2：使用getIntersectingNodes的相交检测 #

const intersections = getIntersectingNodes(newNode).map((n) => n.id);

nodes.forEach((n) => {
    if (intersections.includes(n.id)) {
        console.log("INTERSECTA")
    } else {
        console.log("NO INTERSECTA")
    }
    return ({
        ...n,
        className: intersections.includes(n.id) ? 'highlight' : '',
    })
})

排查方向与解决思路 #

1. 坐标转换问题：外部拖拽时，newNode的初始位置可能未考虑画布的平移、缩放偏移。需使用ReactFlow的project方法将屏幕坐标转为画布内部相对坐标：

const { project } = useReactFlow();
const canvasPosition = project({ x: event.clientX, y: event.clientY });

2. 节点尺寸未就绪：onDrop触发时新节点可能尚未完成渲染，导致width/height值不准确。可以预先定义节点固定尺寸，或在节点添加后通过useEffect重新检测父子关系。

3. 未正确设置父子属性：即使找到目标父节点，需在创建新节点时指定parentId，并更新节点数组：

if (targetNode) {
  const childNode = { ...newNode, parentId: targetNode.id };
  setNodes(prev => [...prev, childNode]);
} else {
  setNodes(prev => [...prev, newNode]);
}

4. getIntersectingNodes参数缺失：调用该方法时需传入当前画布的transform参数（考虑缩放），确保相交检测准确：

const { transform } = useReactFlow();
const intersections = getIntersectingNodes(newNode, nodes, transform);

内容的提问来源于stack exchange，提问作者Dario Muñoz