antvis / antvis/G6

[Bug]: 在两个Html节点之间createEdge时,鼠标移到目标节点上,跟随鼠标的连线错乱,但是释放后连线能成功创建

Open
#7,619 3 comments 0 reactions 0 assignees View on GitHub
bug 🐛
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();

Image

### 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.