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

resetsix commented 2 months ago

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 / 重现步骤

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

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome, Firefox

Additional context / 补充说明

No response

Aarebecca commented 2 months ago

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

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

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

resetsix commented 2 months ago

应该是 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 进行偏移。

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

antvis / G6

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