JointJS: how to display ports on right side of graph element?

Question

I'm trying to create an Angular application, which allows the user to dynamically create graphs. I'm currently trying to create a function which adds a port to a vertex and I want the user to be able to choose on which side the port appears (right, left, top, bottom). I followed an example on JointJS documentation, however, I'm only able to differ the position of the port label, and not the port itself:

Ports created with code presented below

This is my function, which returns port body based on position ('top', 'right' etc.) and name:

getPort(portName: string, position: string): object {
    return {
      position: {
        name: position
      },
      attrs: {
        label: {
          text: portName
        },
        portBody: {
          magnet: true,
          r: 10,
          fill: '#023047',
          stroke: '#023047'
        }
      },
      label: {
        position: {
          name: position
        },
        markup: [{
          tagName: 'text',
          selector: 'label',
          className: 'label-text'
        }]
      },
      markup: [{
        tagName: 'circle',
        selector: 'portBody'
      }]
    };
  }

Here is how I add port to my graph (it takes unique vertex name as argument):

this.graph.getElements().forEach(element => {
      if (element.attributes.attrs['label'].text == agentName) {
        element.addPort(port)
      }
})

I followed this tutorial, however even if I copy some port body which should appear on the right side it is still bounded to the left side.

What am I doing wrong?

Answer 1

Turns up you can specify position in port groups. I added to my shapes following section:

ports: {
    groups: {
      'left': this.PORT_GROUP('left'),
      'right': this.PORT_GROUP('right'),
      'top': this.PORT_GROUP('top'),
      'bottom': this.PORT_GROUP('bottom'),
    }
  }

along with this function:

PORT_GROUP(position: string): object {
    return {
      position: {
        name: position
      },
      attrs: {
        portBody: {
          magnet: true,
          r: 10,
          fill: '#023047',
          stroke: '#023047'
        }
      },
      label: {
        position: {
          name: position,
        },
        markup: [{
          tagName: 'text',
          selector: 'label',
          className: 'label-text'
        }]
      },
      markup: [{
        tagName: 'circle',
        selector: 'portBody'
      }]
    };
  }

and it places the ports in correct place with body:

{
  group: 'left',
  attrs: {label: {text: 'portName'}}
}