antvis / antvis/G6

[Bug]: create-edge时连接线发生偏移,不跟随鼠标,但连接节点后连接线正常;使用简单html示例也复现

Open
#7,618 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 / 问题描述




Document





const { Graph } = G6;

const data = {
nodes: [
{ id: "node-1", style: { x: 50, y: 50 } },
{ id: "node-2", style: { x: 150, y: 50 } },
{ id: "node-3", style: { x: 500, y: 50 } },
],
edges: [{ source: "node-1", target: "node-2" }],
};
const graph = new Graph({
container: "container",
autoFit: "view",
data,
node: {
style: {
size: 10,
},
},
behaviors: ["create-edge"],
});
graph.render();

### Reproduction link / 复现链接

_No response_

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

1、在vue2中使用后发现问题;尝试在简单html中检测,排除干扰后依旧出现该问题;
2、直接拖拽节点node-2到node-3,拖拽生成edge连接线后发现不跟随鼠标,发生偏移,但节点node-2和node-3连接后,生成的edge连接正常;
3、container左边或上方出现dom的情况下都会发生偏移;甚至html,body的padding都会导致偏移
4、当container铺满的时候生成的连接线不会发生偏移
5、怀疑生成edge计算以左上角顶点为基础???

### Version / 版本

🆕 5.x

### OS / 操作系统

- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [x] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Open the supplied standalone HTML example and inspect the create-edge behavior during a drag. Compare the connection-line position with the cursor when the container or page has left/top offsets and padding, then verify the final edge remains correct after connecting the nodes. Done means the temporary line follows the cursor in these offset layouts.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.