This is my diagram and nodes.
and sharing the node template for this diagram.
$$(go.Panel, 'Spot',
$$(go.Panel, "Horizontal",
$$(go.Panel, 'Spot',
$$(go.Panel, 'Vertical', {
name: 'hexagon_panel'
},
$$(go.Panel, 'Spot',
$$(go.Shape, 'Hexagon', {
name: 'hexagon_shape',
width: 45,
height: 45,
alignment: go.Spot.BottomCenter,
alignmentFocus: go.Spot.BottomCenter,
portId: 'hexagon_shape_port',
fromLinkable: true,
fromSpot: go.Spot.BottomCenter,
}
)
),
$$(go.Panel, 'Spot', {
name: 'hexagon_text_panel'
},
$$(go.TextBlock, {
name: 'hexagon_text',
verticalAlignment: go.Spot.Center,
width: 100,
textAlign: 'center',
shadowVisible: false,
wrap: go.TextBlock.WrapFit
}
),
new go.Binding('visible', 'abc')
)
),
$$(go.Panel, 'Spot'),
new go.Binding('visible', 'xyz')
),
$$(go.Panel, 'Spot', {
alignment: go.Spot.Top
},
$$(go.Shape, 'RoundedRectangle', {
name: 'rect_primary',
portId: 'default_port',
fromLinkable: true,
toLinkable: true,
toLinkableDuplicates: true,
fromLinkableDuplicates: true,
pickable: true,
isActionable: true
}
)
)
)
)
Now, I have this code that automatically relocates all the nodes.
myDiagram.layout = $(go.LayeredDigraphLayout, {
setsPortSpots: false,
layerSpacing: 200, // spacing between parent and child [Horizontal]
columnSpacing: 70, // spacing between siblings [Vertical]
// to fix the placement of setup node which is not connected to the main tree
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource
})
this code works perfectly in the above case.
but when hexagon_text_panel
is visible, then this automatic relocation overlaps the links.
Converting this:
to this:
I am not sure, why these links cross only when the text panel is visible.