将儿童边缘包含在分级布局中,而不必从父母内部撤出它们

时间:2019-07-25 13:38:51

标签: javascript mxgraph

将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();
                }
            };

预期和实际结果显示在图片中。

0 个答案:

没有答案