Cannot position node link

Please find the attached positioning format. which is in left side is in correct format, actually how do we move the node to keep it center?

Could you please provide relevant details about what you are doing to get the wrong result?

This was my code which is not aligning to center

MAKE(go.Shape, "RoundedRectangle",
       {
           width: 85,
           height: 95,
           stroke: "transparent",
           strokeWidth: 1,
           fromLinkable: false, toLinkable: false,
           name: "SHAPE"
       },
        new go.Binding("fill", "isSelected", function (sel) {
            return sel ? "#1f81e9" : "transparent";
        }).ofObject("")),

    MAKE(go.Panel, "Table", {
        fromLinkable: false, toLinkable: false, defaultAlignment: go.Spot.Top, mouseEnter: contextMouseLeave
    },
    MAKE(go.RowColumnDefinition, { row: 0, height: 47 }),
    MAKE(go.RowColumnDefinition, { row: 1, height: 47 }),
     MAKE(go.Panel, "Auto",
            { row: 0, column: 0 },
     MAKE(go.Panel, "Vertical", { 
         portId: "", width: 55, height: 50, margin: new go.Margin(5, 0, 0, 0), toSpot: new go.Spot(0, 0.5, 0, -20.75), fromSpot: new go.Spot(1, 0.5, 0, -20.75)
     },
    MAKE(go.Picture,
      { margin: 1, width: 36, height: 36, alignment: new go.Spot(0.5, 0.5) },
      new go.Binding("source", "", imageUriUpdate)))),

    MAKE(go.TextBlock, "default text",
         { row: 1, column: 0, font: "10px sans-serif", width: 80, maxLines: 4, overflow: go.TextBlock.OverflowEllipsis, textAlign: "center" },
     new go.Binding("text", "", PresetNameEntryBind),
     new go.Binding("stroke", "isSelected", function (sel) {
         return sel ? "white" : "black";
     }).ofObject(""))
 ),
  MAKE(go.Panel, "Vertical",
        {
            fromLinkable: false, toLinkable: false,
            mouseEnter: contextMouseEnter,            
            contextMenu: myContextMenu,
            cursor: "pointer", alignment: go.Spot.TopRight, name: "CONTEXT", visible: false, height: 16, width: 16
        },
 MAKE(go.Shape, "LogicNot",
      { angle: 45, strokeWidth: 2, name: "CONTEXTSHAPE", margin: 1, width: 7, height: 7 },
       new go.Binding("stroke", "isSelected", function (sel) {
           return sel ? "white" : "black";
       }).ofObject(""))),

    MAKE(go.Picture,
      {
          alignment: new go.Spot(0.275, 0.02), name: "COLLECT", margin: 1, width: 16, height: 16, visible: false, source: siteRoot + "/Content/bootstrap/images/collect_16.png",
          toolTip: collectToolTip, mouseEnter: showCollectToolTip, mouseLeave: hideCollectToolTip, fromLinkable: false, toLinkable: false
      },
      new go.Binding("visible", "IsCollectionNode")),
      MAKE(go.Picture,
      {
          alignment: new go.Spot(0.275, 0.02), name: "ISCONFIGURED", margin: 1, width: 16, height: 16, visible: false, source: siteRoot + "/Content/bootstrap/images/warning_16.png",
          toolTip: nodeToolTip, mouseEnter: toolTipMouseEnter, mouseLeave: toolTipMouseLeave, fromLinkable: false, toLinkable: false
      }),

Those are probably details of the contents of something. If you are asking about how something is positioned we need to understand the Diagram.layout and the link template and maybe other things too. The internals of the nodes and links do not matter, unless those rounded blue rectangle “Route” or “Route2” are actually link labels, which I still do not know.

This is my diagram layout

 diagram.layout = MAKE(go.TreeLayout,

        { angle: 0, alignment: go.TreeLayout.AlignmentCenterChildren, nodeSpacing: 0, layerSpacing: 30, compaction: go.TreeLayout.CompactionNone});

My LinkTemplate

