Как разделить одно ребро на два, используя mxGraph? - PullRequest
Новая
       7

Как разделить одно ребро на два, используя mxGraph?

0 голосов
/ 10 февраля 2020

Я не нашел поддержки для соединения одного ребра с другим, поэтому сейчас я добавил тройку в качестве вершины для разветвления одного ребра на два ребра:

T-piece

Теперь я хотел бы иметь возможность перетаскивать терминал одного края на другой край, который затем должен автоматически создать и подключить тройник. В качестве первого шага я подумал о редактировании (или, скорее, расширении) getPreviewTerminalState в mxEdgeHandler, чтобы выделить целевой край, когда над ним перетаскивается конечная точка. Однако это выглядит тихо, так как я, естественно, не хочу вмешиваться в функции глубоко внутри самой библиотеки.

В любом случае, это правильная отправная точка? Мне просто нужно немного руководства там. Спасибо!

1 Ответ

0 голосов
/ 12 февраля 2020

Хорошо, теперь я нашел решение, с которым я могу жить, и которое делает тройник устаревшим. Если кто-то тоже сталкивается с этой проблемой, то решение, которое у меня есть, выглядит примерно так: 

// set edges as valid targets
var graphIsValidTarget = mxGraph.prototype.isValidTarget;
Graph.prototype.isValidTarget = function(cell) {
    return (cell && cell.edge) || graphIsValidTarget.apply(this, arguments);
};

// mark edge if another edge's terminal point is dragged over it
var edgeHandlerGetPreviewTerminalState = mxEdgeHandler.prototype.getPreviewTerminalState;
mxEdgeHandler.prototype.getPreviewTerminalState = function(me) {
    let ret = edgeHandlerGetPreviewTerminalState.apply(this, arguments);

    let edge = me.getCell();
    if (edge && edge.edge && this.graph.getSelectionCell() !== edge) {
        let state = this.graph.view.getState(edge);
        this.marker.setCurrentState(state, me, this.marker.validColor);
        ret = state;
    } else if (ret == null && this.marker && (!this.error || (this.error && this.error === ''))) {
        this.marker.reset();
    }

    return ret;
};

// snap to edge's midpoint
var graphViewGetFloatingTerminalPoint = mxGraphView.prototype.getFloatingTerminalPoint;
mxGraphView.prototype.getFloatingTerminalPoint = function(edge, start, end, source) {
    let res = null;

    if (start.edge) {
        res = this.graph.getEdgeMidPoint(start);
    } else {
        res = graphViewGetFloatingTerminalPoint.apply(this, arguments);
    }
    return res;
};

// returns midpoint of an edge
Graph.prototype.getEdgeMidPoint = function(edge) {
    let ret = null;
    if (edge && edge.edge) {
        let points = this.view.getState(edge).absolutePoints;
        let minX = points[0].x < points[1].x ? points[0].x : points[1].x;
        let maxX = minX === points[0].x ? points[1].x : points[0].x;
        let minY = points[0].y < points[1].y ? points[0].y : points[1].y;
        let maxY = minY === points[0].y ? points[1].y : points[0].y;

        ret = new mxPoint(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
    }
    return ret;
}
...