How can I precisely connect a link with arrowheads to a port ?

[tetsutohara]

Introduction

Hi,

I am trying to connect a link that uses linkTools.SourceArrowhead() and
linkTools.TargetArrowhead() to a port.

The arrowheads are configured to appear when the user hovers over the link.

Steps to reproduce

1. Drag the source arrowhead of a link and connect it to a port.
2. While dragging, the tip of the arrowhead correctly points to the port,
   as shown in the screenshot below.

3. Leave the mouse so that the arrowhead disappears.
4. After the arrowhead disappears, an unexpected gap appears between
   the link endpoint and the port, as shown in the screenshot below.

Restrictions & Constraints

I understand that this visual issue can be mitigated
by explicitly setting the connectionPoint to boundary, for example:

connectionStrategy: function (end, view, _magnet, coords) {
    const size = view.model.size();
    const anchor = view.model.findClosestAnchor(coords.x, coords.y);

    return {
        anchor: {
            name: 'center',
            args: {
                dx: anchor.x - size.width / 2,
                dy: anchor.y - size.height / 2,
            },
        },
        connectionPoint: {
            name: 'boundary',
        },
        magnet: 'body',
        id: end.id,
    };
}

However, I would like to avoid this approach.

For example, suppose a link is connected to the right-side port of a diamond-shaped element,
as shown in the screenshot below.

If the diamond element is moved so that the link overlaps the element,
the connection between the link and the port becomes visually ambiguous as shown in the screenshot below.

In this situation, it is no longer clear which side of the element
the link is logically connected to.

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

Please provide the example. Feel free to fork this JSFiddle.

You should use useModelGeometry option if you are working with model metrics (size) only. See docs.

However, I would like to avoid this approach.

What should happen instead?
You can change the connectionPoint to "anchor" type for instance. See docs.

[tetsutohara]

Hi kumilingus,

Thank you for your instant reply.
Your advice helped me achieve what I wanted to do,
and I sincerely appreciate your support.