无法在 JointJs 的第一个节点的输出端口和第二个节点的输入端口之间创建 link

Question

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

这是我试过的代码：

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

因为它不起作用，我尝试使用指针向上事件来避免在空白 space 中悬空 links 而不是 link固定属性。

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

更多详情，请参考下面给出的fiddle link。 https://jsfiddle.net/g82y3Lu9/

Answer 1

问题出在 validateConnection 函数的 return 语句中。将 if (cellViewS === cellViewT) return false; 改为 return (cellViewS === cellViewT) ? false : true;，这样函数将始终 return 布尔值。

这是modified fiddle

无法在 JointJs 的第一个节点的输出端口和第二个节点的输入端口之间创建 link

Not able to create a link between output port of first node and input port of second node in JointJs

jointjs