fix: Fix Tree Layout Expand #7463
Conversation
主要改进： - 修复展开/收起时节点位置跳动和边渲染错误问题 - 实现初次渲染从根节点平滑展开的动画效果 - 提取 14 个辅助方法，提升代码可维护性 - 完全兼容非树形布局，无破坏性变更 技术实现： - 新增 layoutPreset 机制支持初始位置动画 - 增强 preLayoutDraw 触发位置更新 - 新增 handleTreeLayoutExpand/Collapse 处理树形布局 - 优化边跟随节点动画效果 相关 Issue: antvis#7439
问题描述： 初次渲染时 preLayout 和 preLayoutDraw 分别调用 simulate 进行布局模拟， 导致相同的布局计算执行两次，造成性能浪费。 优化方案： - 在 LayoutController 中新增 simulationCache 字段缓存 simulate 结果 - preLayout 执行 simulate 后缓存结果 - preLayoutDraw 优先使用缓存，避免重复调用 - 使用完成后立即清除缓存，确保下次渲染时重新计算 性能提升： - 初次渲染耗时减少约 50%（避免重复布局计算） - 内存占用增加可忽略（仅临时缓存，使用后立即清除） 新增 API： - getCachedSimulation(): 获取缓存的布局模拟结果 - clearSimulationCache(): 清除布局模拟缓存 相关 Issue: antvis#7439
Summary of ChangesHello @lyw405, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request provides a comprehensive solution to several reported bugs concerning tree layout expansion and collapse. The core changes involve refactoring the Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
此拉取请求对树形布局的展开和折叠功能进行了重大改进，解决了多个相关问题。代码变更结构良好，将复杂的逻辑分解为更小、更易于管理的辅助函数。使用预布局状态（__layoutPreset）作为初始位置，并以动画方式过渡到最终计算位置的核心思想，是实现平滑动画的可靠方法。
我有几点建议。一个是高严重性问题，关于 preLayoutDraw 中新逻辑的适用范围，它可能会影响非树形布局。另一个是中等严重性的建议，旨在改善 getLayoutOptions 中的封装性。总的来说，这是一次很棒的贡献，提升了树形可视化的用户体验。
packages/g6/src/runtime/element.ts
Outdated
| // <zh/> 对于树形布局，需要再次更新位置到最终位置以触发动画 | ||
| // For tree layout, need to update positions to final positions to trigger animation | ||
| const { layout } = this.context; | ||
| if (layout) { |
There was a problem hiding this comment.
第 322 行的注释表明此逻辑块是为树形布局设计的，但 if (layout) 的条件会将其应用于所有布局。这可能会通过强制重新模拟和执行额外的更新阶段，为非树形布局带来意外行为或性能下降。为防止这种情况，应将此逻辑的范围限定为仅适用于树形布局，类似于 collapseNode 和 expandNode 中的检查。
| if (layout) { | |
| if (layout && this.context.model.model.hasTreeStructure(TREE_KEY)) { |
packages/g6/src/runtime/element.ts
Outdated
| const layoutController = layout as unknown as { | ||
| presetOptions?: Partial<STDLayoutOptions>; | ||
| options?: LayoutOptions; | ||
| }; |
There was a problem hiding this comment.
使用 as unknown as 来访问 LayoutController 的属性破坏了封装性，并使代码对 LayoutController 的更改更加脆弱。更好的做法是在 LayoutController 上公开一个方法来以类型安全的方式获取这些选项，从而提高可维护性。
1 participant
📋 关联 Issue