[Bug]: 在两个Html节点之间createEdge时,鼠标移到目标节点上,跟随鼠标的连线错乱,但是释放后连线能成功创建
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
在两个Html节点之间createEdge时,鼠标移到目标节点上,跟随鼠标的连线错乱,但是释放后连线能成功创建
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
使用官方例子的代码就可以重现问题:
import { Graph } from '@antv/g6';
const ICON_MAP = {
error: '❌',
overload: '⚡',
running: '✅',
};
const COLOR_MAP = {
error: '#f5222d',
overload: '#faad14',
running: '#52c41a',
};
const graph = new Graph({
container: 'container',
data: {
nodes: [
{ id: 'node-1', data: { location: 'East', status: 'error', ip: '192.168.1.2' } },
{ id: 'node-3', data: { location: 'South', status: 'running', ip: '192.168.1.4' } },
],
},
node: {
type: 'html',
style: {
size: [240, 80],
dx: -120,
dy: -40,
innerHTML: (d) => {
const {
data: { location, status, ip },
} = d;
const color = COLOR_MAP[status];
return `
${location} Node
status: ${status} ${ICON_MAP[status]}
${ip}
},
},
},
layout: {
type: 'grid',
},
behaviors: ['create-edge'],
});
graph.render();
### Version / 版本
🆕 5.x
### OS / 操作系统
- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by running the supplied Graph example with HTML nodes and the create-edge behavior in Chrome on Windows. Inspect how the edge preview tracks the pointer when it enters the target HTML node; done means the preview line stays correct and the edge is still created on release.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100