如何在 mxgraph 中验证从目标到源的传入边缘
skB*_*ore 6 javascript mxgraph jgraph
嗨，我在边缘验证方面遇到了问题
注意：任何方法都是最受欢迎的，但应该解决问题
下面是我的要求
- source 可以有任何以下 Action_* 像这样
源 -> Action_1 -> Action_2
- 我想避免任何 Action_* 反对/朝向源
来源 -> Action_1 <- Action_2
下面的 Gif 显示了我的要求
在上面的 gif 中，出现的文字是我想避免的文字
这是我尝试过的
graph.multiplicities.push(new mxMultiplicity(
true, 'Source', null, null, 1, 1, ['Action_1','Action_2'],
'Source can have 1 Action and from there it can be multiple',
null));
graph.multiplicities.push(new mxMultiplicity(
false, 'Source', null, null, 0, 0, null,
'Source Must Have No Incoming Edge',
null)); // Type does not matter
这是我提到的演示https://jgraph.github.io/mxgraph/javascript/examples/validation.html ，这里是它的代码 https://github.com/jgraph/mxgraph/blob/master/javascript/examples /validation.html
这是Multiplicity参数
mxMultiplicity(source,type,attr,value,min,max,validNeighbors,countError,typeError,validNeighborsAllowed)
这是它的文档：https : //jgraph.github.io/mxgraph/docs/js-api/files/view/mxMultiplicity-js.html
这是我尝试过的
graph.multiplicities.push(new mxMultiplicity(
true, 'Source', null, null, 1, 1, ['Action_1','Action_2'],
'Source can have 1 Action and from there it can be multiple',
null));
graph.multiplicities.push(new mxMultiplicity(
false, 'Source', null, null, 0, 0, null,
'Source Must Have No Incoming Edge',
null)); // Type does not matter
我知道这个问题是您面临的，您想要验证图表：
- 从源顶点（源节点），您可以将任何边连接到任何另一个顶点（节点）
- 如果任何目标顶点（动作 1）已经连接到源顶点，如果任何其他目标顶点（动作 2 3 4 5）想要连接到源顶点，则它必须连接到已经连接到源顶点的目标顶点。
- 连接到源的任何顶点都不能成为目标
不幸的是，您当前的方法使用 mxMultiplicity 无法解决问题，因为有几个原因：
- 它仅支持 1 深度级别的邻居（这意味着您可以为其邻居指定特定规则，而不是邻居的邻居）
- 仅支持内置验证，不支持自定义验证
所以解决办法是：
- 尝试在更改侦听器中使用图模型自行验证图模型，而不是使用 mxMultiplicity 并在每次创建边时更新 mxMultiplicity 数组
- 使用另一个库进行图形可视化
- 如果不满足任何条件，则不创建边缘（我的方式）（实际上，它不会弹出警告消息）
这是我给你的模板。您可以在此处查看有关它的文档（连接处理程序）
mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function (parent, id, value, source, target, style) {
var check
// check if you are allow to insert edge
if (check) {
return mxConnectionHandlerInsertEdge.apply(this, arguments);
}
return null
};
<html>
<head>
<title>Validation example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<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>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
graph = {};
function main(container) {
// Checks if the browser is supported
if (!mxClient.isBrowserSupported()) {
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else {
var xmlDocument = mxUtils.createXmlDocument();
var sourceNode = xmlDocument.createElement('Source');
var action_1 = xmlDocument.createElement('Action_1');
var action_2 = xmlDocument.createElement('Action_2');
var action_3 = xmlDocument.createElement('Action_3');
var action_4 = xmlDocument.createElement('Action_4');
// Creates the graph inside the given container
graph = new mxGraph(container);
graph.setConnectable(true);
graph.setTooltips(true);
graph.setAllowDanglingEdges(false);
graph.setMultigraph(false);
/** mxMultiplicity accepts the following below params (source,type,attr,value,min,max,validNeighbors,countError,typeError,validNeighborsAllowed)
*/
graph.multiplicities.push(new mxMultiplicity(
true, 'Source', null, null, 1, 1, ['Action_1', 'Action_2'],
'Source can have 1 Action and from there it can be multiple',
null));
graph.multiplicities.push(new mxMultiplicity(
false, 'Source', null, null, 0, 0, null,
'Source Must Have No Incoming Edge',
null)); // Type does not matter
// Enables rubberband selection
new mxRubberband(graph);
// Removes cells when [DELETE] is pressed
var keyHandler = new mxKeyHandler(graph);
keyHandler.bindKey(46, function (evt) {
if (graph.isEnabled()) {
graph.removeCells();
}
});
// Installs automatic validation (use editor.validation = true
// if you are using an mxEditor instance)
var listener = function (sender, evt) {
graph.validateGraph();
// sender is the graph model
};
// complete the validation function here
mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function (parent, id, value, source, target, style) {
var check
// check if you are allow to insert edge
if (check) {
return mxConnectionHandlerInsertEdge.apply(this, arguments);
}
return null
};
graph.getModel().addListener(mxEvent.CHANGE, listener);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
var v1 = graph.insertVertex(parent, null, sourceNode, 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, action_1, 200, 20, 80, 30);
var v5 = graph.insertVertex(parent, null, action_2, 200, 120, 80, 30);
var v6 = graph.insertVertex(parent, null, action_3, 400, 120, 80, 30);
var v7 = graph.insertVertex(parent, null, action_4, 600, 120, 80, 30);
}
finally {
// Updates the display
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:1000px;height:1000px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
165 次 |
| 最近记录： |