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

Question

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

目的：

1. 元素需要使用多个布局（dagre和网格）的位置
2. 必须使用dagre布局定位复合/父元素
3. 必须使用单列中的网格布局定位子元素（如项列表）

问题：在我使用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();

  }