Add link on button click

by Roman Bruckner

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.min.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/0.9.7/joint.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.css">
<!-- JointJS Fiddle -->
<button id="link">Add link</button>
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 1px solid gray;
}

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 20,
  model: graph,
  restrictTranslate: true,
  validateConnection: function(sView, sMagnet, tView, tMagnet, end) {
    var view = end === 'target' ? tView : sView;
    if (!(view instanceof joint.dia.ElementView)) return false;
    if (view.model.id === 'background') return false;

    return true;
  }
});

var background = new joint.shapes.basic.Rect({
  id: 'background',
  position: {
    x: 0,
    y: 0
  },
  size: {
    width: 600,
    height: 600
  },
  attrs: {
    rect: {
      'fill-opacity': 1
    }
  }
});

background.addTo(graph).findView(paper).options.interactive = false;


var r = new joint.shapes.basic.Rect({
  position: {
    x: 300,
    y: 300
  },
  size: {
    width: 60,
    height: 60
  },
  attrs: {
    rect: {
      fill: 'red'

    }
  }
});
graph.addCell(r);

$('#link').click(function() {
  var link = new joint.dia.Link({
    source: {
      x: 100,
      y: 100
    },
    target: {
      x: 300,
      y: 100
    }
  });
  link.attr({
    '.connection': {
      'stroke-width': 2
    },
    '.marker-source': {
      stroke: 'none',
      fill: 'black',
      d: 'M 10 0 L 0 5 L 10 10 z'
    },
    '.marker-target': {
      stroke: 'none',
      fill: 'black',
      d: 'M 10 0 L 0 5 L 10 10 z'
    }
  });
  graph.addCell(link);
}).click();