Link overlap, on target port

Question

I have an issue with link, on target port device, it unusually overlaps the target port.... check my fiddle . I also have attached a screenshot overlap image. Someone have any suggestions? Thanks!

Answer 1

I think JointJS is calculating that your source and target should be considered an obstacle. Adding the excludeEnds option in your fiddle seems to resolve the issue. You can see the option in the following docs. https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#routers.manhattan

Your code example could be the following:

var link = new joint.dia.Link({
    // source: { id: el1.id },
    // target: { id: el2.id },
    router: { name: 'manhattan', args: {  excludeEnds: ['source', 'target'] } },
    connector: { name: 'rounded' },
    attrs: {
        '.connection': {
            stroke: 'red',
            'stroke-width': 5
        },
        '.marker-target': {
            fill: 'red',
            d: 'M 10 0 L 0 5 L 10 10 z'
        },
        '.marker-source': { /*stroke: '#fe854f',*/ fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
    }
});