JointJS：创建链接时需要目标元素答案

【问题标题】：JointJS: Require target element when creating linkJointJS：创建链接时需要目标元素
【发布时间】：2015-05-15 19:16:14
【问题描述】：

我试图避免链接在空间中结束，我只想允许链接将一个元素与另一个元素连接起来。我当前的代码是：

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

【解决方案1】：

如果这仍然相关，现在在 Paper 元素上有一个名为 linkPinning 的选项：

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

linkPinning - 当设置为 true（默认）时，链接可以固定到论文意味着链接的来源或目标可以是一个点。如果你不想让用户拖动链接并将其放在某个位置空白纸区域，将此设置为 false。效果是链接将每当用户放下它时，它就会返回到原来的位置在空白纸区域的某个地方。

【讨论】：

使用端口时，链接固定对我不起作用。将新链接从端口拖到空白区域时，链接不会移动或消失。从空白区域移动到空白区域也没有恢复链接位置。

【解决方案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'。如果链接没有目标 ID，则它没有连接到端口。

【讨论】：

感谢您的完美回答！像魅力一样工作！
我应该如何/在哪里添加这个？
你应该在你的论文/图表初始化之后把它添加到javascript中。
我通过删除cellView.model.on('batch:stop', function(){ 行使其正常工作。

【解决方案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()
    }
})

【讨论】：