节点(Node)

用法

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

属性

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

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

方法

  1. /**
  2.   * 节点的渲染方法
  3.   * @param {obj} data - 节点基本信息 
  4.   * @return {dom} - 返回渲染dom的根节点
  5.   */
  6. draw = (obj) => {}
  8. /**
  9.   * 节点挂载后的回调
  10.   */
  11. mounted = () => {}
  13. /**
  14.   * 节点更新后的回调
  15.   */
  16. updated = () => {}
  18. /**
  19.   * 删除节点
  20.   */
  21. remove = () => {}
  23. /**
  24.   * 聚焦回调
  25.   */
  26. focus = () => {}
  28. /**
  29.   * 失去聚焦回调
  30.   */
  31. unFocus = () => {}
  33. /**
  34.   * @param {obj} data - 锚点基本信息(此方法必须在节点挂载后执行才有效)
  35.   */
  36. addEndpoint = (obj) => {}
  38. /**
  39.   * @param {string} pointId - 锚点的Id(此方法必须在节点挂载后执行才有效)
  40.   * @return {Endpoint} - Endpoint的对象
  41.   */
  42. removeEndpoint = (obj) => {}
  44. /**
  45.   * @param {string(Require)} pointId - 锚点的信息 
  46.   * @param {string(Option)} type - 锚点的类型
  47.   * @return {Endpoint} - Endpoint的对象
  48.   */
  49. getEndpoint = (id, type) => {}
  51. /**
  52.   * @param {number} x - 移动位置的x坐标 
  53.   * @param {number} y - 移动位置的y坐标 
  54.   */
  55. moveTo = (obj) => {}
  57. /**
  58.   * @param {boolean} draggable - 设置节点是否可移动
  59.   */
  60. setDraggable = (boolean) => {}
  62. /**
  63.   * @return {number} - 节点宽度
  64.   */
  65. getWidth = () => {}
  67. /**
  68.   * @return {number} - 节点高度
  69.   */
  70. getHeight = () => {}
  72. /**
  73.   * 发送事件
  74.   */
  75. emit = (string, obj) => {}
  77. /**
  78.   * 接受事件
  79.   */
  80. on = (string, callback) => {}