diagram.linkTemplate =
      MAKE(go.Link,
        {
            routing: go.Link.Orthogonal,
            curve: go.Link.JumpOver,
            corner: 14,
            toShortLength:2,
            toSpot: new go.Spot(0, 0.5, 0, -20.75), fromSpot: new go.Spot(1, 0.5, 0, -20.75),
            fromEndSegmentLength: 20, toEndSegmentLength: 20,
            selectable: false, //--> Change this to true when we need to implement Selection Implementation
            reshapable: false,
            // If a node from the Palette is dragged over this node, its outline will turn dark gray
            mouseDragEnter: function (e, link) {
                //var newnode = diagram.selection.first();
                //if (link.data.category === "Merge")
                //    return;
                //if (!(link.fromNode.category === "end" || (link.toNode.category === "end" && link.toNode.findLinksOutOf().count > 0))) {
                 //   var nextLink = link.toNode.findLinksOutOf().first();
                 //   if (nextLink.data.category !== "Merge")
                try{
                link.isHighlighted = true;
                if (link.fromNode.category === "end") {
                    link.fromNode.findLinksInto().first().isHighlighted = true;
                }
                if (link.toNode.category === "end" && link.toNode.findLinksOutOf().count > 0) {
                    link.toNode.findLinksOutOf().first().isHighlighted = true;
                }
                if (link.fromNode.category === "dummy" && link.fromNode.findLinksInto().count > 0) {
                  var prevLink=link.fromNode.findLinksInto().first();
                  //  if (prevLink.data.category!=="Merge")
                        prevLink.isHighlighted = true;
                }
                if (link.toNode.category === "dummy" && link.toNode.findLinksOutOf().count > 0) {
                   //var nextLink = link.toNode.findLinksOutOf().first();
                   // if (nextLink.data.category !== "Merge")
                         link.toNode.findLinksOutOf().first().isHighlighted = true;
                }
                } catch (err) {
                    revertToPrevState = true;
                    console.log(err);
                }
            },
            mouseDragLeave: function (e, link) {
                try{
                link.isHighlighted = false;
                if (link.fromNode.category === "end") {
                    link.fromNode.findLinksInto().first().isHighlighted = false;
                }
                if (link.toNode.category === "end" && link.toNode.findLinksOutOf().count > 0) {
                    link.toNode.findLinksOutOf().first().isHighlighted = false;
                }
               
                } catch (err) {
                    revertToPrevState = true;
                    console.log(err);
                }
            },
            // if a node from the Palette is dropped on a link, the link is replaced by links to and from the new node
            mouseDrop: dropOntoLink,
            mouseEnter: LinkMouseEnter,
            mouseLeave: LinkMouseLeave
        }

In both of your screenshots, are there 7 Nodes and 6 Links?

By the way, please format your code so that people can read it.

There are 7 Node and 6 links in the screen shot.

Actually I am placing my code in the formatted text, but in the preview it is not taking the correct format of the text.

Link Template

diagram.linkTemplate =
MAKE(go.Link,
{
    routing: go.Link.Orthogonal,
    curve: go.Link.JumpOver,
    corner: 14,
    toShortLength:2,
   toSpot: new go.Spot(0, 0.5, 0, -20.75), fromSpot: new go.Spot(1, 0.5, 0, -20.75),
   fromEndSegmentLength: 20, toEndSegmentLength: 20,
   selectable: false, //--> Change this to true when we need to implement Selection Implementation
  reshapable: false,
  
mouseDragEnter: function (e, link) {
try{
        link.isHighlighted = true;
        if (link.fromNode.category === "end") {
            link.fromNode.findLinksInto().first().isHighlighted = true;
        }
         if (link.toNode.category === "end" && link.toNode.findLinksOutOf().count > 0) {
                link.toNode.findLinksOutOf().first().isHighlighted = true;
        }
       if (link.fromNode.category === "dummy" && link.fromNode.findLinksInto().count > 0) {
            var prevLink=link.fromNode.findLinksInto().first();
      //  if (prevLink.data.category!=="Merge")
           prevLink.isHighlighted = true;
        }
       if (link.toNode.category === "dummy" && link.toNode.findLinksOutOf().count > 0) {
          link.toNode.findLinksOutOf().first().isHighlighted = true;
       }
  } 
  catch (err) {
    revertToPrevState = true;
    console.log(err);
  }
},
mouseDragLeave: function (e, link) {
try{
      link.isHighlighted = false;
      if (link.fromNode.category === "end") {
          link.fromNode.findLinksInto().first().isHighlighted = false;
      }
      if (link.toNode.category === "end" && link.toNode.findLinksOutOf().count > 0) {
         link.toNode.findLinksOutOf().first().isHighlighted = false;
      }
      if (link.fromNode.category === "dummy" && link.fromNode.findLinksInto().count > 0) {
         link.fromNode.findLinksInto().first().isHighlighted = false;
      }
     if (link.toNode.category === "dummy" && link.toNode.findLinksOutOf().count > 0) {
        link.toNode.findLinksOutOf().first().isHighlighted = false;
      }
   } 
  catch (err) {
    revertToPrevState = true;
    console.log(err);
  }
},
// if a node from the Palette is dropped on a link, the link is replaced by links to and from the new node

mouseDrop: dropOntoLink,
mouseEnter: LinkMouseEnter,
mouseLeave: LinkMouseLeave
},
new go.Binding("fromSpot", "fromSpot"),
new go.Binding("toSpot", "toSpot"),
new go.Binding("zOrder", "isHighlighted", function (h) { return h ? 10 : 0; }).ofObject(),
MAKE(go.Shape, shapeStyle()),
MAKE(go.Shape, arrowStyle()),
MAKE(go.TextBlock,  // To show Branch name
{
name:"branchName",
textAlign: "start",
segmentIndex: -1,
segmentOffset: new go.Point(-20, -15),
segmentOrientation: go.Link.OrientUpright,
font: "bold 9px sans-serif",
stroke: "transparent",
text: ""
},
new go.Binding("stroke", "isHighlighted", function (h) { return h ? "rgb(144,144,144)" : "rgb(211,211,211)"; }).ofObject())
//new go.Binding("text", "branchName"))
);

To format code surround it although lines of triple backbones, as I did editing your previous post.

By the way, your TreeLayout is overriding your Link template’s fromSpot and toSpot. Set TreeLayout.setsPortSpot and setsChildPortSpot to false.

I’ll try your code soon.
[EDIT:] Actually, I can’t – I don’t know what the node templates are.

Also, I should say that all of the interactive behavior doesn’t matter for what you are asking about, so you could have simplified what you posted by removing those unnecessary details.

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          layout: $(go.TreeLayout, { setsPortSpot: false, setsChildPortSpot: false }),
          "undoManager.isEnabled": true
        });

    myDiagram.nodeTemplateMap.add("Little",
      $(go.Node, "Vertical",
        { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
        $(go.Shape,
          { name: "ICON", fill: "greenyellow", strokeWidth: 0, width: 40, height: 40,
            portId: "", fromSpot: go.Spot.Right, toSpot: go.Spot.Left }),
        $(go.TextBlock,
          { margin: 2 },
          new go.Binding("text"))
      ));

    myDiagram.nodeTemplateMap.add("Big",
      $(go.Node, "Spot",
        { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
        $(go.Shape, "RoundedRectangle",
          { fill: "dodgerblue", strokeWidth: 0, width: 120, height: 120 }),
        $(go.Panel, "Vertical",
          { alignment: new go.Spot(0.5, 0, 0, 50) },
          $(go.Shape,
            { name: "ICON", fill: "greenyellow", strokeWidth: 0, width: 40, height: 40,
              portId: "", fromSpot: new go.Spot(1, 0.5, 40, 0), toSpot: new go.Spot(0, 0.5, -40, 0) }),
          $(go.TextBlock,
            { margin: 2, stroke: "white" },
            new go.Binding("text"))
        )
      ));

    myDiagram.nodeTemplateMap.add("Circle",
      $(go.Node,
        { locationSpot: go.Spot.Center, fromSpot: go.Spot.Right, toSpot: go.Spot.Left },
        $(go.Shape, "Circle",
          { width: 16, height: 16, fill: "transparent", stroke: "lightgray", strokeWidth: 3 })
      ));

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal, corner: 10 },
        $(go.Shape, { stroke: "lightgray", strokeWidth: 3 })
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", category: "Little" },
      { key: 2, text: "Beta", category: "Big" },
      { key: 3, text: "Gamma", category: "Circle" },
      { key: 4, text: "Delta", category: "Circle" },
      { key: 5, text: "Epsilon", category: "Circle" },
      { key: 6, text: "Zeta", category: "Circle" },
      { key: 7, text: "Eta", category: "Circle" }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 1, to: 4 },
      { from: 1, to: 5 },
      { from: 1, to: 6 },
      { from: 2, to: 7 }
    ]);
  }

