JointJS Interactivity

Non-interactive elements and interactive links in the same paper. Only vertices movement allowed.

by Daniel Mejia

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 -->
<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,
  interactive: function(cellView) {
    if (cellView.model.isLink()) {
      return {
        remove: false,
        vertexAdd: false,
        vertexRemove: false,
        arrowheadMove: false
      }
    }
    return false;
  }
});
paper.on('blank:contextmenu', function(evt,x,y){
	evt.preventDefault();
});
paper.on('cell:contextmenu',function(cellView,evt){
	evt.preventDefault();
	alert("Cell view:" + cellView.ext);
  evt.preventDefault();
});

var rect1 = new joint.shapes.basic.Rect({
  position: {
    x: 80,
    y: 100
  },
  size: {
    width: 50,
    height: 55
  },
  attrs: {
    rect: {
      fill: 'red',
      'stroke-width': 0
    },
    text: {
      text: 'Rect1',
      fill: 'white'
    }
  }
});

var rect2 = new joint.shapes.basic.Rect({
  position: {
    x: 80,
    y: 380
  },
  size: {
    width: 50,
    height: 55
  },
  attrs: {
    rect: {
      fill: 'red',
      'stroke-width': 0
    },
    text: {
      text: 'Rect1',
      fill: 'white'
    }
  }
});

var link = new joint.dia.Link({
  markup: [
    '<path class="connection" stroke="black" d="M 0 0 0 0"/>',
    '<path class="marker-source" fill="black" stroke="black" d="M 0 0 0 0"/>',
    '<path class="marker-target" fill="black" stroke="black" d="M 0 0 0 0"/>',
    '<path class="connection-wrap" d="M 0 0 0 0"/>',
    '<g class="labels"/>',
    '<g class="marker-vertices"/>',
    '<g class="marker-arrowheads"/>',
    //'<g class="link-tools"/>' disallow link removal
  ].join(''),
  source: {
    id: rect1.id
  },
  target: {
    id: rect2.id
  },
  vertices: [{
    x: 250,
    y: 200
  }, {
    x: 250,
    y: 250
  }]  
});

graph.addCells([rect1, rect2, link]);