@alone-g6/edge-drag-link

g6 拖拽连线

Usage no npm install needed!

<script type="module">
  import aloneG6EdgeDragLink from 'https://cdn.skypack.dev/@alone-g6/edge-drag-link';
</script>

README

基于@antv/g6的边拖拽连线组件

使用

import {edgeDragLinkNode, stateName as edgeStateName, edgeDragLinkBehavior, edgeDragArrow} from '@alone-g6/edge-drag-link';
const EdgeDragLinkNode = edgeDragLinkNode();

1、在自定义节点的afterDraw函数调用该组件的afterDraw用于生成拖拽辅助点shape

afterDraw(cfg, group) {
    EdgeDragLinkNode.afterDraw(cfg, group);
  }

2、在合适的时机设置edge-drag-link为激活状态,用于显示拖拽点

setState(name, value, item) {
    EdgeDragLinkNode.setState(name, value, item);
}

3、使用交互

G6.registerBehavior(edgeDragLinkBehavior.name, edgeDragLinkBehavior);
modes: {
  default: ['drag-node', edgeDragLinkBehavior.name],
}

4、使用箭头拖拽

G6.registerEdge('some-name', edgeDragArrow, 'line');

节点参数

  • markerStyle: 辅助点的样式
  • getAttr: 动态获取attr属性function(value, item, shape)
  • stateChanged: 状态变更事件function(value, item, shape)

交互参数

  • shouldBegin(e): 是否允许当前被操作的条件下开始创建边
  • shouldEnd(e):是否允许当前被操作的条件下结束创建边

交互事件

  • edge-drag-link:end:当边创建完成时将会触发该时机事件。使用 graph.on('edge-drag-link:end', edge => {...}) 监听。其参数 edge 字段即为刚刚创建的边。