Here is a group panel provided the inside shape is not being streching, even after giving strectch to fill
Code is given below
Motive: I want to stretch the yellow shape as per the width of the parent
$(
go.Group,
"Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
go.Point.stringify
),
{
contextMenu: contextMenuRef.myContextMenu,
resizeObjectName: "BODY",
selectionObjectName: "BODY",
computesBoundsAfterDrag: true,
avoidable: false,
},
$(
go.Panel,
"Auto",
{},
$(
go.Shape,
"RoundedRectangle", // outer rounded rectangle surrounds everything
{
fill: GRAPH_CONFIG.SHAPE_COLORS.transparent,
strokeWidth: 1,
stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
},
new go.Binding("minSize", "size", go.Size.parse).makeTwoWay()
)
),
$(
go.Panel,
"Vertical",
{
defaultAlignment: go.Spot.TopCenter,
},
$(
go.Panel,
"Auto", // the header
{ defaultAlignment: go.Spot.TopCenter },
$(go.Shape, "RoundedTopRectangle", { //rectangle covering the text area
stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
strokeWidth: 1,
stretch: go.GraphObject.Fill,
fill: GRAPH_CONFIG.SHAPE_COLORS.transparentYellow
},
new go.Binding("minSize", "size", (data) => {
return new go.Size(data.width, 30)
}).makeTwoWay()
),
$(go.TextBlock,
{
font: "14px Sans-Serif",
margin: new go.Margin(6, 0, 5, 0),
editable: true,
verticalAlignment: go.Spot.Center,
textAlign: "center",
},
new go.Binding("text", "text").makeTwoWay(),
)
),
$(go.Panel, "Auto",
$(go.Shape, "RoundedBottomRectangle", { //container rectangle covering the placeholder
fill: GRAPH_CONFIG.SHAPE_COLORS.transparent,
strokeWidth: 1,
stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
name: "SUBPROCESS_BODY",
},
new go.Binding("minSize", "size", (data) => {
return new go.Size(data.width, data.height)
}).makeTwoWay()
),
$(go.Placeholder, { padding: new go.Margin(5, 5, 0, 0), },)
),
),
);
}