Butterfly项目中的Edge（线）组件详解

Butterfly项目中的Edge（线）组件详解

butterfly 🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件) 项目地址: https://gitcode.com/gh_mirrors/butt/butterfly

前言

在可视化图编辑领域，节点之间的连线（Edge）是构建复杂关系图的基础元素之一。Butterfly项目提供了一套强大而灵活的Edge组件系统，支持多种连线类型、自定义样式和丰富的交互功能。本文将深入解析Butterfly中Edge组件的使用方法和特性。

Edge基础概念

Edge在Butterfly中代表连接两个节点的线，它可以有以下两种基本类型：

1. 端点连接（Endpoint）：连接两个节点上的特定锚点
2. 节点连接（Node）：直接连接两个节点

Edge的基本使用

初始化Edge

在Butterfly中，Edge可以通过两种方式创建：

// 方式一：初始化画布时创建
canvas.draw({
  edges: [{
    id: 'edge_1',
    type: 'endpoint',
    sourceNode: 'node_1',
    source: 'point_1',
    targetNode: 'node_2',
    target: 'point_2'
  }]
});

// 方式二：动态添加Edge
canvas.addEdge({
  id: 'edge_2',
  type: 'node',
  source: 'node_3',
  target: 'node_4'
});

核心属性详解

Butterfly的Edge组件提供了丰富的配置属性：

1. 基本连接属性

   • source/target：连接源/目标的锚点或节点ID
   • sourceNode/targetNode：端点连接特有的节点ID属性

2. 样式控制

   • shapeType：支持多种线条类型，包括：
     • Bezier：贝塞尔曲线
     • Flow：流动曲线
     • Straight：直线
     • Manhattan：曼哈顿线（直角折线）
     • AdvancedBezier：高级贝塞尔曲线
     • 多种其他变体

3. 箭头配置

   • arrow：是否显示箭头
   • arrowPosition：箭头位置（0-1之间）
   • arrowShapeType：自定义箭头样式

4. 标签配置

   • label：线条上的文本或DOM标签
   • labelPosition：标签位置（0-1之间）
   • labelOffset：标签偏移量

高级功能

自定义Edge类

当内置Edge功能不满足需求时，可以通过继承基类实现自定义Edge：

import {Edge} from 'butterfly-dag';

class CustomEdge extends Edge {
  // 自定义渲染逻辑
  draw(obj) {
    // 实现自定义绘制逻辑
  }
  
  // 自定义连接验证
  isConnect() {
    // 返回true/false决定是否允许连接
  }
}

动态交互API

Butterfly提供了丰富的Edge交互API：

1. 重绘与更新

   • redraw()：当节点位置变化后更新连线
   • updateLabel()：动态更新连线标签

2. 动画效果

   • addAnimate()：为连线添加流动动画效果

   edge.addAnimate({
     color: '#ff0000',
     dur: '2s',
     repeatCount: 'indefinite'
   });
   

3. 事件系统

   • emit()/on()：实现Edge与其他组件的事件通信

曼哈顿线特殊功能

对于shapeType为Manhattan的Edge，还提供了一些特殊功能：

1. 可拖动折点

   • 通过draggable属性启用
   • 使用getBreakPoints()获取所有折点位置

2. 圆角设置

   • hasRadius：控制是否使用圆角

性能优化

Butterfly在Edge实现上做了大量性能优化：

1. 批量渲染：支持大规模连线的高效渲染
2. 动画优化：即使在上千条连线的情况下，动画也能流畅运行
3. 智能重绘：最小化DOM操作，提高交互性能

最佳实践

1. 连线类型选择：

   • 简单关系：使用Straight直线
   • 复杂布局：使用Manhattan避免交叉
   • 美观需求：使用Bezier曲线

2. 标签放置技巧：

   • 避免遮挡：合理使用labelOffset
   • 动态更新：通过updateLabel()实现交互反馈

3. 自定义扩展：

   • 优先使用配置项实现需求
   • 必要时再考虑继承扩展

总结

Butterfly的Edge组件提供了从基础连接到高级定制的完整解决方案。通过灵活的配置和强大的API，开发者可以轻松实现各种复杂的连线需求，同时保证性能和用户体验。无论是简单的流程图还是复杂的拓扑图，Edge组件都能提供可靠的支持。

butterfly 🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件) 项目地址: https://gitcode.com/gh_mirrors/butt/butterfly