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

Add map centering when no anchors are visible

map-centering

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',
+        });
       });
     });
   });