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:)

score 0 · Accepted Answer · answered Jul 05 '12 at 21:42

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

score 0 · Answer 2 · answered Jul 09 '12 at 08:32

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

MyOutputPortLocator : 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*(index-2), h/2);
    }
}),

init:function(){
    this._super();

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

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

    this.createPort("output",this.outputLocator);
    this.createPort("output",this.outputLocator);
}

I have tried something like this but above code working fine when i m using "hybrid" ports on all places, but ports alignment are distorted when I use two input and two output ports , please correct my above code so that all ports are on their respective vertices of diamond.

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

2 Answers2