LogicFlow 扩展教程：实现右键菜单功能

前言

LogicFlow 是一个功能强大的流程图编辑框架，它提供了丰富的扩展功能。本文将重点介绍如何使用 LogicFlow 的 Menu 扩展来实现右键菜单功能，这是提升用户体验的重要交互方式之一。

准备工作

在开始之前，我们需要了解几个关键概念：

1. LogicFlow 核心：流程图编辑的核心功能
2. Menu 扩展：提供右键菜单功能的插件
3. 节点类型：包括矩形、圆形、椭圆、多边形、菱形等基础图形

基础配置

首先，我们需要设置 LogicFlow 的基本配置：

const config: Partial<LogicFlow.Options> = {
  isSilentMode: false,  // 非静默模式，允许交互
  stopScrollGraph: true, // 禁止画布滚动
  stopZoomGraph: true,  // 禁止画布缩放
  style: {  // 定义各种节点的默认样式
    rect: { rx: 5, ry: 5, strokeWidth: 2 },
    circle: { fill: '#f5f5f5', stroke: '#666' },
    // 其他节点样式...
  }
}

这些配置确保了我们的流程图具有良好的交互性和一致的视觉风格。

初始化流程图

在 React 组件中初始化 LogicFlow 实例：

useEffect(() => {
  if (!lfRef.current) {
    const lf = new LogicFlow({
      ...config,
      container: containerRef.current as HTMLElement,
      grid: { size: 10 },  // 显示网格背景
      plugins: [Menu],  // 注册Menu插件
    })
    // 其他初始化代码...
    lfRef.current = lf
  }
}, [])

实现右键菜单功能

Menu 扩展提供了三种类型的菜单配置：

1. 节点右键菜单

lf.addMenuConfig({
  nodeMenu: [
    {
      text: '分享',
      callback() { alert('分享成功！') }
    },
    {
      text: '属性',
      callback(node: NodeData) {
        alert(`
          节点id：${node.id}
          节点类型：${node.type}
          节点坐标：(x: ${node.x}, y: ${node.y})
        `)
      }
    }
  ],
  // 其他菜单配置...
})

2. 边右键菜单

edgeMenu: [
  {
    text: '属性',
    callback(edge: EdgeData) {
      const { id, type, startPoint, endPoint, sourceNodeId, targetNodeId } = edge
      alert(`
        边id：${id}
        边类型：${type}
        边起点坐标：(startPoint: [${startPoint.x}, ${startPoint.y}])
        边终点坐标：(endPoint: [${endPoint.x}, ${endPoint.y}])
        源节点id：${sourceNodeId}
        目标节点id：${targetNodeId}
      `)
    }
  }
]

3. 画布空白处右键菜单

graphMenu: [
  {
    text: '分享',
    callback() { alert('分享成功！') }
  },
  {
    text: '添加节点',
    callback(data: LogicFlow.Position) {
      lf.addNode({
        type: 'rect',
        x: data.x,
        y: data.y,
      })
    }
  }
]

实际应用场景

这种右键菜单功能在实际项目中有多种应用场景：

1. 快速操作：用户可以通过右键菜单快速执行常用操作，如分享、查看属性等
2. 上下文相关功能：不同类型的元素（节点、边、画布）可以显示不同的菜单项
3. 扩展功能入口：可以将一些不常用的高级功能放在右键菜单中，保持界面简洁

样式定制

我们可以通过 CSS 来定制菜单的样式：

.viewport {
  width: 100%;
  height: 500px;
}

总结

通过 LogicFlow 的 Menu 扩展，我们可以轻松地为流程图添加右键菜单功能，大大提升了用户体验和操作效率。本文介绍了从基础配置到具体实现的完整流程，开发者可以根据实际需求扩展菜单项和功能。

在实际项目中，还可以进一步优化：

• 添加图标到菜单项
• 实现多级菜单
• 根据业务状态动态显示/隐藏菜单项
• 国际化支持等

希望本文能帮助你快速掌握 LogicFlow 的菜单扩展功能，为你的流程图应用增添更多交互可能性。