ReactFlow画布上实现可容纳所有子节点的分组组织结构图开发求助

大家好，我现在在做公司组织结构图的可视化，用的是ReactFlow，但遇到了分组功能的难题——因为官方的分组功能是付费的，所以得自己开发。

我已经能根据节点大小灵活地按层级排布节点了，但卡在了父节点要包含所有子节点及后代节点的算法实现上，试了好多次都没搞定，问了AI也没解决问题。

核心挑战 #

父节点需要设置得足够大、高度足够，能完整包裹它的所有后代谱系，同时还要保持原有的层级顺序不被打乱。

效果对比 #

• 我想要的效果：父节点作为容器，能完全包裹住所有下属的子节点及后代节点，容器尺寸刚好适配所有子节点的整体范围，层级关系清晰直观。
• 目前实现的效果：父节点没能完整包裹住所有子节点，部分子节点溢出到了父节点之外，虽然层级排布有雏形，但容器尺寸的适配逻辑没做好。

我准备了一个Demo代码示例，能复现当前的问题状态。

备注：内容来源于stack exchange，提问作者Avora