javascriptjointjsrappid

Customize JointJS ports from circle to rectangle

I am currently working with Jointjs. How can we change the shape of ports from circle to rectangle. I want the other functionalities to work as same.Just change in the way they look.

Is it possible?

Solution

  • We can customize the shapes of port.Following is the code sample for rectangular port , which was working for me.

    ports: {
    groups: {
      'myPorts': {
        position: 'top',
        attrs: {
          '.port-body': {
            stroke: 'red',
            strokeWidth: 2,
            height: 10,
            width: 10,
            magnet: true
          }
        },
        markup: '<rect class="port-body"/>'
      }
    },
    items: [{
        group: 'myPorts'
      }],
    }