Gojs link fragmented on the beginning

GoJS
1

My temporaryLink Template:

go.Shape.defineArrowheadGeometry("CustomArrowHead", go.Geometry.parse("M0.854,7.854C0.756,7.951,0.628,8,0.5,8S0.244,7.951,0.146,7.854c-0.195-0.195-0.195-0.512,0-0.707L3.293,4L0.146,0.853 c-0.195-0.195-0.195-0.512,0-0.707s0.512-0.195,0.707,0l3.5,3.5c0.195,0.195,0.195,0.512,0,0.707", true));

this.diagram.toolManager.linkingTool.temporaryLink = goMake(go.Link, go.Link.Bezier,
                    {
                        fromEndSegmentLength: 50,
                        toEndSegmentLength: 90,
                        toShortLength: 0.5,
                        adjusting: go.Link.End,
                        zOrder: -1
                    },
                    goMake(go.Shape,  // the highlight shape, normally transparent
                        {
                            isPanelMain: true,
                            strokeWidth: 2,
                            stroke: "transparent"
                        }),
                    goMake(go.Shape, "RoundedRectangle", // the link path shape
                        {
                            isPanelMain: true,
                            strokeWidth: 1,
                            stroke: "#777"
                        }
                    ),
                    goMake(go.Shape,  // the arrowhead
                        {
                            toArrow: "CustomArrowHead",
                            strokeWidth: 0,
                            fill: "#777"
                        }
                    )
                );

initially the link appears too long and creates a bad appearance

how to fix it?

Picture 1:

test
test.gif1130×688 345 KB

I want it to be like picture 2. As you can see here the link length is very smooth

Picture 2:

aaadsasd
aaadsasd.gif1532×688 157 KB

2 
    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            "linkingTool.temporaryLink":
              $(go.Link,
                {
                  curve: go.Link.Bezier,
                  fromSpot: go.Spot.Right, toSpot: go.Spot.None,
                  fromEndSegmentLength: 20, toEndSegmentLength: 50
                },
                $(go.Shape),
                $(go.Shape, { toArrow: "OpenTriangle" })
              ),
            "linkingTool.portTargeted": function(node, port, tempNode, tempPort, toEnd) {
              var templink = myDiagram.toolManager.linkingTool.temporaryLink;
              if (!port) {
                templink.fromEndSegmentLength = 20;
                templink.toSpot = go.Spot.None;
              } else {
                templink.fromEndSegmentLength = 50;
                templink.toSpot = go.Spot.Left;
              }
            }
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay()),
      );

    myDiagram.linkTemplate =
      $(go.Link,
        {
          curve: go.Link.Bezier,
          fromSpot: go.Spot.Right, toSpot: go.Spot.Left,
          fromEndSegmentLength: 50, toEndSegmentLength: 50
        },
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );