nodeSelectionAdornmentTemplate auto Adornment

How do I solve this problem that is getting overflow?

I want to center the line exactly

const nodeSelectionAdornmentTemplate = $(go.Adornment, "Auto",
    					$(go.Shape, { fill: null, stroke: "#dbe9f9", strokeWidth: 1.5 }),
    					$(go.Shape, "XLine", { visible: false, alignment: new go.Spot(0, 0, -2, 0), cursor: "default", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.35, stroke: "#72a8e8" },
    					 new go.Binding("visible", function(val){
    						return val.isLock ? true : false
    					 })
    					),
    					$(go.Shape, "XLine", { visible: false, alignment: go.Spot.TopRight, cursor: "default", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.35, stroke: "#72a8e8" },
    					 new go.Binding("visible", function(val){
    						return val.isLock ? true : false
    					 })
    					),
    					$(go.Shape, "XLine", { visible: false, alignment: go.Spot.BottomLeft, cursor: "default", desiredSize: new go.Size(1.5, 1.5), fill: "#fff", strokeWidth: 0.35, stroke: "#72a8e8" },
    					 new go.Binding("visible", function(val){
    						return val.isLock ? true : false
    					 })
    					),
    					$(go.Shape, "XLine", { visible: false, alignment: go.Spot.BottomRight, cursor: "default", desiredSize: new go.Size(1.5, 1.5), fill: "#fff", strokeWidth: 0.35, stroke: "#72a8e8" },
    					 new go.Binding("visible", function(val){
    						return val.isLock ? true : false
    					 })
    					),
    					$(go.Placeholder, { padding: 1 })
				)

Why do you set its alignment to be shifted leftwards 2 units (pixels)? Just use go.Spot.TopLeft.

I want to magnify the X object and center it as shown in the image
I want to do as pictured

And what results are you getting?

If you want the X to stick out beyond the border defined by the main element of an “Auto” Panel, you will need to use a “Spot” Panel instead. “Auto” Panels clip; “Spot” Panels do not.

https://gojs.net/latest/intro/nodes.html#DecoratedContent