LogicFlow节点选择扩展功能详解

概述

LogicFlow是一个强大的流程图编辑框架，其扩展性非常出色。本文将重点介绍LogicFlow中的NodeSelection扩展功能，它允许用户对多个节点进行分组选择和管理，这在处理复杂流程图时非常有用。

NodeSelection核心功能

NodeSelection扩展主要提供以下能力：

1. 多节点分组选择：通过按住Shift键可以选择多个节点
2. 分组管理：将选中的节点作为一个组进行统一操作
3. 分组标识：可以为分组添加标签说明
4. 分组样式定制：自定义分组框的显示样式

代码解析

1. 基础配置

首先我们看配置文件中的关键设置：

const config: Partial<LogicFlow.Options> = {
  isSilentMode: false,
  stopScrollGraph: true,
  stopZoomGraph: true,
  multipleSelectKey: 'shift',
  disabledTools: ['multipleSelect'],
  allowResize: true
}

• multipleSelectKey: 'shift'：设置多选快捷键为Shift键
• disabledTools: ['multipleSelect']：禁用默认的多选工具，使用扩展提供的选择功能
• allowResize: true：允许调整节点大小

2. 样式配置

示例中为不同类型的节点配置了不同的样式：

style: {
  rect: {
    rx: 5,
    ry: 5,
    strokeWidth: 2
  },
  circle: {
    fill: '#f5f5f5',
    stroke: '#666'
  },
  // 其他节点类型样式...
}

这些样式会应用到流程图中对应的节点类型上。

3. 初始化数据

示例中预置了一些节点和一个选择分组：

const data = {
  nodes: [
    // 5个普通矩形节点...
    {
      id: '6',
      type: 'node-selection',
      x: 0,
      y: 0,
      properties: {
        node_selection_ids: ['2', '3'],
        labelText: '方案1',
        strokeColor: 'blue',
        disabledDelete: false
      }
    }
  ]
}

这里创建了一个类型为node-selection的特殊节点，它表示一个选择分组：

• node_selection_ids：包含该分组中的节点ID
• labelText：分组的标签文本
• strokeColor：分组框的颜色
• disabledDelete：是否禁用删除

4. 组件实现

React组件主要完成以下工作：

1. 初始化LogicFlow实例并注册NodeSelection插件
2. 渲染初始数据
3. 提供获取当前图数据的按钮

useEffect(() => {
  if (!lfRef.current) {
    const lf = new LogicFlow({
      ...config,
      container: containerRef.current as HTMLElement,
      grid: {
        size: 10
      },
      plugins: [NodeSelection]
    })
    lf.render(data)
    lfRef.current = lf
  }
}, [])

使用场景

NodeSelection扩展非常适合以下场景：

1. 流程分组管理：将相关的流程节点分组，便于统一操作
2. 方案对比：不同方案可以用不同分组表示
3. 批量操作：对分组内的节点进行批量移动、删除等操作
4. 流程注释：通过分组的标签文本添加说明

高级功能

除了基础的分组选择外，NodeSelection还支持：

1. 自定义分组样式：通过properties可以设置分组框的颜色、文字等
2. 分组锁定：设置disabledDelete可以防止误删重要分组
3. 动态分组：可以通过API动态创建和修改分组
4. 分组事件：可以监听分组的选择、移动等事件

最佳实践

1. 为不同类型的分组使用不同的颜色，便于区分
2. 分组标签文字应简洁明了
3. 重要分组建议设置disabledDelete: true
4. 合理设置分组大小，避免包含过多节点影响操作

总结

LogicFlow的NodeSelection扩展为流程图编辑提供了强大的分组管理能力，使得复杂流程的组织和维护变得更加简单高效。通过合理的配置和使用，可以显著提升流程图的可读性和操作性。