Bug: Incorrect Rendering of Graph Layout on Zoom

[jm5077151-hub]

<!--
Please provide a clear and concise description of what the bug is. Include
screenshots if needed. Also, make sure you have searched the issues list to
see if there are any duplicate reports, and upgrade to the latest version to
test and see if the issue has been fixed.

请提供清晰简洁的错误描述。如有必要，请附上屏幕截图。此外，请确保您已搜索问题列表以查看是否有
任何重复的报告，并升级到最新版本以测试并查看问题是否已被修复。
-->

• OS: [e.g. win10, iOS8.1]
• Browser [e.g. chrome, safari]
• Version [e.g. @antv/g-lite@6.1.10]

Steps To Reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Link to code example:

The current behavior

The expected behavior

Futhermore

[github-actions]

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

Title: Bug: Incorrect Rendering of Graph Layout on Zoom

Body:

• Environment Details: Missing
• Steps to Reproduce: Missing
• Expected and Actual Behavior: Missing

Response: "Please provide the following details to help us reproduce and fix the issue:

• Operating System (e.g., Windows 10, iOS 8.1)
• Browser (e.g., Chrome, Safari)
• Version (e.g., @antv/g-lite@6.1.10)
• Steps to reproduce the problem
• The expected behavior
• The actual behavior

This information will help us understand and resolve the issue more efficiently."

[github-actions]

@jm5077151-hub Hello! Here is an automated response to your question:

Thank you for reporting the issue regarding incorrect graph layout rendering when zooming. To help resolve this, please review the following recommendations and troubleshooting steps:

---

1. Ensuring Correct Graph Layout Rendering on Zoom

• Canvas & Layout: Make sure your graph rendering logic correctly redraws nodes and edges based on the latest camera zoom and pan values. For reference, see how WebGLRenderer and camera controls are handled.
• Camera Transform: When zooming, update the camera’s zoom and recalculate the positions of all graph elements. If you use setZoomByViewportPoint, this will ensure scaling around the mouse pointer for a more intuitive experience.

const { x, y } = canvas.client2Viewport({ x: e.clientX, y: e.clientY });
camera.setZoomByViewportPoint(zoom, [x, y]);

---

2. Troubleshooting Zoom Interaction Issues

• Event Handling: Attach a wheel event to your canvas element and adjust the camera’s zoom. Make sure to prevent default browser scroll.
• Pan Support: If you use Hammer.js or similar, ensure pan gestures update the camera position and all elements are rerendered.

canvas.getContextService().getDomElement().addEventListener('wheel', (e) => {
  e.preventDefault();
  // Update zoom logic here
});

• Debugging: Log bounding boxes and transforms after zoom/pan to verify correct element placement.

---

3. Visual Styling & Browser Compatibility

• CSS Styling: Check global and element-specific CSS rules for conflicts. For example, ensure the canvas and its container have appropriate sizing and positioning.
• Default Styles: Confirm default G styles (fontFamily, lineWidth, etc.) are as expected and not overridden unexpectedly.

---

4. Verifying with Latest Version

• Upgrade: Please confirm you are using the latest version of @antv/g-lite and related packages. Many rendering and interaction bugs are fixed in recent releases.
• Dependencies: Check your package.json and lock files to ensure dependencies are up to date.

"dependencies": {
  "@antv/g-lite": "workspace:*"
}

• Test Case: If possible, provide a minimal reproducible code example (e.g., CodeSandbox) and screenshots to help us diagnose further.

---

Next Steps

1. Upgrade all G6-related packages to the latest version.
2. Review and update your zoom and pan event handlers as shown above.
3. Check CSS and element rendering logic for browser inconsistencies.
4. Share a minimal code example and screenshots to help us reproduce the issue.

If the problem persists after these steps, please provide:

• Your OS, browser, and package versions
• Steps to reproduce
• Minimal code sample or repository link
• Screenshots

---

We appreciate your feedback and are committed to resolving your issue quickly. Thank you for your cooperation!

---

中文说明：
请确保升级到最新版本，并提供复现代码示例和屏幕截图。我们将尽快协助您解决问题。

---

References:

• AntV G Documentation
• Zoom & Layout Examples

---

If you have further questions, feel free to ask.

---

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