无法在JointJs

Question

我无法使用JointJS在具有端口的两个节点之间创建链接。我想避免悬空链接，所以包括linkPinning：false属性。使用下面给出的代码，我无法在out1端口和in1端口之间创建链接。

这是我尝试过的代码：

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]);

由于它不起作用，我尝试使用指针向上事件以避免在空白空间中悬挂链接而不是linkPinning属性。

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