How to tell when a Diagram starts and finishes updating

GoJS
1

How to tell when a diagram starts/finishes updating and printing changes?

I want to add a text beneath the diagram to indicates its states: Diagram is busy…, Diagram is ready.

However, it looks harder than it looks like.

Any idea? Thanks.

Here is a Codesandbox where I am trying to play with these Diagram events.

What I have tried so far:

  • LayoutCompleted
  • AnimationFinished
  • AnimationFinished
  • InitialLayoutCompleted
  • InitialLayoutCompleted
  • Modified
  • addModelChangedListener
2

Sorry, there’s no “LayoutStarting” DiagramEvent.

The span of a loading operation is from the time that you replace the value of Diagram.model until the “InitialLayoutCompleted” DiagramEvent happens.

You could look for Transaction ChangedEvents. GoJS Changed Events -- Northwoods Software

3

Thanks Walter for your reply.

What do you think about this snippet ? Do you think it does the job ?

Unfortunately I can’t really test well since the template is very leightweigh and due to the react state batching.

const onAddModelChangedListener = (e) => {
    // Proceed only when the initial
    // layout is completed
    if (!initialLayoutCompleted) {
      return;
    }
    // Anything besides commited transaction
    // means the diagram is not ready yet
    // RolledBackTransaction FinishedUndo and FinishedRedo
    // are ignored for the moment
    const isReady = ["CommittedTransaction"].includes(e.propertyName);
    console.log("onAddModelChangedListener", e.propertyName, isReady);
    setIsReady(isReady);
  };

Codesandbox link

4

When you initialize the Diagram you can call its Diagram.addModelChangedListener method to register a Model ChangedEvent listener. That listener can check for a Transaction ChangedEvent and do whatever you want to do.

Remember that you should not modify the model or the diagram in such listeners.