Add option to "Bring to front" / "Send to back" for items in 2D viewer

[nano-michael]

Hello,

I'm having problems when overlapping items in 2D viewer. For example, a desk that has a computer on it. In some cases, the computer would be rendered under the desk and it would be hidden in 2D viewer.

This would be solved really simple with two buttons "Send to back" and "Bring to front".

I tried to implement it my self, but SVG zIndex property doesn't work and the workaround would be to move the element HTML code position.

Anyone found a fix or tried to implement this?

[nano-michael]

Managed to order by adding to the model of the item a zIndex column and two buttons on the panel element editor - Up / Down that increase / decrease the zIndex column.

After this in viewer2d/layer.jsx just order the items by zIndex.

items.sortBy(item => item.zIndex).valueSeq().map(item => <Item key={item.id} layer={layer} item={item} scene={scene} catalog={catalog} />) }