问题描述
我想避免在 mxgraph
画布上重复放置。
假设我第二次在画布上拖动了 Pipe
,它不应该允许它在画布上拖动。
问题:如何避免在画布上重复放置
这是我的工作代码拖动,允许重复
拖放
var graph = {};
function initCanvas() {
//This function is called onload of body itself and it will make the mxgraph canvas
graph = new mxGraph(document.getElementById('graph-wrapper'));
graph.htmlLabels = true;
graph.cellsEditable = false;
// render as HTML node always. You probably won't want that in real world though
graph.convertValuetoString = function(cell) {
return cell.value;
}
const createDropHandler = function (cells,allowSplit) {
return function (graph,evt,target,x,y) {
const select = graph.importCells(cells,y,target);
graph.setSelectionCells(select);
};
};
const createDragPreview = function (width,height) {
var elt = document.createElement('div');
elt.style.border = '1px dashed black';
elt.style.width = width + 'px';
elt.style.height = height + 'px';
return elt;
};
const createDragSource = function (elt,dropHandler,preview) {
return mxUtils.makeDraggable(elt,graph,preview,graph.autoscroll,true,true);
};
const createItem = (id) => {
const elt = document.getElementById(id);
const width = elt.clientWidth;
const height = elt.clientHeight;
const cell = new mxCell('',new mxGeometry(0,width,height),'fillColor=none;strokeColor=none');
cell.vertex = true;
graph.model.setValue(cell,elt);
const cells = [cell];
const bounds = new mxRectangle(0,height);
createDragSource(elt,createDropHandler(cells,false,bounds),createDragPreview(width,cells,bounds);
};
createItem("shape_1");
createItem("shape_2");
createItem("shape_3");
}
#graph-wrapper {
background: #333;
width: 100%;
height: 528px;
}
<html>
<head>
<title>Toolbar example for mxGraph</title>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
<script src="./app.js"></script>
</head>
<body onload="initCanvas()">
<h4>Drag same Box 2 times on the canvas. see duplicate is allowed</h4>
<div>
<div id="shape_1"
style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
Pipe
</div>
<div draggable="true" id="shape_2"
style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
Team
</div>
<div draggable="true" id="shape_3"
style="width: 100px; height: 64px; background: #009688; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center; border-radius: 207px; flex-direction: column;">
<div> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
</svg></div>
<div>Info</div>
</div>
</div>
<div id="graph-wrapper">
</div>
</body>
</html>
解决方法
您只需要检查 maxgarph
中 createDropHandler
的所有当前单元格值。因此,通过 graph.getModel().cells
获取所有单元格,然后检查您要添加的单元格是否存在:
let allcells = graph.getModel().cells;
for (var i in allcells)
if (allcells[i].value && (allcells[i].value.id == cells[0].value.id))
return;
var graph = {};
function initCanvas() {
//This function is called onload of body itself and it will make the mxgraph canvas
graph = new mxGraph(document.getElementById('graph-wrapper'));
graph.htmlLabels = true;
graph.cellsEditable = false;
// render as HTML node always. You probably won't want that in real world though
graph.convertValueToString = function (cell) {
return cell.value;
}
const createDropHandler = function (cells,allowSplit) {
return function (graph,evt,target,x,y) {
debugger
let allcells = graph.getModel().cells;
for (var i in allcells)
if (allcells[i].value && (allcells[i].value.id == cells[0].value.id))
return;
const select = graph.importCells(cells,y,target);
graph.setSelectionCells(select);
};
};
const createDragPreview = function (width,height) {
var elt = document.createElement('div');
elt.style.border = '1px dashed black';
elt.style.width = width + 'px';
elt.style.height = height + 'px';
return elt;
};
const createDragSource = function (elt,dropHandler,preview) {
return mxUtils.makeDraggable(elt,graph,preview,graph.autoscroll,true,true);
};
const createItem = (id) => {
const elt = document.getElementById(id);
const width = elt.clientWidth;
const height = elt.clientHeight;
const cell = new mxCell('',new mxGeometry(0,width,height),'fillColor=none;strokeColor=none');
cell.vertex = true;
graph.model.setValue(cell,elt);
const cells = [cell];
const bounds = new mxRectangle(0,height);
createDragSource(elt,createDropHandler(cells,false,bounds),createDragPreview(width,cells,bounds);
};
createItem("shape_1");
createItem("shape_2");
createItem("shape_3");
}
<html>
<head>
<title>Toolbar example for mxGraph</title>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
<script src="./app.js"></script>
<style>
#graph-wrapper {
background: #333;
width: 100%;
height: 528px;
}
</style>
</head>
<body onload="initCanvas()">
<h4>Drag same box 2 times on the canvas. see duplicate is allowed</h4>
<div>
<div id="shape_1"
style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
Pipe
</div>
<div draggable="true" id="shape_2"
style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
Team
</div>
<div draggable="true" id="shape_3"
style="width: 100px; height: 64px; background: #009688; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center; border-radius: 207px; flex-direction: column;">
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
</svg>
</div>
<div>Info</div>
</div>
</div>
<div id="graph-wrapper">
</div>
首先,我对mxgraph一无所知。为了解决您的问题,我对图书馆的文档进行了一些研究,但没有找到任何提示。
我使用了 Javascript 的基础知识来实现这一点,并且没有涉及您的任何主要代码和流程。我只是在 draggable_status
函数上将 graph
添加到 createDropHandler
元素。
当你拖动一次时,下面的代码会为对象添加一个状态,你不能再拖动了,只需添加一个简单的控件。
graph.draggable_status = false;
要控制,应该在同一个函数-const createDropHandler = function (cells,allowSplit)
if(graph.draggable_status != false){
const select = graph.importCells(cells,target);
graph.setSelectionCells(select);
graph.draggable_status = false;
}
完整的代码片段在这里;
var graph = {};
function initCanvas() {
//This function is called onload of body itself and it will make the mxgraph canvas
graph = new mxGraph(document.getElementById('graph-wrapper'));
graph.htmlLabels = true;
graph.cellsEditable = false;
// render as HTML node always. You probably won't want that in real world though
graph.convertValueToString = function(cell) {
return cell.value;
}
const createDropHandler = function (cells,allowSplit) {
return function (graph,y) {
if(graph.draggable_status != false){
const select = graph.importCells(cells,target);
graph.setSelectionCells(select);
graph.draggable_status = false;
}
};
};
const createDragPreview = function (width,height) {
var elt = document.createElement('div');
elt.style.border = '1px dashed black';
elt.style.width = width + 'px';
elt.style.height = height + 'px';
return elt;
};
const createDragSource = function (elt,preview) {
return mxUtils.makeDraggable(elt,true);
};
const createItem = (id) => {
const elt = document.getElementById(id);
const width = elt.clientWidth;
const height = elt.clientHeight;
const cell = new mxCell('','fillColor=none;strokeColor=none');
cell.vertex = true;
graph.model.setValue(cell,elt);
const cells = [cell];
const bounds = new mxRectangle(0,height);
createDragSource(elt,bounds);
};
createItem("shape_1");
createItem("shape_2");
createItem("shape_3");
}
#graph-wrapper {
background: #333;
width: 100%;
height: 528px;
}
<html>
<head>
<title>Toolbar example for mxGraph</title>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
<script src="./app.js"></script>
</head>
<body onload="initCanvas()">
<h4>Drag same box 2 times on the canvas. see duplicate is allowed</h4>
<div>
<div id="shape_1"
style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
Pipe
</div>
<div draggable="true" id="shape_2"
style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
Team
</div>
<div draggable="true" id="shape_3"
style="width: 100px; height: 64px; background: #009688; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center; border-radius: 207px; flex-direction: column;">
<div> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
</svg></div>
<div>Info</div>
</div>
</div>
<div id="graph-wrapper">
</div>
</body>
</html>