[v12] z-index Grouping for SubFlows

[sroussey]

Please describe the feature that you want to propose

It would be great if (at least optionally) we could set the z-index of nodes that are contained in a parent to be on the same plane.

Nodes move around with their parent as a group, so they should move backward and forward as group as well.

In almost any diagram program that allows the user to group items, those items act as one in the z plane. You don't group things in Illustrator and then have parts of the group on the top of all other items in the document when you "send to back", etc.

[sroussey]

Drag and looks ok:

Click on item behind it:

Try dragging it:

Now dragging the first one again:

[sroussey]

At the moment, the only way I can think of to fix this is to not use sub flows and instead create a new xf flow for every child group.

[sroussey]

If you want to test for yourself:

git clone: https://github.com/sroussey/ellmers.git
bun install
bun run build
cd packages/web
bun run dev

[sroussey]

(BTW: in this particular use case, I can disable dragging of anything, but I want to be able to do grouping in ngraph )

[peterkogo]

Subflows are grouped by zIndex. Children will always have the parent zIndex + 1. But if you don't set any zIndex on the parent nodes, the flow will be drawn in order of the nodes array. Try setting different z indices for you parent nodes.

[sroussey]

Everything has a zIndex of zero.

[moklick]

by default all nodes have zIndex = 0. It's important that your parent nodes are always in front of the child nodes in your nodes array, so that child are rendered on top. If you select or drag a parent node, the zIndex of that node and all child node z indices get adjusted.

[peterkogo]

Are you sure that the parents are coming first and then the children? Do the parents have different z-indices? I can't replicate it, unfortunately. Do you have a codesandbox with a replication by any chance?

[sroussey]

So, I added something that sorts nodes any time there is a change (adding / deleting a node).

There is improvement on the first drag of any parent over any other parent.

However, the process of selection seems to alter things such that if i select various things, then go back and drag a parent over another parent, everything is messed up again.

[sroussey]

Oh, i see what is happening.

When i select, all @moklick says, the parent and its children get a higher zIndex.

However, when i select another parent, while the first parent gets zIndex lower, its children do not. The the children are left with zIndex of 1000 while the parent goes back to 0. Then when selecting/dragging on something new, the parent and children go to 1000 and then collide with the child that was left behind.

Here you can see the node on top has z-index of 1000 even though it belongs to the parent way underneath.

[moklick]

Is this about v11 or v12?

[sroussey]

Is this about v11 or v12?

v12

[sroussey]

I am looking at catching when a node de-selects, and then clean up myself by looking at the children and be sure they have zIndex of 0. But how do i set that?

[peterkogo]

Thanks for investigating this! I just double checked whats happening here and you are indeed correct. Once the internal zIndex was changed on select of the parent node, it never returns to its supposed zIndex. Thanks for the pull request!

[moklick]

fix was released with 12.0.0-next.14