antvis/G6

[Bug]: Custom edges obscure nodes #6692

uioonm posted onGitHub

Describe the bug / 问题描述

1735899475047 参考文档的自定义边 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三个事件后,拖拽节点再点击画板会导致边的盖住节点 1735899627242

相关代码

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();

https://codesandbox.io/p/sandbox/eloquent-banach-j9nz2d

Steps to Reproduce the Bug or Issue / 重现步骤

  1. 拖拽节点
  2. 点击画布

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

给边加一个zIndex就解决了 image

posted by ChenKun1997 4 months ago

Fund this Issue

$0.00
Funded

Pull requests