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

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"
           />
         </>
       )}

src/components/Map/MapViewer/utils/websocket/websocket.constants.ts

+export const OPERATION_TYPES = {
+  ENTITY_CREATED: 'ENTITY_CREATED',
+  ENTITY_UPDATED: 'ENTITY_UPDATED',
+  ENTITY_DELETED: 'ENTITY_DELETED',
+  MESSAGE_PROCESSED_SUCCESSFULLY: 'MESSAGE_PROCESSED_SUCCESSFULLY',
+} as const;
+
+export const ENTITY_TYPES = {
+  GLYPH: 'GLYPH',
+  LAYER: 'LAYER',
+  LAYER_IMAGE: 'LAYER_IMAGE',
+  LAYER_LINE: 'LAYER_LINE',
+  LAYER_OVAL: 'LAYER_OVAL',
+  LAYER_RECTANGLE: 'LAYER_RECTANGLE',
+  LAYER_TEXT: 'LAYER_TEXT',
+} as const;

src/redux/layers/layers.selectors.ts

@@ -49,3 +49,22 @@ export const highestZIndexSelector = createSelector(layersForCurrentModelSelecto
     return Math.max(maxZ, layerMaxZ);
   }, 0);
 });
+
+export const lowestZIndexSelector = createSelector(layersForCurrentModelSelector, layers => {
+  if (!layers || layers.length === 0) return 0;
+
+  const getMinZFromItems = <T extends { z?: number }>(items: T[] = []): number =>
+    items.length > 0 ? Math.min(...items.map(item => item.z || 0)) : 0;
+
+  return layers.reduce((minZ, layer) => {
+    const textsMinZ = getMinZFromItems(Object.values(layer.texts));
+    const rectsMinZ = getMinZFromItems(layer.rects);
+    const ovalsMinZ = getMinZFromItems(layer.ovals);
+    const linesMinZ = getMinZFromItems(layer.lines);
+    const imagesMinZ = getMinZFromItems(Object.values(layer.images));
+
+    const layerMinZ = Math.min(textsMinZ, rectsMinZ, ovalsMinZ, linesMinZ, imagesMinZ);
+
+    return Math.min(minZ, layerMinZ);
+  }, 0);
+});