JointJs：如何在组中定义不同的端口自定义（输入/输出）

Question

我正在使用JointJS创建我的自定义元素，该元素继承自joint.shapes.devs.Model

我的元素是一个矩形，带有一个输入端口和两个输出端口。 我希望输出端口充满不同的颜色（一种绿色和另一种红色）。

我知道如何为输入端口和输出端口定义不同的颜色。但是，如何为out组中的端口定义不同的颜色？

这是mi的实际代码

joint.shapes.devs.Model.define('presence.BasicStepModel',
        {
            size: { width: stepW, height: stepW },
            ports: {
                groups: {
                    'in': {
                        attrs: {
                            circle: { opacity: 1 },
                            '.port-body': {
                                fill: '#20A0C0',
                                magnet: 'passive',
                                r: 6
                            },
                            '.port-label': {
                                opacity: 0
                            }
                        }
                    },
                    'out': {
                        attrs: {
                            circle: { opacity: 1 }, //El "circle" es un elemento SVG describe el puerto que tiene forma circular
                            '.port-body': { //el "port-body" es una clase CSS
                                fill: '#60E040',
                                r: 6
                            },
                            '.port-label': {
                                opacity: 0
                            }
                        }
                    }
                }
            },
            inPorts: ['inPort'],
            outPorts: ['outPort1', 'outPort2'] 
        }, {
            attrs: {
                '.label': { x: .5, 'font-family': "sans-serif", 'font-size': "12px", length: '12em' },//Si no uso el label como identificador de clase, no se ve bien
                '.bottom': { text: '', 'ref-y': 70 },
                '.topp': { 'ref-y': -20, opacity: 0 },
                '.rightt': { 'ref-y': 25, x: '50px', 'text-anchor': 'left', opacity: 1 },
                '.body': { fill: '#DEDFEF', rx: 5, ry: 5, },
                '.stepImage': { 'xlink:href': "./images/addCallData.png", width: imageW, height: imageW, x: 5, y: 5 }
            }
        }, {

        }, {
        }
    );