代码拉取完成,页面将自动刷新
G6.registerBehavior('click-add-edge', {
getEvents() {
return {
'node:click': 'onClick',
mousemove: 'onMousemove',
'edge:click': 'onEdgeClick' // 点击空白处,取消边
};
},
onClick(ev) {
const node = ev.item;
const graph = this.graph;
const point = {
x: ev.x,
y: ev.y
};
const model = node.getModel();
let sourceAnchor;
let targetAnchor;
if (this.addingEdge && this.edge) {
// 第2次点击
// 获取锚点的坐标
let array = new Array();
// 此时只有4个锚点 只需要传递四个即可
for (let i = 0; i < 4; i++) {
array.push(node.getLinkPointByAnchor(i))
}
// 计算锚点坐标与当前鼠标点击坐标的距离 找到最小的坐标点
targetAnchor = vm.getLastPoint(ev, array);
graph.updateItem(this.edge, {
target: model.id,
targetAnchor: targetAnchor,
});
this.edge = null;
this.addingEdge = false;
vm.refreshView()
} else {
// 第1次点击
// 获取锚点的坐标
let array = new Array();
for (let i = 0; i < 4; i++) {
array.push(node.getLinkPointByAnchor(i))
}
// 计算锚点坐标与当前鼠标点击坐标的距离 找到最小的坐标点
sourceAnchor = vm.getLastPoint(ev, array);
this.edge = graph.addItem('edge', {
source: model.id,
target: point,
sourceAnchor: sourceAnchor,
style: {
stroke: "grey",
endArrow: {
path: G6.Arrow.triangle(5, 5, 5),
d: 5,
fill: "#7A67EE"
}
}
});
this.addingEdge = true;
}
},
onMousemove(ev) {
const point = {
x: ev.x,
y: ev.y
};
if (this.addingEdge && this.edge) {
this.graph.updateItem(this.edge, {
target: point
});
}
},
onEdgeClick(ev) {
const currentEdge = ev.item;
// 拖拽过程中,点击会点击到新增的边上
if (this.addingEdge && this.edge == currentEdge) {
graph.removeItem(this.edge);
this.edge = null;
this.addingEdge = false;
}
}
});
报错如下图