LogicFlow小地图(MiniMap)功能实现详解

LogicFlow作为一款优秀的流程图编辑框架，提供了丰富的扩展功能。本文将重点介绍其中的小地图(MiniMap)扩展功能，帮助开发者快速掌握如何在项目中实现流程图导航功能。

小地图功能概述

小地图是流程图编辑器中常见的辅助功能，它能够：

1. 显示整个流程图的缩略图
2. 提供当前视图在整体中的位置指示
3. 允许通过点击快速定位到指定区域

核心实现步骤

1. 引入必要依赖

首先需要引入LogicFlow核心库和小地图扩展：

import LogicFlow from '@logicflow/core'
import { MiniMap } from '@logicflow/extension'

2. 初始化配置

小地图支持多种配置选项：

const miniMapOptions: MiniMap.MiniMapOption = {
  isShowHeader: true,       // 是否显示标题栏
  isShowCloseIcon: true,    // 是否显示关闭按钮
  headerTitle: 'MiniMap',   // 标题文字
  width: 200,              // 小地图宽度
  height: 120,             // 小地图高度
  showEdge: false          // 是否显示连线
}

3. 注册扩展并初始化

在组件挂载时注册小地图扩展并初始化LogicFlow实例：

useEffect(() => {
  LogicFlow.use(MiniMap)
  const lf = new LogicFlow({
    // ...其他配置
    plugins: [Control], // 可以同时使用其他插件
    pluginsOptions: {
      miniMap: miniMapOptions
    }
  })
  lfRef.current = lf
  lf.render(data)
}, [])

功能控制API

小地图提供了丰富的控制方法：

显示/隐藏控制

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

连线显示控制

const toggleShowEdge = () => {
  const miniMap = lfRef.current.extension.miniMap
  miniMap.setShowEdge(!showEdge)
  setShowEdge(!showEdge)
}

位置控制

小地图支持多种预设位置和自定义位置：

// 预设位置
const updatePosition = (position) => {
  miniMap.updatePosition(position) // 'left-top'|'left-bottom'|'right-top'|'right-bottom'
}

// 自定义位置
const updatePositionWithObject1 = () => {
  miniMap.updatePosition({ left: 100, top: 100 })
}

const updatePositionWithObject2 = () => {
  miniMap.updatePosition({ right: 100, bottom: 100 })
}

重置视图

const handleReset = () => {
  miniMap.reset() // 重置主画布的缩放和位移
}

事件监听

可以监听小地图的关闭事件：

lf.on('miniMap:close', () => {
  setVisible(false)
})

实际应用建议

1. 性能优化：当流程图节点较多时(如示例中的200个节点)，建议关闭连线显示以提升性能
2. 用户体验：提供明显的控制按钮，让用户可以方便地开关小地图
3. 响应式设计：根据屏幕尺寸调整小地图大小和位置
4. 自定义样式：可以通过CSS覆盖默认样式，使小地图更符合产品风格

总结

LogicFlow的小地图扩展为大型流程图提供了便捷的导航功能，通过本文的介绍，开发者可以快速掌握其使用方法。在实际项目中，可以根据需求灵活配置，打造更符合业务场景的流程图编辑器。

小地图功能的实现展示了LogicFlow良好的扩展性，开发者也可以参考其实现方式，开发自己的扩展功能。