type为quadratic类型的边，当鼠标放在边的两端时无法触发鼠标事件 #4970

问题描述

当quadratic类型的边的长度超过一定值时，边的两端会出现一部分中空区域，无法触发边的交互事件。 代码：

import G6 from '@antv/g6';

const data = { nodes: [ { id: '0', x: 0, y: 100, }, { id: '1', x: 1200, y: 500, }, ], edges: [ // Built-in polyline { source: '0', target: '1', }, ], };

const width = document.getElementById('container').scrollWidth; const height = document.getElementById('container').scrollHeight || 500; const graph = new G6.Graph({ container: 'container', width, height, fitCenter: true, linkCenter: true, modes: { default: ['zoom-canvas', 'drag-canvas'], }, defaultEdge: { type: 'quadratic', style: { lineWidth: 3, }, }, edgeStateStyles: { active: { lineWidth: 3, }, selected: { lineWidth: 3, }, }, });

graph.data(data); graph.render();

graph.on('edge:mouseenter', (evt) => { const { item } = evt; graph.setItemState(item, 'active', true); });

graph.on('edge:mouseleave', (evt) => { const { item } = evt; graph.setItemState(item, 'active', false); });

graph.on('edge:click', (evt) => { const { item } = evt; graph.setItemState(item, 'selected', true); }); graph.on('canvas:click', (evt) => { graph.getEdges().forEach((edge) => { graph.clearItemStates(edge); }); });

重现链接

https://stackblitz.com/edit/react-6hrru8?file=index.js

重现步骤

1. 进入页面
2. 使用鼠标滚轮放大到最大
3. 将鼠标移入边的最末端
4. 会发现无法触发边的hover或者select

预期行为

希望整条边都能触发边的交互事件，但是两端出现了不能交互的一部分边

平台

• 操作系统: [Windows.]
• 网页浏览器: [Google Chrome]
• G6 版本: [4.8.22 ]

屏幕截图或视频（可选）

https://github.com/antvis/G6/assets/53998318/f07ef853-d81c-4fb8-99d6-16d45fbc2da7

补充说明（可选）

No response