Butterfly项目中的节点(Node)使用详解

Butterfly项目中的节点(Node)使用详解

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

前言

Butterfly是一个强大的可视化图形库，其中的节点(Node)是构建图形的基础元素。本文将深入讲解Butterfly中节点的使用方式、属性配置以及API调用方法，帮助开发者更好地理解和运用这一重要组件。

节点基础概念

在Butterfly中，节点是可视化图形中的基本构建块，可以代表各种实体，如流程图中的步骤、组织结构图中的职位等。每个节点都有其位置、大小和可自定义的外观。

节点创建与使用

基础创建方式

创建节点有两种主要方式：

1. 初始化时创建：在画布绘制时通过nodes数组配置
2. 动态添加：使用canvas.addNode()方法

// 创建自定义节点类
class CustomNode extends Node {
  draw(obj) {
    // 自定义渲染逻辑
    const dom = document.createElement('div');
    // 必须设置绝对定位
    dom.style.position = 'absolute';
    // 其他样式和内容设置
    return dom;
  }
}

// 初始化时创建节点
canvas.draw({
  nodes: [{
    id: 'node1',
    top: 100,
    left: 100,
    Class: CustomNode
  }]
});

// 动态添加节点
canvas.addNode({
  id: 'node2',
  top: 200,
  left: 200,
  Class: CustomNode
});

节点核心属性

节点支持以下重要属性配置：

| 属性名 | 类型 | 必填 | 说明 | |--------|------|------|------| | id | String | 是 | 节点唯一标识符 | | top | Number | 是 | Y轴坐标位置 | | left | Number | 是 | X轴坐标位置 | | draggable | Boolean | 否 | 是否可拖动，覆盖全局设置 | | group | String | 否 | 所属节点组的ID | | endpoints | Array | 否 | 锚点配置数组 | | Class | Class | 否 | 自定义节点类 | | scope | String/Array | 否 | 连接作用域 |

scope属性详解：

• 用于控制节点间的连接规则
• 单scope：'scope1'
• 多scope：'scope1 scope2 scope3'（任意匹配即可连接）

自定义节点开发

重写关键方法

开发者可以通过继承Node类来创建自定义节点，重写以下方法：

class CustomNode extends Node {
  // 节点挂载后回调
  mounted() {
    console.log('节点已挂载');
  }
  
  // 核心渲染方法
  draw(obj) {
    const dom = document.createElement('div');
    dom.style.position = 'absolute';
    dom.style.width = '100px';
    dom.style.height = '50px';
    dom.style.backgroundColor = '#f0f0f0';
    return dom;
  }
}

注意事项

1. DOM定位：自定义节点返回的DOM元素必须设置position: absolute
2. 生命周期：mounted()在节点挂载完成后触发，适合执行初始化逻辑
3. 性能优化：复杂的节点应考虑使用轻量级DOM结构

节点API详解

几何属性获取

// 获取节点宽度
const width = node.getWidth();

// 获取节点高度
const height = node.getHeight();

交互控制

// 设置节点可拖动性
node.setDraggable(true);

// 移动节点到指定位置
node.moveTo(300, 200);

// 删除节点
node.remove();

锚点管理

锚点是节点间连接的关键点，提供以下管理方法：

// 添加锚点
node.addEndpoint({
  id: 'point1',
  orientation: 'top',
  scope: 'scope1',
  type: 'source'
});

// 移除锚点
node.removeEndpoint('point1');

// 获取锚点
const endpoint = node.getEndpoint('point1');

事件系统

节点内置了事件发布订阅机制：

// 发送事件
node.emit('custom-event', {data: 'value'});

// 监听事件
node.on('custom-event', (data) => {
  console.log('收到事件:', data);
});

树状布局专用API

对于树状布局(TreeCanvas)，节点还提供额外的展开/收起功能：

// 收缩节点
treeNode.collapseNode('nodeId');

// 展开节点
treeNode.expandNode('nodeId');

最佳实践

1. 自定义节点设计：根据业务需求设计节点外观，保持简洁直观
2. 锚点规划：合理设置锚点位置和方向，优化连接体验
3. 作用域管理：使用scope控制节点连接规则，实现复杂业务逻辑
4. 性能考虑：避免在节点中嵌入过于复杂的DOM结构

总结

Butterfly的节点系统提供了丰富的功能和灵活的扩展方式，开发者可以通过继承和重写来自定义节点行为，满足各种可视化需求。理解节点的属性配置和API使用方式，是构建高效可视化应用的关键。

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