JointJS 0.9.6 - Custom highlighter

A custom highlighter for an elementView.

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

var highlighter = V('rect', {
  'stroke': '#ff7e5d',
  'stroke-width': '6px',
  'fill': 'transparent',
  'pointer-events': 'none'
});

paper.off('cell:highlight cell:unhighlight').on({

  'cell:highlight': function(cellView, el, opt) {
    var bbox = V(el).bbox(false, paper.viewport);
    highlighter.attr(bbox);
    V(paper.viewport).append(highlighter);
  },

  'cell:unhighlight': function(cellView, el, opt) {
    highlighter.remove();
  }
});

var highlighted = false;
paper.on('element:mouseenter', function(elementView) {
	if (highlighted) {
    elementView.unhighlight();
    highlighted = false;
  } else {
    elementView.highlight();
    highlighted = true;
  }
});


var el = new joint.shapes.basic.Rect();
el.resize(200,100).position(100,100).addTo(graph);