Skip to content

Latest commit

 

History

History
285 lines (218 loc) · 7.6 KB

edge.md

File metadata and controls

285 lines (218 loc) · 7.6 KB
Raw

线(Edge)

用法

// 初始化画布渲染
canvas.draw({
  edges: [{
    source: 'point_1',
    target: 'point_2',
    sourceNode: 'node_1',
    targetNode: 'node_2',
    type: 'endpoint',
    arrow: true,
    arrowPosition: 0.5,
    arrowOffset: 0,  // 箭头的最终位置：线条长度 * arrowPosition + arrowOffset
    label: 'I am label'   //这里也可以传dom，当然也可以拓展父类的drawLabel来自定义label
  }],
  groups: ...
  nodes: ...
})

// 动态添加
canvas.addEdge({
  // 参考下面属性
  ...
})


属性

id <String> (必填)

  节点唯一标识

type <String> (选填)

  标志线条连接到节点还是连接到锚点。默认值为endpoint

// endpoint类型线段: 锚点连接锚点的线段
{
  type: 'endpoint',
  sourceNode: '', //连接源节点id
  source: '',     //连接源锚点id
  targetNode: '', //连接目标节点id
  target: ''      //连接目标锚点id
}
// node类型线段: 节点连接节点的线段
{
  type: 'node',
  source: '',     //连接源节点id
  target: ''      //连接目标节点id
}

targetNode <String> (必填)

  连接目标节点id (只有endpoint类型的线段才有)

target <String> (必填)

  连接目标锚点id (endpoint线段: 连接目标锚点id; node线段: 连接目标节点id)

sourceNode <String> (必填)

  连接源节点id (只有endpoint类型的线段才有)

source <String> (必填)

  连接源锚点id (endpoint线段: 连接源锚点id; node线段: 连接源节点id)

orientationLimit <Array> (选填)

  线条进出口的位置限制: Left / Right / Top / Bottom

shapeType <String> (选填)

  线条的类型: Bezier/Flow/Straight/Manhattan/AdvancedBezier/Bezier2-1/Bezier2-2/Bezier2-3/BrokenLine

hasRadius <Boolean> (选填)

   曼哈顿曲线圆角参数: true表示为圆角, false表示为直角。 默认值为false

label <String/Dom> (选填)

  线条上注释: 可传字符串和dom

labelPosition <Number> (选填)

  线条上注释的位置: 取值0-1之间, 0代表代表在线段开始处，1代表在线段结束处。 默认值0.5

labelOffset <Number> (选填)

  线条上注释的位置的偏移值: 距离线段注释位置的偏移值。 默认值为0，单位是像素

// labelPosition & labelOffset: 注释位置在线段中间处，再往结束方向偏移20px
{
  labelPosition: 0.5,
  labelOffset: 20
}

arrow <Boolean> (选填)

  是否加箭头配置: 默认false

arrowPosition <Number> (选填)

  箭头位置: 取值0-1之间, 0代表代表在线段开始处，1代表在线段结束处。 默认值0.5

arrowOffset <Number> (选填)

  箭头位置的偏移值: 距离线段箭头位置的偏移值。 默认值为0，单位是像素

// arrowPosition & arrowOffset: 箭头位置在线段中间处，再往结束方向偏移20px
{
  arrowPosition: 0.5,
  arrowOffset: 20
}

arrowShapeType <String> (选填)

  箭头样式类型: 可使用系统集成的和可使用自己注册的，只需要保证类型对应即可。

// 自行注册的
import {Arrow} from 'butterfly-dag';
Arrow.registerArrow([{
  key: 'yourArrow1',
  type: 'svg',
  width: 10,   // 选填，默认8px
  height: 10,  // 选填，默认8px
  content: require('/your_fold/your_arrow.svg') // 引用外部svg
}, {
  key: 'yourArrow1',
  type: 'pathString',
  content: 'M5 0 L0 -2 Q 1.0 0 0 2 Z' // path的d属性
}]);

[Manhattan]draggable <Number> (选填)

  设置类型为Manhattan线段是否能拖动

Class <Class> (选填)

  拓展类：一般来说已经满足需要了，因为逻辑较为复杂，不建议拓展线的基类。当传入拓展类的时候，该节点组则会按拓展类的draw方法进行渲染，拓展类的相关方法也会覆盖父类的方法

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



类重写API：

import {Edge} from 'butterfly-dag';

Class YourEdge extends Edge {

  /**
    * 线段挂载后的回调
    */
  mount() {}

  /**
    * 线段是否能连接的方法
    * @return {boolean} - 返回该线段是否能连接。若返回true，则会生成线段；若返回false，则会把线段销毁。
    */
  isConnect() {}
  
  /**
    * 线段的渲染方法
    * @param {obj} data - 线段基本信息 
    * @return {dom} - 返回渲染svg dom的根节点
    */
  draw(obj) {}

  /**
    * 箭头的渲染方法
    * @param {string} pathString - 线段path的描绘字符串(path中的d属性)
    * @return {dom} - 返回箭头渲染dom的根节点
    */
  drawArrow() {path}

  /**
    * 注释的渲染方法
    * @param {string/dom} label - 注释的内容字符串或者是label的dom
    * @return {dom} - 返回注释渲染dom的根节点
    */
  drawLabel() {}

  /**
    * 自定义计算线段路径方法
    * @param {object} sourcePoint - 来源点的坐标及线段出线的方向
    * @param {object} targetPoint - 目标点的坐标及线段入线的方向
    * @return {string} - 返回线段path的描绘字符串(path中的d属性)
    */
  calcPath(sourcePoint, targetPoint) {}
}


外部调用API

edge.redraw ()

作用： 更新线段位置: 线段所在的节点或者锚点位置发生变化后, 需要调用下redraw更新其对应的线

redraw = () => {}

edge.setZIndex (index)

作用： 设置线段的z-index值

参数

  • {number} zIndexzIndex的值
setZIndex = (index) => {}

edge.updateLabel (label)

作用： 更新线段的注释

参数

  • {string|dom}label的字符串或者dom

返回

  • {dom}更新label的dom
updateLabel = (label) => {}

edge.remove ()

作用： 线段删除的方法。与canvas.removeEdge的方法作用一致。

remove = () => {}

edge.emit(event,data)

作用： 线段发送事件的方法，画布及任何一个元素都可接收。

参数

  • {string} event发送事件名称
  • {number} data发送事件数据
emit = (string, obj) => {}

edge.on(event,callback)

作用： 线段接收事件的方法，能接收画布及任何一个元素的事件。

参数

  • {string} event接收事件名称
  • {function} callback接收事件回调
on = (string, function) => {}

edge.addAnimate (options)

作用： 给该线段加上动画

参数

  • {obj} options(可选参数)配置动画效果
  • {number} options.radius (可选参数)动画节点半径
  • {string} options.color (可选参数) 动画节点颜色
  • {string} options.dur (可选参数)动画运行时间，如：1s
  • {number|string} options.repeatCount (可选参数)动画重复次数，如：1 或者 'indefinite'
addAnimate = (options) => {}

性能: 1000节点+1000条线段，动画完美运行

[Manhattan]edge.getBreakPoints ()

作用： 获取线段拐点: 只有shapeType为Manhattan的线段才会使用此方法。

getBreakPoints = () => {}