[v5]comboCombined(内外侧均使用antv-dagre)布局不理想 about g6 HOT 6 CLOSED

/**
 * 图布局数据转为GraphLibData
 */
function layoutData2GraphLib(layoutData, isTree) {
    const graphLibData = new GraphLib(layoutData);
   // 下面这段是从g6源码里扒出来，改的； 如果使用AntVDagreLayout不需要，因为AntVDagreLayout中就有这段代码(g6中有，且layout也有)；但如果使用ComboCombinedLayout就需要(g6中有，但comboCombinedlayout中没有,单独使用布局时就会出问题)
    if (isTree) {
      graphLibData.attachTreeStructure('combo')
      graphLibData.getAllNodes().forEach((node) => {
            const { parentId } = node.data;
            if (parentId === undefined) return;
            if (graphLibData.hasNode(parentId)) {
              graphLibData.setParent(node.id, parentId, 'combo');
            }
          });
    }
    return graphLibData;
  }

import { Graph, AntVDagreLayout, ComboCombinedLayout } from '@antv/g6';
import { Graph as GraphLib } from '@antv/graphlib';

const customLayoutData = {
    "nodes": [
        {
            "id": "node-1",
            "data": {
                
            }
        },
        {
            "id": "node-2",
            "data": {
                
            }
        },
        {
            "id": "node-3",
            "data": {
                
            }
        },
        {
            "id": "node-4",
            "data": {
                
            }
        },
        {
            "id": "node-5",
            "data": {
                "_isCombo": true,
                
            }
        },
        {
            "id": "node-6",
            "data": {
                "parentId": "node-5",
                
            }
        },
        {
            "id": "node-7",
            "data": {
                "parentId": "node-5",
                
            }
        },
        {
            "id": "node-8",
            "data": {
                "parentId": "node-5",
                
            }
        },
        {
            "id": "node-9",
            "data": {
                
            }
        },
        {
            "id": "node-10",
            "data": {
                
            }
        }
    ],
    "edges": [
        {
            "id": "edge-18c062a5-2677-4b14-92b1-050a49e26f86",
            "source": "node-1",
            "target": "node-2",
            "data": {}
        },
        {
            "id": "edge-0ba36fda-c523-4715-868e-da6e6f8ef7c2",
            "source": "node-1",
            "target": "node-10",
            "data": {}
        },
        {
            "id": "edge-d4e5d739-ff90-4e5d-971d-c334302acc42",
            "source": "node-2",
            "target": "node-3",
            "data": {}
        },
        {
            "id": "edge-07f91b13-0415-4d3f-8346-6381c827a7a1",
            "source": "node-2",
            "target": "node-4",
            "data": {}
        },
        {
            "id": "edge-7b4ea309-d018-4b37-b46f-9a158b733fd6",
            "source": "node-3",
            "target": "node-9",
            "data": {}
        },
        {
            "id": "edge-4fb7755c-ff4e-44dc-87ea-4770b97b97fc",
            "source": "node-4",
            "target": "node-6",
            "data": {}
        },
        {
            "id": "edge-7b3ef5e2-d6e6-4e90-805a-4e6f7d6f9b12",
            "source": "node-6",
            "target": "node-7",
            "data": {}
        },
        {
            "id": "edge-03564922-64c9-4312-b26c-717e28d78eab",
            "source": "node-6",
            "target": "node-8",
            "data": {}
        }
    ]
}

/**
 * 图布局数据转为GraphLibData
 */
function layoutData2GraphLib(layoutData, isTree) {
    const graphLibData = new GraphLib(layoutData);
    if (isTree) {
      graphLibData.attachTreeStructure('combo')
      graphLibData.getAllNodes().forEach((node) => {
            const { parentId } = node.data;
            if (parentId === undefined) return;
            if (graphLibData.hasNode(parentId)) {
              graphLibData.setParent(node.id, parentId, 'combo');
            }
          });
    }
    return graphLibData;
    
  }

/**
 * 将图布局数据转换为 G6 数据
 */
function layoutData2G6Data(layoutData) {
  const { nodes, edges } = layoutData;
  const data = { nodes: [], edges: [], combos: [] };

  nodes.forEach((nodeLike) => {
    const target = nodeLike.data._isCombo ? data.combos : data.nodes;
    const { x, y, z = 0, parentId } = nodeLike.data;
    target?.push({
      id: nodeLike.id,
      style: { x, y, z },
      ...(parentId ? { combo: parentId } : {})
    });
  });

  edges.forEach((edge) => {
    const {
      id,
      source,
      target,
      data: { points = [], controlPoints = points.slice(1, points.length - 1) },
    } = edge;

    data.edges.push({
      id: id,
      source: source,
      target: target,
      style: {
        /**
         * antv-dagre 返回 controlPoints，dagre 返回 points
         * antv-dagre returns controlPoints, dagre returns points
         */
        ...(controlPoints?.length ? { controlPoints: controlPoints.map(parsePoint) } : {}),
      },
    });
  });

  return data;
}

// 使用layout只布局； 布局后的数据使用g6渲染
async function comboCombinedLayoutAndRenderWithG6(layoutData) {
  console.log('//==comboCombined布局，数据使用layoutData -> 单独使用布局 -> 使用G6渲染')

  console.log('布局前的layoutData=', layoutData)
  // 实例化布局
  const layout = new AntVDagreLayout({
    // begin: [0, 0],
    // align: 'UR',
    nodeSize: [150, 80],
    ranksep: 10,
    nodesep: 10,
    sortByCombo: true,
  });
  // 将layoutData包到graphLib
  const graphLibData = layoutData2GraphLib(layoutData, true);
  console.log('布局前的 graphLibData=', graphLibData)
  // 执行布局
  await layout.assign(graphLibData);
  console.log('布局后的layoutData=', layoutData)

  // 布局后的数据转换为G6数据
  const afterLayoutG6Data = layoutData2G6Data(layoutData);
  console.log('布局后的g6Data=', afterLayoutG6Data)
  
  // 使用G6渲染
  const graph = new Graph({
    container: 'container',
    autoFit: 'view',
    data: afterLayoutG6Data,
    node: {
      type: 'rect',
      style: {
        size: [150, 80],
        radius: 8,
        labelText: (d) => d.id,
        labelPlacement: 'center',
        // ports: [{ placement: 'top' }, { placement: 'bottom' }],
      },
      palette: {
        field: (d) => d.combo,
      },
    },
    edge: {
      type: 'cubic-vertical',
      style: {
        endArrow: true,
      },
    },
    combo: {
      type: 'rect',
      style: {
        radius: 8,
        labelText: (d) => d.id,
        lineDash: 0,
        collapsedLineDash: [5, 5],
      },
    },
    behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas', 'collapse-expand'],
  });

  graph.render();
}

comboCombinedLayoutAndRenderWithG6(customLayoutData)