线(Edge)

用法

  1. canvas.draw({
  2.   edges: [{
  3.     source: 'point_1',
  4.     target: 'point_2',
  5.     sourceNode: 'node_1',
  6.     targetNode: 'node_2',
  7.     type: 'endpoint',
  8.     arrow: ture,
  9.     arrowPosition: 0.5,
  10.     arrowOffset: 0,  // 箭头的最终位置：线条长度 * arrowPosition + arrowOffset
  11.     label: 'I am label'   //这里也可以传dom，当然也可以拓展父类的drawLabel来自定义label
  12.   }],
  13.   groups: ...
  14.   nodes: ...
  15. })

属性

key 说明 类型 默认值
id 节点唯一标识 string (Require) -
targetNode 连接目标节点id string (Require) -
target 连接目标锚点id string (Require) -
sourceNode 连接源节点id string (Require) -
source 连接源锚点id string (Require) -
type 标志线条连接到节点还是连接到锚点 string (Option) endpoint/node
orientationLimit 线条出口的位置 array (Option) -
shapeType 线条的类型 string (Option) Bezier/Flow/Straight
label 线条上加注释 string/dom (Option) -
arrow 线条上加箭头 boolean (Option) 默认false
Class 拓展类 Class (Option) 一般来说已经满足需要了，因为逻辑较为复杂，不建议拓展线的基类。当传入拓展类的时候，该节点组则会按拓展类的draw方法进行渲染，拓展类的相关方法也会覆盖父类的方法
arrowPosition 箭头在线条上的位置 float (Option) 0-1之间，默认0.5
arrowOffset 箭头相对于arrowPosition的偏移量 float (Option) 默认0，单位：像素

* 设置 isExpandWidth 为 true 时，获取 eventHandlerDom 用于挂载事件

方法

  1. /**
  2.   * @return {dom} - 自定义节点的dom
  3.   */
  4. draw = () => {}
  6. /**
  7.   * 线条挂载后的回调
  8.   */
  9. mounted = () => {}
  11. /**
  12.   * @return {boolean} - 可以自定义复杂的连接条件
  13.   */
  14. isConnect = () => {}
  16. /**
  17.   * 线条重绘后的回调
  18.   */
  19. updated = () => {}
  21. /**
  22.   * @return {dom} - 自定义label的dom
  23.   */
  24. drawLabel = () => {}
  26. /**
  27.   * @return {dom} - 自定义箭头的dom
  28.   */
  29. drawArrow = () => {}
  31. /**
  32.   * @param {obj} sourcePoint(可选参数) - 源节点的坐标和方向 
  33.   * @param {obj} targetPoint(可选参数) - 目标节点的坐标和方向 
  34.   * @return {string} - path的路径
  35.   */
  36. calcPath = () => {}
  38. /**
  39.   * 发送事件
  40.   */
  41. emit = (string, obj) => {}
  43. /**
  44.   * 接受事件
  45.   */
  46. on = (string, callback) => {}