Is it posiible to set up different indents for children inside one parent and indents for parents?
Yes, you just need to set TreeVertex | GoJS API to larger values as the value of TreeVertex | GoJS API increases.
You can do that in an override of TreeLayout | GoJS API
If I have time later today and you haven’t already figured it out, I can create a sample for you.
1 Like
will wait for you sample,
Thank you
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // for v1.*
layout: $(go.TreeLayout,
{
assignTreeVertexValues: function(v) {
v.nodeSpacing = 10 * v.maxGenerationCount;
}
})
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text"))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" },
{ key: 5, text: "Epsilon", color: "yellow" },
{ key: 6, text: "Zeta", color: "thistle" },
{ key: 7, text: "Eta", color: "tomato" },
{ key: 8, text: "Theta", color: "tomato" },
{ key: 9, text: "Iota", color: "lightgreen" },
{ key: 10, text: "Kappa", color: "pink" },
{ key: 11, text: "Lambda", color: "yellow" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 3, to: 4 },
{ from: 3, to: 5 },
{ from: 4, to: 6 },
{ from: 4, to: 7 },
{ from: 2, to: 8 },
{ from: 2, to: 9 },
{ from: 9, to: 10 },
{ from: 9, to: 11 }
]);
}
Note how the override of TreeLayout.assignTreeVertexValues does what I suggested above.
Is it posiible to set up different indents for children inside one parent?
You could pretend that each node is bigger by varying amounts than it actually is by increasing the TreeVertex.height (and TreeVertex.focusY?) in that same method override.
part of solution works.
How to set node in center of vertex?
here is example Plunker - Gojs TextBlock
Gamma Delta and Iota shold be in the center of the vertex
v.focusY = v.height / 2; doesn’t work. With it it looks like this
In my copy of the code that I posted above, I added some lines to that override:
assignTreeVertexValues: function(v) {
v.nodeSpacing = 10 * v.maxGenerationCount;
var dh = 50-v.height;
v.y = dh/2;
v.height = 50;
v.focusY = 25;
}
and changed the tree structure. I got:
assignTreeVertexValues: function(v) {
v.nodeSpacing = 10 * v.maxGenerationCount;
if (v.childrenCount > 0) {
v.height = 100;
}
}
I’m sorry, but I still do not understand what you want.
My final task is to set different idents for nodes with children and without.
for example:
Indents between Delta and Epsilon, between Delta and Theta, between Gamma and Eta should be 32px.
Indents between Eta and Beta, between Theta and Iota should be 16px.
I assume you mean “spacing”, not “indent”. It appears that you want each parent node to be broader (i.e. taller) than it actually is, without making its children broader. OK, how about:
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // for v1.*
layout: $(go.TreeLayout,
{
nodeSpacing: 0,
assignTreeVertexValues: function(v) {
if (v.childrenCount > 0) {
v.height += 32;
v.focusY += 32/2;
}
},
commitNodes: function() {
go.TreeLayout.prototype.commitNodes.call(this);
this.network.vertexes.each(function(v) {
var n = v.node;
if (n && v.childrenCount > 0) {
n.location = new go.Point(n.location.x, n.location.y + 32/2);
}
});
}
})
});
I intentionally set TreeLayout.nodeSpacing to zero so that it’s obvious.
1 Like
That is what I was looking for. Thank you!