JointJS: Требовать целевой элемент при создании ссылки

Question

Я стараюсь избегать ссылок, заканчивающихся в пространстве, и я хочу разрешать только ссылки, соединяющие один элемент с другим. Мой текущий код:

new joint.shapes.basic.Rect({ 
    id: id, 
    size: { 
    width: width, 
    height: height 
    }, 
    attrs: { 
    text: { 
     text: label, 
     'font-size': letterSize 
    }, 
    rect: { 
     width: width, 
     height: height, 
     rx: 5, 
     ry: 5, 
     stroke: '#555', 
     'magnet': true 
    } 
    } 
}); 

И для бумаги:

var paper = new joint.dia.Paper({ 
    el: $('#paper-basic'), 
    width: 1250, 
    height: 1000, 
    model: graph, 
    gridSize: 1, 
    validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) { 
    // Prevent linking from output ports to input ports within one element. 
    if (cellViewS === cellViewT) return false; 
    // Prevent linking to input ports. 
    return magnetT; 
    }, 
    markAvailable: true 
}); 

Как я могу требовать от каждой ссылке, чтобы иметь источник и цель? Может быть, расширив validateConnection?

Answer 1

Если это по-прежнему актуально, теперь есть опция называется linkPinning на Paper элементе:

http://jointjs.com/api#joint.dia.Paper:options

linkPinning - когда установлен истинное (по умолчанию), ссылки могут быть прикреплены к в документ, означающий источник или цель ссылки, может быть точкой. Если вы не хотите, чтобы пользователь перетаскивал ссылку и отбрасывал ее где-то в пустой области бумаги , установите для нее значение false. Эффект заключается в том, что ссылка будет быть возвращена в исходное положение всякий раз, когда пользователь ее удаляет где-то в пустой области бумаги.

Answer 2

Подтверждение соединения поможет только с проверкой магнитов, оно не вызывается, когда конец ссылки находится в случайном месте на бумаге. Вы можете удалить неполные ссылки следующим образом:

// keep links from being incomplete 
function isLinkInvalid(link){ 
    return (!link.prop('source/id') || !link.prop('target/id')); 
} 

paper.on('cell:pointerup', function(cellView) { 
    if (! (cellView.model instanceof joint.dia.Link)) return; // if it's not a link, don't worry about it 
    // otherwise, add an event listener to it. 
    cellView.model.on('batch:stop', function(){ 
     var links = graph.getLinks(); 
     links.forEach(function(link){ 
      if(isLinkInvalid(link)){ 
       link.remove(); 
     }}); 
    }); 
}); 

Он добавляет к ссылке список событий. Важно сделать это на 'cell:pointerup', потому что при создании ссылки вызывается 'batch:stop'. Если ссылка не имеет идентификатора цели, то она не подключена к порту.

Answer 3

немного отличается/короткий ответ комбинируя @Anora s и https://groups.google.com/forum/#!topic/jointjs/vwGWDFWVDJI

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() 
    } 
})