change port color when cell is moving

Question

I use jointjs / rappid.

I would like to change the attributes of a port (e.g. the color of the inPort: in0_2) when the cell is moved. How can I get access to these attributes?

Example of a cell: http://www.epro.de/exchange/virtual-reality/jointjs/celltest.jpg

I guess it's easy - I have tried different ways but can't find a solution.

Any hints?

I use the following code to create the cell and the ports.

var graph =  new joint.dia.Graph;
var paper =  new joint.dia.Paper({
        el: $('#paper-container'),
            width: 1000,
            height: 1000,
            gridSize: 10,
            drawGrid: true,
            model: graph,

        });


var l_st0 = myShapes ();
l_st0.set ('inPorts',(['in0_1', 'in0_2']));
l_st0.set ('outPorts',(['outx']));
l_st0.attr ('.label/text','MinTest');
l_st0.position (100,100); 

graph.addCell(l_st0);

l_st0.on ('change:position', function() { 
    console.log (" change port color ");
});

 function myShapes (){

joint.shapes.devs.GenericBasic  = joint.shapes.devs.Model.extend({
portMarkup: '<rect class="port-body"/>',
  defaults: joint.util.deepSupplement({
    type: 'devs.GenericBasic',
    inPorts: [],
    outPorts: [],

    attrs: {

        '.label': {
            'ref-x': .5,
            'ref-y': 5,
            'font-size': 12,
            'text-anchor': 'middle',
            fill: '#000'
        },
        '.body': {
            'ref-width': '100%',
            'ref-height': '100%',
            stroke: '#000'
        }
    },
    ports: {
        groups: {
            'in': {
                attrs: {
                    '.port-label': {
                        'font-size': 12,
                        'text-anchor': 'start',
                        x:  -10,
                        fill: '#000000'
                    },
                    '.port-body': {
                         stroke: '#000000',
                        'text-anchor': 'start',
                        x:-20,
                        width: 20,
                        height: 0.5
                    }
                },
                label: {
                    position: {
                        name: 'right',
                        args: {
                             y: 0
                        }
                    }
                } 
            },
            'out': {
                  attrs: {
                    '.port-label': {
                        'font-size': 12,
                        fill: '#000',
                        'text-anchor': 'start',
                        x: -40
                    },
                    '.port-body': {
                        stroke: '#000000',
                        width: 20,
                        height: 0.5
                    }
                },
                label: {
                    position: {
                        name: 'right',
                        args: {
                            y: 0
                        }
                    }
                }
            }
        }
    }

}, joint.shapes.devs.Model.prototype.defaults) 

});


joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView;

var mx = new joint.shapes.devs.GenericBasic ({
  size: { width: 80, height: 100 },
 attrs: {
    rect: {
            stroke: 'black', 
            'stroke-width': 1
        },
} 
});

return mx;
}

Answer 1

I solved it this way - like it is described in the jointjs documentation.

l_st0.on ('change:position', function() {     
//optimization is missing
   var l_portsIn = this.get ('inPorts');
   if (l_portsIn.length>0){
       this.portProp (l_portsIn[0],'attrs/rect',{stroke: 'red' });
   }
}