LogicFlow 邻近连接功能详解与实战指南

前言

LogicFlow 是一款功能强大的流程图编辑框架，提供了丰富的扩展功能。其中邻近连接(Proximity Connect)是一个非常实用的功能，它允许用户在拖动节点时自动连接到附近的节点，大大提升了绘制流程图的效率。本文将深入解析邻近连接功能的实现原理、使用方法以及配置选项。

邻近连接功能概述

邻近连接功能主要解决以下问题：

• 手动连接节点时需要精确点击锚点，操作繁琐
• 在复杂流程图中寻找正确的连接点困难
• 提高流程图绘制的效率和准确性

该功能会在用户拖动节点时，自动检测周围一定范围内的其他节点，并建立连接关系。

功能实现解析

1. 初始化配置

首先需要引入必要的依赖和初始化配置：

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

const config: Partial<LogicFlow.Options> = {
  isSilentMode: false,
  stopScrollGraph: true,
  stopZoomGraph: true,
  // 样式配置...
}

配置项说明：

• isSilentMode: 是否静默模式
• stopScrollGraph: 禁止画布滚动
• stopZoomGraph: 禁止画布缩放
• style: 定义各种节点类型的默认样式

2. 插件注册与初始化

在初始化 LogicFlow 实例时，需要注册邻近连接插件：

const lf = new LogicFlow({
  ...config,
  container: containerRef.current as HTMLElement,
  grid: { size: 10 },
  plugins: [ProximityConnect],
  pluginsOptions: {
    proximityConnect: {
      enable: true,        // 是否启用
      distance: 100,       // 连接阈值距离
      reverseDirection: false // 连接方向
    }
  }
})

3. 数据初始化

示例中预定义了几种常见的节点类型：

const data = {
  nodes: [
    { type: 'rect', text: '矩形' },
    { type: 'circle', text: '圆形' },
    { type: 'ellipse', text: '椭圆' },
    { type: 'polygon', text: '多边形' },
    { type: 'diamond', text: '菱形' },
    { type: 'text', text: '纯文本节点' },
    { type: 'html', text: 'html节点' }
  ]
}

功能控制面板实现

示例中提供了完整的控制面板，可以动态调整邻近连接的行为：

1. 连接阈值设置

<Input
  value={distance}
  onInput={(e) => setDistance(+e.target.value)}
/>
<Button onClick={() => {
  lfRef.current.extension.proximityConnect.setThresholdDistance(distance)
}}>
  Submit
</Button>

• distance: 设置自动连接的触发距离(像素)
• 值越大，节点在更远处就会被连接
• 值越小，需要更精确地靠近才能连接

2. 连接方向控制

<Switch
  value={reverse}
  checkedChildren="最近节点 → 拖拽节点"
  unCheckedChildren="拖拽节点 → 最近节点"
  onChange={(checked) => {
    setReverse(checked)
    lfRef.current.extension.proximityConnect.setReverseDirection(checked)
  }}
/>

• reverseDirection: 控制连接方向
• false(默认): 从拖拽节点指向最近节点
• true: 从最近节点指向拖拽节点

3. 功能启用/禁用

<Switch
  value={enable}
  checkedChildren="启用"
  unCheckedChildren="禁用"
  onChange={(checked) => {
    setEnable(checked)
    lfRef.current.extension.proximityConnect.setEnable(checked)
  }}
/>

• 可以随时启用或禁用邻近连接功能
• 禁用后恢复常规的连接方式

实际应用建议

1. 阈值设置:

   • 简单流程图: 50-100px
   • 复杂流程图: 30-50px
   • 高精度需求: 10-20px

2. 连接方向选择:

   • 数据流: 从数据源指向处理节点
   • 控制流: 从控制节点指向执行节点
   • 根据业务逻辑选择合适的连接方向

3. 性能考虑:

   • 节点数量多时，适当减小阈值距离
   • 可以结合其他交互方式使用，如双击连接等

总结

LogicFlow 的邻近连接功能通过智能检测节点距离，简化了流程图绘制过程。本文详细介绍了该功能的配置方法、控制参数以及实际应用建议。通过合理设置阈值距离和连接方向，可以显著提升用户体验和绘图效率。开发者可以根据具体业务需求，灵活调整这些参数以达到最佳效果。