我创建了一个圆形作为删除工具来删除形状。我从此链接获得了信息：JointJS Element with ports and tool items (delete, settings etc.)
几乎正确地实现了它，但有些删除形状（圆圈）没有'X'标记，并且也没有触发删除事件。如果有任何身体已经工作，请在这里指导我。感谢
代码：
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模型界面包含：
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包含：
//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);
},