This causes an issue when resetCells() is used to load a bunch of cells and links all at once, the perpendicularLinks option is specified, and the initial size of the paper is not large enough to contain all of the elements and vertices. resetCells() appears to not auto-grow the paper to fit its contents until after everything has been added, so when this bit of logic runs, the paper is still small and the width of horizontalLineRect and the height of verticalLineRect aren't necessarily large enough to actually reach from the vertex to the element box, and the intersection test can return a false negative, causing the link to not end up perpendicular like it should.
New updated code : Line 11966 on joint.js
At the if and else if spots for calculating the reference points.
// If `perpendicularLinks` flag is set on the paper and there are vertices
// on the link, then try to find a connection point that makes the link perpendicular
// even though the link won't point to the center of the targeted object.
if (this.paper.options.perpendicularLinks) {
var nearestSide;
if (spotBbox.origin().y <= reference.y && reference.y <= spotBbox.corner().y) {
nearestSide = g.rect(spotBbox).sideNearestToPoint(reference);
switch (nearestSide) {
case 'left':
spot = g.point(spotBbox.x, reference.y);
break;
case 'right':
spot = g.point(spotBbox.x + spotBbox.width, reference.y);
break;
default:
spot = g.rect(spotBbox).center();
break;
}
} else if (spotBbox.origin().x <= reference.x && reference.x <= spotBbox.corner().x) {
nearestSide = g.rect(spotBbox).sideNearestToPoint(reference);
switch (nearestSide) {
case 'top':
spot = g.point(reference.x, spotBbox.y);
break;
case 'bottom':
spot = g.point(reference.x, spotBbox.y + spotBbox.height);
break;
default:
spot = g.rect(spotBbox).center();
break;
}
} else {
// If there is no intersection horizontally or vertically with the object bounding box,
// then we fall back to the regular situation finding straight line (not perpendicular)
// between the object and the reference point.
spot = g.rect(spotBbox).intersectionWithLineFromCenterToPoint(reference);
spot = spot || g.rect(spotBbox).center();
}
} else {
spot = g.rect(spotBbox).intersectionWithLineFromCenterToPoint(reference);
spot = spot || g.rect(spotBbox).center();
}
This causes an issue when resetCells() is used to load a bunch of cells and links all at once, the perpendicularLinks option is specified, and the initial size of the paper is not large enough to contain all of the elements and vertices. resetCells() appears to not auto-grow the paper to fit its contents until after everything has been added, so when this bit of logic runs, the paper is still small and the width of horizontalLineRect and the height of verticalLineRect aren't necessarily large enough to actually reach from the vertex to the element box, and the intersection test can return a false negative, causing the link to not end up perpendicular like it should.
New updated code : Line 11966 on joint.js
At the if and else if spots for calculating the reference points.