Draw2d js: How can I keep the ports on the top of the figure? - draw2d-js

Question

After reading a lot in order to manipulate the position of the ports, I found another problem: when I select a port that is positioned below the figure, as shown in the images.
My question is: How can I keep the ports on the top of the figure?
This is my code:
var leftLocator = new draw2d.layout.locator.InputPortLocator();
var rightLocator = new draw2d.layout.locator.OutputPortLocator();
leftLocator.relocate = function(index, figure) {
var width = figure.getParent().getWidth();
var height = figure.getParent().getHeight();
var x = width / 4;
var y = height / 2;
figure.setPosition(x, y);
}
rightLocator.relocate = function(index, figure) {
var width = figure.getParent().getWidth();
var height = figure.getParent().getHeight();
var x = width * 3 / 4;
var y = height / 2;
figure.setPosition(x, y);
}
elemento.createPort("input", leftLocator);
elemento.createPort("output", rightLocator);

Answer 1

I found a solution using the "toFront" method at onDragStart event:
OutputPortFigure = draw2d.OutputPort.extend({
NAME: 'OutputPortFigure',
init: function() { ... },
onMouseEnter: function() { ... },
onMouseLeave: function() { ... },
onDragStart: function(x, y, shiftKey, ctrlKey) {
this._super(x, y, shiftKey, ctrlKey);
this.toFront(this.getParent());
},
});

Answer 2

I was having the same problem with some of my figures.
I found a solution that can help but it's not the best one i think.
I create a hidden figure that holds the Ports (Implement repaint method to re-size the child figure when the parent one changes)
var Hidden = draw2d.SetFigure.extend({
NAME: "Hidden",
init : function()
{
this._super();
this.addPort(new draw2d.InputPort('port1'), new draw2d.layout.locator.InputPortLocator());
this.addPort(new draw2d.OutputPort('port2'), new draw2d.layout.locator.OutputPortLocator());
this.setDimension(300,150);
this.setAlpha(0);
},
onDoubleClick: function(){
}
});
var Test = draw2d.SetFigure.extend({
NAME: "Test",
init : function()
{
this._super();
this.hidden = new Hidden();
this.addFigure(this.hidden, new draw2d.layout.locator.CenterLocator(this));
this.setAlpha(0.8);
this.setDimension(300,150);
this.setRadius(10);
this.setStroke(3);
this.label.setColor("#0d0d0d");
this.label.setFontColor("#0d0d0d");
this.addFigure(this.label, new draw2d.layout.locator.CenterLocator(this));
this.tooltip = null;
},
repaint: function(attributes){
this._super(attributes);
if(this.hidden != undefined) this.hidden.setDimension(this.getWidth(), this.getHeight());
},
onDoubleClick: function(){
}
});
if you have a better solution i'll be happy to see it :)
i discovered this when i was implementing a figure that can have a loop connexion