G6 dagre布局的同层级节点问题

问题描述

基于dagre的布局搞出来的流程图，并且给每一个node都设置了layer 但是这里出现了一个顺序问题 -- 当我给条件2节点添加后续节点的时候，条件1和条件2 节点原有的位置发生了改变我也尝试着按照id设置每个层级node 的order的顺序，似乎有效果，只不过“followUp”这个节点的位置不对，应该是要跟随在条件2节点的后续。

重现链接

有个类似的issue地址https://github.com/dagrejs/dagre/issues/287

重现步骤

type Node = {
 ....
 layer: number; // layer的顺序在图中画了～～
}

....
new DagreLayout({ 
    nodesep: 40,
    ranksep: 30,
    align: undefined,
    type: 'dagre',
    rankdir: 'TB',
    nodeOrder: map(
            nodes.sort((pre, next) => (pre.data?.order || 0) - (next.data?.order || 0)),
            ({ id }) => id
     ), // 具体的order顺序可以参考问题描述里头画的
}),

预期行为

dagre布局会存在同层级节点下沉的情况

所以我希望如何让他不下沉或者在我设置了layer的情况下，如何有效的控制节点的顺序

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox]
G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

Sep 26 '23 05:09 NollieLeo

hi @NollieLeo, welcome!

Sep 26 '23 05:09 github-actions[bot]

Hi @NollieLeo, Please star this repo if you find it useful! Thanks :star:! 你好 @NollieLeo。如果该仓库对你有用，可以 star 一下，感谢你的 :star:!

Sep 26 '23 05:09 github-actions[bot]

给我一个在线 demo 我来调整看看呢

Sep 26 '23 05:09 Yanyan-Wang

给我一个在线 demo 我来调整看看呢

稍等我给你搞个类似的～

Sep 26 '23 05:09 NollieLeo

给我一个在线 demo 我来调整看看呢

采用reactflow做为ui，然后是dagre作为布局，可以看看hooks文件里头的useAutoLayout.ts以及mock里头的nodes和edges的数据 https://codesandbox.io/p/github/NollieLeo/flow-pro/main?file=%2Fsrc%2FApp.tsx%3A8%2C7

或者git 地址https://github.com/NollieLeo/flow-pro

Sep 26 '23 06:09 NollieLeo

尝试只保留同层多个节点的 id 在 nodeOrder 中

nodeOrder: ['lmzu6uf3', 'lmzu6uf4']

Oct 07 '23 03:10 Yanyan-Wang

尝试只保留同层多个节点的 id 在 nodeOrder 中

nodeOrder: ['lmzu6uf3', 'lmzu6uf4']

我尝试一下～感谢

Oct 11 '23 12:10 NollieLeo

尝试只保留同层多个节点的 id 在 nodeOrder 中

nodeOrder: ['lmzu6uf3', 'lmzu6uf4']

尝试了一下，发现好像如果是没有嵌套的情况下，是正常的（如图，绿色的框起来的节点会放到nodeOrder中，顺序如图所示，红色标记节点不放到nodeOrder中）但是如果再嵌套一层的话，就会出现这样的情况（nodeOrder顺序为[A,B,C,D]，同理，只有绿色框中的节点才会放到nodeOrder中去）