cytoscape.js 多种布局，复合节点内的不同布局

Question

图书馆： http://js.cytoscape.org/

目标：

1. 元素需要是使用多种布局（dagre 和 grid）的位置
2. 复合/父元素必须使用 dagre 布局定位
3. Child 元素必须使用 grid 布局放置在单列中（如项目列表）

问题： 在我使用 dagre 布局后，我尝试为复合节点制作布局，但它使用新布局重置所有元素，而我想将父节点保留为 dagre 定位它们

JSFIDDLE： https://jsfiddle.net/bababalcksheep/jwm701oe/

代码：

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  boxSelectionEnabled: false,
  autounselectify: true,
  layout: {
    name: 'dagre'
  },
  style:[{selector:'node',css:{'content':'data(id)','text-valign':'center','text-halign':'center','shape':'rectangle'}},{selector:'$node > node',css:{'padding-top':'10px','padding-left':'10px','padding-bottom':'10px','padding-right':'10px','text-valign':'top','text-halign':'center','background-color':'#bbb'}},{selector:'edge',css:{'target-arrow-shape':'triangle'}},{selector:':selected',css:{'background-color':'black','line-color':'black','target-arrow-color':'black','source-arrow-color':'black'}}],
  elements:{nodes:[{data:{id:'items-a',name:'items-a'}},{data:{id:'a-1',name:'a-1',parent:'items-a'}},{data:{id:'a-2',name:'a-2',parent:'items-a'}},{data:{id:'items-b',name:'items-b'}},{data:{id:'b-1',name:'b-1',parent:'items-b'}},{data:{id:'b-2',name:'b-2',parent:'items-b'}},{data:{id:'items-c',name:'items-c'}},{data:{id:'c-1',name:'c-1',parent:'items-c'}},{data:{id:'c-2',name:'c-2',parent:'items-c'}}],edges:[{'data':{'source':'items-a','target':'items-b'}},{'data':{'source':'items-b','target':'items-c'}}]},
  ready: function () {
    //.
    //
    cy = this;
    // sort child nodes with grid layout using 1 column
    /* 
    var parentNodes = cy.nodes(':parent');
        parentNodes.descendants().layout({
          name: 'grid',
          cols: 1
        }).run(); 
     */
    //
    //
  }
});

Answer 1

适合我的解决方案是

1. 首先在子元素上运行布局，以便复合节点可以根据样式采用正确的形状/大小
2. 然后在复合节点上运行布局

如果有人有更好的建议，请分享

JSFIDDLE： https://jsfiddle.net/bababalcksheep/jwm701oe/75/

  function runLayouts(fit, callBack) {
    // step-1 position child nodes 
    var parentNodes = cy.nodes(':parent');
    var grid_layout = parentNodes.descendants().layout({
      name: 'grid',
      cols: 1,
      fit: fit
    });
    grid_layout.promiseOn('layoutstop').then(function(event) {
      // step-2 position parent nodes 
      var dagre_layout = parentNodes.layout({
        name: 'dagre',
        rankDir: 'TB',
        fit: fit
      });
      dagre_layout.promiseOn('layoutstop').then(function(event) {
        if (callBack) {
          callBack.call(cy, event);
        }
      });
      dagre_layout.run();
    });
    grid_layout.run();

  }