Default Empty State for a Diagram

GoJS
#1

I’m interested in showing a UI in an empty diagram that is effectively just a button for added some data to the model. Is there a recommended way to achieve this? I could just have an HTML image float over the canvas, I was just curious of GoJS had something built in so I don’t have to manage showing and removing it when the model is empty.

#2

Assuming your HTML button is something like:

<button id="myButton">Button</button>

Then you could define a “ModelChanged” DiagramEvent listener such as:

            "ModelChanged": function(e) {
              if (e.isTransactionFinished) {
                document.getElementById("myButton").style.display = (e.model.nodeDataArray.length === 0) ? "inline" : "none";
              }
            }

or whatever is appropriate for your page.

#3

Interesting. I’m not seeing documentation for that DiagramEvent, and when I try it I get Unknown DiagramEvent name: ModelChanged.

#4

Sorry, I misspoke – it’s not a DiagramEvent. If you aren’t setting it up when creating the Diagram by calling go.GraphObject.make, as I did in the code I gave you above, you’ll need to call Diagram.addModelChangedListener.