Controlling zOrder

GoJS
1

Hi everyone,

I’m trying to re-implement the layering behavior in my project.
Specifically, I want all Nodes and Groups to be on the same layer, and I want to manually control their drawing order using zOrder.

From what I understand, if I don’t set a zOrder (i.e., leave it as NaN), GoJS will use the default order:

  • Groups are drawn below their member parts.
  • Members are drawn in the order they were added to the diagram.

That part works well for me — placing everything on the same layer and relying on GoJS’s default group/member handling is fine. But I’m running into trouble when I want to manually adjust which nodes are visually on top within a group (i.e., control zOrder among siblings inside the group).

So here’s my question:
How can I control the z-ordering of nodes and links inside a group, when everything is on the same layer and groups don’t define separate layering contexts?

Is it enough to set the zOrder on individual nodes/links? Are there any caveats when doing that inside a group?

Basically, I want to understand how to implement “Bring to front”/ “Send to back” functionality within the group.

Any tips or examples would be very helpful!

Thanks!

2

You’ll need to set or bind the zOrder of the containing Group as well as the zOrder of each member Node and Link. This is needed in order to allow you the flexibility to have the Group in front of its own member Nodes, for example.

3

@walter so the only way is to control zOrder on each possible modification, like memberAdded, adding new elements to the canvas and so on?

4

Yes, if you care about the order, you need to specify it.

Maybe you don’t care about the order that much, so you could use the same value for Part.zOrder for those Parts that want to be more-or-less at the same Z plane.

5

Okay, I got it. Thanks a lot for clearification.