问题描述
我有一些矩形形状（单击数据科学工具箱按钮时它们会出现），它们可以拖放到自由空间（纸张）上。您也可以在codepen.io中轻松运行和检查。
我要添加的内容是通过单击关闭按钮删除掉落的形状。但是我不知道如何在放置的形状附近创建关闭按钮并删除该形状。
任何帮助将不胜感激，谢谢！
// Canvas where sape are dropped
var graph = new joint.dia.Graph,paper = new joint.dia.Paper({
el: $('#paper'),model: graph
});
// Canvas from which you take shapes
var stencilGraph = new joint.dia.Graph,stencilPaper = new joint.dia.Paper({
el: $('#stencil'),model: stencilGraph,interactive: false
});
var r1a = new joint.shapes.basic.Rect({
position: {
x: 29,y: 10
},size: {
width: 100,height: 40
},attrs: {
text: {
text: 'Rect1a'
}
}
});
var r1b = new joint.shapes.basic.Rect({
position: {
x: 29,y: 60
},attrs: {
text: {
text: 'Rect1b'
}
}
});
var r2a = new joint.shapes.basic.Rect({
position: {
x: 29,attrs: {
text: {
text: 'Rect2a'
}
}
});
var r2b = new joint.shapes.basic.Rect({
position: {
x: 29,attrs: {
text: {
text: 'Rect2b'
}
}
});
var r3a = new joint.shapes.basic.Rect({
position: {
x: 29,attrs: {
text: {
text: 'Rect3a'
}
}
});
var r3b = new joint.shapes.basic.Rect({
position: {
x: 29,attrs: {
text: {
text: 'Rect3b'
}
}
});
var r4a = new joint.shapes.basic.Rect({
position: {
x: 29,attrs: {
text: {
text: 'Rect4a'
}
}
});
var r4b = new joint.shapes.basic.Rect({
position: {
x: 29,attrs: {
text: {
text: 'Rect4b'
}
}
});
var statistic = document.getElementById("statistic-button");
var clustering = document.getElementById("clustering-button");
var classification = document.getElementById("classification-button");
var regression = document.getElementById("regression-button");
statistic.onclick = function(){
r1a.addTo(stencilGraph);
r1b.addTo(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
clustering.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.addTo(stencilGraph);
r2b.addTo(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
classification.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.addTo(stencilGraph);
r3b.addTo(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
regression.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.addTo(stencilGraph);
r4b.addTo(stencilGraph);
};
stencilPaper.on('cell:pointerdown',function(cellView,e,x,y) {
$('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
var flyGraph = new joint.dia.Graph,flyPaper = new joint.dia.Paper({
el: $('#flyPaper'),model: flyGraph,interactive: false
}),flyShape = cellView.model.clone(),pos = cellView.model.position(),offset = {
x: x - pos.x,y: y - pos.y
};
flyShape.position(0,0);
flyGraph.addCell(flyShape);
$("#flyPaper").offset({
left: e.pageX - offset.x,top: e.pageY - offset.y
});
$('body').on('mousemove.fly',function(e) {
$("#flyPaper").offset({
left: e.pageX - offset.x,top: e.pageY - offset.y
});
});
$('body').on('mouseup.fly',function(e) {
var x = e.pageX,y = e.pageY,target = paper.$el.offset();
// Dropped over paper ?
if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) {
var s = flyShape.clone();
s.position(x - target.left - offset.x,y - target.top - offset.y);
graph.addCell(s);
}
$('body').off('mousemove.fly').off('mouseup.fly');
flyShape.remove();
$('#flyPaper').remove();
});
});.data-science-toolkit{
height: 300px;
border: 5px double #005580;
}
.data-science-toolkit .before-drop-display-none{
display: none;
}
.ds-tool-space{
border: 5px double #005580;
}
.free-space{
border: 5px solid #005580;
height: auto;
}
.doitcenter{
text-align: center;
}
#paper {
height: auto;
background-color: #f2e6e6;
}
#stencil {
background-color: darkcyan;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5paxtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row mt-4">
<div class="col-2">
<div class="data-science-toolkit mb-2">
<div class="nav-logo">
<h5 class="doitcenter" style="text-shadow: 0.5px 0.5px 1px gray;">Toolkit</h5>
</div>
<hr>
<div class="dropdown doitcenter mb-1">
<button id="statistic-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Statistics
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="clustering-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Clustering
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="classification-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Classification
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="regression-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Regression
<span class="caret"></span></button>
</div>
</div>
<div class="ds-tool-space mb-2">
<div id="stencil" style="height: 250px;"></div>
</div>
</div>
<div class="col-10">
<div class="free-space">
<div id="paper" style=""></div>
</div>
</div>
</div>
</div>解决方法
您可以使用内置的elementTools.remove，并绑定如下所示的事件：
paper.on('element:mouseenter',(elementView) => {
elementView.addTools(
new joint.dia.ToolsView({
tools: [
new joint.elementTools.Remove({
useModelGeometry: true,y: '0%',x: '100%',}),],})
);
});
paper.on('element:mouseleave',(elementView) => {
elementView.removeTools();
});
请注意，您可能需要根据元素形状更改位置。
这也包含在官方demo
中