简体   繁体   中英

mxGraph straight parallel edges?

Is there any solution for this? We need parallel edges, but not that way how ParallelEdgeLayout makes that.

在此处输入图像描述

I tried to rewrite the layout function of parallel layout to move the edges, but edges has no usable geometry: x, y, width, height are 0. There I couldn't move them anywhere.

Tried to use setStyle , but did not do anything:

var s = model.getStyle(parallels[i]) + 'entryX='+x0+';exitX='+x0+';'
console.log(s)
model.setStyle(parallels[i], s);

Oh my God. Here is a solution, Not the dream edges. but almost.., Maybe there are more beautiful solutions (post one): but this is mine for showing real parallel edges:

var spx = 1 / 22;
var spy = 1 / 8;

var x0 = 0.5;
var y0 = 0.5;

for (var i = 0; i < parallels.length; i++) {
    var source = view.getVisibleTerminal(parallels[i], true);
    var target = view.getVisibleTerminal(parallels[i], false);

    var src = model.getGeometry(source);
    var trg = model.getGeometry(target);

    var srcx = src.x, srcy = src.y, trgx = trg.x, trgy = trg.y;

    if (parallels[i].getParent() != source.getParent()) {
        var pGeo = model.getGeometry(source.getParent());
        srcx = src.x + pGeo.x;
        srcy = src.y + pGeo.y;
    }

    if (parallels[i].getParent() != target.getParent()) {
        var pGeo = model.getGeometry(target.getParent());
        trgx = trg.x + pGeo.x;
        trgy = trg.y + pGeo.y;
    }

    var scx = srcx + src.width; // source element right
    var scy = srcy + src.height; // source element bottom

    var tcx = trgx + trg.width; // target element right
    var tcy = trgy + trg.height; // target element bottom

    var dx = tcx - scx; // len x
    var dy = tcy - scy; // len y

    var sourcePointX, sourcePointY, targetPointX, targetPointY;
    if (Math.abs(dx) > Math.abs(dy)) { // horizontal 
        sourcePointY = y0;
        targetPointY = y0;
        if (srcx < trgx) { // left to right
            sourcePointX = 1;
            targetPointX = 0;
        } else {
            sourcePointX = 0;
            targetPointX = 1;
        }
    } else {
        sourcePointX = x0;
        targetPointX = x0;
        if (srcy < trgy) { // top to bottom
            sourcePointY = 1;
            targetPointY = 0;
        } else {
            sourcePointY = 0;
            targetPointY = 1;
        }
    }

    this.graph.setConnectionConstraint(parallels[i], parallels[i].source, true, new mxConnectionConstraint(new mxPoint(sourcePointX, sourcePointY), true));
    this.graph.setConnectionConstraint(parallels[i], parallels[i].target, false, new mxConnectionConstraint(new mxPoint(targetPointX, targetPointY), true));

    if (i % 2) {
        x0 += spx * (i + 1);
        y0 += spy * (i + 1);
    } else {
        x0 -= spx * (i + 1);
        y0 -= spy * (i + 1);
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM