[Bug]: create-edge.ts mode.translateNodeTo该方法参数应该转化为canvas坐标。

[lf1991]

Describe the bug / 问题描述

这里应该将浏览器坐标转换为canvas坐标

   model.translateNodeTo(ASSIST_NODE_ID,[event.client.x,event.client.y]);
   
  //fixed
   const [cx,cy] =graph.getCanvasByClient(,[event.client.x,event.client.y]);
   model.translateNodeTo(ASSIST_NODE_ID,[cx,cy]);

Reproduction link / 复现链接

No response

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

No response

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@lf1991 您好！以下是关于您问题的自动回复：

感谢反馈！您提出的问题很有价值，下面是针对您的 issue 的详细回复。

---

问题分析

您指出：

在 create-edge.ts 文件中，model.translateNodeTo 方法的参数应为 canvas 坐标，但当前传入的是浏览器（client）坐标。
正确的做法应该是将 client 坐标转换为 canvas 坐标后再传递。

您的修正如下：

const [cx, cy] = graph.getCanvasByClient([event.client.x, event.client.y]);
model.translateNodeTo(ASSIST_NODE_ID, [cx, cy]);

---

官方推荐坐标转换方法

G6 提供专用的坐标转换 API，适用于不同坐标体系：

• Client => Canvas
  graph.getCanvasByClient([clientX, clientY])
  将浏览器坐标（如鼠标事件）转换为 G6 画布坐标。
• Viewport => Canvas
  graph.getCanvasByViewport([viewportX, viewportY])
  针对已缩放/平移后的画布视口坐标。

示例（推荐用法）：

const [canvasX, canvasY] = graph.getCanvasByClient([event.client.x, event.client.y]);
model.translateNodeTo(ASSIST_NODE_ID, [canvasX, canvasY]);

这样，节点将准确移动到鼠标指向的画布位置，无论画布如何缩放或平移。

---

参考官方文档

• 坐标转换 API 文档（中英文）
• 常用方法包括：
  • getCanvasByClient(point: Point): Point
  • getCanvasByViewport(point: Point): Point
  • getClientByCanvas(point: Point): Point
  • getViewportByCanvas(point: Point): Point

---

结论与建议

您的修正方法完全正确，推荐将坐标转换逻辑统一处理为：

• 所有与节点/边拖拽、点击相关的交互，都应先将事件坐标转换为 canvas 坐标后再进行操作。

如果后续遇到坐标不准、节点漂移等问题，优先检查是否坐标体系统一。

如需进一步协助，请补充 G6 版本号以及相关复现代码，便于定位问题。

---

G6 团队感谢您的建议！欢迎持续反馈与交流。

---

参考代码片段：

const [canvasX, canvasY] = graph.getCanvasByClient([event.client.x, event.client.y]);
model.translateNodeTo(ASSIST_NODE_ID, [canvasX, canvasY]);

---

如果还有其他 G6 使用疑问，欢迎继续提问！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[github-actions]

@lf1991 您好！以下是关于您问题的自动回复：

Issue Analysis

问题描述
您反馈在 create-edge.ts 的 mode.translateNodeTo 方法中，传入的是浏览器的 client 坐标（event.client.x, event.client.y），但实际上该方法需要传入的是 canvas 坐标。您也给出了修复方案，使用 graph.getCanvasByClient([event.client.x, event.client.y]) 进行坐标转换后再调用 translateNodeTo。

---

专业回复

感谢您的反馈和修正建议！
您的理解是完全正确的：G6 的节点位置应始终以 canvas 坐标系为准，否则在有缩放、拖拽等视图变换时会导致节点位置错乱。

正确的坐标转换流程

假如监听的是浏览器原生事件（如 mousemove、click），得到的是 client 坐标（相对于浏览器窗口左上角）。此时需要转换为 canvas 坐标，推荐如下做法：

// 获取 client 坐标
const clientPoint = [event.clientX, event.clientY];

// 转换为 canvas 坐标
const [canvasX, canvasY] = graph.getCanvasByClient(clientPoint);

// 用于 translateNodeTo
model.translateNodeTo(ASSIST_NODE_ID, [canvasX, canvasY]);

相关 API

• graph.getCanvasByClient(point: [x, y]): 将浏览器 client 坐标转换为 canvas 坐标。
• translateNodeTo(nodeId, [canvasX, canvasY]): 将节点移动到指定的 canvas 坐标。

参考文档：坐标系转换 API

---

常见问题提示

• 不要直接用 client/viewport 坐标操作节点/元素，应始终转换为 canvas 坐标。
• 如果用的是 G6 的事件（如 canvas:click），事件对象中直接有 event.canvas 坐标，无需转换。
• 其它常见坐标转换 API 还有：
  • getViewportByCanvas(point)
  • getCanvasByViewport(point)
  • getClientByCanvas(point)

---

推荐修复

请确保相关代码改为如下结构：

const [canvasX, canvasY] = graph.getCanvasByClient([event.clientX, event.clientY]);
model.translateNodeTo(ASSIST_NODE_ID, [canvasX, canvasY]);

这样无论视图如何缩放、平移，节点都能准确移动到目标位置。

---

结论

您的建议是正确且必要的，感谢您的细致反馈！
如果有进一步的疑问或其它坐标转换相关问题，欢迎继续反馈。

---

G6 团队敬上

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[github-actions]

@lf1991 您好！以下是关于您问题的自动回复：

感谢您的反馈和详细描述！您的建议非常准确，对于 G6 坐标系统的理解也很到位。下面是针对您的 issue 的专业回复和建议：

