Feature: Allow passing z-index for nodes to make overlapping deterministic

[felixhayashi]

Hi,

this is actually a feature request carried over from the old visjs repo:

https://github.com/almende/vis/issues/3146

The idea is to give nodes an optional zIndex as property that makes it possible to move nodes further to the back or the front.

This is especially useful in situations where certain nodes act as "frames" in the background to visually group other nodes (as the "MyFrame" node below), while allowing the user to actively position that frame himself/herself (since it is a regular node).

Thanks

[corwin-of-amber]

This is greatly needed when you have larger networks and you want to split them into logical "layers", placed one on top of the other.

[cristianoccazinsp]

Looking forward for this as well. Initially, I thought node order (in the list) affected which node shows above which, but looks like that's not always the case.

[Thomaash]

Yeah, there's absolutely no guarantee at the moment.

[cristianoccazinsp]

Is it absolutely random? I'm testing and I do get the desired behaviour on some browsers, and a different one on another. Does it have to do with some browsers maintaining insertion order of objects and some others not doing it?

Edit: Looks like the node id is used to sort them in the Z axis. Is this true?

Edit 2: If ids are numeric, those are used to sort on the Z axis, but if they are strings, the insertion order is used. I'm confused now :D

[Thomaash]

What you're observing is undefined behaviour. There is nothing enforcing the order so who knows what happens. I think that insertion order is generally maintained but as I said there's no guarantee at the moment.

If you want to understand it, you'll have to study the following:

• All the code that handles it.
• ECMAScript specification regarding iteration order (spoiler alert: it's a mess).
• Various quirks in various browsers.

[cristianoccazinsp]

Can you direct me at where in the visjs code could I possibly modify so that there's some consistency with insertion order and the Z axis order?

[Thomaash]

This handles rendering: https://github.com/visjs/vis-network/blob/master/lib/network/modules/CanvasRenderer.js This handles updates and additions: https://github.com/visjs/vis-network/blob/master/lib/network/modules/NodesHandler.js

However this may not be the whole story.

[kumaryatham]

@Thomaash Is below change resolve this issue

https://github.com/visjs/vis-network/commit/b9ff8480808262c0dc9aff622e61642438de1c8d#diff-26e1b82e67913ba1451b85ea295f665fL45

[Thomaash]

Unless I misunderstood something, that has nothing to do with it. Opacity controls how transparent/opaque the node is.

[icedblind]

Hi there,

i was searching something as you describe, to have a "frame box" to group visually some nodes for my static-positioned network maps. After a long search, i came up with my own solution, that does not involves "before/afterDrawing", but nodes instead.

This are my "fancyBoxes", hope it helps someone other: fancyBoxes fiddle