[Bug]: @antv/g-plugin-html-renderer 2.2.1有Bug，导致React渲染的节点，数据变化之后界面不更新

[gaohuixx]

我是用g6和@antv/g6-extension-react来使用react渲染节点，但是states变化之后，react重新渲染了，但是界面没有变化
通过打断点，一步步跟，发现是@antv/g-plugin-html-renderer里面的handleBoundsChanged导致的
@antv/g-plugin-html-renderer 2.1.27 没问题
@antv/g-plugin-html-renderer 2.2.1有问题

[github-actions]

Based on the provided bug report, here's the analysis:

Title: [Bug]: @antv/g-plugin-html-renderer 2.2.1有Bug，导致React渲染的节点，数据变化之后界面不更新

Body:
我是用x6和@antv/g6-extension-react来使用react渲染节点，但是states变化之后，react重新渲染了，但是界面没有变化
通过打断点，一步步跟，发现是@antv/g-plugin-html-renderer里面的handleBoundsChanged导致的
@antv/g-plugin-html-renderer 2.1.27 没问题
@antv/g-plugin-html-renderer 2.2.1有问题

Analysis:

• The title clearly states the issue with the specific version of the plugin.
• The body provides a description of the issue and

[github-actions]

@gaohuixx Hello! Here is an automated response to your question:

---

👋 Thank you for your report!

Issue Summary

You've described a regression in @antv/g-plugin-html-renderer (v2.2.1) affecting React-based node rendering in x6 via @antv/g6-extension-react:

• Symptoms: After states change and React re-renders the node, the visual update does not appear.
• Diagnosis: Debugging points to handleBoundsChanged in @antv/g-plugin-html-renderer as the culprit.
• Version tested:
  • 2.1.27: ✅ Works as expected
  • 2.2.1: ❌ UI not updating

---

🧩 Analysis

1. Plugin Version Differences

Recent changes between 2.1.27 and 2.2.1 in @antv/g-plugin-html-renderer may have modified how HTML elements' bounds are tracked and updated, potentially impacting synchronization with React's virtual DOM. See release notes or plugin changelog for details.

2. handleBoundsChanged & React State Updates

• handleBoundsChanged is responsible for recalculating and applying layout updates to HTML nodes.
• If this logic is altered, the mapping between React's internal state and the actual DOM may break, causing rendered nodes not to reflect state changes—even though React's render cycle runs.
• This can happen if bounds updates are throttled, cached incorrectly, or DOM updates are suppressed in certain scenarios.

3. Recommended Approach for React Node Updates

To ensure React-rendered nodes update reliably:

• Force Re-render: When node data changes, ensure the underlying G node is replaced or its style is updated so the plugin's lifecycle methods (like handleBoundsChanged) are invoked.
  • Use APIs such as replaceChild or appendChild to swap out the affected node.
  • After updating data, consider triggering manual bounds recalculation if needed.
• Check Integration: Ensure your x6 + g6-extension-react setup matches documented patterns for plugin registration and node updates.
• Version Pinning: As a workaround, you may want to temporarily pin to 2.1.27 until the issue in 2.2.1 is resolved.

---

🛠️ Next Steps

1. Share a minimal reproduction if possible.
2. Test with 2.1.27 to confirm the regression.
3. Consider using node replace APIs (replaceChild, etc.) when updating node data to force a full re-render.
4. Check for fixes or related issues in AntV's repo.
5. Monitor for plugin updates that address this issue.

---

📢 Maintainer Note

This appears to be a regression in @antv/g-plugin-html-renderer. Please review recent changes to handleBoundsChanged and ensure React node updates propagate correctly. A changelog or relevant PR review may expedite the fix.

---

Thanks for your detailed report! If you have a code sample, please share it to help reproduce and resolve this issue.

---

This is an automated response generated by AI. If you have any questions, our team will follow up as soon as possible.

[github-actions]

@gaohuixx Hello! Here is an automated response to your question:

---

👋 Hi! Thank you for reporting this issue with @antv/g-plugin-html-renderer v2.2.1

Issue Summary

You are using G6 with @antv/g6-extension-react to render React nodes. When the node states change, React re-renders, but the UI does not update. You traced it to the handleBoundsChanged function in @antv/g-plugin-html-renderer.

• v2.1.27: Works correctly
• v2.2.1: UI does not update after React state changes

---

🕵️‍♂️ Analysis

1. React Node Rendering in G6

• @antv/g6-extension-react relies on G's scene graph methods (appendChild, replaceChild, etc.) to update nodes when React state changes.
• Normally, a React state update triggers a re-render, which should replace the DOM node visually.

2. Changes in @antv/g-plugin-html-renderer (2.1.27 → 2.2.1)

• Recent updates may have changed how node bounds and updates are handled internally.
• The handleBoundsChanged function is responsible for recalculating node positions and possibly triggering re-renders.
• If handleBoundsChanged fails to correctly detect changes, the renderer may skip updating the DOM, causing the UI to remain stale.

3. Suspected Root Cause

• In v2.2.1, handleBoundsChanged may not be correctly triggering DOM updates after React renders.
• This could be due to:
  • Incorrect bounds calculation or caching
  • Missed event or state propagation
  • A difference in update logic between 2.1.27 and 2.2.1

---

🛠️ Recommended Actions

1. Temporary Workaround

   • If possible, revert to @antv/g-plugin-html-renderer v2.1.27 until this is resolved.

2. Further Debugging

   • Please provide a minimal reproduction repo or code snippet showing the issue.
   • Confirm your exact G6 and G plugin versions for deeper compatibility review.

3. Developer Steps

   • We will compare the handleBoundsChanged implementation between v2.1.27 and v2.2.1 to identify logic changes.
   • If a regression is found, we will prioritize a patch.

---

📌 Tracking

• Issue acknowledged and flagged for investigation.
• We will update here once we have more details or a fix.

---

Thank you for your detailed report!

If you have additional information (logs, minimal demo), please reply here to help us expedite the fix.

---

---

This is an automated response generated by AI. If you have any questions, our team will follow up as soon as possible.

[wang1212]

跟进看看，可能是近期做性能优化时对内部代码重构导致的问题

---

npm 版本已经回退了，现在最新的是 2.1.27

https://www.npmjs.com/package/@antv/g-plugin-html-renderer?activeTab=versions

[wang1212]

@gaohuixx 能帮忙提供下更具体的信息吗？两个版本中 handleBoundsChanged 差异是什么？是数据更新后不触发吗

[wang1212]

这个问题应该已经在最新版本中修复了