节点组(Group)

  1. const Group = require('butterfly-dag').Group;
  2. class AGroup extends Group {
  3.   draw(obj) {
  4.     // 这里可以根据业务需要，自己生成dom
  5.   }
  6. }
  8. canvas.draw({
  9.   groups: [{
  10.     id: 'xxxx',
  11.     top: 100,
  12.     left: 100,
  13.     Class: AGroup //设置基类之后，画布会根据自定义的类来渲染
  14.   }],
  15.   nodes: ...
  16.   edges: ...
  17. })

属性

key 说明 类型 默认值
id 节点唯一标识 string (Require) -
top y轴坐标 number (Require) -
left x轴坐标 number (Require) -
width 宽度 number (Option) -
height 高度 number (Option) -
endpoints 锚点信息 array (Option) -
Class 拓展类 Class (Option) 当传入拓展类的时候，该节点组则会按拓展类的draw方法进行渲染，拓展类的相关方法也会覆盖父类的方法
scope 作用域 boolean (Option) 当node的scope和group的scope一致才能加入到节点组。默认不设置即可随意加入

* 节点的返回的dom必须设置position: absolute;

方法

  1. /**
  2.   * group的渲染方法
  3.   * @param {obj} data - 节点基本信息 
  4.   * @return {dom} - 返回渲染dom的根节点
  5.   */
  6. draw = (obj) => {}
  8. /**
  9.   * 节点组挂载后的回调
  10.   */
  11. mounted = () => {}
  13. /**
  14.   * group添加节点
  15.   * @param {obj} node - 节点数据
  16.   */
  17. addNode = (node) => {}
  19. /**
  20.   * group批量添加节点
  21.   * @param {array} nodes - 节点数组
  22.   */
  23. addNodes = (nodes) => {}
  25. /**
  26.   * group删除节点
  27.   * @param {obj} node - 节点数据
  28.   */
  29. removeNode = (node) => {}
  31. /**
  32.   * @param {obj} data - 锚点基本信息(此方法必须在节点挂载后执行才有效)
  33.   */
  34. addEndpoint = (obj) => {}
  36. /**
  37.   * @param {string} pointId - 锚点的信息 
  38.   * @return {Endpoint} - Endpoint的对象
  39.   */
  40. getEndpoint = (id) => {}
  42. /**
  43.   * group删除节点
  44.   * @param {array} nodes - 节点数组
  45.   */
  46. removeNodes = (nodes) => {}
  48. /**
  49.   * @return {number} - 节点组宽度
  50.   */
  51. getWidth = () => {}
  53. /**
  54.   * @return {number} - 节点组高度
  55.   */
  56. getHeight = () => {}
  58. /**
  59.   * 发送事件
  60.   */
  61. emit = (string, obj) => {}
  63. /**
  64.   * 接受事件
  65.   */
  66. on = (string, callback) => {}

详细说明