Nodes Z-Ordering

GoJS
1

Hi there

I am struggling to solve an issue regarding Z-ordering of nodes in the same layer. Here is a description of the issue:

I have implemented a drag/drop tool by extending the default Dragging tool. When I drag more than one node on the canvas, and I drag them over a specific area, I want the nodes to stack on top of each other. I have already implemented the animations that places all of the nodes in a stacked order, but the problem comes in with the z-index of each node - because I have no control, the z-index hardly ever functions properly, unless the nodes I select on the canvas, are selected in the same order that they are rendered.

I don’t want to go an add each and every selected node into their own layer - it seems like the wrong solution for something that should really be simple?

To see what I mean, please have a look at these two images. The first is a sample of what it looks like when the 3 nodes are selected, the second is what it looks like when they are stacked. In the second image, you will only see the outlines of 2, because the 3rd node is z-indexed at the back, eventhough it is the 2nd selected object in the collection of draggedParts.

Selecting objects
Stacking objects

Please let me know how to solve this issue.

Thanks,
Bridgette

2

Unfortunately we do not allow z-ordering per Part yet. This is a planned feature for a future release (probably 1.6).

3

Thanks for the reply.

Is there any workaround you could suggest?

4

You could try adding and removing the nodes from the Layer so that the newly added parts are implicitly z-ordered above the older parts, but this is a kludgey workaround and is not guaranteed to work. Something inside of GoJS may reorder them on you (Notably, if you are using Groups)

Here’s an example:

When you press the button, all the nodes are temporarily moved to a new layer, then moved back to the default layer in the opposite order.

5

Thanks, Simon.

I think i will wait a bit and see if it makes it into a future build.

6

If you want to experiment with it now, you can use the 1.6 library at GoJS - Build Interactive Diagrams for the Web Just set or bind Part.zOrder to a number. Larger values are closer to the front than smaller numbers.

7

I would love to start playing with it! Thanks - will download it now :smile:

8

http://gojs.net/beta/intro/layers.html

9

It works perfectly. Thanks so much!