Merge branch 'feat/layer-rectangle-websocket' into 'development'

feat(layer-rects): add updating layer rectangle with websockets

See merge request !410

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

+import { WebSocketEntityUpdateInterface } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.types';
+import { store } from '@/redux/store';
+import { ENTITY_OPERATION_TYPES } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.constants';
+import { MapInstance } from '@/types/map';
+import drawElementOnLayer from '@/components/Map/MapViewer/utils/shapes/layer/utils/drawElementOnLayer';
+import { layerDeleteRect } from '@/redux/layers/layers.slice';
+import removeElementFromLayer from '@/components/Map/MapViewer/utils/shapes/layer/utils/removeElementFromLayer';
+import updateElement from '@/components/Map/MapViewer/utils/shapes/layer/utils/updateElement';
+import { getLayerRect } from '@/redux/layers/layers.thunks';
+
+export default async function processLayerRect({
+  data,
+  mapInstance,
+}: {
+  data: WebSocketEntityUpdateInterface;
+  mapInstance: MapInstance;
+}): Promise<void> {
+  const { dispatch } = store;
+  if (
+    data.type === ENTITY_OPERATION_TYPES.ENTITY_CREATED ||
+    data.type === ENTITY_OPERATION_TYPES.ENTITY_UPDATED
+  ) {
+    const resultRect = await dispatch(
+      getLayerRect({
+        modelId: data.mapId,
+        layerId: data.layerId,
+        rectId: data.entityId,
+      }),
+    ).unwrap();
+    if (!resultRect) {
+      return;
+    }
+    if (data.type === ENTITY_OPERATION_TYPES.ENTITY_CREATED) {
+      drawElementOnLayer({
+        mapInstance,
+        activeLayer: data.layerId,
+        object: resultRect,
+        drawFunctionKey: 'drawRect',
+      });
+    } else {
+      updateElement(mapInstance, data.layerId, resultRect);
+    }
+  } else if (data.type === ENTITY_OPERATION_TYPES.ENTITY_DELETED) {
+    dispatch(
+      layerDeleteRect({
+        modelId: data.mapId,
+        layerId: data.layerId,
+        rectId: data.entityId,
+      }),
+    );
+    removeElementFromLayer({ mapInstance, layerId: data.layerId, featureId: data.entityId });
+  }
+}

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

@@ -5,6 +5,7 @@ import { ENTITY_TYPES } from '@/utils/websocket-entity-updates/webSocketEntityUp
 import processLayerText from '@/components/Map/MapViewer/utils/websocket/processLayerText';
 import processLayerOval from '@/components/Map/MapViewer/utils/websocket/processLayerOval';
 import processLayer from '@/components/Map/MapViewer/utils/websocket/processLayer';
+import processLayerRect from '@/components/Map/MapViewer/utils/websocket/processLayerRect';
 
 export default async function processMessage({
   jsonMessage,
@@ -21,6 +22,8 @@ export default async function processMessage({
       await processLayerText({ data: jsonMessage, mapInstance });
     } else if (jsonMessage.entityType === ENTITY_TYPES.LAYER_OVAL) {
       await processLayerOval({ data: jsonMessage, mapInstance });
+    } else if (jsonMessage.entityType === ENTITY_TYPES.LAYER_RECTANGLE) {
+      await processLayerRect({ data: jsonMessage, mapInstance });
     } else if (jsonMessage.entityType === ENTITY_TYPES.LAYER) {
       await processLayer({ data: jsonMessage, mapInstance });
     }

src/redux/apiPath.ts

@@ -43,6 +43,8 @@ export const apiPath = {
     `projects/${PROJECT_ID}/maps/${modelId}/layers/${layerId}/rects/`,
   addLayerRect: (modelId: number, layerId: number): string =>
     `projects/${PROJECT_ID}/maps/${modelId}/layers/${layerId}/rects/`,
+  getLayerRect: (modelId: number, layerId: number, rectId: number | string): string =>
+    `projects/${PROJECT_ID}/maps/${modelId}/layers/${layerId}/rects/${rectId}`,
   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 =>

src/redux/layers/layers.thunks.ts

@@ -398,6 +398,27 @@ export const updateLayerText = createAsyncThunk<
   },
 );
 
+export const getLayerRect = createAsyncThunk<
+  LayerRect | null,
+  {
+    modelId: number;
+    layerId: number;
+    rectId: number;
+  },
+  ThunkConfig
+>('layers/getLayerRect', async ({ modelId, layerId, rectId }) => {
+  try {
+    const { data } = await axiosInstanceNewAPI.get<LayerRect>(
+      apiPath.getLayerRect(modelId, layerId, rectId),
+    );
+    const isDataValid = validateDataUsingZodSchema(data, layerRectSchema);
+
+    return isDataValid ? data : null;
+  } catch (error) {
+    return Promise.reject(getError({ error }));
+  }
+});
+
 export const addLayerRect = createAsyncThunk<
   LayerRect | null,
   {