fix: Fix Tree Layout Expand #7463

lyw405 · 2025-10-28T08:55:11Z

📋 关联 Issue

Closes [Bug]: G6 5X版本，场景案例下的资金流向图，点击三级的展开字节位置错乱，如何解决想要动画效果，但是点击展开节点，位置不会错乱 #7447 - 点击三级节点展开时位置错乱
Closes [Bug]: fund-flow 示例流程图问题，默认收拢的流程图无法点击+号在画布右侧展开 #7439 - 默认收拢的流程图无法在画布右侧展开
Closes [Bug]: 官方资金流向图示例bug #7325 - 三级数据打开位置错乱，收起时节点间距未调整
Closes [Bug]: Indented 布局异常 #7283 - Indented 布局展开子节点后异常

主要改进： - 修复展开/收起时节点位置跳动和边渲染错误问题 - 实现初次渲染从根节点平滑展开的动画效果 - 提取 14 个辅助方法，提升代码可维护性 - 完全兼容非树形布局，无破坏性变更技术实现： - 新增 layoutPreset 机制支持初始位置动画 - 增强 preLayoutDraw 触发位置更新 - 新增 handleTreeLayoutExpand/Collapse 处理树形布局 - 优化边跟随节点动画效果相关 Issue: antvis#7439

问题描述：初次渲染时 preLayout 和 preLayoutDraw 分别调用 simulate 进行布局模拟，导致相同的布局计算执行两次，造成性能浪费。优化方案： - 在 LayoutController 中新增 simulationCache 字段缓存 simulate 结果 - preLayout 执行 simulate 后缓存结果 - preLayoutDraw 优先使用缓存，避免重复调用 - 使用完成后立即清除缓存，确保下次渲染时重新计算性能提升： - 初次渲染耗时减少约 50%（避免重复布局计算） - 内存占用增加可忽略（仅临时缓存，使用后立即清除）新增 API： - getCachedSimulation(): 获取缓存的布局模拟结果 - clearSimulationCache(): 清除布局模拟缓存相关 Issue: antvis#7439

gemini-code-assist · 2025-10-28T08:55:29Z

Summary of Changes

Hello @lyw405, I'm Gemini Code Assist¹! 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 ElementController and LayoutController to introduce a more robust and animated handling of tree structures. This includes caching layout simulation results, applying calculated offsets to maintain node positions, and orchestrating animations for a smoother user experience when interacting with tree-based graphs.

Highlights

Tree Layout Expansion Fixes: Addresses multiple issues where expanding or collapsing nodes in tree layouts resulted in incorrect positioning, visual glitches, or unadjusted spacing.
Enhanced Animation Control: Introduces a refined animation mechanism for tree layouts, ensuring smooth transitions and correct element placement during expand/collapse operations.
Layout Simulation Caching: Implements caching for layout simulation results to prevent redundant calculations, improving performance during interactive layout changes.
Offset Calculation for Stability: Adds logic to calculate and apply layout offsets, maintaining the visual stability of the graph by preventing view shifts when nodes are expanded or collapsed.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

此拉取请求对树形布局的展开和折叠功能进行了重大改进，解决了多个相关问题。代码变更结构良好，将复杂的逻辑分解为更小、更易于管理的辅助函数。使用预布局状态（__layoutPreset）作为初始位置，并以动画方式过渡到最终计算位置的核心思想，是实现平滑动画的可靠方法。

我有几点建议。一个是高严重性问题，关于 preLayoutDraw 中新逻辑的适用范围，它可能会影响非树形布局。另一个是中等严重性的建议，旨在改善 getLayoutOptions 中的封装性。总的来说，这是一次很棒的贡献，提升了树形可视化的用户体验。

gemini-code-assist · 2025-10-28T08:56:55Z

packages/g6/src/runtime/element.ts

