18

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?
kjhughes
  • 106,133
  • 27
  • 181
  • 240
queen3
  • 15,333
  • 8
  • 64
  • 119
  • _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 – Sagar V Jun 12 '17 at 07:27
  • That makes sense. But unfortunately that's the least important one... – queen3 Jun 13 '17 at 11:24
  • 1
    Were you able to find answer for Q1? – Imran Jul 24 '19 at 15:35
  • 1
    Have you found a solution how to fix it? – Mindaugas Jaraminas May 29 '20 at 11:49
  • 1
    We used the dagre-d3 instead. – queen3 May 29 '20 at 15:07
  • Been happy with dagre-d3 ? Anything you've found it to be lacking relative to mxgraph? – kjhughes Jun 08 '20 at 01:31
  • 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. – queen3 Jun 24 '20 at 07:40
  • 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)? – kjhughes Jun 24 '20 at 13:36
  • @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. – kjhughes Jun 30 '20 at 14:13

2 Answers2

5

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.

enter image description here

Godric
  • 769
  • 7
  • 18
  • 1
    Here's how it looks in d3: http://jsfiddle.net/scu7nfv9/ - the only thing needed is to adjust boxes' width equal using js. – queen3 Jun 29 '20 at 08:10
  • 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. – kjhughes Jun 30 '20 at 14:19
  • 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. – kjhughes Jun 30 '20 at 14:21
  • 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](https://stackoverflow.com/questions/44330233/automatic-swimlane-layout-in-mxgraph#comment110763313_62626714)-to-answer conversion of the helpful d3 [demo](http://jsfiddle.net/scu7nfv9/) by queen3, I decided to reward Godric for his progress at least. Thank you. – kjhughes Jul 01 '20 at 13:42
1

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.

Casper
  • 11
  • 2