XYFlow 项目中如何导出分组节点及其子节点的图像

在 XYFlow 项目中，用户经常需要将流程图中的特定部分导出为图像。一个常见的需求是导出分组节点及其包含的所有子节点，而不是整个流程图。本文将详细介绍如何实现这一功能。

问题背景

XYFlow 是一个基于 React 的流程图库，提供了丰富的节点操作功能。默认情况下，使用 html-to-image 库可以导出整个流程图视图。但当用户只需要导出某个分组节点及其子节点时，直接使用默认方法会遇到以下问题：

1. 分组节点在 DOM 结构中并不实际包含其子节点
2. 子节点可能分布在视图的不同位置
3. 直接选择分组节点元素只能获得该节点本身的图像

技术实现方案

1. 使用过滤函数

html-to-image 库提供了 filter 函数，可以用来筛选需要包含在截图中的元素。我们可以利用这个功能：

const options = {
  filter: (node) => {
    // 判断节点是否属于当前分组
    return node.dataset.parentId === currentGroupId || 
           node.dataset.id === currentGroupId;
  }
};

2. 调整视图范围

为了确保子节点都能被包含在图像中，需要动态计算分组节点及其子节点的边界范围：

const calculateGroupBounds = (groupId, nodes) => {
  const groupNode = nodes.find(n => n.id === groupId);
  const childNodes = nodes.filter(n => n.parentNode === groupId);
  
  // 计算包含所有节点的最小矩形区域
  let minX = groupNode.position.x;
  let minY = groupNode.position.y;
  let maxX = groupNode.position.x + groupNode.width;
  let maxY = groupNode.position.y + groupNode.height;
  
  childNodes.forEach(node => {
    minX = Math.min(minX, node.position.x);
    minY = Math.min(minY, node.position.y);
    maxX = Math.max(maxX, node.position.x + node.width);
    maxY = Math.max(maxY, node.position.y + node.height);
  });
  
  return {
    x: minX,
    y: minY,
    width: maxX - minX,
    height: maxY - minY
  };
};

3. 实现导出功能

结合上述方法，完整的导出流程如下：

1. 获取当前分组ID
2. 计算分组及其子节点的边界范围
3. 设置截图选项（过滤器和视图范围）
4. 使用html-to-image生成图像

const exportGroupImage = async (groupId) => {
  const bounds = calculateGroupBounds(groupId, nodes);
  
  const options = {
    filter: (node) => {
      const nodeId = node.dataset?.id;
      return nodes.some(n => 
        n.id === nodeId && 
        (n.id === groupId || n.parentNode === groupId)
      );
    },
    width: bounds.width,
    height: bounds.height,
    style: {
      transform: `translate(-${bounds.x}px, -${bounds.y}px)`,
      width: `${bounds.width}px`,
      height: `${bounds.height}px`
    }
  };
  
  const dataUrl = await toPng(viewportElement, options);
  // 处理生成的图像数据...
};

注意事项

1. 节点层级关系：确保在XYFlow中正确设置了节点的parentNode属性，这是识别子节点的关键。

2. 样式处理：导出的图像可能需要额外的CSS处理，确保所有节点样式正确渲染。

3. 性能考虑：对于包含大量子节点的分组，导出过程可能会较慢，建议添加加载状态提示。

4. 跨浏览器兼容性：不同浏览器对html-to-image的支持可能有所差异，需要进行充分测试。

通过上述方法，开发者可以灵活地导出XYFlow流程图中任意分组节点及其子节点的图像，满足各种业务场景的需求。