Automatic swimlane layout in mxgraph

Question

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:

• Always use mxSwimlaneLayout
• Took swimlane cell style from the swimlanes example
• Created two swimlanes
• Used them as parents for the vertexes

Here's how I create swimlanes:

var lane1 = graph.insertVertex(parent, null, 'Lane 1', 0, 0, 1000, 100, 'swimlane');
var lane2 = graph.insertVertex(parent, null, 'Lane 2', 0, 100, 1000, 100, 'swimlane');
// use as parent...
var v1 = graph.insertVertex(lane1, null, 'A', 0, 0, w, h);

and execute the layout:

layout.orientation = mxConstants.DIRECTION_WEST;
layout.resizeParent = true;
layout.execute(parent, [lane1, lane2]);

Here's the test page.

Now, there are two problems here:

• Nodes are not being placed inside lanes; it seems that lanes are not respected at all. How do I make the layout to put nodes inside appropriate lanes? Setting lanes as parents seems to be not enough.
• I thought WEST would build graph to the left but it was the opposite... also NORTH goes down... why?

Robin

I thought WEST would build graph to the left but it was the opposite... also NORTH goes down... why? Seems like it declares the starting point – Hebetude

That makes sense. But unfortunately that's the least important one... – Robin

Were you able to find answer for Q1? – Genevieve

Have you found a solution how to fix it? – Shear

We used the dagre-d3 instead. – Robin

Been happy with dagre-d3 ? Anything you've found it to be lacking relative to mxgraph? – Cambrel

Yes, built some nice interactive dev tool with dagre-d3, still in use (workflows, lifecycles, code flows, etc). Used foreignObject to put html into nodes, grouping feature for swimlane-like diagrams, etc, even invisible (transparent) self-looping links with FontAwesome labels that worked as node-controlling buttons ;-) Can't compare it to mxgraph, though, don't remember much now and only evaluated it shortly. – Robin

Thanks, queen3. @David: You answered the easier half of the question (about WEST). What about the harder half (about why swimlanes are not being respected)? – Cambrel

@David: Is there a better place to ask mxgraph support questions? Surprised that the original question went unanswered (to the point of OP having to switch to dagre-d3), and my attempt to highlight it now has so far failed to help. (The bounty I sponsored expires in 1 day.) Note that over 1k people have seen it remain unanswered and may have drawn unnecessarily negative conclusions about the library and its support. Godric, thanks for attempting an answer, but as you mentioned, the layout is a mess. – Cambrel

Answer 1

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.

Postal

Here's how it looks in d3: jsfiddle.net/scu7nfv9 - the only thing needed is to adjust boxes' width equal using js. – Robin

Thanks, @queen3. If you'd make that an answer, I'd consider it the leading candidate for the bounty if David or someone doesn't produce an answer representing a mxgraph solution. – Cambrel

Thanks, @Godric! Happy to upvote, but I'm really hoping to see something that demonstrates both containment and good layout. That might require a response from mxgraph creators/maintainers, however. – Cambrel

With the bounty expiring outside of my control in a couple minutes, in lieu of a full answer from David or the mxgraph team, or a comment-to-answer conversion of the helpful d3 demo by queen3, I decided to reward Godric for his progress at least. Thank you. – Cambrel

Answer 2

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.

Gallnut

by any chance you will have reference code – Advisement