+    // <zh/> 对于树形布局，需要再次更新位置到最终位置以触发动画
+    // For tree layout, need to update positions to final positions to trigger animation
+    const { layout } = this.context;
+    if (layout) {


第 322 行的注释表明此逻辑块是为树形布局设计的，但 if (layout) 的条件会将其应用于所有布局。这可能会通过强制重新模拟和执行额外的更新阶段，为非树形布局带来意外行为或性能下降。为防止这种情况，应将此逻辑的范围限定为仅适用于树形布局，类似于 collapseNode 和 expandNode 中的检查。

Suggested change

if (layout) {

if (layout && this.context.model.model.hasTreeStructure(TREE_KEY)) {

gemini-code-assist · 2025-10-28T08:56:55Z

packages/g6/src/runtime/element.ts

+    const layoutController = layout as unknown as {
+      presetOptions?: Partial<STDLayoutOptions>;
+      options?: LayoutOptions;
+    };


使用 as unknown as 来访问 LayoutController 的属性破坏了封装性，并使代码对 LayoutController 的更改更加脆弱。更好的做法是在 LayoutController 上公开一个方法来以类型安全的方式获取这些选项，从而提高可维护性。

…layouts

lihawhaw · 2025-11-20T07:21:29Z

嗨，请问这个有合并上线预期时间吗？

Aarebecca · 2025-11-27T03:17:50Z

/gemini review

gemini-code-assist

Code Review

本次 PR 修复了多个与树图布局展开/收起动画相关的问题。改动范围较大，主要集中在 element.ts 和 layout.ts 文件中。

为树图布局创建特定的处理函数（handleTreeLayoutExpand, handleTreeLayoutCollapse）来隔离复杂的逻辑，这种方法是合理的。代码被重构为更小、更易于管理的私有方法，提高了可读性。

我提出了一些关于代码清晰度和 API 一致性的改进建议。

gemini-code-assist · 2025-11-27T03:20:28Z

packages/g6/src/runtime/layout.ts

+    positionData?.nodes?.forEach((node) => {
+      const id = idOf(node);
+      const addNode = add.nodes.get(id);
+      model.syncNodeLikeDatum(node);
+      if (addNode && node.style) Object.assign(addNode.style!, node.style);
    });
-    simulate?.edges?.forEach((l) => {
-      const id = idOf(l);
-      const edge = add.edges.get(id);
-      model.syncEdgeDatum(l);
-      if (edge) Object.assign(edge.style!, l.style);
+    positionData?.edges?.forEach((edge) => {
+      const id = idOf(edge);
+      const addEdge = add.edges.get(id);
+      model.syncEdgeDatum(edge);
+      if (addEdge && edge.style) Object.assign(addEdge.style!, edge.style);
    });
-    simulate?.combos?.forEach((l) => {
-      const id = idOf(l);
-      const combo = add.combos.get(id);
-      model.syncNodeLikeDatum(l);
-      if (combo) Object.assign(combo.style!, l.style);
+    positionData?.combos?.forEach((combo) => {
+      const id = idOf(combo);
+      const addCombo = add.combos.get(id);
+      model.syncNodeLikeDatum(combo);
+      if (addCombo && combo.style) Object.assign(addCombo.style!, combo.style);
    });


在 preLayout 方法中，处理 nodes、edges 和 combos 的逻辑非常相似，存在代码重复。

// packages/g6/src/runtime/layout.ts:83-100 positionData?.nodes?.forEach((node) => { const id = idOf(node); const addNode = add.nodes.get(id); model.syncNodeLikeDatum(node); if (addNode && node.style) Object.assign(addNode.style!, node.style); }); positionData?.edges?.forEach((edge) => { const id = idOf(edge); const addEdge = add.edges.get(id); model.syncEdgeDatum(edge); if (addEdge && edge.style) Object.assign(addEdge.style!, edge.style); }); positionData?.combos?.forEach((combo) => { const id = idOf(combo); const addCombo = add.combos.get(id); model.syncNodeLikeDatum(combo); if (addCombo && combo.style) Object.assign(addCombo.style!, combo.style); });

可以考虑将这部分重复逻辑提取到一个辅助函数中，以提高代码的可读性和可维护性。例如：

const syncElementData = (elements: any[] | undefined, getElement: (id: ID) => any, syncDatum: (datum: any) => void) => { elements?.forEach((element) => { const id = idOf(element); const addedElement = getElement(id); syncDatum(element); if (addedElement && element.style) { Object.assign(addedElement.style!, element.style); } }); }; syncElementData(positionData?.nodes, (id) => add.nodes.get(id), model.syncNodeLikeDatum.bind(model)); syncElementData(positionData?.edges, (id) => add.edges.get(id), model.syncEdgeDatum.bind(model)); syncElementData(positionData?.combos, (id) => add.combos.get(id), model.syncNodeLikeDatum.bind(model));

注意 syncNodeLikeDatum 和 syncEdgeDatum 需要绑定 model 的上下文。

gemini-code-assist · 2025-11-27T03:20:28Z

packages/g6/src/runtime/element.ts

+    const nodesToAnimate = new Map<ID, NodeData>();
+    updateNodes.forEach((nodeData, nodeId) => {
+      if (nodeId !== id) nodesToAnimate.set(nodeId, nodeData);
+    });
+    add.nodes.forEach((nodeData, nodeId) => {
+      nodesToAnimate.set(nodeId, nodeData);
+    });


收集待动画节点 nodesToAnimate 的逻辑可以更简洁。

// packages/g6/src/runtime/element.ts:1060-1066 const nodesToAnimate = new Map<ID, NodeData>(); updateNodes.forEach((nodeData, nodeId) => { if (nodeId !== id) nodesToAnimate.set(nodeId, nodeData); }); add.nodes.forEach((nodeData, nodeId) => { nodesToAnimate.set(nodeId, nodeData); });

可以使用 Map 的构造函数和展开语法来简化这个过程，然后再移除目标节点 id。这样代码更易读。建议修改为：

const nodesToAnimate = new Map<ID, NodeData>([...updateNodes, ...add.nodes]); nodesToAnimate.delete(id);

gemini-code-assist · 2025-11-27T03:20:29Z

packages/g6/src/runtime/element.ts

  public async expandNode(id: ID, options: CollapseExpandNodeOptions): Promise<void> {
    const { model, layout } = this.context;
-    const { animation, align } = options;
-    const position = positionOf(model.getNodeData([id])[0]);
+    const { animation } = options;


expandNode 和 collapseNode 方法都使用了 CollapseExpandNodeOptions 类型，但其中的 align 选项在此次重构中似乎已被废弃，两个方法中都未被使用。然而，该选项仍在 CollapseExpandNodeOptions 接口（1316行）中定义。

新的树状布局展开/收起逻辑似乎总是会保持节点位置不变（通过偏移量计算实现），而对于非树状布局，该功能似乎不再支持。

为了避免 API 的使用者产生困惑，建议从 CollapseExpandNodeOptions 接口中移除 align 选项，以保持 API 的整洁和明确。

lyw405 and others added 4 commits October 28, 2025 15:59

refactor(layout): 优化树形布局类型定义

7ccf159

Merge branch 'antvis:v5' into fix/fund-flow-expand-view-issue-7439

8684994

gemini-code-assist bot reviewed Oct 28, 2025

View reviewed changes

fix(layout): prevent tree layout cache logic from affecting non-tree …

743e641

…layouts

yvonneyx linked an issue Nov 20, 2025 that may be closed by this pull request

[Bug]: 5.0.48中 type: "indented" 缩放后展开子节点，节点位置错乱 #7498

Open

10 tasks

gemini-code-assist bot reviewed Nov 27, 2025

View reviewed changes

Aarebecca added 3 commits November 27, 2025 11:29

Merge branch 'v5' into fix/fund-flow-expand-view-issue-7439

5c5a7fa

Merge branch 'v5' into fix/fund-flow-expand-view-issue-7439

06e4c7c

Merge branch 'v5' into fix/fund-flow-expand-view-issue-7439

cc58173

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Fix Tree Layout Expand #7463

fix: Fix Tree Layout Expand #7463

lyw405 commented Oct 28, 2025

Uh oh!

gemini-code-assist bot commented Oct 28, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Oct 28, 2025

Uh oh!

gemini-code-assist bot Oct 28, 2025

Uh oh!

lihawhaw commented Nov 20, 2025

Uh oh!

Aarebecca commented Nov 27, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Nov 27, 2025

Uh oh!

gemini-code-assist bot Nov 27, 2025

Uh oh!

gemini-code-assist bot Nov 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	if (layout) {
	if (layout && this.context.model.model.hasTreeStructure(TREE_KEY)) {

fix: Fix Tree Layout Expand #7463

Are you sure you want to change the base?

fix: Fix Tree Layout Expand #7463

Conversation

lyw405 commented Oct 28, 2025

📋 关联 Issue

Uh oh!

gemini-code-assist bot commented Oct 28, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

lihawhaw commented Nov 20, 2025

Uh oh!

Aarebecca commented Nov 27, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants