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 (Page Flow) what we’d need to happen is, for example:
Allow the user to click the referral node ({ “key”: -2, “category”: “Source”, “text”: “Referral” },)
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?
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";
},
. . .