Temporary link drawn by LinkingTool has wrong starting point

i have a diagram using a GraphLinksModel and two port Ids: “FROMPORT” on the right and “TOPORT” on the left side of the nodes.

i’m using the LinkingTool to create new links.
when drawing a new link for the first time everything seems to be ok.
when drawing the second link, the temporary link is drawn from the starting point of the previously created link.
it seems to me that the problem is limited to drawing the temporary link, because the second link is created correctly.

screen recording:

it seems to me that i’m implementing a quite basic scenario here.
do you have any idea what i might be doing wrong that results in the above behavior?

How have you customized the LinkingTool?

Are there any errors or warnings in the console output?
Have you tried using go-debug.js instead of go.js?

i’m using the default built-in LinkingTool.
there’s no customization and no call for diagram.toolManager.linkingTool setter in the code.

i’ve spotted one more circumstance. in case i draw the first link from “FROMPORT” forwards, and then i draw the second link from “TOPORT” backwards, the problem is very similar, in a sense that the temporary link visually points to the previously created link’s TOPORT:

i did another experiment. in case i move the starting node of the first link before dragging the second link, the temporary link starts from “the air”:

this is my code for the GraphLinksModel:

var model = new go.GraphLinksModel();
model.nodeKeyProperty = "uniqueId";
model.linkKeyProperty = "uniqueId";
model.linkFromKeyProperty = "fromNodeId";
model.linkToKeyProperty = "toNodeId";
model.linkFromPortIdProperty = "fromPortId";
model.linkToPortIdProperty = "toPortId";
this.goDiagram.model = model;

(fromPortId always has the value “FROMPORT”, and toPortId is always “TOPORT” on my link data objects)

and this is segment of my node template that creates the two ports:

            //<editor-fold defaultstate="collapsed" desc="# fromPortPanel">
            this.exec(new go.Panel(), portPanel => {
               portPanel.type = go.Panel.Position;
               portPanel.alignment = go.Spot.RightCenter;
               portPanel.alignmentFocus = go.Spot.LeftCenter;
               portPanel.portId = "FROMPORT";
               portPanel.fromSpot = go.Spot.RightCenter;
               portPanel.fromLinkable = true;
               portPanel.fromLinkableDuplicates = false;
               portPanel.fromLinkableSelfNode = false;
               portPanel.toLinkable = false;
               portPanel.toLinkableDuplicates = false;
               portPanel.toLinkableSelfNode = false;
               rootPanel.add(portPanel);

               this.exec(new go.Shape(), shape => {
                  shape.figure = "Rectangle";
                  shape.position = new go.Point(0, 0)
                  shape.width = 10;
                  shape.height = 10;
                  shape.fill = "red";
                  shape.strokeWidth = 0;
                  portPanel.add(shape);
               });
            });
            //</editor-fold>

            //<editor-fold defaultstate="collapsed" desc="# toPortPanel">
            this.exec(new go.Panel(), portPanel => {
               portPanel.type = go.Panel.Position;
               portPanel.alignment = go.Spot.LeftCenter;
               portPanel.alignmentFocus = go.Spot.RightCenter;
               portPanel.portId = "TOPORT";
               portPanel.toSpot = go.Spot.LeftCenter;
               portPanel.fromLinkable = false;
               portPanel.fromLinkableDuplicates = false;
               portPanel.fromLinkableSelfNode = false;
               portPanel.toLinkable = true;
               portPanel.toLinkableDuplicates = false;
               portPanel.toLinkableSelfNode = false;
               rootPanel.add(portPanel);

               this.exec(new go.Shape(), shape => {
                  shape.figure = "Rectangle";
                  shape.position = new go.Point(0, 0)
                  shape.width = 10;
                  shape.height = 10;
                  shape.fill = "red";
                  shape.strokeWidth = 0;
                  portPanel.add(shape);
               });
            });
            //</editor-fold>

i’ve checked the console, there are no errors or warnings.

i’m using the debug mode, like this:

import * as go from "gojs/release/go-debug";

That’s pretty weird.

If the fromPortId is always going to be the same value, don’t bother putting the information in each link data object, but instead just set the Link.fromPortId property in the link template. The same goes for the toPortId property. So you don’t need to set the properties in the GraphLinksModel.

[from|to]Linkable[Duplicates|SelfNode] all default to false, so you don’t need to set those properties.

If I just make some simple changes to an app to add an input port on the left side and an output port on the right side of each node, and set Link.fromPortId and Link.toPortId, everything seems to work properly.

thank you Walter! your feedback helped me resolve this issue.

as you confirmed to me that “this should work fine”, i started cleaning up every part of my code that could be considered “exotic”. i ended up with a completely pure minimal scenario.
… and the problem still remained. so i checked my GoJS version. it was 2.1.20. i upgraded to 2.1.38 and voila: problem solved.

my guess is that this could be the relevant fix i needed: