Center aligning a node horizontaly

Hi,

We need to centre a node w.r.t diagram horizontally. Below are the images showing the actual and desired behaviour.

/////////////////////////* Code *//////////////////////////////////

myDiagram.nodeTemplateMap.add(“RootNodeShape”,
GO(go.Node, “Auto”,
{ locationSpot: go.Spot.Center },
new go.Binding(“location”, “location”, go.Point.parse).makeTwoWay(go.Point.stringify),
//new go.Binding(“location”, “location”, function (location) {
// return new go.Point(location.x, location.y)
//}).makeTwoWay(),
{
mouseDrop: fnRootDrop,

     //selectionAdornmentTemplate:
     // GO(go.Adornment, "Auto",
     //   GO(go.Shape, "Rectangle",
     //   { fill: null, stroke: "white", strokeWidth: 0 }),
     //   GO(go.Placeholder)
     // ),

     movable: true,
 },
        GO(go.Shape, {
            name: "rootNodeShapePart",
            width: 200,
            height: 200,
            strokeWidth: 1,
            stroke: "#000",
            cursor: "move",

            //fromArrow:"OpenTriangle"
        },
        new go.Binding("figure", "Shape"),
        new go.Binding("fill", "color")

        ),
         GO(go.TextBlock,
                {
                    font: "12pt helvetica, arial, sans-serif",
                    stroke: "black",
                    isMultiline: true,
                    stretch: go.GraphObject.Fill,
                    textAlign: "center",

                },
                 new go.Binding("text", "DisplayText").makeTwoWay())
                  //new go.Binding("location", "location", function (location) {
                  //    return new go.Point(location.x, location.x)
                  //}).makeTwoWay())
                  //new go.Binding("location", "loc",
                  //   function (l) { return new go.Point(scaleWidth(l.x), l.y); }))
         //GO("TreeExpanderButton", {
         //    alignment: go.Spot.Bottom,
         //    alignmentFocus: go.Spot.Bottom
         //}, {
         //    visible: true
         //})

   ));

-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------




myDiagram.groupTemplateMap.add(“RootNodeData”,
GO(go.Group, “Auto”,
//{ locationSpot: go.Spot.Center },
//new go.Binding(“location”, “location”, function (location) {
// return new go.Point(location.x, location.x)
//}).makeTwoWay(),
{
ungroupable: false,
selectionAdornmentTemplate:
GO(go.Adornment, “Auto”,
GO(go.Shape, “Rectangle”,
{ fill: null, stroke: “#333”, strokeWidth: 1 }),
GO(go.Placeholder)
),
movable: true,
cursor: “move”,
layout: GO(go.GridLayout,
{ wrappingColumn: 1, spacing: 1, alignment: go.GridLayout.Position,},
{ comparer: keyCompare201RootNode }, { sorting: go.TreeLayout.SortingAscending }
)
},

              GO(go.Placeholder,
              {
                  margin: 1,
                  background: "#f1f8f1",
                  alignment: go.Spot.Right
              }
              )
          ));
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------

myDiagram.groupTemplateMap.add(“RootContainer”,
GO(go.Group, “Auto”, {
ungroupable: false,
//padding:200,
selectionAdornmentTemplate:
GO(go.Adornment, “Auto”,
GO(go.Shape, “Rectangle”,
{ fill: “#222”, stroke: “#333”, strokeWidth: 1 }),
GO(go.Placeholder)
),
layout: GO(go.TreeLayout,
{
treeStyle: go.TreeLayout.StyleLayered,
arrangement: go.TreeLayout.ArrangementHorizontal,
// properties for most of the tree:
angle: chartTypeSetting.angle,
layerSpacing: 65,

                 sorting: chartTypeSetting.orientation// isForm207 === "0" ? go.TreeLayout.SortingForwards : go.TreeLayout.SortingReverse
             }
         )
 },
        GO(go.Shape, {
            width: OrgChartConfig.RootContainerWidth,
            height: chartTypeSetting.rootContainerHeight,
            strokeWidth: 1,
            stroke: "#666",
            figure: "Rectangle",
            fill: null
        })
   ));
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------

Please suggest some solution.
Thanks

Yes, as you have observed, because the “Root Container” is a node, it is centered relative to its children.

If you removed the “Root Container” completely, both as node data and the group template, and instead had the “RootNodeData” act as a comment, I think things could work the way that you want. That means renaming the “RootNodeData” category to be “Comment”. See the Comments sample, http://gojs.net/latest/samples/comments.html, for an example of using comments in this kind of situation.

However, it appears that when the comment node is a Group, TreeLayout.layoutComments isn’t moving the group the way that you would expect. We’ll fix that for 1.4.10, which we should be releasing within a day or two.

1.4.10 is now available at http://gojs.net

You might be interested in this variation of the Comments sample: http://gojs.net/extras/commentsgroup.html, where each “Comment” Node is implemented by a Group.