在鼠标移动时，'arc' edge 无法响应 edge:mouseenter edge:mousemove edge:mouseleave

[ZENKI-CS]

问题描述

  defaultEdge: {
    type: 'arc'  // 这个类型 edge 无法响应 edge:mouseenter edge:mousemove edge:mouseleave
  }

重现链接

无

重现步骤

G6 官网demo 地址： https://g6.antv.vision/zh/examples/tool/tooltip#tooltipPluginLocal

import G6 from '@antv/g6';
import insertCss from 'insert-css';

// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
insertCss(`
  .g6-component-tooltip {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0px 10px 24px 10px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
`);

const data = {
  nodes: [
    {
      id: '0',
      label: 'Has Tooltip - node0',
      x: 100,
      y: 100,
      description: 'This is node-0.',
      subdescription: 'This is subdescription of node-0.',
    },
    {
      id: '1',
      label: 'No Tooltip - node1',
      x: 250,
      y: 100,
      description: 'This is node-1.',
      subdescription: 'This is subdescription of node-1.',
    },
    {
      id: '2',
      label: 'Tooltip on Text - node2',
      x: 150,
      y: 310,
      description: 'This is node-2.',
      subdescription: 'This is subdescription of node-2.',
    },
    {
      id: '3',
      label: 'Tooltip on KeyShape - node-3',
      x: 320,
      y: 310,
      description: 'This is node-3.',
      subdescription: 'This is subdescription of node-3.',
    },
  ],
  edges: [
    {
      id: 'e0',
      source: '0',
      target: '1',
      description: 'This is edge from node 0 to node 1.',
    },
    {
      id: 'e1',
      source: '0',
      target: '2',
      description: 'This is edge from node 0 to node 2.',
    },
    {
      id: 'e2',
      source: '0',
      target: '3',
      description: 'This is edge from node 0 to node 3.',
    },
  ],
};
const tooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 10,
  // the types of items that allow the tooltip show up
  // 允许出现 tooltip 的 item 类型
  itemTypes: ['node', 'edge'],
  // custom the tooltip's content
  // 自定义 tooltip 内容
  getContent: (e) => {
    const outDiv = document.createElement('div');
    outDiv.style.width = 'fit-content';
    //outDiv.style.padding = '0px 0px 20px 0px';
    outDiv.innerHTML = `
      <h4>Custom Content</h4>
      <ul>
        <li>Type: ${e.item.getType()}</li>
      </ul>
      <ul>
        <li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
      </ul>`;
    return outDiv;
  },
  shouldBegin: (e) => {
    console.log(e.target);
    let res = true;
    switch (e.item.getModel().id) {
      case '1':
        res = false;
        break;
      case '2':
        if (e.target.get('name') === 'text-shape') res = true;
        else res = false;
        break;
      case '3':
        if (e.target.get('name') !== 'text-shape') res = true;
        else res = false;
        break;
      default:
        res = true;
        break;
    }
    return res;
  },
});

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  linkCenter: true,
  plugins: [tooltip],
  modes: {
    default: ['drag-node'],
  },
  defaultNode: {
    size: [80, 40],
    type: 'rect',
  },
  defaultEdge: {
    type: 'arc'  // 这个类型 edge 无法响应 edge:mouseenter edge:mousemove edge:mouseleave
  }
});
graph.data(data);
graph.render();

graph.on('node:mouseenter', (e) => {
  graph.setItemState(e.item, 'active', true);
});
graph.on('node:mouseleave', (e) => {
  graph.setItemState(e.item, 'active', false);
});
graph.on('edge:mouseenter', (e) => {
  graph.setItemState(e.item, 'active', true);
});
graph.on('edge:mouseleave', (e) => {
  graph.setItemState(e.item, 'active', false);
});

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };

预期行为

曲线 能像 直线一样 响应 edge:mouseenter edge:mousemove edge:mouseleave，不然 Tooltip 没法使用

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.6.18 ... ]

屏幕截图或视频（可选）

补充说明（可选）

No response

[Yanyan-Wang]

arc 类型的边事件有些问题，可以用 quadratic 来代替

[Yanyan-Wang]

非常抱歉，当前版本(3.x、4.x)依赖的底层渲染引擎暂时不会考虑 SVG 问题的修复，渲染引擎目前正在大升级，我们也将在新版本接入新渲染引擎，届时应当可以解决 SVG 各种 bug