Links coming out of wrong side of Port

GoJS
1

I have a node template called question and it contains multiple answers. I use the itemArray binding to created multiple answer nodes currently it’s linking like this.

The ports link from the bottom of the node “5045” for example when it should be linking to the right of it.

image.png389×785 40.5 KB

my template code:

let template =  
      this.$(go.Node,"Auto",
        this.$(go.Shape,"Rectangle", {
          fill:"white",
          stroke: "#5cc8c9"
        }),
          this.$(go.Panel,"Table",
          {
            padding: new go.Margin(0,7,0,7)
          },
          this.$(go.Panel, "Vertical",{
            row: 2, column: 0, angle:90
          },
          new go.Binding("itemArray", "detail", function(d){ return d.udsQuestTreeItem;}),
          { 
            itemTemplate:
            this.$(go.Panel,"Spot",
              { _side: "right",
                fromSpot: go.Spot.Right,
                //fromMaxLinks:1,
                fromLinkable: true, 
                cursor: "pointer",
                background: "#5cc8c9",
                margin: new go.Margin(3,0),
                padding: new go.Margin(3)
               },
               new go.Binding("portId","itemId",function(id){return String(id);}),
               this.$(go.TextBlock, 
                {
                  textAlign: "center",
                  stroke: "white"
                },
                //new go.Binding("text","itemIndex").ofObject()
                new go.Binding("text","itemId")
              )
            )
          }
        )
        ,
        this.$(go.Shape,{
          width: 50,
          height: 10,
          portId:"In", 
          toLinkable: true,
          stroke: "#5cc8c9",
          fill: "#5cc8c9",
          row:0,
          column:0,
        }),
        this.$(go.TextBlock, new go.Binding("text","detail", function(d){ return d.detailId;}),
        {
          row: 1,
          column: 0,
          margin: new go.Margin(3,0,3,0),
          stroke: "black",
          font: "bold 14pt serif"
        }))
    )
2

You have a “Vertical” Panel with an angle of 90. Why not a “Horizontal” Panel with the default angle of zero and the TextBlock with an angle of 90?