draw2d-js - Draw2d js：如何将端口保持在图的顶部？

Question

为了操纵端口的位置而阅读了很多内容后，我发现了另一个问题：当我选择一个位于图下方的端口时，如图所示。

我的问题是：如何将端口保持在图的顶部？这是我的代码：

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

我在 onDragStart 事件中找到了使用“toFront”方法的解决方案：

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

我的一些数字也有同样的问题。

我找到了一个可以提供帮助的解决方案，但它不是我认为的最好的解决方案。

我创建了一个包含端口的隐藏图形（实现重绘方法以在父图形更改时重新调整子图形的大小）

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

如果您有更好的解决方案，我会很高兴看到它:)

我在实现一个可以有循环连接的图形时发现了这一点