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

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());
  },
});