[Bug]: 使用复合布局时, 当我的数据中没有combo时, 无法渲染，g6版本为5.0.49

[aiyeye]

Describe the bug / 问题描述

我是从v4升级到v5, v4时我使用comboCombined布局, outerLayout和innerLayout都使用new G6.Layout['dagre']布局,切换到v5时使用combo-combined布局, demo 如下

import { Graph } from '@antv/g6';
import { DagreLayout } from '@antv/layout';

const data = {
  nodes: [
    { id: 'node1', style: { x: 250, y: 150 } },
    { id: 'node2', style: { x: 350, y: 150 } },
    { id: 'node3', style: { x: 250, y: 300 } },
  ],
  edges: [],
  combos: [],
};

const graph = new Graph({
  container: 'container',
  data,
  node: {
    style: {
      labelText: (d) => d.id,
    },
  },
  combo: {
    type: 'rect',
    style: {
      padding: 20,
    },
  },
  behaviors: ['drag-element', 'collapse-expand'],
  layout: {
    type: 'combo-combined',
    outerLayout: new DagreLayout({

    }),
    innerLayout: new DagreLayout({
      
    }),
  }
});


graph.render();

控制台报错如下

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[aiyeye]

另外，我尝试使用v5的combo-combined布局去实现之前v4的效果,内外都是用dagre布局,但是发现有问题,布局算法在处理同时包含combo和节点以及combo连接节点的场景时貌似有问题,不能依据配置正确的布局

• v5效果

• 代码

`
import { Graph } from '@antv/g6';
import { DagreLayout } from '@antv/layout';

const data = {
"nodes": [
{
"id": "0"
},
{
"id": "1",
// rank: 1,
// order: 1,
},
{
"id": "2",
// rank: 1,
// order: 2,
},
{
"id": "3",
// rank: 1,
// order: 3,
},
{
"id": "4",
"combo": "A"
},
{
"id": "5",
"combo": "B"
},
{
"id": "6",
"combo": "A"
},
{
"id": "7",
"combo": "C"
},
{
"id": "8",
"combo": "C"
},
{
"id": "9",
"combo": "A"
},
{
"id": "10",
"combo": "B"
},
{
"id": "11",
"combo": "B"
},
{
"id": "12",
}
],
"edges": [
{

  "source": "0",
  "target": "1"
},
{

  "source": "0",
  "target": "2"
},
{

  "source": "1",
  "target": "A"
},
{

  "source": "0",
  "target": "3"
},
{

  "source": "3",
  "target": "C"
},
{

  "source": "2",
  "target": "B"
},
{

  "source": "5",
  "target": "10"
},
{

  "source": "5",
  "target": "11"
},
{

  "source": "A",
  "target": "12"
},
{

  "source": "B",
  "target": "12"
},
{

  "source": "C",
  "target": "12"
},

],
"combos": [
{
"id": "A",
// rank: 2,
// order: 1,
"style": {
"type": "rect"
}
},
{
"id": "B",
// rank: 2,
// order: 2,
"style": {
"type": "rect"
}
},
{
"id": "C",
// rank: 3,
// order: 3,
"style": {
"type": "rect"
}
}
]
}
const graph = new Graph({
container: 'container',
autoFit: 'center',
data,
node: {
type: 'rect',
style: {
size: [40, 40],
radius: 8,
labelText: (d) => d.id,
},
},
edge: {
type: 'polyline',
},
combo: {
type: 'rect',
},
layout: {
// type: 'dagre',
// rankdir: 'LR',
// align: 'UL',
// ranksep: 20,
// nodesep: 20,
// sortByCombo: true,
type:'combo-combined',
innerLayout: new DagreLayout({
rankdir: 'LR',
// align: 'UL',
ranksep: 40,
nodesep: 20,
// ranker: 'tight-tree'
}),
outerLayout: new DagreLayout({
rankdir: 'LR',
// align: 'UL',
ranksep: 60,
nodesep: 50,
// ranker: 'tight-tree'
}),
nodeSize: 40,
comboPadding: 40,
// center: [0,0]
},
behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas', 'collapse-expand'],
});

graph.render();
`

• v4效果

• 代码

`
import G6 from '@antv/g6';

const data = {
"nodes": [
{
"id": "0"
},
{
"id": "1",
// rank: 1,
// order: 1,
},
{
"id": "2",
// rank: 1,
// order: 2,
},
{
"id": "3",
// rank: 1,
// order: 3,
},
{
"id": "4",
"combo": "A",
"comboId": "A",
},
{
"id": "5",
"combo": "B",
"comboId": "B",
},
{
"id": "6",
"combo": "A",
"comboId": "A",
},
{
"id": "7",
"combo": "C",
"comboId": "C",
},
{
"id": "8",
"combo": "C",
"comboId": "C",
},
{
"id": "9",
"combo": "A",
"comboId": "A",
},
{
"id": "10",
"combo": "B",
"comboId": "B",
},
{
"id": "11",
"combo": "B",
"comboId": "B",
},
{
"id": "12",
}
],
"edges": [
{

  "source": "0",
  "target": "1"
},
{

  "source": "0",
  "target": "2"
},
{

  "source": "1",
  "target": "A"
},
{

  "source": "0",
  "target": "3"
},
{

  "source": "3",
  "target": "C"
},
{

  "source": "2",
  "target": "B"
},
{

  "source": "5",
  "target": "10"
},
{

  "source": "5",
  "target": "11"
},
{

  "source": "A",
  "target": "12"
},
{

  "source": "B",
  "target": "12"
},
{

  "source": "C",
  "target": "12"
},

],
"combos": [
{
"id": "A",
// rank: 2,
// order: 1,
"style": {
"type": "rect"
}
},
{
"id": "B",
// rank: 2,
// order: 2,
"style": {
"type": "rect"
}
},
{
"id": "C",
// rank: 3,
// order: 3,
"style": {
"type": "rect"
}
}
]
}

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
fitView: true,
layout: {
type: 'comboCombined',
outerLayout: new G6.Layout['dagre']({
rankdir: 'LR',
ranksep: 60,
nodesep: 50,
controlPoints: true,
}),
innerLayout: new G6.Layout['dagre']({
rankdir: 'LR',
controlPoints: false,
ranksep: 40,
nodesep: 20,
}),
},
defaultNode: {
size: 40,
color: '#5B8FF9',
style: {
lineWidth: 2,
fill: '#C6E5FF',
},
},
defaultCombo: {
type: 'rect'
},
defaultEdge: {
size: 2,
color: '#e2e2e2',
},
modes: {
default: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas', 'collapse-expand'],
},
});

graph.data(data);
graph.render();

if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};

`

[aiyeye]

不小心关闭了 我重新提一下
#7375