Usage of zIndex property

[lavrton]

In pure Konva framework, we have zIndex property. It is very useful to change order of elements with that property:

node.setZIndex(2);

In react-konva the order of elements will be defined as it is defined in render() function of a component:

// Rect will have zIndex = 0
// Circle will have zIndex = 1
const Component = () =>
   <Group>
     <Rect>
     <Circle>
   <Group>

// Rect will have zIndex = 1
// Circle will have zIndex = 0
const Component2 = () =>
   <Group>
     <Circle>
     <Rect>
   <Group>

We may have unexpected result if we will use two logics of ordering at the same time:

const Component = () =>
   <Group>
     <Rect zIndex={1}>
     <Circle>
   <Group>

So my suggestion is to NOT use zIndex attrube in react-konva. Just reorder nodes in render().

[jktzes]

Is there an option to reverse this order? Since the convention is that the element on the top will have higher zIndex than the elements on the bottom. Thanks!

[lavrton]

Since the convention is that the element on the top will have higher zIndex than the elements on the bottom

I don't know such a convention. DOM works in the same way as described above.

[jktzes]

Since the convention is that the element on the top will have higher zIndex than the elements on the bottom

I don't know such a convention. DOM works in the same way as described above.

My apologies. I am using react-konva to develop a Photoshop-like photo editing tool. I meant the convention in Photoshop. Anyway, would a PR that implement such feature be appropriate here?

[lavrton]

No, we don't need to rever the order from react-konva side. If you need to revert it, you can do it manually from your render() function.

[lavrton]

https://konvajs.org/docs/react/zIndex.html