How to branch one edge into two using mxGraph? - mxgraph

Question

I didn't find support for connecting one edge to another, thus right now I added a T-piece as a vertex for branching one edge into two edges:
Now I'd like to be able to drag and drop the terminal of one edge onto another edge which should then create and connect a T-piece automatically. As a first step I thought about editing (or rather expanding) getPreviewTerminalState in mxEdgeHandler in order to highlight the target edge when a terminal point is dragged over it. However this feels quiet hacky since I naturally don't want to interfere with a function deep down in the library itself.
Is this the right starting point anyways? I just need a bit of guidance there. Thanks!

Answer 1

Alright by now I've found a solution I can live with and which makes the T-piece obsolete. If someone stumbles upon this issue too, the solution I have looks something like this:
// 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;
}