English | 简体中文
- 开箱即用的参考DEMO，可在线调试
- 全方位管理画布，开发者只需要更专注定制化的需求
- 利用dom来定制元素；灵活性，可塑性，拓展性优秀
npm install butterfly-dag
const Canvas = require('butterfly-dag').Canvas;
let canvas = new Canvas({
root: dom, //canvas的根节点(必传)
zoomable: true, //可缩放(可传)
moveable: true, //可平移(可传)
draggable: true, //节点可拖动(可传)
});
canvas.draw({
groups: [], //分组信息
nodes: [], //节点信息
edges: [] // 连线信息
})
// 定制节点
const Node = require('butterfly-dag').Node;
class ANode extend Node {
draw() {
// 这里定制您需要的节点并返回一个dom
let div = document.createElement("div");
div.innerHTML('helloworld');
return div
}
}
// 定制节点组
const Group = require('butterfly-dag').Group;
class AGroup extend Group {
draw() {
// 这里定制您需要的节点组并返回一个dom
let container = document.createElement("div");
container.className = 'container';
let title = document.createElement('p');
title.innerHTML = 'group name'
container.appendChild(title);
return container;
}
}
// 线，锚点如此类推，请看具体文档
小蝴蝶是一个完全开源的项目，我们欢迎大家为修复错误和改进做出贡献。有关如何开始的信息，请阅读我们的贡献指南.