LogicFlow 流程图快照功能与性能测试实现详解

概述

本文主要介绍如何在 LogicFlow 流程图中实现快照功能，并通过控制元素数量进行性能测试。LogicFlow 是一个专业的流程图编辑框架，提供了丰富的扩展功能，其中快照功能可以帮助用户将当前流程图导出为图片格式。

核心功能实现

1. 初始化配置

首先我们需要初始化 LogicFlow 实例，并配置相关参数：

const config: Partial<LogicFlow.Options> = {
  isSilentMode: false,
  stopScrollGraph: false,
  stopZoomGraph: false,
  style: {
    rect: {
      rx: 5,
      ry: 5,
      strokeWidth: 2,
    },
    text: {
      color: '#b85450',
      fontSize: 12,
    },
  },
  partial: true,
}

这些配置项控制了流程图的基本行为和样式，包括是否静默模式、是否允许滚动和缩放等。

2. 快照功能实现

LogicFlow 通过 Snapshot 扩展提供快照功能：

LogicFlow.use(Snapshot)

快照功能支持多种导出选项：

const params: ToImageOptions = {
  fileType,       // 文件类型：png/jpeg/webp/gif/svg
  backgroundColor, // 背景颜色
  partial,        // 是否导出局部渲染
  width,          // 自定义宽度
  height,         // 自定义高度
  padding,        // 内边距
  quality,        // 图片质量
}

3. 性能测试实现

通过控制元素数量来测试性能：

// 创建测试数据
const createData = useCallback(() => {
  const nodes: LogicFlow.NodeConfig[] = []
  const edges: LogicFlow.EdgeConfig[] = []

  for (let i = 0; i < elementsNumber; i++) {
    const nodeStartId = `${i * 2 + 1}`
    const nodeEndId = `${i * 2 + 2}`
    const nodeStart: LogicFlow.NodeConfig = {
      id: nodeStartId,
      type: 'rect',
      x: 400 * (i % 10) - 200,
      y: 100 * Math.floor(i / 10) - 500,
      text: `${i}-start`,
    }
    const nodeEnd: LogicFlow.NodeConfig = {
      id: nodeEndId,
      type: 'rect',
      x: 400 * (i % 10),
      y: 100 * Math.floor(i / 10) - 500,
      text: `${i}-end`,
    }
    const edge: LogicFlow.EdgeConfig = {
      id: `e_${i}`,
      type: 'polyline',
      sourceNodeId: nodeStartId,
      targetNodeId: nodeEndId,
    }
    nodes.push(nodeStart)
    nodes.push(nodeEnd)
    edges.push(edge)
  }

  return { nodes, edges }
}, [elementsNumber])

功能详解

1. 快照下载

const downLoad = async () => {
  const params: ToImageOptions = {
    fileType,
    backgroundColor,
    partial,
    width,
    height,
    padding,
    quality,
  }
  await lfRef.current?.getSnapshot(fileName, params)
}

此方法支持自定义文件名、文件类型、背景色等多种参数，可以灵活控制导出的图片格式和质量。

2. 预览功能

提供两种预览方式：

• Blob 预览：

const previewBlob = () => {
  lfRef.current?.getSnapshotBlob(backgroundColor, fileType)
    .then(({ data }) => {
      setBlobData(window.URL.createObjectURL(data))
    })
}

• Base64 预览：

const previewBase64 = () => {
  lfRef.current?.getSnapshotBase64(backgroundColor)
    .then(({ data }) => {
      setBase64Data(data)
    })
}

3. 小地图功能

LogicFlow 提供了 MiniMap 扩展来显示流程图缩略图：

const miniMapOptions: MiniMap.MiniMapOption = {
  isShowHeader: false,
  isShowCloseIcon: true,
  headerTitle: 'MiniMap',
  width: 200,
  height: 120,
}

可以控制小地图的显示/隐藏、位置调整等：

const toggleVisible = () => {
  const miniMap = lfRef.current?.extension.miniMap as MiniMap
  visible ? miniMap.hide() : miniMap.show()
  setVisible(!visible)
}

const updatePosition = (position: string) => {
  const miniMap = lfRef.current?.extension.miniMap as MiniMap
  miniMap.updatePosition(position)
  setPosition(position)
}

性能优化建议

1. 元素数量控制：通过测试发现，当元素数量超过一定阈值时，渲染和快照生成性能会下降。建议在实际应用中合理控制单图画布中的元素数量。

2. 局部渲染：对于大型流程图，可以使用 partial: true 参数只导出当前视口可见部分，减少处理的数据量。

3. 图片质量调整：非必要情况下，可以适当降低图片质量(quality参数)来提高生成速度。

4. 合理使用预览：在正式导出前，可以先使用预览功能查看效果，避免反复导出调整。

总结

本文详细介绍了 LogicFlow 中快照功能的实现方式，包括基本配置、快照生成、预览功能以及性能测试方法。通过控制元素数量，开发者可以评估不同规模流程图下的性能表现，并根据实际需求选择合适的导出参数。这些功能为流程图的分享、存档和打印提供了便利，是 LogicFlow 的重要扩展功能之一。