produces:

Isn’t that what you want? (ignoring irrelevant styling issues)

Thanks for the update Walter, The issue I was asking is like “beta icon” node should be centered and it should be equally divided as shown in the below image.

I thought you wanted to line up horizontally the blue node with the circular nodes beneath it.

No I want the icon to be center aligned. Is there a way to do it?

Override TreeLayout | GoJS API to assign TreeVertex | GoJS API to the vertex(es) whose LayoutVertex | GoJS API is a blue node. Assign a value that is half whatever value you are using for the other nodes/vertexes.

In above example code which you written for horizontal blue node, in that which function do we need to use the layer spacing? Could you please help me out.

Override the TreeLayout.assignTreeVertexValues method.

Even after I call the assignTreeVertex the positioning of the node is not changing

myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,  // for v1.*
            layout: $(go.TreeLayout,
                      {
                        assignTreeVertexValues: function(v) {
						v.layerSpacing = 50;v.rowSpacing = 0;
                        },
						setsPortSpot: false,setsChildPortSpot: false
                      }),"undoManager.isEnabled": true
          });

Kindly help me out to resolve this problem

      $(go.Diagram, "myDiagramDiv",
        {
          layout: $(go.TreeLayout, {
            setsPortSpot: false,
            setsChildPortSpot: false,
            assignTreeVertexValues: function(v) {
              if (v.node && v.node.category === "Big") v.layerSpacing = 25;
            }
          }),

But of course you will need to substitute how you decide the parent vertex/node is one of your big blue nodes. Also this assumes the layerSpacing value for your layout is 50, which it is by default.

the big blue is not aligned center and still it is showing wrongly, Please find my updated code.

function init() {
    var $ = go.GraphObject.make;

   
	myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,  // for v1.*
            layout: $(go.TreeLayout,
                      {
					   setsPortSpot: false,
					   setsChildPortSpot: false,
                        assignTreeVertexValues: function(v) {
						if (v.node && v.node.category === "Big")
							v.layerSpacing = 25;
                        }
                      }),"undoManager.isEnabled": true
          });
		  
    myDiagram.nodeTemplateMap.add("Little",
      $(go.Node, "Vertical",
        { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
        $(go.Shape,
          { name: "ICON", fill: "greenyellow", strokeWidth: 0, width: 40, height: 40,
            portId: "", fromSpot: go.Spot.Right, toSpot: go.Spot.Left }),
        $(go.TextBlock,
          { margin: 2 },
          new go.Binding("text"))
      ));

    myDiagram.nodeTemplateMap.add("Big",
      $(go.Node, "Spot",
        { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
        $(go.Shape, "RoundedRectangle",
          { fill: "dodgerblue", strokeWidth: 0, width: 120, height: 120 }),
        $(go.Panel, "Vertical",
          { alignment: new go.Spot(0.5, 0, 0, 50) },
          $(go.Shape,
            { name: "ICON", fill: "greenyellow", strokeWidth: 0, width: 40, height: 40,
              portId: "", fromSpot: new go.Spot(1, 0.5, 40, 0), toSpot: new go.Spot(0, 0.5, -40, 0) }),
          $(go.TextBlock,
            { margin: 2, stroke: "white" },
            new go.Binding("text"))
        )
      ));

    myDiagram.nodeTemplateMap.add("Circle",
      $(go.Node,
        { locationSpot: go.Spot.Center, fromSpot: go.Spot.Right, toSpot: go.Spot.Left },
        $(go.Shape, "Circle",
          { width: 16, height: 16, fill: "transparent", stroke: "lightgray", strokeWidth: 3 })
      ));

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal, corner: 10  },
        $(go.Shape, { stroke: "lightgray", strokeWidth: 3})
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", category: "Little" },
      { key: 2, text: "Beta", category: "Big" },
      { key: 3, text: "Gamma", category: "Circle" },
      { key: 4, text: "Delta", category: "Circle" },
      { key: 5, text: "Epsilon", category: "Circle" },
      { key: 6, text: "Zeta", category: "Circle" },
      { key: 7, text: "Eta", category: "Circle" }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 1, to: 4 },
      { from: 1, to: 5 },
      { from: 1, to: 6 },
      { from: 2, to: 7 }
    ]);
	
  }

When I run the code I posted above, Cannot position node link - #9 by walter, plus the override of TreeLayout.assignTreeVertexValues, I get:
image

I believe this is what you asked for, after your clarification.