Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: support pre layout process #6630

Merged
merged 7 commits into from
Dec 14, 2024
Merged

refactor: support pre layout process #6630

merged 7 commits into from
Dec 14, 2024

Conversation

Aarebecca
Copy link
Contributor

@Aarebecca Aarebecca commented Dec 12, 2024

  • 支持前布局流程

目前 G6 渲染流程为:处理数据 ➡️ 绘制元素 ➡️ 计算布局 ➡️ 更新元素位置
我们将其称为后布局,即先完成绘制,再进行布局
现在添加前布局流程支持,即:处理数据 ➡️ 计算布局 ➡️ 绘制元素
该过程基于 Model 数据完成布局计算,仅进行一次绘制,减少了元素更新耗时。

优化结果:以 layoutConcentric 为例,从 75 ms 降低至 55 ms(约 26%
优化前渲染时长为: 75 ms
image

优化后渲染时长为:55 ms
image

理想状态下具有布局的图场景首屏渲染时长能够缩短约 20~30%

Breaking Change

  1. 首屏动画影响

使用前布局流程会导致首屏动画发生变化

后布局效果(当前):
image
image

前布局效果:
image
image

  1. 样式映射中无法访问节点坐标

Mindmap 为例,其标签方向基于节点及其父节点计算得出,后渲染流程会执行二次更新,此时节点数据中已经具有坐标信息,因此可以正确计算。

而采用前布局后,没有二次更新流程,首次计算无法获取节点坐标。

针对该问题,后续可以通过 transform 中 afterLayout hook 进行处理。

@@ -6,7 +6,7 @@
<g fill="none">
<g>
<path fill="none" d="M 312.5,80 C 312.5 130,180 130,180 174" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,-15 C 0 -15,0 -15,0 -15" class="key" stroke-width="3" stroke="transparent"/>
<path fill="none" d="M 312.5,80 C 312.5 130,180 130,180 174" class="key" stroke-width="3" stroke="transparent"/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

截图变更中,该 Path 为边的命中辅助,用于当边宽度较细时,创建一条较宽的边便于相应交互。
之前存在异常,生成的路径与边路径不一致,现已正常。

@Aarebecca Aarebecca force-pushed the refactor/layout-sequence branch from da06ba5 to 5108638 Compare December 13, 2024 02:20
@Aarebecca Aarebecca merged commit 7726eca into v5 Dec 14, 2024
2 checks passed
@Aarebecca Aarebecca deleted the refactor/layout-sequence branch December 14, 2024 05:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants