Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
58 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
// Routes the link always to/from a certain side | ||
// | ||
// Arguments: | ||
// padding ... gap between the element and the first vertex. :: Default 40. | ||
// side ... 'left' | 'right' | 'top' | 'bottom' :: Default 'bottom'. | ||
// | ||
joint.routers.oneSide = function(vertices, opt, linkView) { | ||
|
||
var side = opt.side || 'bottom'; | ||
var padding = opt.padding || 40; | ||
|
||
// LinkView contains cached source an target bboxes. | ||
// Note that those are Geometry rectangle objects. | ||
var sourceBBox = linkView.sourceBBox; | ||
var targetBBox = linkView.targetBBox; | ||
var sourcePoint = sourceBBox.center(); | ||
var targetPoint = targetBBox.center(); | ||
|
||
var coordinate, coordinateValue, dimension, direction; | ||
|
||
switch (side) { | ||
case 'bottom': | ||
direction = 1; | ||
coordinate = 'y'; | ||
dimension = 'height'; | ||
break; | ||
case 'top': | ||
direction = -1; | ||
coordinate = 'y'; | ||
dimension = 'height'; | ||
break; | ||
case 'left': | ||
direction = -1; | ||
coordinate = 'x'; | ||
dimension = 'width'; | ||
break; | ||
case 'right': | ||
direction = 1; | ||
coordinate = 'x'; | ||
dimension = 'width'; | ||
break; | ||
default: | ||
throw new Error('Router: invalid side'); | ||
} | ||
|
||
// move the points from the center of the element to outside of it. | ||
sourcePoint[coordinate] += direction * (sourceBBox[dimension] / 2 + padding); | ||
targetPoint[coordinate] += direction * (targetBBox[dimension] / 2 + padding); | ||
|
||
// make link orthogonal (at least the first and last vertex). | ||
if (direction * (sourcePoint[coordinate] - targetPoint[coordinate]) > 0) { | ||
targetPoint[coordinate] = sourcePoint[coordinate]; | ||
} else { | ||
sourcePoint[coordinate] = targetPoint[coordinate]; | ||
} | ||
|
||
return [sourcePoint].concat(vertices, targetPoint); | ||
}; |
0f6a402
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi and thank you.
It would be great to have the ability to set different directions for
source
andtarget
.I want to set
right
onsource
andleft
on target, so horizontally aligned graph looks good.I want to set
bottom
on source andtop
on target, so vertically aligned graph looks good.Thank you.