同じ名前のポート名を持つJointJSが機能しない

Question

同じ名前で割り当てられたインポートとアウトポートが機能しない場合、 すなわち これは動作しません。ここで

inPorts: ['aaa', 'bbb'], 
outPorts: ['aaa', 'bbb'] 

は私のコードです：

http://jsfiddle.net/tianxu0836/L2f73cbf/50/

コードjsfiddleでのInportとアウトポートが別の名前を持っているので、作業バージョンです。 名前を同じ名前に設定すると、それ以上は機能しません。

解決方法はありますか？これは起こらないはずです。

Answer 1

joint.shapes.devs.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, { 

    markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>', 
    portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>', 

    defaults: joint.util.deepSupplement({ 

     type: 'devs.Model', 
     size: { width: 1, height: 1 }, 
     inPorts: [], 
     outPorts: [], 
     attrs: { 
      '.': { magnet: false }, 
      text: { 
       'pointer-events': 'none' 
      }, 
      '.body': { 
       width: 150, 
       height: 250, 
       stroke: '#000' 
      }, 
      '.port-body': { 
       r: 10, 
       magnet: true, 
       stroke: '#000' 
      }, 
      '.label': { 
       text: 'Model', 
       'ref-x': .5, 
       'ref-y': 10, 
       ref: '.body', 
       'text-anchor': 'middle', 
       fill: '#000' 
      }, 
      '.inPorts .port-label': { 
       x: -15, 
       dy: 4, 
       'text-anchor': 'end', 
       fill: '#000' 
      }, 
      '.outPorts .port-label': { 
       x: 15, 
       dy: 4, 
       fill: '#000' 
      } 
     } 
    }, joint.shapes.basic.Generic.prototype.defaults), 

    getPortAttrs: function(portName, index, total, selector, type) { 

     var attrs = {}; 

     var portClass = 'port' + index; 
     var portSelector = selector + '>.' + portClass; 
     var portLabelSelector = portSelector + '>.port-label'; 
     var portBodySelector = portSelector + '>.port-body'; 

     attrs[portLabelSelector] = { 
      text: portName 
     }; 

     attrs[portBodySelector] = { 
      port: { 
       // id: portName || _.uniqueId(type), 
       id: _.uniqueId(type), 
       type: type 
      } 
     }; 

     attrs[portSelector] = { 
      ref: '.body', 
      'ref-y': (index + 0.5) * (1/total) 
     }; 

     if (selector === '.outPorts') { 
      attrs[portSelector]['ref-dx'] = 0; 
     } 

     return attrs; 
    } 
})); 

を次のように変更のみがgetPortAttrsで、idが生成される方法方法ですdevs.Modelの実装を更新するようにしてください - 名前をIDとして使用されていません。