Hello, I would like to know if there is a way for the link routing to go through the groups nodes but avoid non-group nodes.
I’ve tried setting the group avoidable property to false to no effect.
Here’s a screenshot of the current path that it takes and how I would like it to be.
If you would like the routing to go through the Groups, setting Node.avoidable on the Groups to false is correct.
However there might not be enough space between the member nodes to allow links to be routed there. You can try increasing the spacing between the nodes or reducing the Node.avoidableMargin on those member nodes.
I’ve increased both the spacing between the nodes and reduced the avoidableMargin property on my nodes but it still avoids the groups.
I don’t know if there’s any other property that can help me, here is the code for my node, link and group templates if you can help me identify what is preventing the links from going through the groups:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide,
selectable: false,
avoidableMargin: (1, 1, 1, 1) },
$(go.Shape, "Rectangle", {
fill: "white",
stroke: '#CCCCCC' },
new go.Binding("fill", "estatus", obtenerColorEstatus)
),
$(go.Panel, "Table",
{ width: 150, minSize: new go.Size(NaN, 70) },
$(go.TextBlock,
{
name: 'materia',
margin: 6, font: 'bold 12px Lato, sans-serif', editable: false,
alignment: go.Spot.Center,
row: 1,
column: 0,
columnSpan: 2,
stroke: "#000",
width: 130,
wrap: go.TextBlock.WrapFit
},
new go.Binding("text", "materia").makeTwoWay()),
$(go.TextBlock,
{
name: 'creditos',
margin: 6, font: '10px Lato, sans-serif', editable: false,
alignment: go.Spot.Center,
row: 2,
column: 0,
columnSpan: 2,
stroke: "#000"
},
new go.Binding("text", "creditos").makeTwoWay()),
$(go.TextBlock,
{
name: 'calificacion',
margin: 6, font: '10px Lato, sans-serif', editable: false,
alignment: go.Spot.Center,
row: 3,
column: 0,
columnSpan: 2,
stroke: "#000"
},
new go.Binding("text", "calif").makeTwoWay(),
new go.Binding("visible", "", function(o){
return o.aprobada == 1;
})),
$("Button",
{
click: drawLink,
margin: 6,
row: 3,
alignment: go.Spot.Right,
column: 1
},
new go.Binding("ButtonBorder.fill", "requisitoPendiente", obtenerColorVinculo),
new go.Binding("_buttonFillOver", "requisitoPendiente", obtenerColorVinculo),
new go.Binding("visible", "", function(o){
return o.prerrequisito[0] != " ";
}),
$(go.Shape,
{ geometryString: "M0 0 L8 0 8 12 14 12 M12 10 L14 12 12 14", stroke: "#FFF"}
)
)
)
);
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes,
corner: 10 },
$(go.Shape,
new go.Binding("stroke", "color")
),
$(go.Shape,
{ toArrow: "Standard" },
new go.Binding("fill", "arrowColor"),
new go.Binding("stroke", "arrowColor")
)
);
myDiagram.groupTemplate =
$(go.Group, "Vertical",
{
copyable: false,
movable: false,
deletable: false,
selectable: false,
avoidable: false,
layerName: "Background",
layout: $(go.TreeLayout, {
arrangement: go.TreeLayout.ArrangementVertical,
arrangementSpacing: new go.Size(10, 40)
})
},
new go.Binding("location", "loc", go.Point.parse),
$(go.Panel, "Horizontal",
{ name: "HEADER",
alignment: go.Spot.Center },
$(go.Panel, "Horizontal",
$(go.TextBlock,
{ font: "18px Lato, sans-serif", editable: true, margin: new go.Margin(2, 0, 0, 0) },
new go.Binding("text", "text").makeTwoWay())
)
),
$(go.Panel, "Auto",
$(go.Shape, "Rectangle",
{ name: "SHAPE", fill: "#F1F1F1", stroke: null, strokeWidth: 4 },
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
$(go.Placeholder,
{ padding: 12, alignment: go.Spot.TopLeft })
)
);Here’s an old example that demonstrates what I think you want: Partition GoJS Sample
Your code isn’t quite right:
avoidableMargin: (1, 1, 1, 1)
But by the rules of JavaScript, that happens to work. You are using go-debug.js and are checking the console log for errors and warnings, aren’t you?
Anyway, I don’t see what’s wrong with your templates.