如何处理mxgraph中的disconnect事件？

Question

我正在尝试添加两个顶点并断开它们的连接，使用的是这个示例https://jgraph.github.io/mxgraph/javascript/examples/portrefs.html。

在mxGraph中，有一个监听程序可用于连接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);
});

但当我尝试侦听disconnect事件https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent.DISCONNECT时，这不起作用。

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);
});

在这两种情况下，我都无法侦听disconnect事件。

Answer 1

我不知道这是不是明智的做法，但对我来说，它是有效的。我不听断开连接，而是“改变”，然后在连接中发生改变时做出反应……下面是如何实现的：

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
      }
    }
  }
}