Headless layouts require a container

[yousefamar]

This is related to #2253. Headless layouts simply don't work (positions all zero'd) unless a container is passed to the graph on init. With the .layout() function, you can't do this, so they don't work outright.

Bug report

Environment info

• Cytoscape.js version : 3.10
• Browser/Node.js & version : Node 12.8.0 with cytosnap 3.1.0, also recreated on FF 69.0.1 and Chrome 77.

Current (buggy) behaviour

Layout has no effect unless there's a container attached.

Desired behaviour

The opposite

Minimum steps to reproduce

// Following works -- #cy-vis shows the random layout, #cy-graph is empty

var graph = cytoscape({
    container: document.getElementById('cy-graph'),
    headless: true,
    layout: {
        name: 'random',
    },
    elements: data
});

var vis = cytoscape({
    container: document.getElementById('cy-vis'),
    layout: {
        name: 'preset'
    },
    style: style,
    elements: graph.elements().jsons()
});

// Following does not work -- all nodes are clumped in the centre

var graph = cytoscape({
    //container: document.getElementById('cy-graph'),
    headless: true,
    layout: {
        name: 'random',
    },
    elements: data
});

var vis = cytoscape({
    container: document.getElementById('cy-vis'),
    layout: {
        name: 'preset'
    },
    style: style,
    elements: graph.elements().jsons()
});

The exact same behaviour can be observed in node with cytosnap. This issue is unrelated to this comment -- if you run the layout directly in PhantomJS (or non-headless in the browser) it works just fine. It simply seems to require a container for a layout to work.

Any tips or pointers much appreciated!

[maxkfranz]

You haven't specified the layout bounds -- either explicitly or implicitly by a container's bounds. It doesn't make sense to run a layout within zero-area bounds.

[yousefamar]

Thanks for the pointer, I didn't know about this. Just for posterity, when I specify boundingBox on the layout object, I no longer have this issue.