alibaba / butterfly

🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)

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

English | 简体中文

✨ 特性

• 丰富DEMO，开箱即用
• 全方位管理画布，开发者只需要更专注定制化的需求
• 利用DOM/REACT/VUE来定制元素；灵活性，可塑性，拓展性优秀

🚀DEMO

本地DEMO

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

线上DEMO

小蝴蝶官网

📦 安装

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';

生成画布

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

🔗 API文档

• !!! 3.x的API文档，请移步到这里;
• 画布(Canvas)
• 节点组(Group)
• 节点(Node)
• 线(Edge)
• 锚点(Endpoint)
• 缩略图(Minimap)
• 提示 & 菜单(tooltips & menu)
• 布局(Layout)
• 插件
  • 箭头(arrow)
  • 左侧画板(pannel)
  • 快捷键(hotkey)
• React & Vue支持
  • React butterfly组件支持 [不维护，推荐用原生小蝴蝶]
  • Vue2 butterfly组件支持

🎨优秀案例

⌨️垂直业务React拓展组件

• 数据/字段映射组件: 适用于做数据字段映射，表字段映射，表格连线等业务

• 表字段血缘/业务血缘: 适用于表级血缘,表字段级血缘,业务链路血缘等业务

• 可视化建模图: 适用于UML，数据库建模，数据仓库建设等业务

• 调度编排图(doing)
• 监控图: 适用于任务流，数据流等业务的状态展示

• Butterfly-Editor(doing)

🤝如何贡献

我们欢迎所有的贡献者，在成为贡献者之前，请先阅读贡献指南。

如果您已经了解，快来Issus或Pull requests成为贡献者吧，让我们和小蝴蝶一起成长，一起变得更好、更棒！

butterfly's Issues

【需求】连线时hover到可连接锚点上有反馈

升级到2.8.25报错

升级到2.8.25版本之后报错：

This relative module was not found:

* ./circleLayout in ./node_modules/[email protected]@butterfly-dag/pack/index.js

节点，线，节点组上下顺序需要整理

节点组外：
1: 节点要在线上面
2: 节点要在节点组下面

节点组内
1: 节点在节点组上面
2: 节点组内的线要在节点组上面
3: 节点组外的线要在节点组下面

能通过引用.js文件的方式使用吗

您想申请的是需求还是问题？
问题
主要做后端，React实在没整明白，想请教一下能否通过<script>标签引入.js文件依赖的方式使用butterfly？

期望以鼠标为中心进行缩放

在微信小程序和app的webview中访问H5页面时，节点之间的连线位置不正确

您想申请的是需求还是问题？

目前的情况是什么？

预期的结果是什么？

哪个butterfly版本在哪个浏览器／操作系统发生的错误？

请重现步骤，如果可以的话，请提供一个最小的演示案例。

canvas的setSelectMode框选方法希望支持group类型

描述：现在只支持节点、锚点和连线，希望增加group的type类型。
当前版本：2.3.37

[需求]希望可以优化动态改变Edge组件的label

1.动态改变label样式和显示
2.增加api可以快速更改

期望聚焦之后能把全链路的血缘都focus上

给node加了个select下拉框，下拉不了元素.

您想申请的是需求还是问题？
问题
目前的情况是什么？
给node加了个select下拉框，下拉不了元素.
预期的结果是什么？
让select里面的option可以下拉。
哪个butterfly版本在哪个浏览器／操作系统发生的错误？
master的版本，
请重现步骤，如果可以的话，请提供一个最小的演示案例。
在example的mindMap的node.js文件,修改了下代码如下:

class BaseNode extends Node {
  constructor(opts) {
    super(opts);
  }

  draw = (opts) => {
    let container = $('<div class="mind-map-node"></div>')
      .css('top', opts.top)
      .css('left', opts.left)
      .attr('id', opts.id);
    let titleDom = $(`<div class="title"><div>`);

    let select = $(`
    <div>
      <select class="selectBox">
      <option value="1">task1</option>
      <option value="2">task2</option>
      </select>
    </div>
    `);

    titleDom.append(select);


    container.append(titleDom);

    return container[0];
  }
}

