将Vue.js与mxgraph一起使用,我正在尝试创建分层布局,在该布局中,顶点可以与其他顶点折叠为子级。 当我尝试放置将孩子与事物连接起来的边缘时,会出现问题。 取决于将mxHierarchicalLayout.prototype.traverseAncestors参数设置为true或false,它要么将子级从其父级中撤出,以将其放置在层次结构中的另一个位置,要么根本不认为此边缘是层次结构的一部分,并且切穿任何内容到达目的地。
下面是一些显示问题的屏幕截图:https://imgur.com/a/c30P4iC
我使用2种不同的布局。图的默认父级的子级的分层布局及其子级的堆栈布局。
我已经尝试过使用layout.edgesCache(可能是文档中的edgesSet),但是当布局中的边缘具有此设置时,它会以相同的方式撤回它。
//这是我用来更新布局的代码
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
var stackLayout = new mxStackLayout(graph, false)
stackLayout.spacing = 10;
stackLayout.fill = true;
stackLayout.marginLeft = 30;
stackLayout.marginRight = 30;
stackLayout.marginTop = 10;
stackLayout.marginBottom = 10;
stackLayout.allowGaps=true;
graph.setDropEnabled(true)
var executeLayout = function (change, post) {
graph.getModel().beginUpdate();
try {
if (change != null) {
change();
}
graph.getDefaultParent().children.forEach((child)=> {
if(child.isVertex()) {
stackLayout.execute(child)
}
})
layout.execute(graph.getDefaultParent(), v1);
} catch (e) {
throw e;
} finally {
// New API for animating graph layout results asynchronously
var morph = new mxMorphing(graph);
morph.addListener(mxEvent.DONE, mxUtils.bind(this, function () {
graph.getModel().endUpdate();
if (post != null) {
post();
}
}));
morph.startAnimation();
}
};
预期和实际结果显示在图片中。