CODEWITHSUNDEEP
javascriptcytoscape.js
django
django

Reputation: 2909

cytoscape.js multiple layouts, different layout within compound nodes

Library: http://js.cytoscape.org/

Objective:

  1. Elements needs to be positions using multiple layouts (dagre and grid)
  2. Compound/Parent elements must be positioned using dagre layout
  3. Child elements must be positioned using grid layout in single column ( like a list of items)

Issue: After i Use dagre layout , i tried to make layout for compound nodes but it resets all elements with new layout while I want to keep parent nodes as dagre positioned them

enter image description here

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

Code:

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(); 
     */
    //
    //
  }
});

Upvotes: 3

Views: 2918

Answers (1)

django
django

Reputation: 2909

Solution that works for me is

  1. First run layout on child elements so that compound nodes can take correct shape/size as per styles
  2. Then run layout on compound nodes

If any one has better suggestion, Do share

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();

  }

Upvotes: 4

Related Questions