セルが移動しているときにポートの色を変更します。

Question

私は、jointjs/rappidを使用します。

セルの移動時に、ポートの属性（inPort：in0_2の色など）を変更したいとします。これらの属性にどのようにアクセスできますか？セルの

例：http://www.epro.de/exchange/virtual-reality/jointjs/celltest.jpg

私はそれが簡単だと思う - 私はさまざまな方法を試してみましたが、解決策を見つけることができません。

ヒント

次のコードを使用してセルとポートを作成します。

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

私はこのように解決しました。これはjointjsのドキュメントに記載されています。

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' }); 
    } 
}