The layout that I use is defined like this:
layout: $(go.LayeredDigraphLayout, {
isRealtime: false,
isOngoing: false,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
columnSpacing: 5,
layerSpacing: 5,
setsPortSpots: false
})
This is the entire definition of the group:
$(go.Group, 'Spot',
{
isSubGraphExpanded: false,
resizable: false,
ungroupable: true,
doubleClick: doubleClicked,
locationObjectName: 'BODY',
locationSpot: go.Spot.Center,
selectionObjectName: 'BODY',
resizeObjectName: 'BODY',
computesBoundsAfterDrag: true,
layout: $(go.LayeredDigraphLayout, {
isRealtime: false,
isOngoing: false,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
columnSpacing: 5,
layerSpacing: 5,
setsPortSpots: false
})
},
new go.Binding('isSubGraphExpanded').makeTwoWay(),
new go.Binding('resizable', 'isSubGraphExpanded', function (value, group) {
let newHeight = Math.max(group.data.inputsArray.length, group.data.outputsArray.length) * 30;
group.findObject('BODY').desiredSize = value ? new go.Size(NaN, NaN) : new go.Size(NaN, newHeight < 50 ? 50 : newHeight);
return value;
}),
$(go.Panel, 'Auto',
{
name: 'BODY',
stretch: go.GraphObject.Fill,
minSize: new go.Size(100, 50)
},
$(go.Shape, group.shape, group.details,
new go.Binding('opacity', 'isSubGraphExpanded', function (isExpanded, shape) {
return isExpanded ? 0.3 : 1;
}).ofObject()),
$(go.TextBlock, textBlock, { alignment: go.Spot.Center },
new go.Binding('text', 'isSubGraphExpanded', function (isExpanded, textblock) {
return isExpanded ? '' : 'Not expanded';
}).ofObject()),
$(go.Panel, 'Table',
{
minSize: new go.Size(100, NaN),
alignment: new go.Spot(0.5, 0, 0, -10),
alignmentFocus: go.Spot.Top
},
new go.Binding('desiredSize').makeTwoWay(),
$(go.RowColumnDefinition, {row: 0, sizing: go.RowColumnDefinition.None}),
{alignment: go.Spot.Top, stretch: go.GraphObject.Horizontal},
$(go.RowColumnDefinition, {row: 1, sizing: go.RowColumnDefinition.None}),
{alignment: go.Spot.Top, stretch: go.GraphObject.Horizontal},
$(go.Shape, 'RoundedRectangle',
{
name: 'HEADER',
columnSpan: 3,
fill: 'transparent',
strokeWidth: 2,
stretch: go.GraphObject.Fill
},
new go.Binding('opacity', 'isSubGraphExpanded', function (isExpanded, shape) {
return isExpanded ? 0.15 : 0.5;
}).ofObject()),
$('SubGraphExpanderButton', {column: 0, margin: new go.Margin(0, 0, 0, 2)}),
$(go.TextBlock, {
textAlign: 'center',
column: 1,
columnSpan: 2,
editable: true
},
new go.Binding('text', 'name').makeTwoWay()),
$(go.Placeholder,
{row: 1, columnSpan: 3, alignment: go.Spot.TopLeft},
new go.Binding('padding', 'isSubGraphExpanded', function (e) {
return e ? new go.Margin(5, 10) : new go.Margin(0);
}))
)
),
$(go.Panel, 'Vertical', {alignment: go.Spot.Left, padding: new go.Margin(15, 0, 0, 0)},
new go.Binding('itemArray', 'inputsArray'),
{
itemTemplate: getItemTemplate(true)
}
),
$(go.Panel, 'Vertical', {alignment: go.Spot.Right, padding: new go.Margin(15, 0, 0, 0)},
new go.Binding('itemArray', 'outputsArray'),
{
itemTemplate: getItemTemplate(false)
}
)