How to handle disconnect event in mxgraph?

Question

I am trying to add two vertexes and disconnect them, by using this example https://jgraph.github.io/mxgraph/javascript/examples/portrefs.html.

In mxGraph, there is a listener available for connecting event https://jgraph.github.io/mxgraph/docs/js-api/files/handler/mxConnectionHandler-js.html#mxConnectionHandler.mxEvent.CONNECT

graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
{
  var edge = evt.getProperty('cell');
  var source = graph.getModel().getTerminal(edge, true);
  var target = graph.getModel().getTerminal(edge, false);

  var style = graph.getCellStyle(edge);
  var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
  var targetPortId = style[mxConstants.STYLE_TARGET_PORT];

  mxLog.show();
  mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});

But when I am trying to listen to disconnect event, https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent.DISCONNECT, that is not working.

graph.connectionHandler.addListener(mxEvent.DISCONNECT, function(sender, evt)
{
  var edge = evt.getProperty('cell');
  var source = graph.getModel().getTerminal(edge, true);
  var target = graph.getModel().getTerminal(edge, false);

  var style = graph.getCellStyle(edge);
  var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
  var targetPortId = style[mxConstants.STYLE_TARGET_PORT];

  mxLog.show();
  mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});

graph.addListener(mxEvent.DISCONNECT, function(sender, evt)
{
  var edge = evt.getProperty('cell');
  var source = graph.getModel().getTerminal(edge, true);
  var target = graph.getModel().getTerminal(edge, false);

  var style = graph.getCellStyle(edge);
  var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
  var targetPortId = style[mxConstants.STYLE_TARGET_PORT];

  mxLog.show();
  mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});

In both ways, I am not able to listen to the disconnect event.

score 0 · Answer 1 · answered Feb 12 '20 at 07:58

I don't know if this is the smart way of doing this, but for me it works... I don't listen to disconnect, but to "CHANGE" and then react if the change happened in a connection... Here is how:

model.addListener(mx.mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;
  for (var i = 0; i < changes.length; i++)
  {
    // Manage any mxChildChange
    if (changes[i].constructor.name ===  "mxChildChange") {
      // This is a deletion case and this is an edge
      if ((changes[i].index === undefined) && (changes[i].child.edge)) {
        // ... Manage the deletion of the changes[i].child
      }
    }
  }
}

How to handle disconnect event in mxgraph?

1 Answers1