[Bug]: 安装最新依赖后 HTML 节点位置渲染错误

[baozjj]

Describe the bug / 问题描述

复现地址：https://stackblitz.com/edit/react-t3n45kc7-y96vuipg?file=index.js

图例：

临时方案：

在package.json中制定版本后可正确渲染，应该是@antv/g-lite升级到2.5.0的问题：
"overrides": {
"@antv/g-lite": "2.3.2",
"@antv/g-canvas": "2.0.48"
}

Reproduction link / 复现链接

https://stackblitz.com/edit/react-t3n45kc7-y96vuipg?file=index.js

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

目前只有在节点类型为HTML出现

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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

[github-actions]

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

感谢反馈！针对您在 G6 5.x 升级最新依赖后出现的 HTML 节点位置渲染错误问题，结合您的复现链接和临时解决方案，下面为您详细分析原因并提供推荐修复方法。

---

1️⃣ 问题分析

• 核心原因：@antv/g-lite 在 2.5.0 版本后，内部渲染机制有部分变动，可能影响 HTML 节点的定位和布局，尤其是在使用 grid 等布局时，节点坐标计算方式发生了调整，导致位置异常。
• 表现：HTML 节点渲染偏移或错位，回退到旧版本依赖（如 2.3.2）则恢复正常。
• 影响范围：主要影响自定义 HTML 节点和多渲染器（如 Canvas/SVG/WebGL）场景。

---

2️⃣ 推荐修复方案

A. 临时解决方案

您目前采用了 overrides 锁定 @antv/g-lite 版本至 2.3.2，这可以短期规避问题：

"overrides": {
  "@antv/g-lite": "2.3.2",
  "@antv/g-canvas": "2.0.48"
}

B. 正确渲染 HTML 节点的建议

升级后如需兼容新版本，建议检查以下配置及代码：

1. 确认 HTML 节点 size/offset 设置
   请确保节点 style 中 size, dx, dy 等参数设置合理。例如：

   node: {
     type: 'html',
     style: {
       size: [240, 80],
       dx: -120,
       dy: -40,
       // innerHTML...
     },
   },

2. 布局插件配置
   检查 layout 配置，尤其是 grid 布局下，建议明确指定 cols、rows 或使用 position 方法自定义节点坐标：

   layout: {
     type: 'grid',
     cols: 3,
     rows: 1,
     // 可选：position: (node) => { /* 指定节点行列 */ }
   }

3. 升级依赖后如仍异常

   • 建议升级 G6 及所有相关依赖到最新版本（包括 @antv/g-lite, @antv/g-canvas, @antv/g-svg 等），并清理 node_modules 重新安装。
   • 检查控制台是否有警告或错误信息，便于定位具体原因。

---

3️⃣ 推荐 Workaround

如升级后问题仍未解决，可采用如下临时措施：

• 锁定旧依赖版本（如您已操作）

• 或 手动指定节点坐标（绕开自动布局）：

  data: {
    nodes: [
      { id: 'node-1', x: 100, y: 100 },
      { id: 'node-2', x: 400, y: 100 },
      // ...
    ]
  }

• 或 在 layout.position 方法中指定节点行列，参考：

  layout: {
    type: 'grid',
    position: (node) => {
      if (node.id === 'node-1') return { row: 0, col: 0 }
      // 其它节点
    }
  }

---

4️⃣ 后续建议

• 建议关注 G6 / g-lite 发布说明，后续版本可能会修复 HTML 节点定位的兼容性问题。
• 如需进一步排查，建议提供详细的节点配置代码或控制台报错信息，以便社区更好协助。

---

🔗 参考文档

• G6 HTML 节点官方文档
• G6 grid 布局用法
• 多渲染器支持

---

如有进一步问题，欢迎随时补充！

---

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

[github-actions]

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

您好，感谢反馈 HTML 节点位置渲染错误的问题！

---

问题分析

根据您的描述和复现链接，在升级到 @antv/g-lite@2.5.0 后，G6 的 HTML 节点渲染出现了位置偏移或布局异常，而锁定到 @antv/g-lite@2.3.2 则正常。

这类问题通常源于 依赖底层实现变更，比如坐标系转换、节点挂载逻辑或渲染容器的 CSS 变化。G6 的 HTML 节点本质上是由 G-Lite 在画布内管理真实 DOM，当 G-Lite 的渲染机制升级后，旧版 G6 的坐标映射可能出现不兼容。

---

临时解决方案

