Delete tool/icon in jointjs - backbone.js

Question

I have create a circle shape as a delete tool to delete shapes. I got the information from this link: JointJS Element with ports and tool items (delete, settings etc.)
Almost implemented it correctly but some how the delete shape(circle) doesn't have 'X' mark on it and also delete event is not fired. If any body worked on it already, please guide me here. Thanks
Code:
var clientX, clientY, offsetX, offsetY;
var x, y;
var shapeId = "";
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#canvas'),
id: 'myPaper',
model: graph,
gridSize: 1,
defaultLink: new joint.shapes.devs.Link({
router: {name: 'orthogonal', args: {maximumLoops: 1000, excludeTypes: ['container']}},
connector: {name: 'rounded'},
attrs: {'.marker-target': {d: 'M 10 0 L 0 5 L 10 10 z'}},
labels: [{position: .5, attrs: {text: {text: 'label', 'font-size': '13', 'stroke': 'black', 'stroke-width': '0.1'}}}]
}),
validateConnection: function (cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
if (magnetS && magnetS.getAttribute('type') === 'input')
return true;
if (cellViewS === cellViewT)
return false;
return (magnetS !== magnetT);
return magnetT && magnetT.getAttribute('type') === 'input';
},
markAvailable: true
});
joint.shapes.devs.TooledModel = joint.shapes.devs.Model.extend(_.extend({}, joint.plugins.TooledModelInterface, {
// markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="t"/><g class="inPorts"/><g class="outPorts"/><g class="moveTool"/><g class="resizeTool"/><g class="portsTool"/></g>',
markup: ['<g class="rotatable">',
'<g class="scalable">',
'<rect class="body"/>',
'<g xmlns="http://www.w3.org/2000/svg" transform="translate(-549.49953,-824.87393)" id="layer1">',
'<g transform="matrix(0.933025,0,0,-0.2986125,549.49953,846.37362)" id="g3553">',
'<g transform="scale(0.98976,3.0047)" id="g3555">',
'<g clip-path="url(#clipPath3559)" id="g3557">',
'<path d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z" id="path3563" style="fill:#b8cde8;fill-opacity:1;fill-rule:evenodd;stroke:none"/>',
'</g>',
'</g>',
'</g>',
'</g>',
'</g>',
'<text class="t"/>',
'<g class="inPorts"/>',
'<g class="outPorts"/>',
'<g class="moveTool"/>',
'<g class="resizeTool"/>',
'<g class="portsTool"/>',
'<g class="deleteTool"/>',
'<circle class="deleteTool" id="deleteTool" fill="red" r="8"/>',
'<title class="tooltip"/>',
'</g>'].join(''),
defaults: joint.util.deepSupplement({
type: 'devs.TooledModel',
position: {x: 200, y: 100},
size: {width: 71, height: 625},
attrs: {
// '.label': {text: ""},
'text': {'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-weight': 'normal', 'font-family': 'Arial, helvetica, sans-serif'},
rect: {stroke: '#008B8B', fill: '#EEEEEE', 'stroke-width': 2}, '.': {magnet: false},
'.inPorts circle': {type: 'input'},
'.outPorts circle': {type: 'output'},
'.port-body': {r: 3},
'.body': {
width: 151, height: 151,
stroke: 'none'
},
}
}, joint.shapes.devs.Model.prototype.defaults)
}
));
joint.shapes.devs.TooledModelView = joint.shapes.devs.ModelView.extend(joint.plugins.TooledViewInterface);
function getId(id)
{
shapeId = id;
console.log(shapeId);
}
function createShape(event)
{
var $stageContainer = $("#canvas");
var stageOffset = $stageContainer.offset();
clientX = event.clientX;
clientY = event.clientY;
offsetX = stageOffset.left;
offsetY = stageOffset.top;
x = clientX - offsetX;
y = clientY - offsetY;
switch (shapeId)
{
case('newTask'):
createRect(x, y);
break;
default:
console.log("Nothing to drag");
}
}
function createRect(x, y)
{
var rect = new joint.shapes.devs.TooledModel({
position: {x: x, y: y},
size: {width: 120, height: 85},
inPorts: [''],
outPorts: [''],
attrs: {
text: {text: 'Edit me', fill: 'black'},
rect: {
fill: '#D6F2FC', rx: 7, ry: 15, opacity: .80, 'stroke-width': 2
},
'.inPorts circle': {type: 'input'},
'.outPorts circle': {type: 'output'},
'.port-body': {r: 3}
}
});
graph.addCell(rect);
}
// First, unembed the cell that has just been grabbed by the user.
paper.on('cell:pointerdown', function (cellView) {
var cell = cellView.model;
if (!cell.get('embeds') || cell.get('embeds').length === 0) {
// Show the dragged element above all the other cells (except when the
// element is a parent).
cell.toFront();
_.invoke(graph.getConnectedLinks(cell), 'toFront');
}
if (cell.get('parent')) {
graph.getCell(cell.get('parent')).unembed(cell);
}
});
// When the dragged cell is dropped over another cell, let it become a child of the element below.
paper.on('cell:pointerup', function (cellView) {
if (cellView.model.isLink())
return;
var cell = cellView.model;
var cellViewsBelow = paper.findViewsFromPoint(cell.getBBox().center());
if (cellViewsBelow.length) {
// Note that the findViewsFromPoint() returns the view for the `cell` itself.
var cellViewBelow = _.find(cellViewsBelow, function (c) {
return c.model.id !== cell.id;
});
// Prevent recursive embedding.
if (cellViewBelow && cellViewBelow.model.get('parent') !== cell.id) {
cellViewBelow.model.embed(cell);
}
}
});
Tooled model interface contains:
deleteToolMarkup: '<circle fill="red" r="11"/><path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/><title>Remove this element from the model</title>',
joint.plugins.TooledViewInterface contains:
//delete tool
renderDeleteTool: function () {
var deleteContainer = this.$('.deleteTool').empty();
var markup = V(this.model.deleteToolMarkup);
for (var id in markup)
deleteContainer.append(markup[id].node);
},