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'
          }],
        }