/kind bug

需求--在线可视化编辑

我提1个需求：
使用Butterfly，从无到有，可视化地维护1个图定义。

这个有实现的计划嘛？

请问有对应这张预览图里面的demo源码吗？

请问有首页提供的预览图里面这张图片对应的demo吗？感谢~~~

求更美丽的贝塞尔曲线

node.addEndpoint中的Class属性未生效

您想申请的是需求还是问题？
问题
目前的情况是什么？
通过自定义Node类创建endpoint传入了Class自定义Endpoint，但是未执行自定义Endpoint对应的draw方法

this.addEndpoint({
        id: `${this.id}_-1`,
	type: 'source',
	orientation: [1, 0],
	dom: this.sourceEndpoint,
	Class: ExtendEndpoint
});

/** @format */

import { Endpoint } from 'butterfly-dag/pack/index.js';
import $ from 'jquery';

class ExtendEndpoint extends Endpoint {
	draw(obj) {
		console.log(obj);
		const point = super.draw(obj);
		if (obj.options && obj.options.color === 'system-gray') {
			// 系统灰色锚点
			$(point).addClass('system-gray-point');
		} else if (obj.options && obj.options.color === 'system-green') {
			// 系统锚点绿色
			$(point).addClass('system-green-point');
		}
		return point;
	}

	linkable(obj) {
		console.log(obj);
	}

	unLinkable(obj) {
		console.log(obj);
	}

	hoverLinkable(obj) {
		console.log(obj);
	}

	unHoverLinkable(obj) {
		console.log(obj);
	}
}
export default ExtendEndpoint;

预期的结果是什么？
通过node.addEndpoint方法传递Class可以覆盖默认的类

哪个butterfly版本在哪个浏览器／操作系统发生的错误？
butterfly-dag: 2.8.20
system: mac os
请重现步骤，如果可以的话，请提供一个最小的演示案例。

查看源码中有对应的解析，打印Log也是自定义的类，但是未生效不知道为什么~

@noonnightstorm 大神求指导~~

期望节点和节点间的连线能够自动整体布局

可以提供Demo或者截图么

可以提供Demo或者截图么

期望可以增加，组合与拆分组合的方法，组合成group与拆分group

期望可以增加，组合与拆分组合的方法，组合成group与拆分group

请为项目补充 License 信息

这样不明 license 信息的项目没有企业敢真正使用的。

动态增加节点

您想申请的是需求还是问题？
问题
目前的情况是什么？
当只有一个root节点在画板上，如何动态的新增画板？
预期的结果是什么？
动态新增node
哪个butterfly版本在哪个浏览器／操作系统发生的错误？
google浏览器。windows10. butterfly master版本
请重现步骤，如果可以的话，请提供一个最小的演示案例。

两个相同锚点间可以重复连线

期望：不重复连线

【需求】期望新增画布适配和批量动画聚焦功能

1. 画布适配，画布所有节点和边缩放至全都在可视区域的状态
2. 批量动画聚焦，目前 focusNodeWithAnimate 仅支持单个节点的聚焦，没办法聚焦节点相关部分（如聚焦以这个节点为中心的其他节点）

获取相邻节点，然后获取的节点不往回查找相邻节点

需求是 寻找一条线上的相关节点，点击某一个节点，高亮显示相关的节点及线。
已下图最右侧 文档3-A 为例，点击时 文档1-A,文档1-B,文档2-A 高亮， 文档2-B不高亮。
就是推导下一个 相关节点与初始方向有关，不往回再查找。 文档3-A --》文档2-A --》 文档1-A,文档1-B ，但是 文档1-B 不去回找 文档2-A和文档2-B；如果是中间节点则往两边推导相关节点。
希望大佬能再回复一次，目前API中 getNeighborNodesAndEdgesByLevel 好像是查找所有相关的节点和线。万分感谢。

成组功能优化

1. 支持多选右键直接成组，无需用户计算位置
2. 支持选中多个节点移动到某个组中

