Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When using a custom React node, the end position of the created edge is not consistent with the mouse position #6351

Open
resetsix opened this issue Sep 18, 2024 · 2 comments
Labels

Comments

@resetsix
Copy link
Contributor

resetsix commented Sep 18, 2024

Describe the bug / 问题描述

描述背景

AntV G6 使用自定义 React 节点情况下,我发现使用 create-edge behavior 创建边时,边的末端位置与鼠标实际位置存在偏移。预期行为是边的末端应该与鼠标位置保持一致。

预期行为

边的末端位置应与鼠标位置保持一致

实际行为

边的末端位置与鼠标实际位置存在偏移。

图片

Reproduction link / 重现链接

https://codesandbox.io/p/sandbox/antv-g6-customnode-demo-f26529?file=%2Fsrc%2FReactNodeDemo.tsx%3A92%2C19

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

  1. 创建一个使用自定义 React 节点的图
  2. 添加 create-edge behavior
  3. 尝试从一个节点拖拽创建新边到另一个节点

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome, Firefox

Additional context / 补充说明

No response

@github-actions github-actions bot changed the title 使用自定义 React 节点时,创建边的末端位置与鼠标位置不一致 When using a custom React node, the end position of the created edge is not consistent with the mouse position Sep 18, 2024
@Aarebecca
Copy link
Contributor

Aarebecca commented Sep 18, 2024

应该是 React 节点的原生节点不一致导致的,你可以添加下面的节点属性解决:

style: {
  size: [240, 100],
  dx: -120,
  dy: -50,
  component: (data: any) => <Demo data={data} />,
},

其中 dx/dy 的值分别是 width/height 的一半取负

@resetsix
Copy link
Contributor Author

应该是 React 节点的原生节点不一致导致的,你可以添加下面的节点属性解决:

style: {
  size: [240, 100],
  dx: -120,
  dy: -50,
  component: (data: any) => <Demo data={data} />,
},

其中 dx/dy 的值分别是 width/height 的一半取负

预期效果的确有了。

我翻了下文档没有找到关于dx/dy的介绍,我去查了下是偏移量的意思,正数x右偏移y下偏移,负数x左偏移y上偏移。

另外遇到的一个问题是:有时候偏移量不一定是width/height 的一半值。我在本地遇到 y 坐标是准确的,只需要 x 进行偏移。

所以还是需要解决根本问题。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants