JointJs에서 첫 번째 노드의 출력 포트와 두 번째 노드의 입력 포트 사이에 링크를 만들 수 없습니다.

Question

JointJS를 사용하는 포트가있는 두 노드 사이에 링크를 만들 수 없습니다. 나는 링크가 매달 리지 않도록하고 싶었고 linkPinning : false 속성도 포함시켰다. 아래 주어진 코드로 out1 포트와 in1 포트 사이에 링크를 만들 수 없습니다. 여기

내가 노력 코드입니다 : 그것은, 내가 대신 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/

Answer 1

문제는 validateConnection 함수의 return 문 내에 있습니다. if (cellViewS === cellViewT) return false; 대신 return (cellViewS === cellViewT) ? false : true;으로 변경하여 함수가 항상 부울을 반환하도록합니다.

여기는 modified fiddle

입니다.