Is there any way using which it is possible to have nodes in a grid layout format with multiple number of rows and columns within a lane, and,
Also, is it possible that number of rows and columns can be modified dynamically depending on the number of nodes within a lane?
That’s what GridLayout is for:
You can set the GridLayout.wrappingColumn dynamically, after adding or removing nodes.
Thanks @walter. I am able to achieve the some sort of layout as per my requirement by modifying the direction property of LayeredDigraphLayout.
But there is another problem which is troubling me. As you can see in the following diagram, links are merging/overlapping each other:
I want all the links to be visible separately without getting merged or overlapped with each other.
I have checked the links class, but couldn’t find any property which can provide the functionality to avoid links’ overlapping.
Could you please help?
Thanks.
Set LayeredDigraphLayout.setsPortSpots to false and set in your node template(s) on your port object GraphObject.fromSpot and toSpot to go.Spot.AllSides.
Please read GoJS Link Connection Points on Nodes -- Northwoods Software
Thanks @walter for the solution.
But, am still getting the same overlapped links.
I have done the following:
myDiagram.**groupTemplate** =
$(go.Group, "Horizontal", groupStyle(),
{
...
layout: $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph
{
isInitial: false, // don't even do initial layout
isOngoing: false, // don't invalidate layout when nodes or links are added or removed
direction: 0,
columnSpacing: 10,
**setsPortSpots: false,**
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource
}),
...
}
and
myDiagram.**nodeTemplate** =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
**{ fromSpot: go.Spot.Right,**
**toSpot: go.Spot.Left },**
$(go.Shape, "Rectangle",
{ fill: "white", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true }),
$(go.TextBlock, { margin: 5 },
new go.Binding("text", "key")),
{ dragComputation: stayInGroup } // limit dragging of Nodes to stay within the containing Group, defined above
);Note that I said you need to set the spots on the port object, not necessarily on the Node.
Got it now, since portId was used in the nodeTemplate, it was behaving like a single port and not the whole node.
Once it is removed, i got the following:
Thanks for the support @walter.
Hi @walter,
Greetings!
Could you please suggest, how to increase the space between vertical links, currently they are getting overlapped like this (marked with red boxes and highlighted with blue):
I have tried to use “linkspacing” properties as follows:
myDiagram.groupTemplate =
$(go.Group, "Horizontal", groupStyle(),
{
...
layout: $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph
{
isInitial: false, // don't even do initial layout
isOngoing: false, // don't invalidate layout when nodes or links are added or removed
direction: 0,
columnSpacing: 10,
setsPortSpots: false,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
**linkSpacing**: 10
}),
...
},
...
);
But, there is no effect of this property on the space between links, they are still overlapping.
Please help.
Thanks.
What is your link template?
Here is it, Link template:
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes, corner: 5, smoothness: 1.0 },
{ relinkableFrom: false, relinkableTo: false },
$(go.Shape),
$(go.Shape, { toArrow: "Standard" }),
{ // this tooltip Adornment is shared by all links
toolTip:
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", linkInfo))
)
}
);AvoidsNodes routing does not let you control overlapping link segments. (The functionality only tries to have links avoid crossing over nodes, not other links.) Sorry.
You can however try to fix up the routing afterwards, based on whatever is desired in your particular app.
Oh, alright.
What is meant by “fix up the routing afterwards” ?
My requirement is to have nodes and links alignment something like this:
Is it possible to place nodes in this manner, if yes, then using which type of layout?
And, How can i get such links’ visualization.
Please help.
Thanks.
Yes, use LayeredDigraphLayout for the Diagram.layout, and set Group.layout to null. Example: Page Not Found -- Northwoods Software
The Swim Lanes sample has each lane/Group with its own layout because it assumes that there are few links that cross lanes. Just as in a real swimming pool, where one does not normally cross over lanes.
Ok, i will try this out.
Could please tell me, if i can sort the swimlane order programmatically. So that, all the lane appear in a fixed order every time, assuming that i have introduced a node property for swimlanes, say, index, using which i want to sort the order for swimlane visualization.
Just started.
Hi @walter,
After modifying the “comparer” function of layout, i was able to sort the swimlanes as per my requirement.
Thanks for your guidance!