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>
你有一些想法,爲什麼它的發生,如何解決呢?
謝謝
歡迎來到Stack Overflow!雖然這可能會在理論上回答這個問題,[這將是更可取的](// meta.stackoverflow.com/q/8259)在這裏包括答案的基本部分,並提供參考鏈接。 – OhBeWise