Weird linkingtool behavior

GoJS
1

Hi, I tried to borrow this example into our code base to use adornment to support dragging to create a new link.

When I hovered over a node, a circle appears on the right-hand side as adornment so I could a drag a new link from the node. If I hovered over a different node in the same screen, the link drawn from the corresponding node, as expected. The two animated gifs below show the correct behavior.

recording1
recording2

However, the weird thing happened when I did the following:

  1. I dragged a link from node A.
  2. I scrolled the diagram horizontally so that node A was off the screen.
  3. I hovered over node B in the current screen and tried to drag a link from its adornment, the temporary link was from node A that is off the screen.

weird1

The same weird effect happened even when I scrolled the diagram to make node A visible again.

weird2

But when I dropped the temporary link to another node, the newly created link started from node B, which is correct, even though the temporary link always started from node A, as shown below.

weird3

The critical step to trigger this weird behavior is to make the first node that we dragged a link from off the screen.

I debugged a little bit. The tool.startObject in the drawLink method is the correct port in node B. But the temporary link started from node A :(

I tried to reproduce it in a simpler GoJS code but have not succeeded yet. Do you have any clue why the behavior happens and how to fix it?

Thank you so much for your time!

2

Which version of GoJS are you using?

The LinkingTool reuses a single Link, the LinkingBaseTool.temporaryLink. On the second and subsequent uses of that tool, I suspect it is briefly showing where the temporary link had been in its last use. But I had thought we had fixed that problem years ago.

3

Hi Walter, we are using 2.1.56. I have one more update. The issue is related to the go.Overview. If I commented out the following line

  myOverview = $(go.Overview, "myOverviewDiv", {
      observed: myDiagram,
    });

The issue does no longer exist.

I am still trying to make the GoJS code for you to debug and investigate. Thanks!

4

Hi, please check this jsfiddle link. I can reproduce the weird behavior there.

notworking

However, if you comment out the myOverview code from line 251 to line 254 in the JavaScript code, the issue is no longer there.

working

Looking forward to your suggestion on how to solve the issue without disabling the overview. Thanks!

5

I also noticed that the temporary link jumps from the previous input location. It would be great if you could help me solve that issue as well :)

Thanks a lot!

6

Try adding this line to set the LinkingBaseTool.temporaryToNode’s location in your drawLink code:

  const drawLink = (e, obj) => {
    var node = obj.part.adornedPart;
    var port = node.findObject("PORT_RIGHT");
    var ltool = e.diagram.toolManager.linkingTool;
    ltool.startObject = port;
    ltool.temporaryToNode.location = e.diagram.lastInput.documentPoint;
    e.diagram.currentTool = ltool;
    ltool.doActivate();
  };
7

Hi Walter, I still have the same issue in the jsfiddle code. I have added line 24 based on your suggestion.

8

That’s odd – I copied your code, noticed that behavior, added that one location-setting statement, and that behavior disappeared. So I do not understand why it would be different for you.

9

Hi Walter, I also have a copy of the jsfiddle code in my local machine. It still has the same issue after I added your change in my local machine.

10

I just tried modifying your fiddle, at the link you provided above, and it seemed to work better.

11

Hi Walter, maybe we are talking about two different issues. I no longer see the jump of the temporary link, which is good.

But I still see the original issue in jsfiddle: when you dragged a link from node A, scrolled away node A, and tried to drag a link from node B, the temporary link still started from node A.

12

When I try the current fiddle Edit fiddle - JSFiddle - Code Playground it seems to work well.
I am unable to reproduce what you showed in your video.

13

Hi Walter, I took another screen recording of the jsfiddle code. As you can see below, the first dragging worked fine. But when I scrolled the diagram to the right and did the second dragging, the temporary link started from somewhere outside the diagram on the left.

jsfiddle3

If possible, can you please take a screen recording of the working behavior from jsfiddle and share it with me? Thanks!

14

Try this instead:

const drawLink = (e, obj) => {
  var node = obj.part.adornedPart;
  var port = node.findObject("PORT_RIGHT");
  var ltool = e.diagram.toolManager.linkingTool;
  ltool.startObject = port;
  e.diagram.currentTool = ltool;
  ltool.doActivate();
  ltool.temporaryFromNode.ensureBounds();
  ltool.temporaryToNode.ensureBounds();
};
15

Thank you so much, Walter!