addModelChangedListener not getting trigger after loadModelJSON

GoJS
1 
const modelChangedListener = useCallback((e) => {
      if (e.propertyName === "nodeDataArray") {
        console.log("NodeDataArray has been modified.");
      }
    }, []);

const initDiagram = ()=>{
const d = $(go.Diagram, {...})
d.addModelChangedListener(modelChangedListener)
}

useImperativeHandle(ref, ()=>{
return {
loadModelJSON: async (json) => {
const newModel = go.Model.fromJson(json);
  const diagram = canvasRef.current.getDiagram();
  diagram.model = newModel;
}

}
}

In the above code, when loadModelJSON is called, the nodeDateArray is definitely updated, However, the ModelChangedListener event is not getting triggered then.

Please help.

2

The Diagram.model property setter first removes each registered Model Changed listener from the old model and then afterwards adds all of those registered Model Changed listeners to the new model. This is more convenient than having the programmer be responsible for removing and adding listeners for each model. Try setting a breakpoint at the beginning of your listener – it should be getting called.

Are you sure you want to be checking e.propertyName === "nodeDataArray"? Did you want to notice when the Model.nodeDataArray property is set to a new Array? Normally that doesn’t get set at all when using the ReactDiagram component of gojs-react, because new props cause a call to Model.mergeNodeDataArray. Replacing the Model.nodeDataArray would cause all of the Nodes to be discarded and re-created.

Or are you looking for some other kinds of ChangedEvents? What do you want to do?

3

basically, all i want is an event to detect when nodeDataArray is empty.

the loadModelJSON is just a way to load the last saved state of the canvas.
After loadModelJSON is called, I want to check if the last saved state had any nodes in nodeDataArray.

My primary requirement is that i need a way for the parent component to identify when there are no nodes in the canvas, so i can display a custom zeo screen.

4

This works for me:

  new go.Diagram("myDiagramDiv", {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {
        if (e.isTransactionFinished) {
          if (e.model.nodeDataArray.length === 0) console.log("EMPTY", Date.now());
        },
        . . .
5

Thanks the above worked.

6

Note that isTransactionFinished will also be true after an undo or redo. I don’t know how you want to handle those cases.

7

for now will implement the above and keep a watch how things go, if i see an issue will reach out to you.