介绍 - 图1

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

Build Status CircleCI npm package NPM downloads Dependencies DevDependencies

特性

  • 开箱即用的参考DEMO，可在线调试
  • 全方位管理画布，开发者只需要更专注定制化的需求
  • 利用dom来定制元素；灵活性，可塑性，拓展性优秀

安装

  1. npm install butterfly-dag

快速上手

生成画布

  1. const Canvas = require('butterfly-dag').Canvas;
  2. let canvas = new Canvas({
  3.   root: dom,              //canvas的根节点(必传)
  4.   zoomable: true,         //可缩放(可传)
  5.   moveable: true,         //可平移(可传)
  6.   draggable: true,        //节点可拖动(可传)
  7. });
  8. canvas.draw({
  9.   groups: [],  //分组信息
  10.   nodes: [],  //节点信息
  11.   edges: []  // 连线信息
  12. })

定制元素(节点组，节点，线，锚点)

  1. // 定制节点
  2. const Node = require('butterfly-dag').Node;
  3. class ANode extend Node {
  4.   draw() {
  5.     // 这里定制您需要的节点并返回一个dom
  6.     let div = document.createElement("div"); 
  7.     div.innerHTML('helloworld');
  8.     return div
  9.   }
  10. }
  12. // 定制节点组
  13. const Group = require('butterfly-dag').Group;
  14. class AGroup extend Group {
  15.   draw() {
  16.     // 这里定制您需要的节点组并返回一个dom
  17.     let container = document.createElement("div"); 
  18.     container.className = 'container';
  19.     let title = document.createElement('p');
  20.     title.innerHTML = 'group name'
  21.     container.appendChild(title);
  22.     return container;
  23.   }
  24. }
  26. // 线，锚点如此类推，请看具体文档

API文档