JointJS 2.2.1 styling for Model's port

Question

previous I was using JointJS 0.9.10 and the attrs for shapes.devs.Model as below works normally

attrs: {
      '.inPorts .port-body': { fill: 'red' },
      '.outPorts .port-body': { fill: 'yellow' }
}

But when I upgrade JointJS to version 2.2.1, this styling no longer affect to the port of a model. Does this property name got changes on the latest version. Anyone who know this issues please explain to me, thank you.

Answer 1

An equivalent expression in JointJS v2.2.1 would be like this.

el.prop({
  ports: {
    groups: {
      'in': {
        attrs: {
          '.port-body': { fill: 'red' }
        }
      },
      'out': {
        attrs: {
          '.port-body': { fill: 'yellow' }
        }
      }
    }
  }
});

Since version 1.0 it is possible to add ports to arbitrary joint.dia.Element. The ports are not part of the element's markup and cannot be styled via attrs any more.

For more info please see the ports API documentation.