Почему я не могу изменить стиль в событии 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

Я сделал больше Recon и любящее более простое решение, чем в моем первом ответе.

Вам нужно добавить:

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