I am using below code to create this.
var Mount_BASMNT_1_2 = $(go.Node, "Viewbox",
{ selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate },
{ resizable: true, minSize: new go.Size(150, 80) },
{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
new go.Binding("position", "loc", go.Point.parse),
$(go.Panel, "Spot",
$(go.Shape, "Rectangle",
{
width: 200, height: 110, fill: null, strokeDashArray: [30, 5], strokeWidth: 1, stroke: "#e97220", name: "size"
}, new go.Binding("width"),
),
$(go.Shape, "Rectangle",
{
width: 60, height: 9, alignment: new go.Spot(0.25, 0), fill: "white", strokeWidth: 0
},new go.Binding("alignment")
),
$(go.TextBlock, {
font: "15px sans-serif", stroke: 'red', alignment: new go.Spot(0.5, 0, -150, 20.5),
width: 140, height: 50, text: "L"
}),
$(go.Shape, "Rectangle",
{
width: 60, height: 9, alignment: new go.Spot(0.5, 0), fill: rfds.genric.blue, strokeWidth: 0.3
}
),
$(go.TextBlock, {
font: "7px sans-serif", stroke: 'red', alignment: new go.Spot(0.5, 0, 50, 22.5),
width: 140, height: 50, text: "Side bracket"
}),
$(go.Shape, "Rectangle",
{
width: 60, height: 9, alignment: new go.Spot(0.75, 0), fill: "white", strokeWidth: 0
}),
$(go.TextBlock, {
font: "15px sans-serif", stroke: 'red', alignment: new go.Spot(0.5, 0, 250, 20.5),
width: 140, height: 50, text: "R"
})
));
I am using binding for width property, I am changing width dynamically. I want L in center of left half and R in center of right half irrespective of width.