GithubHelp home page GithubHelp logo

alibaba / butterfly Goto Github PK

View Code? Open in Web Editor NEW
4.4K 4.4K 589.0 10.65 MB

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

Home Page: https://butterfly-dag.gitee.io/butterfly-dag/home

License: MIT License

JavaScript 82.67% CSS 6.55% HTML 0.20% Less 6.20% Vue 4.38%
bpmn butterfly connectivity dag diagram diagramming edge flow flow-dag flow-layout flowchart mindmap react svg tree treemap-diagram vue

butterfly's Introduction

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

Build Status CircleCI npm package NPM downloads Dependencies DevDependencies

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文档

🎨优秀案例

⌨️垂直业务React拓展组件

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

  • Butterfly-Editor(doing)

🤝如何贡献

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

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

butterfly's People

Contributors

0xflotus avatar 17881055 avatar aceleewinnie avatar adamsd1 avatar cb3570594 avatar cctv1005s avatar dellear avatar delsoul avatar er1ckwok avatar fatihsolhan avatar fishbar avatar guoqi002 avatar hashimotonanami avatar iwun avatar laveyd avatar lililo111 avatar meng521521 avatar noonnightstorm avatar peiyun0114 avatar qdore avatar sdjalft avatar senfish avatar tchiotludo avatar wang02021017 avatar wendykoko avatar whoay avatar wkexinpd avatar zhang123-bit avatar zhaokejian avatar zt448143356 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

butterfly's Issues

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

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

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

选中两个锚点,自动连线

您想申请的是需求还是问题?
需求
目前的情况是什么?

预期的结果是什么?
可自动连线
哪个butterfly版本在哪个浏览器/操作系统发生的错误?

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

如何判断连线是否成环?

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

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

需求是 寻找一条线上的相关节点,点击某一个节点,高亮显示相关的节点及线。
已下图最右侧 文档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 好像是查找所有相关的节点和线。万分感谢。
demo

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

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

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

image

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

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

拖拽连线没有undo

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

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

动态增加节点

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

如何启动项目

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

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也是自定义的类,但是未生效不知道为什么~demo

@noonnightstorm 大神求指导~~

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

您想申请的是需求还是问题?
需求
目前的情况是什么?

预期的结果是什么?
自动延展画布
哪个butterfly版本在哪个浏览器/操作系统发生的错误?

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

需求--在线可视化编辑

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

这个有实现的计划嘛?

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

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

给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

如何跟vue一起使用呢?

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

成组功能优化

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.