基于@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 字段即为刚刚创建的边。