What is the best way to 'merge' layeredDigraph and grid layouts

GoJS
1

I have a certain layout style that I’m looking for, but before I go down a bunch of rabbit holes I was hoping you could point me to the most straightforward way to go about it.

Basically I want what is essentially a combination of the layeredDiagraphLayout’s standard behavior, but with a swimlane/band style grid layout.

I have a set of normalized coordinate data like this:

“one”: [0,0],
“two”: [1,1],
“three”: [0,1],
“four”: [0,2],
etc

and then a set of link data:
“one”: [“two”,“three”],
“two”:[“four”],
“three”:[“four”],
“four”:null,
etc

Basically I want the layeredDiagraph’s look, linking, resizing, but the ability to “snap” all of the nodes to a grid, so that all the horizontal nodes line up in groups I specify, arbitrarily. Some may be floating off on their own, and I may “space” the linked groups so they go in different spots if I put them there.

I’ve been tinkering around with the BandedTreeLayout, the GenogramLayout and the Swimlane. I’m hoping to avoid using groups to do this, as they are being used for another logical, nested arrangement in the diagram. I could “weave” the banding groups between them, but that seems like it could get complicated quickly.

Using a normal LayeredDiagraph this is what I have at the moment:

image
image1158×859 102 KB

This is what I’d like (please excuse the awful paint image):

image
image1158×859 104 KB

I’m just not sure if I should be going down the route of a custom grid layout where I use row and column values to space things (like the tableLayout extension), then adding link behavior on top of that, or trying to use a custom layeredDiagraph that I implement snapping behavior.

2

Do you ahead of time which layer you want each node to be in? In your example, that would mean vertical column.

3

Yes, I have everything ahead of time, and I’m parsing it all simultaneously.

4

Do you mean you have the Y cells too, beforehand? If so, you don’t really need LayeredDigraphLayout, and you could use TableLayout instead.

That sample, Table Layout, happens to put a Group in each cell so that the user can drag-and-drop between cells. But you don’t need to do that – just bind Node.row and Node.column and you’re almost done.

5

And just to be safe, TableLayout was written by you all and uses all of the same licensing?

6

Oh, yes, all of the sample code (and code examples in the documentation, for that matter) are available for your use, according to terms of the license agreement.

Basically you can use it, modify it, or ignore it, at your choice, in your GoJS app.