How to create two input ports and two output ports in diamond?

Question

I want to create two input ports and two output ports, I have tried it in diamond shape as:

this.createPort("input");
this.createPort("input");
this.createPort("output");
this.createPort("output");

but the above code doesn't work as required, it do create ports but here and there, not on the vertices of diamond.So please any body suggest me how to do that.

I have also tried this example : http://draw2d.org/graphiti/jsdoc/#!/example/galerie_shape_analog, ( Restore Bridge example similar to diamond shape ) but that example contains hybrid ports now what I want is Input and Output ports.

So if anybody have any idea then please let me know.Thanks in advance:)

Answer 1

The Solution is to use a Locator. A locator is responsive to layout a port relative to it's parent shape.

In your example you didn't use a locator in the "createPort" method....in this case the ports will be layouted in a default behaviour.

-> InputPorts on the left

-> Output Ports on the right

Here an example of an init method of a shape which adds some ports with the locator.

/**
 * @constructor
 * Create a new instance
 */
init:function(){
   this._super();

   this.inputLocator = new this.MyInputPortLocator();
   this.outputLocator = new this.MyOutputPortLocator();

   this.createPort("hybrid",this.inputLocator);
   this.createPort("hybrid",this.inputLocator);

   this.createPort("hybrid",this.outputLocator);
  this.createPort("hybrid",this.outputLocator);

},

Code for a simple Locator:

// custom locator for the special design of the ResistorBridge Input area
MyInputPortLocator : graphiti.layout.locator.Locator.extend({
    init:function( ){
      this._super();
    },    
    relocate:function(index, figure){
        var w = figure.getParent().getWidth();
        var h = figure.getParent().getHeight();

        figure.setPosition(w/2+1, h*index);
    }
}),