I am trying to understand what the best way is to work with different states of a graph in Go.js.
For example, when the page loads and the graph has not been touched, I have the following:
Once a node has been selected, the graph looks like this:
Two questions, when a user clicks away from the graph (i.e. on the document somewhere), what is the best way to set the graph back to its original state (i.e. the first screen shot above). I currently have this code but wondering if there is a better way:
// when the user clicks on the background of the Diagram, remove all highlighting
myDiagram2.click = function(e) {
myDiagram2.startTransaction("no highlighteds");
myDiagram2.clearHighlighteds();
myDiagram2.nodes.each(function (currentNode) {
var shape = currentNode.findObject("SHAPE");
shape.stroke = "#009BE1";
shape.fill = "#FFF";
var text = currentNode.findObject("TEXT");
text.stroke = "black";
var placeholderText = currentNode.findObject("PLACEHOLDERTEXT");
if (placeholderText){
placeholderText.stroke = "black";
}
currentNode.findLinksOutOf().each(function (node){
var arrow = node.findObject("ARROW");
arrow.stroke = "#009BE1";
var arrowHead = node.findObject("ARROWHEAD");
arrowHead.stroke = "#009BE1";
arrowHead.fill = "#009BE1";
})
})
myDiagram2.commitTransaction("no highlighteds");
};
I also need to decipher between states for the hovering functionality. The mouseEnter and mouseLeave styling needs to be different for when the page is initially loaded before a node selection has been made, and then once a selection has been made. For example, the screen shot below shows what a hovered upon node looks like after a selection has been made:
Notice that “CHESTFIELD HOLDING” has the bright blue border around it after it has been hovered upon, this look is great for the original, clean graph (i.e. the first screen shot above) but once a node selection has been made I need to hover state to match the other nodes with the faded out colors.
I guess what I’m wondering is how can I apply mouse events to an initial graph and then change the styling once a graph node has been selected.
My current mouseEnter and mouseLeave code for the nodeTemplate looks like this
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
mouseEnter: mouseEnter,
mouseLeave: mouseLeave,
})
function mouseEnter (e, obj){
var shape = obj.findObject("SHAPE");
shape.fill = "#DDF8BF";
shape.stroke = "#77B03B";
var text = obj.findObject("TEXT");
text.stroke = "black";
}
function mouseLeave (node){
var shape;
var text;
// check to see if the current node is selected or is highlighted and if it is then apply these styles
if (node.isSelected || node.isHighlighted){
shape = node.findObject("SHAPE");
shape.fill = "#E9F9D7";
shape.stroke = "#388E3C";
text = node.findObject("TEXT");
text.stroke = "black";
//if the node is not selected or highlighted apply these styles
} else {
shape = node.findObject("SHAPE");
shape.fill = "#FFF";
shape.stroke = "#009BE1";
text = node.findObject("TEXT");
text.stroke = "black";
}
}
Thanks for all the help.
