Merge branch 'MIN-257-center-map-button-behaviour-when-nothing-selected' into 'development'

fix(map): add map centering when polygonCoordinates does not exist (MIN-257)

See merge request !121

src/components/Map/MapAdditionalActions/utils/useAdditionalActions.test.ts

@@ -6,6 +6,8 @@ import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreA
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { renderHook } from '@testing-library/react';
 import Map from 'ol/Map';
+import { initialMapDataFixture } from '@/redux/map/map.fixtures';
+import { modelsFixture } from '@/models/fixtures/modelsFixture';
 import { useAddtionalActions } from './useAdditionalActions';
 import { useVisibleBioEntitiesPolygonCoordinates } from './useVisibleBioEntitiesPolygonCoordinates';
 
@@ -122,8 +124,54 @@ describe('useAddtionalActions - hook', () => {
         useVisibleBioEntitiesPolygonCoordinatesMock.mockImplementation(() => undefined);
       });
 
-      it('should return undefined', () => {
-        const { Wrapper } = getReduxStoreWithActionsListener(INITIAL_STORE_STATE_MOCK);
+      it('should return undefined and center map by calculating coordinates when default center coordinates do not exist', () => {
+        const MAP_CONFIG = {
+          size: {
+            width: 3500,
+            height: 2000,
+          },
+          zoom: {
+            minZoom: 2,
+            maxZoom: 9,
+          },
+          position: {
+            x: 1300,
+            y: 1900,
+            z: 7,
+          },
+        };
+        const { Wrapper, store } = getReduxStoreWithActionsListener({
+          ...INITIAL_STORE_STATE_MOCK,
+          models: {
+            ...INITIAL_STORE_STATE_MOCK.models,
+            data: [
+              {
+                ...modelsFixture[0],
+                ...MAP_CONFIG.size,
+                ...MAP_CONFIG.zoom,
+                defaultCenterX: null,
+                defaultCenterY: null,
+                defaultZoomLevel: null,
+              },
+            ],
+          },
+          map: {
+            ...INITIAL_STORE_STATE_MOCK.map,
+            data: {
+              ...initialMapDataFixture,
+              position: {
+                last: MAP_CONFIG.position,
+                initial: MAP_CONFIG.position,
+              },
+              size: {
+                ...MAP_CONFIG.size,
+                ...MAP_CONFIG.zoom,
+                tileSize: 256,
+              },
+              modelId: modelsFixture[0].idObject,
+            },
+          },
+        });
         const {
           result: {
             current: { zoomInToBioEntities },
@@ -131,8 +179,81 @@ describe('useAddtionalActions - hook', () => {
         } = renderHook(() => useAddtionalActions(), {
           wrapper: Wrapper,
         });
+        const result = zoomInToBioEntities();
+        expect(result).toBeUndefined();
+        const actions = store.getActions();
+        const position = store.getState().map?.data.position;
+        expect(position?.last).toEqual(MAP_CONFIG.position);
+        expect(actions[0]).toEqual({
+          payload: { x: 1750, y: 1000, z: 5 },
+          type: 'map/setMapPosition',
+        });
+      });
 
-        expect(zoomInToBioEntities()).toBeUndefined();
+      it('should return undefined and center map using default center coordinates if exist', () => {
+        const MAP_CONFIG = {
+          size: {
+            width: 5000,
+            height: 10000,
+          },
+          zoom: {
+            minZoom: 2,
+            maxZoom: 9,
+          },
+          position: {
+            x: 1300,
+            y: 1900,
+            z: 7,
+          },
+        };
+        const { Wrapper, store } = getReduxStoreWithActionsListener({
+          ...INITIAL_STORE_STATE_MOCK,
+          models: {
+            ...INITIAL_STORE_STATE_MOCK.models,
+            data: [
+              {
+                ...modelsFixture[0],
+                ...MAP_CONFIG.size,
+                ...MAP_CONFIG.zoom,
+                defaultCenterX: 2500,
+                defaultCenterY: 5000,
+                defaultZoomLevel: 3,
+              },
+            ],
+          },
+          map: {
+            ...INITIAL_STORE_STATE_MOCK.map,
+            data: {
+              ...initialMapDataFixture,
+              position: {
+                last: MAP_CONFIG.position,
+                initial: MAP_CONFIG.position,
+              },
+              size: {
+                ...MAP_CONFIG.size,
+                ...MAP_CONFIG.zoom,
+                tileSize: 256,
+              },
+              modelId: modelsFixture[0].idObject,
+            },
+          },
+        });
+        const {
+          result: {
+            current: { zoomInToBioEntities },
+          },
+        } = renderHook(() => useAddtionalActions(), {
+          wrapper: Wrapper,
+        });
+        const result = zoomInToBioEntities();
+        expect(result).toBeUndefined();
+        const actions = store.getActions();
+        const position = store.getState().map?.data.position;
+        expect(position?.last).toEqual(MAP_CONFIG.position);
+        expect(actions[0]).toEqual({
+          payload: { x: 2500, y: 5000, z: 3 },
+          type: 'map/setMapPosition',
+        });
       });
     });
   });

src/components/Map/MapAdditionalActions/utils/useAdditionalActions.ts

-import { varyPositionZoom } from '@/redux/map/map.slice';
+import { setMapPosition, varyPositionZoom } from '@/redux/map/map.slice';
 import { SetBoundsResult, useSetBounds } from '@/utils/map/useSetBounds';
 import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { MAP_ZOOM_IN_DELTA, MAP_ZOOM_OUT_DELTA } from '../MappAdditionalActions.constants';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { currentModelIdSelector, modelByIdSelector } from '@/redux/models/models.selectors';
+import { DEFAULT_ZOOM } from '@/constants/map';
 import { useVisibleBioEntitiesPolygonCoordinates } from './useVisibleBioEntitiesPolygonCoordinates';
+import { MAP_ZOOM_IN_DELTA, MAP_ZOOM_OUT_DELTA } from '../MappAdditionalActions.constants';
 
 interface UseAddtionalActionsResult {
   zoomIn(): void;
@@ -15,13 +18,26 @@ export const useAddtionalActions = (): UseAddtionalActionsResult => {
   const dispatch = useDispatch();
   const setBounds = useSetBounds();
   const polygonCoordinates = useVisibleBioEntitiesPolygonCoordinates();
+  const currentMapModelId = useAppSelector(currentModelIdSelector);
+  const currentModel = useAppSelector(state => modelByIdSelector(state, currentMapModelId));
 
   const zoomInToBioEntities = (): SetBoundsResult | undefined => {
-    if (!polygonCoordinates) {
-      return undefined;
+    if (polygonCoordinates) {
+      return setBounds(polygonCoordinates);
+    }
+
+    if (currentModel) {
+      const HALF = 2;
+      const defaultPosition = {
+        x: currentModel?.defaultCenterX ?? currentModel.width / HALF,
+        y: currentModel?.defaultCenterY ?? currentModel.height / HALF,
+        z: currentModel?.defaultZoomLevel ?? DEFAULT_ZOOM,
+      };
+
+      dispatch(setMapPosition(defaultPosition));
     }
 
-    return setBounds(polygonCoordinates);
+    return undefined;
   };
 
   const varyZoomByDelta = useCallback(