如何跟vue一起使用呢？

您想申请的是需求还是问题？
需求
目前的情况是什么？
我发现使用数据驱动这一点很符合vue的模式，但是如果要自定义node的话，我该如何改造成使用vue的组件呢？尤其是使用vue的单文件组件。这一点还不是太明白，希望能得到一些指点，非常感谢！
预期的结果是什么？
能够配合vue一起使用

删除节点后，union的节点里面还存在

如何启动项目

作者您好，我将项目pull 下来之后，安装完依赖，请问如何启动项目呢？如有建议，请告知我，谢谢！

期望可以组合跟随移动

期望可以组合跟随移动

期待画布能提供缩略图

鼠标右键节点，节点也会跟随鼠标移动

期望：右键情况下，节点不跟随鼠标移动

Demo里有不少大小写拼写错误

ERROR in ./demo/circle/index.jsx
Module not found: Error: Can't resolve './CircleCanvas.js' in '/home/om/studies/butterfly/example/demo/circle'
@ ./demo/circle/index.jsx 35:13-41
@ ./index.jsx

ERROR in ./index.jsx
Module not found: Error: Can't resolve './demo/DrageLayout/index.jsx' in '/home/om/studies/butterfly/example'
@ ./index.jsx 103:15-54

ERROR in ../src/utils/layout/hierarchy/index.js
Module not found: Error: Can't resolve '@antv/hierarchy' in '/home/om/studies/butterfly/src/utils/layout/hierarchy'
@ ../src/utils/layout/hierarchy/index.js 7:16-42
@ ../src/canvas/treeCanvas.js
@ ../index.js
@ ./demo/emergency/index.jsx
@ ./index.jsx

ERROR in ../src/utils/layout/layout.js
Module not found: Error: Can't resolve 'dagre' in '/home/om/studies/butterfly/src/utils/layout'
@ ../src/utils/layout/layout.js 17:12-28
@ ../index.js
@ ./demo/emergency/index.jsx
@ ./index.jsx

如何判断连线是否成环？

您想申请的是需求还是问题？
需求
目前的情况是什么？
判断连线是否成环
预期的结果是什么？
判断连线是否成环
哪个butterfly版本在哪个浏览器／操作系统发生的错误？
所有
请重现步骤，如果可以的话，请提供一个最小的演示案例。

选中两个锚点，自动连线

您想申请的是需求还是问题？
需求
目前的情况是什么？
无
预期的结果是什么？
可自动连线
哪个butterfly版本在哪个浏览器／操作系统发生的错误？

请重现步骤，如果可以的话，请提供一个最小的演示案例。

线条label错位

期望：线条 label 不错位

【bug report】错误数据的容错性不足

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

import {Canvas, Node} from '../index';

class BaseNode extends Node {
  constructor(opts) {
    super(opts);
    this.id = opts.id;
    this.top = opts.top;
    this.left = opts.left;
    this.options = opts;
  }
  draw = (opts) => {
    let container = $('<div class="force-node"></div>')
                    .css('top', opts.top + 'px')
                    .css('left', opts.left+ 'px')
                    .attr('id', opts.id);

    container.text(opts.options.index);

    return container[0];
  }
}


const mockData = {
  nodes: [ {id: "0", index: "0", Class: BaseNode, group: 'group_1'},
            {id: "1", index: "1", Class: BaseNode, group: 'group_1'},
            {id: "2", index: "2", Class: BaseNode},
            {id: "3", index: "3", Class: BaseNode},
            {id: "4", index: "4", Class: BaseNode},
            {id: "5", index: "5", Class: BaseNode},],
  edges: [ {source: "0", target: "1"},
           {source: "1", target: "2"},
           {source: "1", target: "3"},
           {source: "1", target: "4"},
           {source: "1", target: "5"},
          ],
  groups: [
    {
      id: 'group_1',
      top: 100,
      left: 50
    }    
  ]          
};


class ForceTree extends React.Component {
  componentDidMount() {
    let root = document.getElementById('dag-canvas');
    this.canvas = new Canvas({
      root: root,
      disLinkable: true, // 可删除连线
      linkable: false,    // 可连线
      draggable: true,   // 可拖动
      zoomable: true,    // 可放大
      moveable: true,    // 可平移
      layout: {
        type: 'forceLayout',
        options: {
          link: {
            // 线条的距离
            distance: 50,
            // 线条的粗细
            strength: 1
          }
        },
      },
      theme: {
        edge: {
          type: 'Straight'
        }
      }
    });

    this.canvas.draw(mockData);

    this.canvas.setMinimap(true);
  }

  render() {
    return (
      <div className='force-tree-page'>
        <div className="force-tree-canvas" id="dag-canvas">
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <ForceTree />, document.getElementById('root')
);

贝塞尔曲线曲度和弯曲方式待优化

当前效果：

期望效果：

期望增加锚点可以锁定功能，不允许用户手动增加或删除连线

如题，锚点支持按配置生成连线，但是不允许用户手动增加或删除连线

有些接口使用了link字段，有些地方使用了edge字段

有些接口使用了link字段，有些地方使用了edge字段

拖拽连线没有undo

您想申请的是需求还是问题？
拖拽连线没有undo
目前的情况是什么？
拖拽连线没有undo
预期的结果是什么？
拖拽连线要有undo
哪个butterfly版本在哪个浏览器／操作系统发生的错误？

请重现步骤，如果可以的话，请提供一个最小的演示案例。

当出现滚动条的时候，框选范围和edge线条的位置错乱

现在的定位都是根据client的原点来的 而不是画布起始位置

节点框选在有滚动时，框选不准确

您想申请的是需求还是问题？
问题
目前的情况是什么？
父元素存在滚动时，框选位置不准确
预期的结果是什么？
有滚动的时候也是准确的
哪个butterfly版本在哪个浏览器／操作系统发生的错误？
所有浏览器都重现
请重现步骤，如果可以的话，请提供一个最小的演示案例。
把父元素的overflow加个auto，滚动一下，然后框选。

【需求】期望可以有撤销操作的功能

点击某个节点时，与其相关的节点和线颜色高亮显示，目前支持么。

您想申请的是需求还是问题？

目前的情况是什么？

预期的结果是什么？

哪个butterfly版本在哪个浏览器／操作系统发生的错误？

请重现步骤，如果可以的话，请提供一个最小的演示案例。

希望每个锚点能增加属性控制能接连的线条数

项目需求需要一个锚点只能连接一个线条，希望每个锚点能增加属性控制能接连的线条数

节点和连线拖动到画布边缘时，画布自动延展

您想申请的是需求还是问题？
需求
目前的情况是什么？
无
预期的结果是什么？
自动延展画布
哪个butterfly版本在哪个浏览器／操作系统发生的错误？

请重现步骤，如果可以的话，请提供一个最小的演示案例。

期待画布能保存为png格式的图片

连接一条线，然后通过target一端的锚点，移动这条线使其连接到另一个锚点，线条数据多出连一根

连接一条线，然后通过target一端的锚点，移动这条线使其连接到另一个锚点，线条数据多出连一根

批量拖动node节点到group中，事件返回的node只有一个

批量拖动node节点到group中，事件返回的node只有一个，期望是多个的。

关于组创建之后回显的问题

您想申请的是需求还是问题？
问题
目前的情况是什么？
如当前有个Node坐标为[100, 100]，创建Group之后Group坐标为[100, 100]，Node坐标偏移之后为[50, 50]
但是如果回显这组数据的话通过Apicanvas.addGroup创建传入的nodes为[50, 50]的点，但是又会重新基于这个点计算偏移值。这个是否可以加个参数控制不重新计算偏移值？
预期的结果是什么？
第一次创建组之后刷新回显的过程不希望重新计算偏移
哪个butterfly版本在哪个浏览器／操作系统发生的错误？
2.8.20
请重现步骤，如果可以的话，请提供一个最小的演示案例。
情况如上描述~

期望节点拖动支持辅助线对齐

期望聚焦节点可传递中心节点作为参数