alibaba / butterfly

一个基于JS的数�?�驱动的节点�?编排组件库

English | 简体中文

✨ 特性

• 丰富DEMO，开箱�?�用
• 全方�?管�?�画布，开�?�者�?�需�?更专注定制化的需求
• 利用dom�?�定制元素；�?�活性，�?�塑性，拓展性优秀

快速本地DEMO

git clone [email protected]:alibaba/butterfly.git
npm install
cd example
npm install
npm start

📦 安装

npm install butterfly-dag

🔨 快速上手

引入方�?

// 完全版，内部包�?�jquery和lodash
import {Canvas, Group, Node, Edge} from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';

// 如果您引用的项目使用了jquery和lodash，为了缩�?项目的体积，我们建议：
import {Canvas, Group, Node, Edge} from 'butterfly-dag/pack/index.js';
import 'butterfly-dag/pack/index.css';

生�?画布

const Canvas = require('butterfly-dag').Canvas;
let canvas = new Canvas({
  root: dom,              //canvas的根节点(必传)
  zoomable: true,         //�?�缩放(�?�传)
  moveable: true,         //�?�平移(�?�传)
  draggable: true,        //节点�?�拖动(�?�传)
});
canvas.draw({
  groups: [],  //分组信�?�
  nodes: [],  //节点信�?�
  edges: []  // 连线信�?�
})

🔗 API文档

• 画布(Canvas)
  • 属性�?置
  • 节点，线段，节点组的查看,新增,删除
  • 缩放，平移
  • 适�?画布和�?�焦局部节点
  • �?�?�和撤销
  • �??标转�?�和�??标�??移
  • 框选
  • 事件
  • 其他辅助方法
• 节点组(Group)
  • 属性�?置
  • 自定义节点组
  • 新增，删除�?员节点
  • 自定义锚点
  • 移动
  • 事件
• 节点(Node)
  • 属性�?置
  • 自定义节点
  • 自定义锚点
  • 移动
  • 事件
  • [树状布局] 收缩 & 展开�?节点
• 线(Edge)
  • 属性�?置
  • 自定义线段
  • 自定义箭头
  • 自定义label
  • 线段连通性
  • 事件
  • 线段动画
• 锚点(Endpoint)
  • 属性�?置
  • 通用API
• 缩略图(Minimap)
• 布局(Layout)

�?贡献

�?�?��?�是一个完全开�?的项目，我们欢迎大家为修�?错误和改进�?�出贡献。有关如何开始的信�?�，请阅读我们的贡献指�?�.