Draw all nodes and links in Single layer


I have GoJS canvas with multiple nodes and links. I observe that some of the nodes move behind other nodes and some move above other nodes. Is it possible to draw to draw all nodes and links in same layer and avoid this issue all together? Or is there a better way? All I want is when I selected a node, group or a Nested group I want it to be on top of all other nodes so that it does not slide behind on drag.

PS: I am setting the LayerName=“Foreground” whenever I select the node in SelectionChanged event. But that has very little effect most of the times.

OK, so I will assume that all Nodes and Groups are in the default layer, unless they are selected, in which case they are in the “Foreground” layer. I believe this is what you want.

Have you seen that a number of node templates have this binding:

    // temporarily put selected nodes in Foreground layer
    new go.Binding("layerName", "isSelected", function(s) { return s ? "Foreground" : ""; }).ofObject(),

That will get the effect that you want for regular Nodes.

But that might not be sufficient for Groups. It will work for a Group by itself, but not for its member Nodes and Links. (That’s because every Part can be independently placed in different Layers.) So I would try implementing Part.selectionChanged on your Group template to change the layers of all of the Group.findSubGraphParts().

Hmmm. Isn’t it kind of an overhead? Suppose I have a group with 100 subgroups with many nodes in each then I would have to do this repeatedly just to set the layer right.

Wish it was taken care internally within a group.

Actually, it’s good that such a policy is not implemented by GoJS, because you might want a slightly different policy, and that would be more complicated to deal with.

Group.findSubGraphParts returns a collection of all of the member Parts, recursively. If you have that “layerName” binding on Nodes, when iterating over the collection of members, only modify the Groups.