antvis/G6

The issue has been closed
[Bug]: Custom edges obscure nodes #6692
uioonm posted onGitHub
Describe the bug / 问题描述
参考文档的自定义边
https://g6.antv.antgroup.com/manual/custom-extension/element#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8A%82%E7%82%B9,
进行自定义边后,在开启drag-element、click-select、brush-select三个事件后,拖拽节点再点击画板会导致边的盖住节点
相关代码
import { BaseEdge, ExtensionCategory, Graph, register } from "@antv/g6";
class ExtendBaseEdge extends BaseEdge {
// 重写 getKeyStyle 方法
getKeyStyle(attributes) {
return { ...super.getKeyStyle(attributes), lineWidth: 2, stroke: "#000" };
}
// 实现 getKeyPath 方法
getKeyPath(attributes) {
const { sourceNode, targetNode } = this;
const [x1, y1] = sourceNode.getPosition();
const [x2, y2] = targetNode.getPosition();
return [
["M", x1, y1],
["L", x2, y2],
];
}
}
register(ExtensionCategory.EDGE, "custom-polyline", ExtendBaseEdge);
const graph = new Graph({
container: "container",
data: {
nodes: [
{
id: "node-0",
style: {
x: 100,
y: 100,
ports: [{ key: "right", placement: [1, 0.5] }],
},
},
{
id: "node-1",
style: {
x: 250,
y: 200,
ports: [{ key: "left", placement: [0, 0.5] }],
},
},
],
edges: [{ source: "node-0", target: "node-1" }],
},
edge: {
type: "custom-polyline",
style: {
stroke: "#F6BD16",
},
},
behaviors: [
"drag-element",
{
key: "click-select",
type: "click-select",
trigger: ["control"],
multiple: true,
enable: (event) =>
event.targetType === "node" || event.targetType === "edge",
},
{
key: "brush-select",
type: "brush-select",
trigger: "control",
enableElements: ["node", "edge"],
},
],
});
graph.render();
Reproduction link / 复现链接
https://codesandbox.io/p/sandbox/eloquent-banach-j9nz2d
Steps to Reproduce the Bug or Issue / 重现步骤
- 拖拽节点
- 点击画布
G6 Version / G6 版本
🆕 5.x
OS / 操作系统
- macOS
- Windows
- Linux
- Others / 其他
Browser / 浏览器
- Chrome
- Edge
- Firefox
- Safari (Limited support / 有限支持)
- IE (Nonsupport / 不支持)
- Others / 其他