JointJS port positioning

Question

How do I get the ports at the top and bottom of a Model object?

I see that the ports are always created in the left and right of the model. I need it on the top and bottom.

I do not want to use the rotate transformation as it changes the orientation of the labels too.

Answer 1

I got a solution to that luckily

You have certain Model object, right? Let's call it as element.

element.attr({
'.inPorts': {transform: 'rotate(-90)'}
});

The ports will now be horizontally situated. Play a little with theor exact positioning. You can use ref-x or ref-y property.

element.attr({
    '.inPorts': {transform: 'rotate(-90)', 'ref-x':0.3,'ref-y':-0.3}
});

Note: It only works for having ports on top of element, try some hack for bottom as well.

Happy Coding!