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

docs: 改造内置布局-Mindmap 脑图树文档 #6923

Closed
wants to merge 2 commits into from
Closed

Conversation

chiga0
Copy link
Contributor

@chiga0 chiga0 commented Mar 24, 2025

@yvonneyx
Copy link
Contributor

Great first PR! 🎉 很赞,特别是示意图让配置项更清晰!以下是两个小的改进建议:

  1. direction: 可选值目前支持 H(子节点自动分布), LR(子节点右侧分布)、RL(子节点左侧分布)
  2. getSide(): 进一步补充说明, 当 direction 设置为 H 且未指定 getSide 时,会默认将子节点前半部分放置在右侧,后半部分放置在左侧。用户可以通过自定义 getSide 函数,返回 leftright 来手动指定每个节点的位置。

顺便贴一下源码实现位置,感兴趣可以查看:

LGTM,处理完这两个小问题后可以合并了!期待你的下次贡献!🚀

@yvonneyx yvonneyx added the OSCP label Mar 24, 2025
@chiga0
Copy link
Contributor Author

chiga0 commented Mar 25, 2025

Great first PR! 🎉 很赞,特别是示意图让配置项更清晰!以下是两个小的改进建议:

  1. direction: 可选值目前支持 H(子节点自动分布), LR(子节点右侧分布)、RL(子节点左侧分布)
  2. getSide(): 进一步补充说明, 当 direction 设置为 H 且未指定 getSide 时,会默认将子节点前半部分放置在右侧,后半部分放置在左侧。用户可以通过自定义 getSide 函数,返回 leftright 来手动指定每个节点的位置。

顺便贴一下源码实现位置,感兴趣可以查看:

LGTM,处理完这两个小问题后可以合并了!期待你的下次贡献!🚀

看了下源码,关于direction, 其实'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'六种方向都支持,不过:

  • LRTB效果是一样的,都是将子节点排布在根节点的右侧;
  • RL 是将节点排布到根节点的左侧;
  • BT 是将子节点排布在根节点右侧之后,将所有子节点的上下次序颠倒了;
  • H 是基于用户指定或者自动算法排布在根节点的两侧;
  • V 则有点奇怪了, 将左右两侧分别布局后,只是将left部分的上下颠倒,然后根节点合并。这个用意说实话没太看懂,因为直接将左右两侧merge在一起,很容易产生重叠效果,我基于官方样例修改了下direction,可以看到存在部分节点重叠。参考下图:
    image

@yvonneyx
Copy link
Contributor

Great first PR! 🎉 很赞,特别是示意图让配置项更清晰!以下是两个小的改进建议:

  1. direction: 可选值目前支持 H(子节点自动分布), LR(子节点右侧分布)、RL(子节点左侧分布)
  2. getSide(): 进一步补充说明, 当 direction 设置为 H 且未指定 getSide 时,会默认将子节点前半部分放置在右侧,后半部分放置在左侧。用户可以通过自定义 getSide 函数,返回 leftright 来手动指定每个节点的位置。

顺便贴一下源码实现位置,感兴趣可以查看:

LGTM,处理完这两个小问题后可以合并了!期待你的下次贡献!🚀

看了下源码,关于direction, 其实'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'六种方向都支持,不过:

  • LRTB效果是一样的,都是将子节点排布在根节点的右侧;
  • RL 是将节点排布到根节点的左侧;
  • BT 是将子节点排布在根节点右侧之后,将所有子节点的上下次序颠倒了;
  • H 是基于用户指定或者自动算法排布在根节点的两侧;
  • V 则有点奇怪了, 将左右两侧分别布局后,只是将left部分的上下颠倒,然后根节点合并。这个用意说实话没太看懂,因为直接将左右两侧merge在一起,很容易产生重叠效果,我基于官方样例修改了下direction,可以看到存在部分节点重叠。参考下图:
    image

确实,还是你看的仔细~ 从源码来看,direction 其实是树形布局的通用属性,在 MindMap 里,V 方向的效果上可能还需要优化,其实我们更期待看到的效果是 compactBox 布局的 V

可以在文档中先不透出这个可选值,等 🐛 修复好再补充,当然感兴趣的话也可以给 @antv/hierarchy 提个 PR

@chiga0
Copy link
Contributor Author

chiga0 commented Mar 25, 2025

不好意思,这个pr的分支好像无法提交了,所以新建了一个PR,相关的改动都在新的pr上,辛苦再review下。

@yvonneyx
Copy link
Contributor

yvonneyx commented Mar 25, 2025

不好意思,这个pr的分支好像无法提交了,所以新建了一个PR,相关的改动都在新的pr上,辛苦再review下。

以最新的 PR 为准 #6924,这边先关闭啦~

@yvonneyx yvonneyx closed this Mar 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Docs]: 改造文档「布局- 内置布局 - Mindmap 脑图树」
2 participants