JointJS 0.9.10 - highlighters
Using new cell's highlighter in JointJS
HTML
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.css" />
<div id="paper" />
<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.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.js"></script>
<script>
//there is a problem with jointjs in the latest version of Chrome. This fixes it
SVGElement.prototype.getTransformToElement =
SVGElement.prototype.getTransformToElement || function(toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
var highlighted1 = false;
var highlighted2 = false;
var myHighlighter1 = {
highlighter: {
name: 'addClass',
options: {
className: 'highlighted'
}
}
}
var myHighlighter2 = {
highlighter: {
name: 'stroke',
options: {
padding: 10,
rx: 2,
ry: 2
}
}
}
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 400,
height: 400,
model: graph,
gridSize: 1,
interactive: false
});
paper.on('cell:pointerup', function(cellView) {
if (highlighted2) {
cellView.unhighlight(null, myHighlighter2);
} else {
cellView.highlight(null, myHighlighter2);
}
highlighted2 = !highlighted2
});
paper.on('cell:pointerdown', function(cellView) {
if (highlighted1) {
cellView.unhighlight(null, myHighlighter1);
} else {
cellView.highlight(null, myHighlighter1);
}
highlighted1 = !highlighted1
});
var element = new joint.shapes.basic.Rect({
position: {
x: 100,
...
CSS
.highlighted rect {
fill: lightgreen;
stroke-width: 3px;
}