My application automatically routes some connection lines using jointjs's manhattan router. The issue I'm having is:
The file I believe I need to edit is:
https://github.com/clientIO/joint/blob/master/plugins/routers/joint.routers.manhattan.js
Please see these images to get a better idea of what I'm talking about:
Before Manhattan Routing:
After Manhattan Routing:
What my goal is:
I've tried using the other routers, but they were much worse for my specific application.
My configuration is as follows:
link.set('router', {
name: 'manhattan',
args: {
startDirections: ['bottom']
}
});
I've been looking at joint.routers.manhattan.js but it's pretty complex...
Does anyone know what I can modify in joint.routers.manhattan.js so that labels are considered obstacles?
Possible Solutions:
There were a few things I learned that helped me:
Links are NOT elements. When you do graph.getElements()
, the list will not include any links. Try running this in the javascript console:
var map = graph.getElements()
for(var m=0; m<map.length; m++)
{
console.log("Type: "+map[m].get('type')+", Bounding Box: "+map[m].getBBox());
}
Changing the step
or maximumLoops
options may help:
link.set('router', {
name: 'manhattan',
args: {
startDirections: ['bottom'],
step: 10,
maximumLoops: 500
}
});
getBBox
for elements where links are getting too close to. Another way to increase the size of the obstacle is to increase the manhattan router's opt.paddingBox
variable. If you look at the source code, it is doing exactly what I need:
// expand elements boxes by specific padding
.invoke('moveAndExpand', opt.paddingBox)
I ended up adding extra padding to the manhattan file using the last suggestion listed above.