Link head out of place with "metro" router.

[emiliojoseav]

Hi, something is happening with the links head using "metro" router. When I have 2 boxes connected by a link, depending of the boxes position, the head of the link seams to move out of its natural place.

It happens the same with bouth APIS, "joint.dia.Link" and " joint.shapes.standard.Link".
Here is my Link code:

var CustomLink = joint.dia.Link.define('standard.Link', {
        attrs: {
            line: {
                connection: true,
                stroke: '#3498DB',
                strokeWidth: 3,
                strokeLinejoin: 'round',
                targetMarker: {
                    'type': 'path',
                    'd': 'M 10 -5 0 0 10 5 z'
                }
            }
        },
        router: { name: 'metro' },
        connector: { name: 'rounded', args: { radius: 20 } }
    }, {
            markup: [{
                tagName: 'path',
                selector: 'wrapper',
                attributes: {
                    'cursor': 'pointer'
                }
            }, {
                tagName: 'path',
                selector: 'line',
                attributes: {
                    'fill': 'none'
                }
            }]
        });

To solve the problem I'm using "manhattan router":
router: { name: 'manhattan', args: { padding: 20 } },

This is the JointJS Google Group thread:
https://groups.google.com/forum/#!topic/jointjs/BQc1qjR6pJ4

Greetings, Emilio.

[kumilingus]

Hi, perhaps you can work around this issue by moving the link anchors. e.g if you have 2 port groups (one on the left in and one on the right out) you can move anchors outside the port to left resp. right.

paper.options.defaultAnchor = function(...args) {
        const magnet = args[1];
        const endType = args[4];
        const endView = this.getEndView(endType);
        if (endView) {
            const group = endView.findAttribute('port-group', magnet);
            if (group) {
                if (group === 'in') {
                    return joint.anchors.left(...args);
                }
                if (group === 'out') {
                    return joint.anchors.right(...args);
                }
            }
        }
        return joint.anchors.center(...args);
    }