feat(layer-image): correct z index on bring to front/back

Closes MIN-91

src/components/Map/MapDrawActions/MapDrawEditActions.component.tsx

@@ -6,7 +6,11 @@ import { MapDrawActionsButton } from '@/components/Map/MapDrawActions/MapDrawAct
 import { openLayerImageObjectEditFactoryModal } from '@/redux/modal/modal.slice';
 import { removeLayerImage, updateLayerImageObject } from '@/redux/layers/layers.thunks';
 import { mapModelIdSelector } from '@/redux/map/map.selectors';
-import { layersActiveLayerSelector } from '@/redux/layers/layers.selectors';
+import {
+  highestZIndexSelector,
+  layersActiveLayerSelector,
+  lowestZIndexSelector,
+} from '@/redux/layers/layers.selectors';
 import { layerDeleteImage, layerUpdateImage } from '@/redux/layers/layers.slice';
 import { useMapInstance } from '@/utils/context/mapInstanceContext';
 import { mapEditToolsSetLayerObject } from '@/redux/mapEditTools/mapEditTools.slice';
@@ -28,6 +32,8 @@ export const MapDrawEditActionsComponent = ({
 }: MapDrawEditActionsComponentProps): React.JSX.Element => {
   const currentModelId = useAppSelector(mapModelIdSelector);
   const activeLayer = useAppSelector(layersActiveLayerSelector);
+  const highestZIndex = useAppSelector(highestZIndexSelector);
+  const lowestZIndex = useAppSelector(lowestZIndexSelector);
   const layerImageObject = useAppSelector(mapEditToolsLayerImageObjectSelector);
   const dispatch = useAppDispatch();
   const { mapInstance } = useMapInstance();
@@ -51,7 +57,7 @@ export const MapDrawEditActionsComponent = ({
         modelId: currentModelId,
         layerId: activeLayer,
         ...layerImageObject,
-        z: layerImageObject.z + value,
+        z: value,
       }),
     ).unwrap();
     if (layerImage) {
@@ -129,15 +135,15 @@ export const MapDrawEditActionsComponent = ({
           />
           <MapDrawActionsButton
             isActive={false}
-            toggleMapEditAction={() => updateZIndex(1)}
+            toggleMapEditAction={() => updateZIndex(highestZIndex + 1)}
             icon="arrow-double-up"
-            title="Remove image"
+            title="Bring to front"
           />
           <MapDrawActionsButton
             isActive={false}
-            toggleMapEditAction={() => updateZIndex(-1)}
+            toggleMapEditAction={() => updateZIndex(lowestZIndex - 1)}
             icon="arrow-double-down"
-            title="Remove image"
+            title="Bring to back"
           />
         </>
       )}