How to make text alignment dynamic on rectangle

I have a rectangle with dashed line border. as shown in image

I want to make L and R values dynamic by binding.
I want to make L and R at left and right half respectively. I have width value for ex 340.
I have alignment values “alignment: new go.Spot(0.5, 0, -150, 20.5)” . how can I calculate and assign values so that L will come in left half and R will come in right half.

Try using Spot values that do not have such big values for Spot.offsetX.
For example, could you just use new go.Spot(0.25, 0) to put the label in the middle of the left side, at the top?

After giving values alignment: new go.Spot(0.25, 0) for left and alignment: new go.Spot(0.75, 0) for right I am getting this output

Oh, that implies that the bounds of the “Spot” Panel’s main object are somewhat larger than what is shown by the red dashed rectangle.

Can you select that Part and show the screenshot? Please crop the image so that you don’t show a lot of unimportant white space in a huge image.

How is that Part defined?

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.

It wasn’t clear to me exactly what you wanted, and I didn’t have some of the definitions that you are using. I think part of the problem is that you aren’t letting text have its natural size.

      $(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.TextBlock, "L",
            { font: "15px sans-serif", stroke: 'red', alignment: new go.Spot(0.25, 0.5) }),
          $(go.Panel, "Auto",
            { alignment: new go.Spot(0.5, 0) },
            $(go.Shape, { fill: "aqua", strokeWidth: 0 }),
            $(go.TextBlock, "Side bracket",
              { font: "7px sans-serif", stroke: 'red', margin: new go.Margin(2, 2, 0, 2) })
          ),
          $(go.TextBlock, "R",
            { font: "15px sans-serif", stroke: 'red', alignment: new go.Spot(0.75, 0.5) })       
        )
      );

produces:
image

Hi Walter, I was expecting output as shown in image. I used your solution , it worked fine,
Thank you!!!