typescriptgraphportjointjs

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


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?


Solution

  • 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'}}
    }