Put nodes on the border of the parent in cytoscape - cytoscape.js

Question

I want to put the child nodes on the very border of the parent node (evenly distributed if possible) instead of inside the parent node.
Can this be achieved? Assuming that I could somehow get the position and size of the parent and set the position of the children based on this?
Still I would like the edges to be as short as possible, and as I add more nodes and edges it will be a mess to try to set coordinates myself
So it would be best if the layout algorithm did the job of distributing the nodes, just want them moved out on the border.
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
<script>
$(function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'cose-bilkent'
},
style: [
{
selector: 'node',
style: {
shape: 'roundrectangle',
width: 10,
height: 10,
'background-color': '#ad1a66',
label: function (ele) { return (ele.data('id')) }
}
},
{
selector: ':parent',
style: {
width: 80,
height: 120,
'background-opacity': 0.333
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ad1a66'
}
}
],
elements: [
{ "data": { "id": "n2" }},
{ "data": { "id": "p6", "parent": "n2" }},
{ "data": { "id": "p1", "parent": "n2" }},
{ "data": { "id": "p4", "parent": "n2" }},
{ "data": { "id": "p7", "parent": "n2" }},
{ "data": { "id": "n3" }},
{ "data": { "id": "p2", "parent": "n3" }},
{ "data": { "id": "p5", "parent": "n3" }},
{ "data": { "id": "p8", "parent": "n3" }},
{ "data": { "id": "e46", "source": "p7", "target": "p2" }, "position": {}},
]
});
});
</script>

Answer 1

A compound parent node does not have an independent position or size. It just fits to its children.
So, you can put a child node at the parent's edge -- but not beyond it -- by positioning the child relative to its siblings. Make sure to set the padding to zero on the parent.
Force-directed layouts will try to minimise the area taken up by each parent node, as this is a highly desirable property. This means that for groups of three or more siblings a layout will tend to put nodes in the middle.
Your criterion is at odds with the general goal of compound force-directed layout, so you could try setting the repulsion forces really high or you could write an extension with your own custom logic.