Использование mxParallelEdgeLayout для ребер между вершинами разных родителей
Я использую mxParallelEdgeLayout, чтобы учесть несколько параллельных ребер между вершинами.
Это работает нормально, если вершины имеют одного и того же родителя. Однако, как только я соединяю вершины, являющиеся потомками разных родителей, автоматически выбранные точки соединения по краям выглядят странно:
Найдите полный, готовый пример кода здесь:
<html>
<head>
<!-- Sets the basepath for the library -->
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<!-- loads mxGraph library -->
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
<script type="text/javascript">
function main(container) {
if (!mxClient.isBrowserSupported()) {
mxUtils.error('Browser is not supported!', 200, false);
} else {
var graph = new mxGraph(container);
// vertex style
var style = graph.getStylesheet().getDefaultVertexStyle();
delete style[mxConstants.STYLE_FILLCOLOR];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
// edge style
var edge_style = graph.getStylesheet().getDefaultEdgeStyle();
edge_style[mxConstants.STYLE_ENDARROW] = 0;
var parent = graph.getDefaultParent();
// layout supporting parallel edges
var layout = new mxParallelEdgeLayout(graph);
layout.spacing = 10;
var layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell) {
return layout;
};
graph.getModel().beginUpdate();
try {
var box1 = graph.insertVertex(parent, null, null, 0, 0, 100, 50);
box1.setConnectable(false);
var box2 = graph.insertVertex(parent, null, null, 0, 80, 100, 50);
box2.setConnectable(false);
var v1 = graph.insertVertex(box1, null, null, 10, 10, 30, 30);
v1.setConnectable(true);
var v2 = graph.insertVertex(box1, null, null, 60, 10, 30, 30);
v2.setConnectable(true);
var v3 = graph.insertVertex(box2, null, null, 15, 10, 30, 30);
v3.setConnectable(true);
// connect vertices within same parents
graph.insertEdge(parent, null, null, v1, v2)
graph.insertEdge(parent, null, null, v1, v2)
graph.insertEdge(parent, null, null, box1, box2)
graph.insertEdge(parent, null, null, box1, box2)
// connect vertices embedded in different parents
graph.insertEdge(parent, null, null, v1, v3)
graph.insertEdge(parent, null, null, v1, v3)
} finally {
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer" />
</body>
</html>Я подозреваю, что неожиданное поведение в некоторой степени связано с реализацией mxLayoutManager... но у меня есть проблемы, чтобы это исправить. Любая помощь очень ценится.