Click on from/to endpoint of a link causing connected port changed

I realize in any example, for instance, Flowchart

When selecting a link, and then click on from/to endpoint of the link, the endpoint will jump to other port. How should I disable this behavior? Thanks.


Those “end point handles” are actually relinking handles, set up and used by the RelinkingTool.

If you don’t want that behavior, don’t set Link.relinkableFrom or Link.relinkableTo to true.

Thanks for quick reply.

I do still want to relink behavior, like drag the end point and relink to some other ports. However, I just would like to disable click-relink behavior. If I set those properties to false, I assume I won’t get any relinking behavior, right?

Yes, that’s correct. OK, so don’t disable relinking on Links.

If you try relinking such a link, can the user successfully relink a link back to the port that it started from? If not, that’s a problem – for some reason it is invalid for the user to draw a link between the two ports that that link already connects!

The answer is no, when relinking triggered, user should mean to search for a new port instead of the current one.

More clear, user should be able to drag an from/to end point to see the dummy relinking route if a new port can be linked to. I believe GoJS do some smart search to find the available port near mouse position. Once mouse up, relink should happen on the new port as it just indicated. However, the question now is that if user only clicks on the port without dragging, relinking still happen without any visual hint.

OK, to clarify: if the user has selected a Link from A to B, and if the user does a mouse-down and drag on the “to” relinking handle, the RelinkingTool does not allow that Link to be reconnected with B.

Then perhaps you want to cancel the RelinkingTool if the mouse hasn’t moved away from the port. Would that be acceptable?

    myDiagram.toolManager.relinkingTool.doMouseUp = function() {
      var port = (this.isForwards ? this.originalToPort : this.originalFromPort);
      if (port !== null && port.actualBounds.copy().inflate(4, 4).containsPoint(port.getLocalPoint(this.diagram.lastInput.documentPoint))) {
      } else {;

I think this is the value where I do mouse down and won’t change while my mouse moving?

The value of that expression changes every time the user moves the mouse/finger/stylus and the diagram has processed the DOM event.