如您所述，可通过 package.json overrides 强制指定旧版本依赖：

"overrides": {
  "@antv/g-lite": "2.3.2",
  "@antv/g-canvas": "2.0.48"
}

这种做法可在短期内保障项目正常运行，但不建议长期依赖旧版本，后续升级可能触发其它兼容性问题。

---

推荐排查与修复方式

1. 确认 G6 及所有相关依赖为最新版本
   建议同时升级 G6、G-Lite、G-Canvas 等，保持依赖一致：

   npm install @antv/g6@latest @antv/g-lite@latest @antv/g-canvas@latest

2. 核查 HTML 节点配置
   对照 官方文档 示例，确保节点 style.size、dx、dy、innerHTML 参数设置合理。
   常见坐标问题多与 dx/dy 偏移有关，可尝试去除或调整其值：

   node: {
     type: 'html',
     style: {
       size: [240, 80],
       // dx: -120, // 可尝试注释或微调
       // dy: -40,
       innerHTML: ...
     }
   }

3. 检查画布容器及父元素 CSS
   HTML 节点依赖容器定位，父级元素需有 position: relative 或 absolute，避免受外部样式影响。

4. 查看浏览器控制台报错
   若有报错信息，有助于定位问题（如 DOM 挂载、坐标计算等）。

---

下一步建议

• 如果项目允许，建议升级到 G6 和 G-Lite 的最新版本，并逐步调整节点参数以适配新版渲染逻辑。
• 若仍有 bug，建议提供最小可复现代码片段 或详细报错信息，我们将协助定位根因。
• 也欢迎在 G6 官方讨论区 反馈此兼容性问题，开发团队会做进一步跟进。

---

参考官方 HTML 节点配置示例

请参考如下标准写法：

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  data: { nodes: [ /* ... */ ] },
  node: {
    type: 'html',
    style: {
      size: [240, 80],
      innerHTML: (d) => `...`, // HTML 字符串
    }
  },
  layout: { type: 'grid' },
  behaviors: ['drag-element', 'zoom-canvas'],
});

graph.render();

具体 innerHTML 模板可参考 官方文档。

---

如果后续还有 AntV 相关问题，欢迎随时提问！

如需进一步排查，请提供更新后的代码和依赖版本号，我们会持续关注您的反馈。

---

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

[github-actions]

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

您好，感谢反馈关于 HTML 节点位置渲染错误的问题！

---

问题分析

根据您的描述与复现链接，问题出现在升级到 @antv/g-lite@2.5.0 后，G6 的 HTML 节点渲染位置出现异常。将 @antv/g-lite 降级到 2.3.2 可恢复正常，说明新版本的内部布局或坐标计算逻辑可能发生了变动，影响了 HTML 节点的定位。

---

临时解决方案

正如您所述，锁定依赖版本可临时规避该问题：

"overrides": {
  "@antv/g-lite": "2.3.2",
  "@antv/g-canvas": "2.0.48"
}

如需快速恢复生产环境，请继续使用上述方式。

---

建议排查方向

1. 确认 G6 及相关依赖版本一致性

   • 请确保 G6 及其依赖（如 @antv/g-lite, @antv/g-canvas）无版本冲突，且均为 5.x 系列。
   • 检查 node_modules 是否有多版本残留。

2. 对比配置结构

   • 请参考官方 HTML 节点配置示例，确保 size, dx, dy 等属性设置合理，innerHTML 渲染内容无嵌套异常。

3. 查看浏览器控制台报错

   • 有些布局问题会在控制台输出警告或错误，便于定位具体原因。

4. 升级/回退其他相关依赖

   • 若涉及 @antv/g-canvas、@antv/g-svg 等渲染器，可尝试同步升级或回退，观察渲染是否恢复。

---

下一步建议

• 建议提交最小可复现 Demo 给 G6 团队，并标明受影响的具体依赖版本（如 @antv/g-lite@2.5.0）。
• 持续关注 G6 及相关依赖的发布说明，后续版本可能会修复此兼容性问题。

---

参考官方文档

• G6 HTML 节点使用文档
• G6 v5.x 升级说明

---

如果需要进一步协助，请补充以下信息：

• 具体代码片段（重点是 node 配置部分）
• 是否使用了自定义布局或渲染器
• 控制台是否有报错或警告信息

---

感谢您的详细反馈，您的问题已被记录。后续如有官方修复或 workaround，会第一时间在此 issue 跟进。
如需更深层次定位，请随时补充更多信息！

---

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