How to programmatically initiate the linking tool?

GoJS
1

I’d like to be able to click and drag from any point on an existing link (the selected link in my first screenshot for example) and in the process initiate creation of a new link as if it were drawn from the blue port at the left end of the link. My goal here is to click-drag from the selected link to the port on the left of node “three”, while having the linking tool show the temporary link while I’m dragging.

I thought I could use the code suggested at the top of the LinkingTool help page, and I put it in mouseDragLeave for the link:
mouseDragLeave: function (evt, link, b) { var tool = diagram.toolManager.linkingTool; tool.startObject = link.fromPort; diagram.currentTool = tool; tool.doActivate(); }

This seems to work in a simple jsfiddle (Edit fiddle - JSFiddle - Code Playground), but not in my larger app. Weird things happen. When I start the drag, I get a large magenta square drawn which seems to be topleft anchored on my fromPort of interest. Then the temporary link seems to be drawn from the center of this large square, when I really want it drawn from the small blue port at the right of node “one”. When I actually do make a link connection here, the connectivity looks correct, and “one” and “three” then are connected, but it’s the linking tool process that has me confused. I don’t know what I might have changed to cause this linkingtool behavior. What should I look into changing to get the tool link drawn from my real fromPort instead of this large box?

2

I cannot try this code at the moment, but I think the problem is that the DraggingTool is not properly cancelled when you want to start the LinkingTool.

Try setting evt.handled = true and calling diagram.currentTool.doCancel() before your code in the mouseDragLeave event handler to start the LinkingTool.

3

Hmm. I tried to modify the code as you suggested, but the changes in behavior are even more confusing to me. It’s true that the dragging tool was the current tool and that evt.handled was false when I first enter this mouseDragLeave code.

mouseDragLeave: function (evt, link, b) {
    evt.handled = true;
    diagram.currentTool.doCancel();

    var tool = diagram.toolManager.linkingTool;
    tool.startObject = link.fromPort;
    diagram.currentTool = tool;
    tool.doActivate();
}

The first time I click and drag from the link, I get this small magenta dot (circled in the screenshot) that follows the cursor. It seems to be part of the linking tool, since when it comes close to a connectable port, the port gets targeted and I can make a connection.

But, after I click around on my diagram a little, it gets into a state similar to before where I get the large box when I initiate a drag from a link. This time, though, I still see the little magenta box. Also, it seems like the large square is anchored to the stubby gray rectangle rather than the port that’s the actual fromPort for the link I’m click-dragging from. The gray rectangle and red rect are part of another port for my node, but I don’t want them to be involved in this linking action.

Thank you for your help.

4

I just tried your code:

    myDiagram.linkTemplate =
      $(go.Link,
        {
          mouseDragLeave: function(evt, link, b) {
            evt.handled = true;
            evt.diagram.currentTool.doCancel();
            var tool = evt.diagram.toolManager.linkingTool;
            tool.startObject = link.fromPort;
            evt.diagram.currentTool = tool;
            tool.doActivate();
          },
          . . .

in the Minimal sample, and it worked exactly as I thought you wanted.

Could you try it in a simple sample and see if it works there the way that you want? If it does I wonder what’s different about the environment in your app.