Bug: Incorrect Rendering of Graph Layout on Zoom #2231

Activity

1. jm5077151-hub

   added

   bug

   on Apr 9, 2026
2. github-actions commented on Apr 9, 2026

   

   github-actionsbot

   on Apr 9, 2026 – with GitHub Actions

   Contributor

   More 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."
3. github-actions

   added

   spam

   on Apr 9, 2026
4. github-actions commented on Apr 9, 2026

   

   github-actionsbot

   on Apr 9, 2026 – with GitHub Actions

   Contributor

   More 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.