events - 为什么我第一次无法更改 mxEvent.CHANGE 事件的样式？

Question

我只想在 CHANGE 事件触发时更改一些样式。但是当我通过插入或移动顶点或边来更改模型时，样式并没有改变。在我再次更改任何内容后，更改的顶点将更改其样式。有人知道为什么吗？

这是我的代码：

graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt){
        if(graphInited){
            graph.getModel().beginUpdate();
            try {
                  var changes = evt.getProperty('edit').changes;
                  for (var i = 0; i < changes.length; i++) {
                      var change = changes[i];
                      var state = graph.view.getState(change.cell);
                      if(state!=null){//color #1C86EE means new insert
                          if(state.style[mxConstants.STYLE_IMAGE_BACKGROUND]!="#1C86EE" 
                          && state.style[mxConstants.STYLE_STROKECOLOR]!="#1C86EE" 
                          && state.style[mxConstants.STYLE_FONTCOLOR]!="#1C86EE"){
                              graph.setCellStyles(mxConstants.STYLE_IMAGE_BACKGROUND, '#68228B', [change.cell]);
                              graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, '#68228B', [change.cell]);
                          }
                      }
                  }
            } finally {
                graph.getModel().endUpdate();
            }
        }
    });

Answer 1

与我的第一个答案相比，我做了更多的侦察和喜欢更简单的解决方案。

您需要添加：

1. evt.consume()
2. graph.refresh()

所以最终的代码看起来像：

graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt){
    if(graphInited){
        graph.getModel().beginUpdate();
        evt.consume();
        try {
                var changes = evt.getProperty('edit').changes;
                for (var i = 0; i < changes.length; i++) {
                    var change = changes[i];
                    var state = graph.view.getState(change.cell);
                    if(state!=null){//color #1C86EE means new insert
                        if(state.style[mxConstants.STYLE_IMAGE_BACKGROUND]!="#1C86EE" 
                        && state.style[mxConstants.STYLE_STROKECOLOR]!="#1C86EE" 
                        && state.style[mxConstants.STYLE_FONTCOLOR]!="#1C86EE"){
                            graph.setCellStyles(mxConstants.STYLE_IMAGE_BACKGROUND, '#68228B', [change.cell]);
                            graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, '#68228B', [change.cell]);
                        }
                    }
                }
        } finally {
            graph.getModel().endUpdate();
            graph.refresh();
        }
    }
});