How to allow only one connection per connection point? - mxgraph

Question

I'm already using snapToPoint so that connections are only possible on the constraints of a vertex. However currently I can connect multiple edges to the same connection point. Is there a built-in way to allow only one connection per connection point?
If no and as I'm new to mxGraph, is there any recommendation on where to put the code in order to get the desired behaviour, e.g. listening to mxEvent.CELL_CONNECTED or mxEvent.CONNECT_CELL? Or do I have to overwrite/reuse any predefined method like mxGraph.cellConnected?

Answer 1

had the same issue, wanting to limit the number of connections to a connection constraint.
I ended up removing connection constraints that already have an edge connected them
10-02-2021 update: found a better way:
graph.getAllConnectionConstraints = function (terminal) {
if (terminal != null && this.model.isVertex(terminal.cell)) {
// connection points: North, East, South, West
var allConnectionConstraints = [
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true)
];
let result = allConnectionConstraints;
// Remove the ones that have an edge connected to them
if (terminal.cell.edges) {
terminal.cell.edges.forEach((edge) => {
const edgeState = this.view.getState(edge);
const source = edge.source.id === terminal.cell.id;
const edgeConnectionConstraint = graph.getConnectionConstraint(
edgeState,
terminal,
source
);
// edgeConnectionConstraint does not include name property
const itemToDelete = result.find(
(item) =>
item.dx === edgeConnectionConstraint.dx &&
item.dy === edgeConnectionConstraint.dy &&
item.point.equals(edgeConnectionConstraint.point)
);
if (itemToDelete) {
result = result.filter((x) => x !== itemToDelete);
}
result.removeAll(
(item) =>
item.dx === edgeConnectionConstraint.dx &&
item.dy === edgeConnectionConstraint.dy &&
item.point.equals(edgeConnectionConstraint.point)
);
});
}
return result;
}
return null;
};
https://codesandbox.io/s/mxgraph-react-example-forked-uwru4
below is original post...
var graph = this.graph;
this.graph.getAllConnectionConstraints = function (terminal) {
if (terminal != null && this.model.isVertex(terminal.cell)) {
// connection points: North, East, South, West
var allConnectionConstraints = [new mxConnectionConstraint(new mxPoint(.5, 0), true),
new mxConnectionConstraint(new mxPoint(1, .5), true),
new mxConnectionConstraint(new mxPoint(.5, 1), true),
new mxConnectionConstraint(new mxPoint(0, .5), true)];
var result = [];
// loop through all connection constraints
allConnectionConstraints.forEach(connectionConstraint => {
var add = true;
// see if an edge is already connected to this constraint
if (terminal && terminal.cell && terminal.cell.edges) {
terminal.cell.edges.forEach(edge => {
var edgeStyle = graph.getCellStyle(edge);
var edgeX = -1;
var edgeY = -1;
// is this edge comming in or going out?
if (edge.source.id === terminal.cell.id) {
// going out
edgeX = edgeStyle.exitX;
edgeY = edgeStyle.exitY;
} else if (edge.target.id === terminal.cell.id) {
// comming in
edgeX = edgeStyle.entryX;
edgeY = edgeStyle.entryY;
}
if (connectionConstraint.point.x === edgeX &&
connectionConstraint.point.y === edgeY) {
// already a connection to this connectionConstraint, do not add to result
add = false;
}
});
}
if (add) {
result.push(connectionConstraint);
}
});
// return all connectionConstraints for this terminal that do not already have a connection
return result;
}
return null;
};
https://codesandbox.io/s/mxgraph-react-example-4ox9f