There is swimlane example in mxgraph but it is not automatic. So I took the graphlayout example as a basis instead and made few changes:
I was also facing the same issue,I was able to solve it. In my code, to auto rearrange the graph I used mxSwimlanelayout:
var layout = new mxSwimlaneLayout(this.editor.graph,mxConstants.DIRECTION_WEST);
layout.execute(this.editor.graph.getDefaultParent(),this.editor.graph.getDefaultParent().children /*swimlanes*/);
Though the nodes (children of swimlanes) were arranging automatically, swimlanes were not being respected.(same as author) So I investigated through the library (mxClient.js). I made following changes:
mxSwimlaneLayout.prototype.resizeParent = true;
mxSwimlaneLayout.prototype.moveParent = true;
inside mxSwimlaneLayout.prototype.execute
function:
replaced this.graph.updateGroupBounds
by this.updateGroupBounds
and inside mxSwimlaneLayout.prototype.updateGroupBounds
function,
replaced following block:
for (var i = 0; i < edge.edges.length; i++)
{
cells.push(edge.edges[i]);
}
by:
for (key2 in edge)
{
cells.push(edge[key2].edges[0]);
}
(incompatibility with data format)
Hope this helps. I don't fully understand how/why these changes work. Library authors might be able to help with that.
Far from perfect, but somehow improvement:
Demo
I've added:
layout.execute(lane1, [v1,v2,v3,v4]);
layout.execute(lane2, [v5,v6,v7,v8]);
and changed resizeParent
to false
, looks like lanes are respected but still don't look pleasant.