LogicFlow 自定义圆角折线边实现教程

LogicFlow 是一个流程图编辑框架，提供了丰富的节点和边类型支持。本文将详细介绍如何在 LogicFlow 中实现自定义的圆角折线边（Curved Polyline Edge），这是一种在流程图中常用的连接线类型。

一、自定义边的基本原理

在 LogicFlow 中，自定义边需要继承内置的边类并重写相关方法。圆角折线边是一种特殊的边类型，它由多个线段组成，并且在转折处呈现圆角效果。

二、实现步骤详解

1. 创建自定义边组件

首先需要创建一个自定义边组件，继承自 LogicFlow 的 PolylineEdge 类：

import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'

class CustomCurvedEdge extends PolylineEdge {
  // 自定义边的外观
}

class CustomCurvedEdgeModel extends PolylineEdgeModel {
  // 自定义边的数据模型
}

2. 注册自定义边类型

在组件中使用时，需要先注册自定义边类型：

lf.register(CustomCurvedEdge)
lf.setDefaultEdgeType('customCurvedEdge')

3. 配置流程图容器

创建 LogicFlow 实例时需要配置容器和基本参数：

const lf = new LogicFlow({
  container: containerRef.current as HTMLElement,
  grid: {
    size: 10,  // 网格大小为10px
  },
  isSilentMode: false,
  stopScrollGraph: true,
  stopZoomGraph: true
})

4. 初始化流程图数据

示例中初始化了两个矩形节点和四条自定义边：

lf.render({
  nodes: [
    {
      id: '1',
      type: 'rect',
      x: 150,
      y: 320
    },
    {
      id: '2',
      type: 'rect',
      x: 630,
      y: 320
    }
  ],
  edges: [
    // 四条不同样式的自定义边
  ]
})

三、自定义边的四种样式示例

示例中展示了四种不同样式的圆角折线边：

1. 直线型：两点之间的直线连接
2. 单折线型：带有一个转折点的折线
3. 双折线型：带有两个转折点的折线
4. 复杂折线型：带有多个转折点的复杂折线

每种边都配置了：

• 起点和终点坐标
• 文本内容和位置
• 折线点列表
• 文本位置属性

四、获取流程图数据

示例中还提供了获取当前流程图数据的按钮：

<Button onClick={() => {
  const graphData = lfRef.current?.getGraphRawData()
  console.log('graphData --->>>', graphData)
}}>
  获取当前图数据
</Button>

五、实际应用建议

1. 自定义边样式：可以通过重写 getEdgeStyle 方法来自定义边的颜色、粗细等样式
2. 动态调整折点：可以根据业务需求动态计算 pointsList 来实现智能布线
3. 文本位置优化：通过 textPosition 属性可以灵活控制边文本的显示位置
4. 交互优化：可以添加边的 hover 效果、选中效果等增强用户体验

六、总结

通过本教程，我们学习了如何在 LogicFlow 中实现自定义的圆角折线边。这种边类型非常适合需要展示复杂连接关系的流程图场景。LogicFlow 的扩展机制使得我们可以轻松实现各种自定义需求，为业务流程图提供更加丰富的表现形式。

在实际项目中，可以根据具体需求进一步优化边的显示效果和交互行为，打造更加专业和易用的流程图工具。