在xyflow中实现节点及其子节点的联动删除

在xyflow项目中，开发者经常需要处理节点之间的层级关系。当删除父节点时，往往需要同时删除其直接子节点以保持数据结构的完整性。本文将介绍如何优雅地实现这一功能。

问题背景

在xyflow的流程图中，我们经常会遇到节点之间存在严格的层级关系。例如：

• 类型1节点(Type1)的子节点必须是类型2节点(Type2)
• 类型2节点的子节点又必须是类型1节点

这种交替层级关系要求我们在删除一个类型1节点时，必须同时删除其直接下属的所有类型2节点，以维持整个流程图的逻辑一致性。

解决方案演进

初始方案的问题

最初开发者可能会尝试使用onNodesDelete回调函数来实现这一功能。基本思路是：

1. 获取被删除节点的所有子节点
2. 调用deleteElements删除这些子节点
3. 重新连接剩余的边

然而这种方法会导致递归删除问题，因为删除子节点又会触发onNodesDelete回调，最终会删除整个子树而非仅直接子节点。

改进方案：使用onBeforeDelete

xyflow提供了更合适的onBeforeDelete处理器，它允许我们在节点实际删除前进行预处理。这个处理器有以下优势：

1. 可以一次性收集所有需要删除的节点(父节点及其直接子节点)
2. 避免了递归删除的问题
3. 可以在删除前完成所有必要的边连接调整

实现细节

以下是实现这一功能的推荐方式：

const onBeforeDelete = useCallback((nodesToDelete) => {
  // 收集所有直接子节点
  const childrenToDelete = nodesToDelete.flatMap(node => 
    nodes.filter(n => node.data?.children?.includes(n.id))
  );
  
  // 合并要删除的所有节点
  const allNodesToDelete = [...nodesToDelete, ...childrenToDelete];
  
  // 处理边连接
  const newEdges = nodesToDelete.reduce((acc, node) => {
    const incomers = getIncomers(node, nodes, edges);
    const outgoers = getOutgoers(node, nodes, edges);
    const connectedEdges = getConnectedEdges([node], edges);

    const remainingEdges = acc.filter(edge => !connectedEdges.includes(edge));
    
    const createdEdges = incomers.flatMap(({ id: source }) =>
      outgoers.map(({ id: target }) => ({ 
        id: `${source}->${target}`, 
        source, 
        target 
      }))
    );

    return [...remainingEdges, ...createdEdges];
  }, edges);

  return { nodes: allNodesToDelete, edges: newEdges };
}, [nodes, edges]);

关键点说明

1. 扁平化处理：使用flatMap一次性收集所有需要删除的子节点
2. 边处理逻辑：
   • 移除与被删除节点相关的所有边
   • 重新连接被删除节点的上游和下游节点
3. 性能考虑：所有操作在单个回调中完成，避免多次触发删除操作

最佳实践建议

1. 对于复杂的层级关系，建议在节点数据中明确维护父子关系
2. 考虑添加视觉反馈，让用户知道删除操作会同时移除子节点
3. 对于大型图表，可以先进行验证确保不会意外删除过多节点

通过这种方式，开发者可以确保xyflow图中的节点删除操作既符合业务逻辑，又能保持良好的用户体验。