Removing background on placholder in sub-graph

GoJS
1

I’m able to set “isSelected” and “isHighlighted” without any problems, and the mouseEnter call seems to fine, but I can’t seem to remove the background when I mouseLeave the placholder…“text.background” seems to be working fine on mouseEnter. What am I missing? Also, do I need to do anything to get the links to show up connecting the nodes in the subgraph.

//called when the mouse enters the subgraph
function mouseEnterSubGraph (e, obj) {
  console.log(obj);
  var shape = obj.findObject("SHAPE");
  shape.fill = "#DDF8BF";
  shape.stroke = "#77B03B";
  var text = obj.findObject("TEXT");
  text.background = "#DDF8BF"; 
}

//called when the mouse leaves the subgraph
function mouseLeaveSubGraph (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";
	 text = node.findObject("TEXT");
	 text.background = "#E9F9D7"; //doesn't get applied
 //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.background = "#FFF"; //doesn't get applied
 }
}

 myDiagram2.groupTemplate =
graph(go.Group, "Auto",
	// declare the Group.layout:
	{
		selectionAdorned: false,
		mouseEnter: mouseEnterSubGraph,
		mouseLeave: function (e, node) {mouseLeave(node); },
		click: function(e, node) { showConnections(node); }
	},
	{ layout: $(go.LayeredDigraphLayout,
				{columnSpacing: 10 }) },
	graph(go.Shape, "RoundedRectangle",  // surrounds everything
	{name:"SHAPE", minSize: new go.Size(200, 100), parameter1: 10, fill: "#FFF", stroke: "#009BE1", 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("")),
	graph(go.Panel, "Vertical",  // position header above the subgraph
	 { defaultAlignment: go.Spot.Center },
	 graph(go.Panel, "Horizontal",
	 	   { defaultAlignment: go.Spot.Top },
		   $("SubGraphExpanderButton"), 
	graph(go.TextBlock,     // group title near top, next to button
		{ font: "16px Sans-Serif", margin: new go.Margin(0, 5, 10, 5)},
		new go.Binding("text", "key"))
	 ),
	graph(go.Placeholder,     // represents area for all member parts
		{name: "TEXT", padding: new go.Margin(5, 27, 0, 0), cursor: "pointer"},
		new go.Binding("background", "isHighlighted", function(h) { return h ? "#E9F9D7" : "#FFF"; })
        		.ofObject(),
		new go.Binding("background", "isSelected", function(selected) {if (selected) return "#E9F9D7"; else return "#FFF";})
			.ofObject(""))
	)
);

The screen shot below show the green hover background still visible on mouseLeave but the “SHAPE” element background correctly turns white as it should, also the links are not visible…

mouseEnter:

Pasted image1920×1080 131 KB

mouseLeave:

Pasted image1920×1080 131 KB

Thanks

2

I was able to get the mouseLeave to work property, but still not sure why the links aren’t showing up? It looks like the links just show up from the examples but maybe I’m missing something?

3

Assuming the Groups are in the default Layer, try putting all of the Links in the “Foreground” layer:

    layerName: "Foreground"
4

They do show when I change the layerName to “Foreground” but I had that set to “Background” so that the links would run behind the other child nodes as you can see in my screen shot…How can I have the links run behind other nodes but also have the links appear in the subgraph?

  myDiagram2.linkTemplate = 
graph(go.Link, 
 	{ curve: go.Link.Bezier, toShortLength: 5 },
	{layerName: "Background"},
	graph(go.Shape,
	 	new go.Binding("stroke", "isHighlighted", function(h) { return h ? "#388E3C" : "#009BE1"; })
       	 	.ofObject()),
	graph(go.Shape, { toArrow: "Standard" },
	 	new go.Binding("stroke", "isHighlighted", function(h) { return h ? "#388E3C" : "#009BE1"; })
         	.ofObject()),
	graph(go.TextBlock, "",
		{font: "13px sans-serif", stroke: "black"},
		 new go.Binding("text", "isHighlighted", function (h, obj) {
		  if(obj.part.data.weight){
         	 return h ? obj.part.data.weight : ""
		  }
		  return "";
        }).ofObject())
);

With the layer set to “Foreground” the links appear in the subgraph but then run in front of other nodes, which I want to avoid.

Pasted image1920×1080 149 KB

5

OK, so you want links to be in a layer that is behind the layer that the regular nodes are in, but if you want them to be visible inside a group that has an opaque background, you need them to be in front of the group.

One way to achieve that is by having the links that are members of groups to be in the same layer as the group, or in another layer that is in front of the groups’ layer.

So you could implement a Part.containingGroupChanged event handler in your Link template(s):

  {
    layerName: "Background",  // in case group membership never changes
    containingGroupChanged: function(link, oldgroup, newgroup) {
        link.layerName = (newgroup === null ? "Background" : "");
    }
  }

I assume all Nodes and Groups have the default Part.layerName, which is the empty string, referring to the default Layer.

6

Perfect, thanks Walter. So just to understand correctly - by default we are setting the link to run behind the child nodes with this line:

 layerName: "Background",

Then containingGroupChanged is being called when I click on a Node in the sub-graph, what exactly is the oldGroup and the newGroup referring too? Is that the groupTemplate as a whole? Just want to understand when exactly that “containingGroupChanged” is being called?

Also, just curious if its possible to close the sub-graph by default, on initial page-load? Rather then have it opened when the page loads.

Thanks

7

Nothing to do with clicking or selection. The oldGroup and the newGroup refer to the old and new values of Part.containgGroup.

Just set Group | GoJS API to false.