Hello,
I have been looking for a way to access and change the arrangementorigin in layout. I have looked through the samples but was unable to find one that modified arrangementorigin variable. I was wondering if there was some sample code of it being used somewhere that I could look at.
I want to modify the position that the nodes start displaying at in the swim lanes example. Like if the nodes in Lane 2 would start displaying after the nodes in Lane 1.
Thank you in advance for your help.
Setting Layout.arrangementOrigin of a Group.layout that uses a Placeholder won’t really have any effect because the Group’s Placeholder will be wherever the member nodes are. The initial offset caused by Layout.arrangementOrigin will just be cancelled out by the definition of what the Placeholder does.
But you could adjust the Placeholder.padding to cause such offsets. For example, in the SwimLanes sample, if you replace the Placeholder’s padding: 5 with padding: new go.Margin(5, 5, 5, 305), you will see that there is suddenly a big empty area on the left side of the member nodes.
Remember that in the SwimLanes sample the Group.layouts, one per lane, all are performed independently of each other.
Is there a way to change the Placeholder padding setting before the layout function starts or is there a way to do it after the layout function has finished?
Yes, you can just set it (programmatically) or bind it. It isn’t clear to me though how you are going to decide what values to use.
I want to get the x value of the last node in the previous lane and set that as the padding for the next lane.
You don’t have control over the order in which invalid Group.layout-s are performed. But I suppose you don’t care, if you can specify all of the Placeholder.padding values when the Diagram.layout is performed. (The Diagram.layout, if invalid, is always performed after any/all of the Group.layout-s are performed.)
The Swim Lanes sample just uses a standard GridLayout as the Diagram.layout. But you could replace that with a custom GridLayout that overrides doLayout to first get the widths of all of the Group.placeholder-s, assign all of the Graph.placeholder.padding margins, and then call the base method to get all of the standard behavior.
If you want to do this, you can find several examples of subclassing by searching for calls to Diagram.inherit.
Is there a way that to specify the order that the Groups layouts are performed? I want to compute the padding value for each lane based on where the last Node in the previous lane was placed.
If you do what I suggested, you won’t care about the order in which the Groups perform their own layouts. The Diagram’s layout can look at the size of all of the Group’s subgraphs and compute the appropriate padding.
This is what I have for the padding. What I noticed is that the function is being called before the node and link data is defined resulting in an undefined error. Is there anyway to correct this?
myDiagram.layout = $(layeredPadding);
function layeredPadding() {
var allnodes = myDiagram.nodes; //get all the nodes including groups
var grps;
console.log("all "+allnodes.length);
for(var i = 0; i<allnodes.length; i++)
{
if (allnodes.isGroup) { //find the groups
grps.push(allnodes);
}
}
var mems;
var padding = 5; //default padding
console.log("grps " + grps.length);
for (var i = 0; i < grps.length - 1; i++) {
grps.placeholder = new go.Margin(5, 5, 5, padding); //place new padding
mems = grps.memberParts; //get nodes in group
var node = mems[length - 1]; //get last node
padding + node.centerX; //add X value of last node to padding
}
}//layeredPadding
go.Diagram.inherit(layeredPadding, go.LayeredDigraphLayout);
A Diagram.layout or a Group.layout has to be an instance of Layout. When the diagram is updating its layouts, it calls Diagram.layout.doLayout or Group.layout.doLayout.
The implementation of the layout should not be performed in the constructor, but in an override of doLayout.
There are several examples of custom layouts in the samples. Search for “Diagram.inherit” and look for ones that are subclassing a layout class.
I was looking through the Parse Tree Sample and its custom layout. In there it accesses the layout network and layout vertex to iterate through all the nodes.
Since GridLayout does not use a Layout Network or Layout Vertexes how can I get the Groups/Nodes that it is going to arrange?
I tried using myDiagram.nodes to access the nodes but that returns null.
Thanks again for your help
So you are defining a custom layout that inherits from GridLayout?
Within methods of GridLayout you can refer to the Layout.diagram to get the Diagram, from which you can get all of its Nodes via Diagram.nodes.
Also, if you are overriding Layout.doLayout, then the argument will give you the collection of nodes to be laid out.
I am trying to create a custom layout. I tried accessing coll. It is not iterable but there is something there but I don’t know what or what to do with it. Here is my code so far:
function SpaceLayout() {
go.GridLayout.call(this); // call base constructor
}
go.Diagram.inherit(SpaceLayout, go.GridLayout);
SpaceLayout.prototype.doLayout = function (coll) {
var it = coll.iterator;
console.log(coll);
var grps;
while (it.next()) {
console.log("next" + it.value);
var node = it.value.node;
if (node != null) {
if (node.isGroup = true) {
grps.push(node);
console.log(node.data.key);
}
}
}
/*
var x = -Infinity;
var it = this.network.vertexes.iterator;
while (it.next()) {
var grp = it.value.group;
x = Math.max(x, grp.position.x);
console.log(grp.data.key);
}
*/
}The argument to doLayout will be one of:
- the Diagram, which means use all of the top-level Nodes and Links of the Diagram
- a Group, which means use all of the immediate Node and Link members of the Group
- an Iterable, which means use the Parts in that collection
I have been trying to figure out what is in the coll variable. It does not look like Diagram, Group, or an Iterable variable. I wrote it to console.log and it contains a lot of HTML information but I cannot find any GoJS information in there. Here is a screen shot of what I get:
Also, how do I call the original GridLayout doLayout?
You can use coll instanceof go.Diagram to see if it is a Diagram. Same for Group.
go.GridLayout.prototype.doLayout.call(this, coll);How do I access the Graph.placeholder.padding?
Calling the original GridLayout doLayout does not do anything. The Groups are all displayed on top of each other.
Oops, I forgot to pass the original “coll” argument on to the base method.
Are you asking about Group.placeholder.padding? I don’t understand your question.
Adding the coll argument worked.
In a previous post you mentioned setting Graph.placeholder.padding.
What I did was bind a variable to the placeholder padding called pad and I use that to set the Group.placeholder.padding. It successfully sets that padding but the nodes are never shifted over. They are all still at the beginning of the lane. Do I have to force the separate Layouts in the lanes to trigger?
Hmmm, we’ll need to investigate this.