mouseDragEnter on temporaryLink

GoJS
1

Hi,
My requirement is to auto generate a port on a link when I drag over a temporaryLink over it.
And for that I tried mouseDragEnter event in link template. But this event gets triggered when I dragenter with a Node object and not with temporaryLink.
Please help.

2

Yes, as the documentation for GraphObject.mouseDragEnter states:

the function to execute when the user moves the mouse into this stationary object during a DraggingTool drag

But during a linking operation the tool is the LinkingTool, or maybe the RelinkingTool, not the DraggingTool.

So you need to customize the LinkingTool and maybe the RelinkingTool. Your description of what you want to do isn’t very clear to me. Here’s something similar to what you describe:
Automatically Creating Ports
This design uses a single general input port. When the user completes the link to this port, the “LinkDrawn” or “LinkRelinked” DiagramEvent listener automatically creates a new port and reconnects the link to it.

3

Hi Walter,
Let me provide you a screenshot for reference.
port
As you can see in picture the blue line is temporary link and it is passing through a link in the red circled part. I want a port generated on that intersection.

4

We don’t have a sample that does that. The closest might be something like:
Electrical Junction Sample

What you’ll need to do is subclass the LinkingTool, have the constructor set LinkingTool.portGravity to a small number, and override the doMouseMove method so that if Tool.isActive is true:

  • when it is over a Link that you want to connect with, it temporarily highlights the Link and shows the LinkingTool’s temporary port appropriately
  • when it is no longer over a suitable target it stops highlighting the Link and no longer shows the temporary port as if it were a target
    And then call the super method to get the default behaviors.

And override LinkingTool.doMouseUp so that when Tool.isActive is true and it is still over a suitable target Link, it actually adds a label node data object to the GraphLinksModel, adds it as a label node of the link (call GraphLinksModel | GoJS API), and then connect the link with that node.
Otherwise call the super method for the default behaviors.

5

Hi Walter,
I am not able to get how can I highlight a link on doMouseMove

6

It’s common to change the color of the Link.path.

7

As you said this. The thing is how would the system know if it is over the Link I want to connect. Because when we move over a link with temporaryLink it does not trigger any event listener.

8

Here’s an override in a subclass of LinkingTool:

  doMouseMove() {
    var part = this.diagram.findPartAt(this.diagram.lastInput.documentPoint);
    if (part instanceof go.Link) console.log(part);
    . . .
  }
9

Hi Walter,
Thanks for the response. It is working with your solution. When I override doMouseMove the temporaryLink stops working. Any ideas on this??

10

I do hope your override is still calling the super method when wanting to get the standard behavior.

11

Yes. go.ToolManager.prototype.doMouseMove.call(this.toolManager);
This is how I am calling the base method.
The thing is before this I was not using doMouseMove. I am just defining the template for temporaryLink.

12

Hi Walter it is working now. I was using the wrong object. It should be like go.LinkingTool.prototype.doMouseMove.call(this.toolManager.linkingTool);

13

Is there a reason you aren’t using class and using: super.doMouseMove() ?
Or do you need your code to run in Internet Explorer 11?

15

OK. That works. But we are in the midst of switching our samples to use ES6 syntax for classes.

16

Oh, Is it. Thanks for letting me know. Will have migrate my project as well for better performance.

17

I doubt there will be any improvement in run-time performance.