JointJS: Require target element when creating link

Question

I am trying to avoid links ending up in space and I want to only allow links connecting one element with another. My current code is:

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

And for the paper:

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

How can I require every link to have a source and a target? Maybe by extending validateConnection?

Answer 1

If this is still relevant, there is now a option called linkPinning on Paper element:

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

linkPinning - when set to true (the default), links can be pinned to the paper meaning a source or target of a link can be a point. If you do not want to let the user to drag a link and drop it somewhere in a blank paper area, set this to false. The effect is that the link will be returned to its original position whenever the user drops it somewhere in a blank paper area.