Control visibility of external div

GoJS
#1

Hi there. We are currently evaluating the use of GoJS for the implementation of some Oil and Gas visualisations. So far we have successfully used the page flow diagram to provide a visualisation of risks and consequences within our application. To complete the evaluation we need to be able to allow a user initiate a click event within the node which would then show or hide a DIV which is on the HTML page but not a part of the diagram or palette DIV.

To put this in the context of the example given on the demo page (https://gojs.net/latest/samples/pageFlow.html) what we’d need to happen is, for example:

  1. Allow the user to click the referral node ({ “key”: -2, “category”: “Source”, “text”: “Referral” },)
  2. On clicking the node toggle the visibility of a DIV on the page

It sounds simple but I’m not seeing an example or API for how we would do this - can anyone help?

#2

Sure. Starting from a copy of that Page Flow sample, I added a Div element:

  <div id="myInfoDiv" style="display:none; background: #bbf">
    Some information about <span id="myInfoText"></span>, (key: <span id="myInfoKey"></span>).
  </div>

The details don’t really matter – you can show whatever you want and style it however you like.

Then I added a GraphObject.click event handler in the Node template. There are actually several different categories of node templates – the one for the “Referral” node is of category “Source”.

      myDiagram.nodeTemplateMap.add("Source",
        $(go.Node, "Auto",
          {
            click: function(e, node) {
              var div = document.getElementById("myInfoDiv");
              if (div) {
                document.getElementById("myInfoText").textContent = node.data.text;
                document.getElementById("myInfoKey").textContent = node.data.key.toString();
                div.style.display = "inline-block";
              }
            }
          },
          . . .

You might also want to add some event handler to hide the Div. For example, by clicking in the background of the diagram, set the Diagram.click event handler:

        $(go.Diagram, "myDiagramDiv",
          {
            click: function(e, node) {
              var div = document.getElementById("myInfoDiv");
              if (div) div.style.display = "none";
            },
            . . .
#3

This is awesome - thanks so much for going to the effort and explaining so well :-)