Link template not showing properly

[Dharmeshc]

Hi Team,

As I am new to GOJS and I have added below layout code in my file and gives me output like (screen 1), but I want to show the output as shown in screen 2. Please help me, how do I change the alignment to show as (Screen 2).

Layout code

  diagram.layout = MAKE(go.TreeLayout,

        {

            treeStyle: go.TreeLayout.StyleRootOnly,

            alignment: go.TreeLayout.AlignmentEnd,

            layerSpacing: 200

        });

Below is the linkTemplate code

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;
                }
                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"))
        
      );

screen 1

screen 2

Thanks & Regards,
Dharmesh CB

[walter]

Implement your node template to have only a single default port, as shown in the first example of GoJS Ports in Nodes-- Northwoods Software