JointJs: как определить различные настройки портов в группе (вход / выход) - PullRequest
Новая
       29

JointJs: как определить различные настройки портов в группе (вход / выход)

1 голос
/ 30 мая 2019

Я использую JointJS для создания своих настроенных Элементов, которые наследуются от joint.shapes.devs.Model

Мой элемент - это прямоугольник с одним входным и двумя выходными портами.Я хочу, чтобы выходные порты были заполнены разными цветами (один зеленый и красный другой).

Я знаю, как определить разные цвета для портов и выходов.Но как я могу определить разные цвета для портов в группе out?

Это мой действительный код 

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 }
            }
        }, {

        }, {
        }
    );
...