JointJS Connection Strategy

dia.Paper connectionStrategy option

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.3/joint.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.3/joint.min.css">
<div id="paper" />

CSS

#paper {
  border: 1px solid gray;
  float: left;
  position: relative;
  overflow: hidden;
}

JavaScript

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 500,
  height: 300,
  model: graph
});

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    model: graph,
    defaultLink: function() {
        return new joint.shapes.standard.Link();
    },
    defaultConnectionPoint: { name: 'boundary' },
    defaultAnchor: { name: 'center' },
    connectionStrategy: function(end) {
        // removing `magnet: 'tool'` from the end object
        return { id: end.id };
    }
});

var Shape = joint.dia.Element.define('example.Shape', {
    size: {
        width: 100,
        height: 100
    },
    attrs: {
        root: {
            magnet: false
        },
        body: {
            refWidth: '100%',
            refHeight: '100%',
            fill: 'white',
            stroke: 'black',
            strokeWidth: 2
        },
        tool: {
            r: 10,
            cx: 20,
            cy: 20,
            fill: 'white',
            stroke: 'red',
            strokeWidth: 2,
            magnet: true
        }
    }
}, {
    markup: [{
        tagName: 'rect',
        selector: 'body'
    }, {
        tagName: 'circle',
        selector: 'tool'
    }]
});

var e1 = new Shape();
var e2 = new Shape();
e1.position(100, 100);
e2.position(500, 200);

graph.addCells([e1, e2]);


paper.on('link:pointerup', function(linkView) {
    var toolsView = new joint.dia.ToolsView({
        tools: [
            new joint.linkTools.TargetArrowhead(),
            new joint.linkTools.TargetAnchor(),
            new joint.linkTools.SourceArrowhead(),
            new joint.linkTools.SourceAnchor()
        ]
    });
    linkView.addTools(toolsView);
});

paper.on('blank:pointerdown', function() {
    paper.removeTools();
});