I am trying to have different nodes in a group on different layers, but it seems not to be working (it might be the case that my approach is wrong)
I have a hierarchy of objects, similar to a folder structure i.e. something like this
-Folder
--Folder1
---File
----Chars
--Folder2
---File
When I create the nodes I do it by creating a top level group and I then go through the children and add that to the group, so we end up with a nested tree of Konva groups. This have worked great so far, the problem I'm facing now is that I want to annotate (something like a notification circle on an app icon) some of the Nodes with other shapes, this annotation will be part of the Nodes group it annotates, which leads to the issue of where they are located in the hierarchy. I want the annotations to be located at the very top, so they won't be covered by other Nodes, so an example would be if Folder1 and Folder2 are two rectangles right up aganist each other, we annotate Folder1 with some shape S, if S grows out of the rect of Folder1 then it will get partially covered by the Folder2 group. As Folder1 and Folder2 are seperate groups on the same layer I can't zIndex myself out of this.
It is basically the same case as in the documentation here, with the red circle. The difference is that I want to keep the red circle in the first group, but have the red circle being drawn on a different layer that the rest of the group. What I'm hoping to acheive is to have the red circle move with the rest of the group, during dragging, while still having it on top of the green square.
To solve this I have tried to put the annotations on a different layer, but still within the same group. This might be wrong, I'm not sure, can a group span multiple layers? So the reason for doing this is putting the annotation on a different layer will asure them being top level, but keeping them in the group will allow it to be moved with the rest of the group when drag and dropping. If my approach is impossible, but you have an idea how to solve this, please let me know :)
That is not possible to do directly. Konva has a strict hierarchy. It means a node may have only one parent. And a parent may have many children. They all rendered strictly in order, defined in the hierarchy and order of children.
There is no "absolute position" in Konva.js.
As the solution, you will have to put "absolute" shapes that you want to see on top into another group/layer and sync their position with original group.