Setting non-highlighted nodes to 50% opacity

progs · March 21, 2016, 9:04pm

I currently have functionality where when you click on a node that selected node and all connected nodes are set to a different color then the rest. I would like to incorporate functionality where I take all nodes that are not connected to the currently selected node and sets the opacity to 50% of the currently selected nodes, or setting the stroke to a transulent color would probably do as well. What’s the best way to do this?

Here is my code to set the selected and highlighted nodes:

 myDiagram2.nodeTemplate = 
graph(go.Node, "Auto",
	{margin: new go.Margin(0,30,0,30),
         fromSpot: go.Spot.Right, 
             toSpot: go.Spot.Left},
	{	
		click: function(e, node) { showConnections(node); }, 
	},
            new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
	      graph(go.Shape, "RoundedRectangle",
		{name: "SHAPE", fill: "#FFF", minSize: new go.Size(200, 100), cursor: "pointer"},
		 new go.Binding("stroke", "isHighlighted", function(h) { return h ? "#388E3C" : "#009BE1"; })
        	         .ofObject(),
		 new go.Binding("fill", "isHighlighted", function(h) { return h ? "#E9F9D7" : "#FFF"; })
        	        .ofObject(),
		 new go.Binding("fill", "isSelected", function(selected) {if (selected) return "#E9F9D7"; else return               "#FFF";})
			.ofObject(""),
		new go.Binding("stroke", "isSelected", function(selected) {if (selected) return "#388E3C"; else return "#009BE1";})
			.ofObject("")),

   function showConnections(node) {
          var diagram = node.diagram;
         diagram.startTransaction("highlight");
          // remove any previous highlighting
        diagram.clearHighlighteds();
         // for each Link coming out of the Node, set Link.isHighlighted
           node.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
          // for each Node destination for the Node, set Node.isHighlighted
         node.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
diagram.commitTransaction("highlight");

}

In the screen shot below, I would like to set all nodes that are not currently green, to 50% opacity.

walter · March 22, 2016, 12:30am

If you change the “layerName” Binding to use “isHighlighted” as the source property, all you need to do is change the Layer.opacity of the “Background” and “” layers to 0.5.

BTW, it’s not well defined what happens when the same target property has more than one Binding. Basically the order in which the bindings are evaluated cannot be guaranteed.

progs · March 22, 2016, 3:41pm

Ok thanks, could you possibly show me a little code snippet of that binding. I want to essentially change the opacity or rgba color on the border of each node, the text in each node, and change the color of the links that are not associated with the selected node. I have this binding with layerName currently in my nodeTemplate (among other code):

 myDiagram2.nodeTemplate = (
   $(go.Node, "Auto", 
         new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject())
)

I came up with the following solution before I saw your feedback but I’m not satisfied with it, especially with large amounts of data, I’m assuming the built in binding you mentioned is a better solution:

    // highlight all Links and Nodes coming out of a given Node
  function showConnections(e, obj) {
    // var diagram = node.diagram;
   myDiagram2.startTransaction("highlight");
   // remove any previous highlighting
   myDiagram2.clearHighlighteds();
   //loop throug all nodes in the diagram and apply different styling 
   myDiagram2.nodes.each(function (indNode) {
	//if the currently selected node
	  if(indNode.isSelected) {
		indNode.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
	   	indNode.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
 	 //all the other nodes in the diagram that is not selected or highlighted
	   } else if (!indNode.isHighlighted) {
		//RoundedRectangle shape
		var shape = indNode.findObject("SHAPE");
		shape.stroke = "rgba(183, 227, 246, 0.7)";
		//Text of each node
		var text = indNode.findObject("TEXT");
		text.stroke = "rgba(0,0,0, 0.5)"; 	
		//Placeholder for the sub-graph
		var placeholderText = indNode.findObject("PLACEHOLDERTEXT");
		if(placeholderText){
			placeholderText.stroke = "rgba(0,0,0, 0.5)";	
		}
	}
              //change all links and arrow heads to a light gray when not associated with the currently selected node
             if (!indNode.isSelected){
		indNode.findLinksOutOf().each(function (currentNode) {
				var arrow = currentNode.findObject("ARROW");
				arrow.stroke = "rgba(128,128,128, 0.1)";
				var arrowHead = currentNode.findObject("ARROWHEAD");
				arrowHead.stroke = "rgba(128,128,128, 0.1)";
				arrowHead.fill = "rgba(128,128,128, 0.1)";	
		})
	}

   
})
myDiagram2.commitTransaction("highlight");

}

It gives me the desired look. Using layerName probably makes more sense because I can just bind in the nodeTemplate, groupTemplate, and linkTemplate…correct?

Thanks