Hello again,
I am still working on the creation of a swimlane diagram, and I’m having trouble positioning my nodes within a group.
The nodes have a location property set, and when I select ths swimlane layout, I skip all the automatic layout routines, unhide the groups in the diagram (they are set up upon loading of the diagram, but hidden) and add the nodes to the groups with the containingGroup property on each node.
The trouble is that I cannot get each node to sit in the correct x position within its group.
the group template is as follows:<br />groupTemplate: function() {<br /> var that = this;<br /> return this.gojs(go.Group, "Auto", {<br /> copyable: false,<br /> deletable: false,<br /> movable: false,<br /> selectionObjectName: "SHAPE",<br /> },<br /> new go.Binding("location", "location", go.Point.parse),<br /> this.gojs(go.Panel, "Table", {<br /> name: "TABLE",<br /> defaultStretch: go.GraphObject.Fill,<br /> defaultRowSeparatorStroke: "black",<br /> defaultColumnSeparatorStroke: "black"<br /> },<br /> this.gojs(go.Shape, "RoundedRectangle", {<br /> name: "SHAPE",<br /> fill: "lightblue",<br /> stroke: "black",<br /> strokeDashArray: [10,6,6]<br /> }),<br /> this.gojs(go.TextBlock, {<br /> name: "TITLE",<br /> font: "bold 13px sans-serif"<br /> },<br /> new go.Binding("text", "name")<br /> ),<br /> this.gojs(go.Placeholder, {<br /> padding: 15<br /> })<br /> )<br /> );<br /> },<br />
The Table panel is the only way to make the lanes look halfway decent, otherwise the nodes are not even within the bounds of their groups.
This is what the diagram currently looks like.
As you can see from the links, Each following node should be below and to the right of the previous one, however they are currently all just banged up against the left side.
I cannot for the life of me get them to move to their designated positions.
The nodes themselves are created from a template too:<br />nodeTemplate: function() {<br /> "use strict";<br /> var that = this;<br /> return this.gojs(go.Node, "Auto", {<br /> (...)<br /> }<br />
and with automatic layouts they work just fine.
Is there some sort of trick to be able to align nodes within a group? Or do I have to abandon the groups and see if I can make some sort of fake panel behind the nodes to simulate the grouping feature we’re after?
Have you set the Group.layout property at all? If you have set it to some Layout, that would be arranging the nodes (and links, if any) that are members of the group. Any binding of Node.location would provide an initial value but the layout would change the value.
Yes I have. As you said, the group.layout positions nodes correctly, EXCEPT that it only works for members of the same group. The layout needs to be overall, not just for one group.
So between groups the layout needs to be a LayeredDigraphLayout, not within groups.
Since I have not seen a way from the example to do this, the only option I have at the moment is to completely disable the automatic layouting (such a shame :( ) and do it all by position/location; and even then positioning a node halfway into a group or near the end (right side) seems to not be possible.
Just set Group.layout = null. If you do this for all Groups, then the Diagram.layout will be responsible for all Nodes and Links.
Yes, setting the group to not have a layout does allow the diagram to layout all the nodes, but then we don’t have swimlanes. That just makes all the nodes have a group based on where they will end up in the layout, thus making all the swimlanes overlap and thereby losing the information that the groups are supposed to convey.
The thing is, here, that we want a different layout for group type nodes than for node type nodes.
The groups should be in a single column, all evenly spaced and sized (like the example provided on the site).
All the nodes inside the groups should however be positioned based off of their links, independent of the group (if any) they are in.
I can get the groups to show up like I want, as the picture in the OP shows, but I cannot get the nodes in a group to be at any arbitrary X position. They either always align to the left of the group, or, if I move them manually afterwards, the group just moves along with the nodes and I lose the swimlane aspect.
Therefore again my question: is it possible to position nodes WITHIN a group WITHOUT moving the group itself? Automatic layouts apparently don’t help here since they only work on either the groups or only things inside a single group.
If you do not want the Diagram.layout to apply to the Groups, but you do want the Diagram.layout to apply to all regular Nodes and Links, you need to set Group.layout = null and Group.isLayoutPositioned = false.
To have a Group’s bounds not be dependent on the combined bounds of the member Nodes and Links, do not use a Placeholder in the Group.
Okay I guess that I have to manual sizing/positioning on the groups then.
Thank you for your time 