Bring to front


Is it possible to make a node be infront of another node (so if they overlap it will draw the front node infront of the other one).

Specifically I would like to bring the dragged part to the front.


Have a look at this:

I’m sorry, I don’t understand how this sample solves my issue.


You can have selected parts automatically go into the “Foreground” Layer by using the following Binding:
// bind the Part.layerName to control the Node’s layer depending on whether it isSelected
new go.Binding(“layerName”, “isSelected”, function(sel) { return sel ? “Foreground” : “”; }).ofObject(),

This is taken from the Org Chart Editor sample,, but is also used in the Pipes sample, .

Thanks for the answer.

I noticed in both samples that if two objects are overlapping and I click the one which is not in the front, it get’s in the front when it’s selected, and when I remove the selection (just click on the diagram), it is still in the front of the other.

Sadly, this is no the case in my code. After adding the line as you suggested, when an item is selected, it is in the front, but when it is not selected anymore, it doesn’t stay in the front.

Do you have any suggestions for what I might be doing wrong?


Are both objects Parts that have that Binding of Part.layerName?

Might there be some other code that is setting the Part.layerName? Or maybe removing a Part from the Diagram and then adding it back?

I also tried, which exhibits the same behaviors that you describe for the the Org Chart Editor and Pipes samples. So I cannot explain the behavior that you are seeing in your app.

However, I do not think that such behavior is guaranteed. Until we provide a Part.zOrder property, the z-ordering of Parts within a single Layer is indeterminate, which allows GoJS to make some optimizations.

I understand. Thanks.