---

问题分析

在 G6 中，浏览器事件（如 mouse、pointer）返回的坐标通常是浏览器的 client 坐标（如 event.clientX, event.clientY），而节点的移动和定位操作（如 model.translateNodeTo）通常需要 canvas 坐标。

直接将浏览器坐标用于 canvas 操作会导致位置偏移，尤其是在画布缩放、平移、容器非原点等情况下。

---

推荐修复方法

您给出的修复方案是正确的：

// 错误写法：直接使用浏览器坐标
model.translateNodeTo(ASSIST_NODE_ID, [event.client.x, event.client.y]);

// 正确写法：先转换为 canvas 坐标
const [cx, cy] = graph.getCanvasByClient([event.client.x, event.client.y]);
model.translateNodeTo(ASSIST_NODE_ID, [cx, cy]);

说明

• graph.getCanvasByClient(point: [x, y]):
  将浏览器 client 坐标转换为 G6 的 canvas 坐标，用于节点、边等元素的定位。
• 如需支持触控或其他事件，也建议统一走此转换逻辑。

---

相关文档

• G6 坐标系转换 API
• 主要常用方法：
  • getCanvasByClient(point)
  • getClientByCanvas(point)
  • getViewportByCanvas(point)
  • getCanvasByViewport(point)

---

建议

1. 统一处理事件坐标：所有涉及画布元素定位的操作，建议都先转换为 canvas 坐标。
2. 兼容缩放/平移场景：转换能确保在缩放、平移等场景下元素位置正确。
3. 代码可维护性：建议封装转换逻辑，便于未来维护和扩展。

---

示例代码（推荐）

graph.on('canvas:click', (event) => {
  // 将浏览器坐标转换为 canvas 坐标
  const [canvasX, canvasY] = graph.getCanvasByClient([event.client.x, event.client.y]);
  model.translateNodeTo(ASSIST_NODE_ID, [canvasX, canvasY]);
});

---

如有进一步问题，欢迎继续补充说明或提供复现 demo，我们会持续跟进优化！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[lf1991]

V5.0.51 发布版本该问题依然存在，请修复。

[github-actions]

@lf1991 您好！以下是关于您问题的自动回复：

感谢您的反馈！

您的问题分析非常准确：在 G6 的 create-edge.ts 中，调用 model.translateNodeTo 时，确实应该确保传入的坐标是 canvas 坐标系统下的值。直接使用浏览器的 client 坐标（如 event.client.x, event.client.y）会导致节点无法正确定位，尤其在画布发生缩放或平移后。

正确的坐标转换方法

G6 提供了专用的坐标转换 API，可将浏览器坐标转换为 canvas 坐标。推荐使用 graph.getCanvasByClient 方法：

// 假设 event 是 PointerEvent 类型
const [cx, cy] = graph.getCanvasByClient([event.clientX, event.clientY]);
model.translateNodeTo(ASSIST_NODE_ID, [cx, cy]);

注意：方法参数应为 [event.clientX, event.clientY]，不是 event.client.x 或 event.client.y。

相关参考

• 坐标系统转换文档
• API: getCanvasByClient

总结建议

1. 始终保证 Node/Edge 操作使用 canvas 坐标，避免直接用 client 或 viewport 坐标。
2. 如需从鼠标事件获取位置，推荐流程：
   • 取 event.clientX, event.clientY
   • 用 graph.getCanvasByClient([x, y]) 转换
   • 传入目标方法

如果还有相关坐标转换或事件处理问题，欢迎随时补充更多细节！我们会持续优化文档和 API 示例，感谢您的宝贵建议。

---

G6 团队敬上

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[github-actions]

@lf1991 您好！以下是关于您问题的自动回复：

感谢您的反馈和详细描述！

问题分析

您提出在 create-edge.ts 的 mode.translateNodeTo 方法中，参数应该从 浏览器坐标（client coordinates） 转换为 canvas 坐标，而不是直接使用 event.client.x, event.client.y。
这是正确的，因为 G6 的图形渲染和交互逻辑都以 canvas 坐标为准。如果直接传入浏览器坐标，会导致节点或边的位置不准确，尤其是在画布有缩放或平移（pan/zoom）时，影响更明显。

标准做法

G6 提供了 graph.getCanvasByClient 方法，专门用于将浏览器 client 坐标转换为 canvas 坐标：

const [cx, cy] = graph.getCanvasByClient([event.client.x, event.client.y]);
model.translateNodeTo(ASSIST_NODE_ID, [cx, cy]);

您的修复建议是完全正确的，推荐所有涉及坐标转换的场景都采用此方案。

参考文档

• Graph.getCanvasByClient API
• G6 坐标系转换说明

建议

1. 确认所有坐标转换：检查项目里所有涉及鼠标事件的坐标传递，确保都已转换为 canvas 坐标。

2. 兼容缩放和拖拽场景：如有缩放（zoom）或拖拽（pan），务必用官方转换方法。

3. 代码示例：

   // 鼠标事件中，获取 canvas 坐标
   graph.on('mousedown', (event) => {
     const [cx, cy] = graph.getCanvasByClient([event.client.x, event.client.y]);
     model.translateNodeTo(ASSIST_NODE_ID, [cx, cy]);
   });

结论

您的修复方案是最佳实践，建议合入。感谢您的细致反馈，有助于提升 G6 的易用性和开发体验！

---

如需进一步帮助，请补充您的 G6 版本号或提供相关代码片段，感谢支持！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。