I want to allow user to reorder the swimlanes at runtime http://www.gojs.net/latest/samples/swimlanes.html
How to do that?
Probably it should work like this http://live.yworks.com/yfiles-for-html/1.2/demos/complete/demo.yfiles.graph.tableeditor/index.html
I would hope that it wouldn’t work like that – I’m often getting errors that can be reported to yWorks, or I’m getting weird nesting.
But it’s easy enough to implement in GoJS:
First, you need to change the sample’s Group template (representing lanes) to allow moving. So change “movable: false” to “movable: true”.
By the way, if you want to limit the movement of Groups to only be vertical, you can also set:
minLocation: new go.Point(NaN, -Infinity),
maxLocation: new go.Point(NaN, +Infinity),
Second, you want to change the layout so that it takes the initial position of the Group into account when deciding what order the groups/lanes should be sorted. Basically you need to set the sorting and comparer properties. They can be specified in the constructor for the custom GridLayout that this sample is already defining:
// define a custom grid layout that makes sure the length of each lane is the same
// and that each lane is broad enough to hold its subgraph
function StackLayout() {
go.GridLayout.call(this);
// specify that it should always sort all of its Parts
this.sorting = go.GridLayout.Ascending;
// this sorts based on the Y (or X) location of each Part, which in this sample is always a Group
this.comparer = function(a, b) {
var ay = (HORIZONTAL ? a.location.y : a.location.x);
var by = (HORIZONTAL ? b.location.y : b.location.y);
if (isNaN(ay) || isNaN(by)) return 0;
if (ay < by) return -1;
if (ay > by) return 1;
return 0;
};
}
go.Diagram.inherit(StackLayout, go.GridLayout);
Finally (optionally), I think you want to allow users to drop a Group into the background of the Diagram. So you need to make the prohibition defined in Diagram.mouseDrop a little smarter:
// don't allow dropping onto the diagram's background unless it's a Group:
mouseDrop: function(e) {
if (!e.diagram.selection.all(function(p) { return p instanceof go.Group; })) {
e.diagram.currentTool.doCancel();
}
},
By the way, note that the “SelectionMoved” DiagramEvent listener is what is automatically causing another layout to be performed at the end of a move of any kind of Node, including Groups.