feat(layers-rect): implement layer rectangle deleting

src/components/Map/Drawer/LayersDrawer/LayersDrawerObjectsList.component.tsx

@@ -11,6 +11,7 @@ import { LayersDrawerTextItem } from '@/components/Map/Drawer/LayersDrawer/Layer
 import QuestionModal from '@/components/FunctionalArea/Modal/QuestionModal/QustionModal.component';
 import {
   removeLayerImage,
+  removeLayerRect,
   removeLayerText,
   updateLayerImageObject,
   updateLayerRect,
@@ -18,6 +19,7 @@ import {
 } from '@/redux/layers/layers.thunks';
 import {
   layerDeleteImage,
+  layerDeleteRect,
   layerDeleteText,
   layerUpdateImage,
   layerUpdateRect,
@@ -52,13 +54,18 @@ interface LayersDrawerObjectsListProps {
 const removeObjectConfig = {
   image: {
     question: 'Are you sure you want to remove the image?',
-    successMessage: 'The layer image has been successfully removed',
-    errorMessage: 'An error occurred while removing the layer text',
+    successMessage: 'The layer image has been successfully removed.',
+    errorMessage: 'An error occurred while removing the layer text.',
   },
   text: {
     question: 'Are you sure you want to remove the text?',
-    successMessage: 'The layer text has been successfully removed',
-    errorMessage: 'An error occurred while removing the layer text',
+    successMessage: 'The layer text has been successfully removed.',
+    errorMessage: 'An error occurred while removing the layer text.',
+  },
+  rect: {
+    question: 'Are you sure you want to remove the rectangle?',
+    successMessage: 'The layer rectangle has been successfully removed.',
+    errorMessage: 'An error occurred while removing the layer rectangle.',
   },
 };
 
@@ -72,21 +79,25 @@ export const LayersDrawerObjectsList = ({
   const minZIndex = useAppSelector(state => minObjectZIndexForLayerSelector(state, layerId));
   const layer = useAppSelector(state => layerByIdSelector(state, layerId));
   const mapEditToolsLayerImageObject = useAppSelector(mapEditToolsLayerObjectSelector);
-  const [removeModalState, setRemoveModalState] = useState<undefined | 'text' | 'image'>(undefined);
-  const [layerObjectToRemove, setLayerObjectToRemove] = useState<LayerImage | LayerText | null>(
-    null,
+  const [removeModalState, setRemoveModalState] = useState<undefined | 'text' | 'image' | 'rect'>(
+    undefined,
   );
+  const [layerObjectToRemove, setLayerObjectToRemove] = useState<
+    LayerImage | LayerText | LayerRect | null
+  >(null);
   const dispatch = useAppDispatch();
   const setBounds = useSetBounds();
   const pointToProjection = usePointToProjection();
   const { mapInstance } = useMapInstance();
 
-  const removeObject = (layerObject: LayerImage | LayerText): void => {
+  const removeObject = (layerObject: LayerImage | LayerText | LayerRect): void => {
     setLayerObjectToRemove(layerObject);
     if ('glyph' in layerObject) {
       setRemoveModalState('image');
-    } else {
+    } else if ('notes' in layerObject) {
       setRemoveModalState('text');
+    } else {
+      setRemoveModalState('rect');
     }
   };
 
@@ -115,7 +126,7 @@ export const LayersDrawerObjectsList = ({
             textId: layerObjectToRemove.id,
           }),
         );
-      } else {
+      } else if (removeModalState === 'image') {
         await dispatch(
           removeLayerImage({
             modelId: currentModelId,
@@ -130,6 +141,21 @@ export const LayersDrawerObjectsList = ({
             imageId: layerObjectToRemove.id,
           }),
         );
+      } else {
+        await dispatch(
+          removeLayerRect({
+            modelId: currentModelId,
+            layerId: layerObjectToRemove.layer,
+            rectId: layerObjectToRemove.id,
+          }),
+        ).unwrap();
+        dispatch(
+          layerDeleteRect({
+            modelId: currentModelId,
+            layerId: layerObjectToRemove.layer,
+            rectId: layerObjectToRemove.id,
+          }),
+        );
       }
       removeElementFromLayer({
         mapInstance,
@@ -335,7 +361,7 @@ export const LayersDrawerObjectsList = ({
           key={layerRect.id}
           moveToFront={() => moveRectToFront(layerRect)}
           moveToBack={() => moveRectToBack(layerRect)}
-          removeObject={() => {}}
+          removeObject={() => removeObject(layerRect)}
           centerObject={() => centerObject(layerRect)}
           editObject={() => editRect()}
           isLayerVisible={isLayerVisible}

src/redux/apiPath.ts

@@ -45,6 +45,8 @@ export const apiPath = {
     `projects/${PROJECT_ID}/maps/${modelId}/layers/${layerId}/rects/`,
   updateLayerRect: (modelId: number, layerId: number, rectId: number | string): string =>
     `projects/${PROJECT_ID}/maps/${modelId}/layers/${layerId}/rects/${rectId}`,
+  removeLayerRect: (modelId: number, layerId: number, rectId: number | string): string =>
+    `projects/${PROJECT_ID}/maps/${modelId}/layers/${layerId}/rects/${rectId}`,
   getLayerOvals: (modelId: number, layerId: number): string =>
     `projects/${PROJECT_ID}/maps/${modelId}/layers/${layerId}/ovals/`,
   getLayerLines: (modelId: number, layerId: number): string =>

src/redux/layers/layers.reducers.ts

@@ -255,3 +255,19 @@ export const layerUpdateRectReducer = (
   }
   setLayerRect({ layerId, layers: data.layers, layerRect });
 };
+
+export const layerDeleteRectReducer = (
+  state: LayersState,
+  action: PayloadAction<{ modelId: number; layerId: number; rectId: number }>,
+): void => {
+  const { modelId, layerId, rectId } = action.payload;
+  const { data } = state[modelId];
+  if (!data) {
+    return;
+  }
+  const layer = data.layers.find(layerState => layerState.details.id === layerId);
+  if (!layer) {
+    return;
+  }
+  delete layer.rects[rectId];
+};

src/redux/layers/layers.slice.ts

@@ -16,6 +16,7 @@ import {
   layerUpdateTextReducer,
   layerAddRectReducer,
   layerUpdateRectReducer,
+  layerDeleteRectReducer,
 } from '@/redux/layers/layers.reducers';
 
 export const layersSlice = createSlice({
@@ -33,6 +34,7 @@ export const layersSlice = createSlice({
     layerDeleteText: layerDeleteTextReducer,
     layerAddRect: layerAddRectReducer,
     layerUpdateRect: layerUpdateRectReducer,
+    layerDeleteRect: layerDeleteRectReducer,
     setDrawLayer: setDrawLayerReducer,
   },
   extraReducers: builder => {
@@ -54,6 +56,7 @@ export const {
   layerDeleteText,
   layerAddRect,
   layerUpdateRect,
+  layerDeleteRect,
   setDrawLayer,
 } = layersSlice.actions;
 

src/redux/layers/layers.thunks.ts

@@ -462,3 +462,16 @@ export const updateLayerRect = createAsyncThunk<
     }
   },
 );
+
+export const removeLayerRect = createAsyncThunk<
+  null,
+  { modelId: number; layerId: number; rectId: number },
+  ThunkConfig
+>('layers/removeLayerRect', async ({ modelId, layerId, rectId }) => {
+  try {
+    await axiosInstanceNewAPI.delete<void>(apiPath.removeLayerRect(modelId, layerId, rectId));
+    return null;
+  } catch (error) {
+    return Promise.reject(getError({ error }));
+  }
+});