2015-05-22 58 views
1

所有JointJs:例如「標記可用磁鐵」無法正常工作(端口)

我使用了一個標準的例子標記可用磁鐵 它工作得很好,當我使用2種型號

但是,當我克隆4款車型更多來自m1和我一般收到5型號

當我嘗試將其端口「out」連接到其他型號的端口「in」時,帶有標籤「Model 4」的型號無法正常工作, in「其他型號的端口

當我嘗試連接「OUT」端口,我看到旁邊的firebag:「端口類型 - 輸入」

類型的「OUT」端口必須是「輸出」,但它有「輸入」類型

但其他「走出去」港口工作正常

我的代碼:

<link rel="stylesheet" href="joint.css" /> 
<script src="joint.js"></script> 
<script src="joint.shapes.devs.js"></script> 

<div id="paper-mark-available"></div> 
<div id="paper-link-out"></div> 

<script> 
(function() { 

    var graph = new joint.dia.Graph; 
    var paper = new joint.dia.Paper({ 
     el: $('#paper-mark-available'), 
     width: 1650, height: 500, gridSize: 1, 
     model: graph, 
     defaultLink: new joint.dia.Link({ 
      attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } } 
     }), 
     validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) { 

      console.log('PORT TYPE - '+magnetS.getAttribute('type')); 

      if (magnetS && magnetS.getAttribute('type') === 'input') return false; 
      if (cellViewS === cellViewT) return false; 
      return magnetT && magnetT.getAttribute('type') === 'input'; 
     }, 

     markAvailable: true 
    }); 

    var m1 = new joint.shapes.devs.Model({ 
     position: { x: 50, y: 50 }, 
     size: { width: 90, height: 90 }, 
     inPorts: ['in1','in2'], 
     outPorts: ['out'], 
     attrs: { 
      '.label': { text: 'Model 1', 'ref-x': .4, 'ref-y': .2 }, 
      rect: { fill: '#2ECC71' }, 
      '.inPorts circle': { fill: '#16A085', magnet: 'passive', type: 'input' }, 
      '.outPorts circle': { fill: '#E74C3C', type: 'output' } 
     } 
    }).addTo(graph); 

    var m2 = m1.clone().translate(300, 0).attr('.label/text', 'Model 2').addTo(graph); 
    var m3 = m1.clone().translate(150, 0).attr('.label/text', 'Model 3').addTo(graph); 
    var m4 = m1.clone().translate(180, 0).attr('.label/text', 'Model 4').addTo(graph);![enter image description here][2] 
    var m5 = m1.clone().translate(250, 0).attr('.label/text', 'Model 5').addTo(graph); 

})() 
</script> 

你有一些想法,爲什麼它的發生,如何解決呢?

謝謝

回答

0

剛剛碰到了這個自己。分辨率可以在這裏找到https://github.com/clientIO/joint/pull/120

+0

歡迎來到Stack Overflow!雖然這可能會在理論上回答這個問題,[這將是更可取的](// meta.stackoverflow.com/q/8259)在這裏包括答案的基本部分,並提供參考鏈接。 – OhBeWise