How to change an mxCell value programmatically?

I have a graph with a “logical” representation in a json (that I use for another program) and the graphical representation is in an MxGraph, rendered in the Angular component.

I am using XMLs as values of the cells, as suggested in this Documentation.

While for me it is very easy to intercept changes in the mxgraph and update the json, I am not able to propagate changes in the json in the graph.

A stupid example is if I change the value of a “label”. I can do this:

editor.graph.model.cells[2].value.setAttribute('label', "Test");

But this change is visible only when another updated happens (e.g., moving the cell in the graph).

I tried to fire an mxEvent.CHANGE event, but I wasn’t able to properly set the edits and changes so that they propagate to the graph. I tried also to create a new mxGeometryChange, but I failed again…

Thanks in advance for any hint…

Answer

I found a solution, even if I cannot use it… Here is the function I added:

    // To use it call:
    //       graph.updateCell(cell, "newlabel");
    graph.updateCell = function(cell, label)
    {
      if (cell !== null) {
        cell.value.setAttribute('label', label);

        this.model.beginUpdate();               
        try
        {
          //this.cellUpdated(cell);
          this.model.setValue(cell, cell.value);
          this.fireEvent(new mx.mxEventObject(mx.mxEvent.LABEL_CHANGED,
              'cell', cell, 'ignoreChildren', false));
        }
        finally
        {
          this.model.endUpdate();
        }

        return cell;
      } else return null;
    };

My issue is that I cannot use this function, but at this point the question is different. The reason is that I would like to use this function from another component which is not running the mxgraph and that’s my struggle now… That becomes then a question about Angular ngModel forward and backward references… I will probably ask it on another post…