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

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

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?


jointjs
person Patito    schedule 15.05.2015    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Если это все еще актуально, теперь есть опция с именем linkPinning для элемента Paper:

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

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

person Michael Vashchinsky    schedule 29.12.2015
comment
у меня не работало закрепление ссылок при использовании портов. при перетаскивании новой ссылки из порта в пустую область ссылка не перемещается и не исчезает. перемещение из пустой области в пустую область также не изменило положение ссылок. - person vbranden; 14.04.2016

arrow_upward
2
arrow_downward

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

// 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' вызывается при создании ссылки. Если ссылка не имеет целевого идентификатора, то она не подключена к порту.

person Ania    schedule 23.06.2015
comment
спасибо за этот идеальный ответ! работает как шарм! - person Patito; 03.07.2015
comment
как/где я должен добавить это? - person Alex; 24.09.2015
comment
Вы должны добавить это в javascript после инициализации вашего документа/графика. - person Ania; 25.09.2015
comment
Я заработал, удалив строку cellView.model.on('batch:stop', function(){ . - person Alex; 25.09.2015

arrow_upward
2
arrow_downward

немного другой/более короткий ответ, сочетающий @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()
    }
})
person vbranden    schedule 14.04.2016