Question

我遇到了mxGraph和平行边缘的问题。我的理解是parallelEdgeLayout应该在两个顶点之间找到边缘，如果它们重叠，则添加一个间距。但是，我根本无法解决这个问题。

我在这里定义了顶点和边缘样式：

GraphManager.prototype.defineStyles = function () {

    // Vertices
    style = new Object();
    style[mxConstants.STYLE_FONTFAMILY] = "Salesforce Sans";
    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;    
    style[mxConstants.STYLE_FOLDABLE] = 0;
    style[mxConstants.STYLE_ARCSIZE] = 9;
    style[mxConstants.STYLE_FILLCOLOR] = "#A6B8CE";
    style[mxConstants.STYLE_STROKECOLOR] = "#7591b3";//original
    style[mxConstants.STYLE_STROKEWIDTH] = 1;
    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
    style[mxConstants.STYLE_PERIMETER_SPACING] = 2;
    style[mxConstants.STYLE_ROUNDED] = true;
    style[mxConstants.STYLE_SHADOW] = false;
    style[mxConstants.STYLE_ORTHOGONAL] = true;
    this.graph.getStylesheet().putCellStyle(styles.step, style);

    // Edges
    var style = new Object();
    style[mxConstants.STYLE_ROUNDED] = true;
    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.OrthConnector;
    style[mxConstants.STYLE_FONTFAMILY] = "Salesforce Sans";
    style[mxConstants.STYLE_STROKEWIDTH] = 3;
    style[mxConstants.STYLE_OPACITY] = 75;
    style[mxConstants.STYLE_SOURCE_PERIMETER_SPACING] = 5;
    style[mxConstants.STYLE_TARGET_PERIMETER_SPACING] = 5;
    style[mxConstants.STYLE_JETTY_SIZE] = 'auto';
    this.graph.getStylesheet().putCellStyle(styles.edge, style);
}

然后我设置我的图形布局。我使用stackLayout作为图形的主要布局。我设置的泳道彼此相邻堆叠，而stackLayout是唯一正确格式化这些泳道的布局，所以想要使用它。

GraphManager.prototype.defineLayout = function (model) {
    // Applies size changes to siblings and parents
    new mxSwimlaneManager(this.graph, false);

    var parallelEdgeLayout = new mxParallelEdgeLayout(this.graph);

    // Creates a stack depending on the orientation of the swimlane
    var layout = new mxStackLayout(this.graph);
    // Makes sure all children fit into the parent swimlane
    layout.resizeParent = true;

    // Applies the size to children if parent size changes
    layout.fill = true;

    // Only update the size of swimlanes
    layout.isVertexIgnored = function (vertex) {
        return !this.graph.isSwimlane(vertex);
    }

    // Keeps the lanes and pools stacked
    var layoutMgr = new mxLayoutManager(this.graph);

    layoutMgr.getLayout = function (cell) {
        if (!model.isEdge(cell) && this.graph.getModel().getChildCount(cell) > 0 &&
            (model.getParent(cell) == model.getRoot() || 
            this.graph.isPool(cell))) {
                layout.fill = this.graph.isPool(cell);

                return layout;
        }
    };


    this.graph.addListener(mxEvent.CELL_CONNECTED, function(sender, evt)
    {
        console.log('Getting Parallels');
        //var model = graph.getModel();
        var edge = evt.getProperty('edge');
        var src = model.getTerminal(edge, true);
        var trg = model.getTerminal(edge, false);

        console.log(src);
        console.log(trg);
        console.log(parallelEdgeLayout.findParallels(src));
        console.log(parallelEdgeLayout.findParallels(trg));

        parallelEdgeLayout.isEdgeIgnored = function(edge2)
        {
            var src2 = model.getTerminal(edge2, true);
            var trg2 = model.getTerminal(edge2, false);

            return !(model.isEdge(edge2) && ((src == src2 && trg == trg2) || (src == trg2 && trg == src2)));
        };

        parallelEdgeLayout.execute(graph.getDefaultParent());
    });
}

我尝试过使用带有堆栈布局和平行边缘布局的compositeLayout，但它们也没有用。上述方法不起作用。在我的单元格连接侦听器的console.logs中，它不会检测任何顶点之间的任何平行边缘，即使从这张图片中：

肯定存在并行边缘...我非常感谢有关在mxGraph上运行并行边缘处理的任何见解。让图表能够自己解决这个问题会很高兴。否则，我将不得不计算出顶点边缘的所有出口和入口点，我想避免这种情况。

Answer 1

以下是运行并行边缘布局的示例：

var graph = new mxGraph(container);
var parent = graph.getDefaultParent();

graph.getModel().beginUpdate();
try
{
    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
    var e1 = graph.insertEdge(parent, null, '', v1, v2);
    var e2 = graph.insertEdge(parent, null, '', v2, v1);
}
finally
{
    graph.getModel().endUpdate();
}

var layout = new mxParallelEdgeLayout(graph);
layout.execute(parent);

并行边缘检测/处理根本不适用于mxGraph

1 个答案: