0
JointJSを使用するポートを持つ2つのノード間のリンクを作成できません。私はリンクをぶら下げたくないので、linkPinning：falseプロパティを含めました。以下のコードでは、out1ポートとin1ポートの間にリンクを作成できません。ここで JointJsの第1ノードの出力ポートと第2ノードの入力ポートとの間にリンクを作成できません
は、私が試したコードです：それは、私が代わりにlinkPinningプロパティの空白で宙ぶらりんのリンクを避けるために、イベントをポインタを使用してみました動作しませんでしたようvar graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 600,
height: 400,
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) {
// Prevent linking from output ports to input ports within one element.
if (cellViewS === cellViewT) return false;
},
linkPinning: false,
// Enable link snapping within 75px lookup radius
snapLinks: { radius: 75 }
});
var a1 = new joint.shapes.devs.Model({
id: 'master1',
position: {
x: 150,
y: 150
},
inPorts: ['in1'],
outPorts: ['out'],
size: {
width: 100,
height: 60
},
prop: {
data: {
'name1': 'val1',
'name 2': 'val 2'
}
},
attrs: {
'.label': {
'ref-x': .4,
'ref-y': .2
},
rect: {
fill: '#2ECC71'
},
'.inPorts circle': {
type: 'input',
},
'.outPorts circle': {
type: 'output'
},
}
});
var a2 = new joint.shapes.devs.Model({
id: 'master2',
position: {
x: 50,
y: 50
},
outPorts: ['out1'],
size: {
width: 100,
height: 60
},
prop: {
data: {
'name1': 'val1',
'name 2': 'val 2'
}
},
attrs: {
'.label': {
'ref-x': .4,
'ref-y': .2
},
rect: {
fill: '#2ECC71'
},
'.outPorts circle': {
type: 'output'
},
}
});
paper.model.addCells([a1, a2]);
。
paper.on('cell:pointerup', function (cellView, evt) {
var elem = cellView.model
var source = elem.get('source')
var target = elem.get('target')
if (elem instanceof joint.dia.Link && (!source.id || !target.id)) {
elem.remove()
}
})
詳しくは、下記のフィドルリンクを参照してください。 https://jsfiddle.net/g82y3Lu9/