Merge branch 'feat/optimization' into 'development'

Feat/optimization

See merge request !335

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

@@ -23,13 +23,13 @@ export const LayersDrawer = (): JSX.Element => {
           <div key={layer.details.id} className="flex items-center justify-between border-b p-4">
             <h1>{layer.details.name}</h1>
             <Switch
-              isChecked={layersVisibilityForCurrentModel[layer.details.layerId]}
+              isChecked={layersVisibilityForCurrentModel[layer.details.id]}
               onToggle={value =>
                 dispatch(
                   setLayerVisibility({
                     modelId: currentModelId,
                     visible: value,
-                    layerId: layer.details.layerId,
+                    layerId: layer.details.id,
                   }),
                 )
               }

src/components/Map/MapViewer/MapViewer.component.tsx

@@ -9,7 +9,7 @@ export const MapViewer = (): JSX.Element => {
     <div
       ref={mapRef}
       role={MAP_VIEWER_ROLE}
-      className="absolute left-[88px] top-[104px] h-[calc(100%-104px)] w-[calc(100%-88px)] bg-[#e4e2de]"
+      className="absolute left-[88px] top-[104px] h-[calc(100%-104px)] w-[calc(100%-88px)] bg-white"
     />
   );
 };

src/components/Map/MapViewer/MapViewerVector/utils/config/additionalLayers/useOlMapAdditionalLayers.ts

@@ -55,7 +55,7 @@ export const useOlMapAdditionalLayers = (
         ovals: layer.ovals,
         lines: layer.lines,
         visible: layer.details.visible,
-        layerId: layer.details.layerId,
+        layerId: layer.details.id,
         lineTypes,
         arrowTypes,
         mapInstance,

src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.test.ts

@@ -82,11 +82,4 @@ describe('useOlMapLayers - util', () => {
     expect(result[0]).toBeInstanceOf(VectorLayer);
     expect(result[0].getSourceState()).toBe('ready');
   });
-
-  it('should return valid VectorLayer instance [2]', () => {
-    const result = getRenderedHookResults();
-
-    expect(result[1]).toBeInstanceOf(VectorLayer);
-    expect(result[1].getSourceState()).toBe('ready');
-  });
 });

src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.ts

 /* eslint-disable no-magic-numbers */
 import { MapInstance } from '@/types/map';
-import { useOlMapWhiteCardLayer } from '@/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer';
 import { useOlMapAdditionalLayers } from '@/components/Map/MapViewer/MapViewerVector/utils/config/additionalLayers/useOlMapAdditionalLayers';
 import { useMemo } from 'react';
 import { useOlMapReactionsLayer } from './reactionsLayer/useOlMapReactionsLayer';
@@ -12,10 +11,9 @@ interface UseOlMapLayersInput {
 
 export const useOlMapVectorLayers = ({ mapInstance }: UseOlMapLayersInput): MapConfig['layers'] => {
   const reactionsLayer = useOlMapReactionsLayer({ mapInstance });
-  const whiteCardLayer = useOlMapWhiteCardLayer();
   const additionalLayers = useOlMapAdditionalLayers(mapInstance);
 
   return useMemo(() => {
-    return [whiteCardLayer, reactionsLayer, ...additionalLayers];
-  }, [whiteCardLayer, reactionsLayer, additionalLayers]);
+    return [reactionsLayer, ...additionalLayers];
+  }, [reactionsLayer, additionalLayers]);
 };

src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.test.ts

-/* eslint-disable no-magic-numbers */
-import { MAP_DATA_INITIAL_STATE, OPENED_MAPS_INITIAL_STATE } from '@/redux/map/map.constants';
-import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
-import { renderHook } from '@testing-library/react';
-import BaseLayer from 'ol/layer/Base';
-import VectorLayer from 'ol/layer/Vector';
-import React from 'react';
-import MapBackgroundsEnum from '@/redux/map/map.enums';
-import { useOlMapWhiteCardLayer } from './useOlMapWhiteCardLayer';
-
-const useRefValue = {
-  current: null,
-};
-
-Object.defineProperty(useRefValue, 'current', {
-  get: jest.fn(() => ({
-    innerHTML: '',
-    appendChild: jest.fn(),
-    addEventListener: jest.fn(),
-    getRootNode: jest.fn(),
-  })),
-  set: jest.fn(() => ({
-    innerHTML: '',
-    appendChild: jest.fn(),
-    addEventListener: jest.fn(),
-    getRootNode: jest.fn(),
-  })),
-});
-
-jest.spyOn(React, 'useRef').mockReturnValue(useRefValue);
-
-describe('useOlMapWhiteCardLayer - util', () => {
-  const getRenderedHookResults = (): BaseLayer => {
-    const { Wrapper } = getReduxWrapperWithStore({
-      map: {
-        data: {
-          ...MAP_DATA_INITIAL_STATE,
-          size: {
-            width: 256,
-            height: 256,
-            tileSize: 256,
-            minZoom: 1,
-            maxZoom: 1,
-          },
-          position: {
-            initial: {
-              x: 256,
-              y: 256,
-            },
-            last: {
-              x: 256,
-              y: 256,
-            },
-          },
-        },
-        loading: 'idle',
-        error: {
-          name: '',
-          message: '',
-        },
-        openedMaps: OPENED_MAPS_INITIAL_STATE,
-        backgroundType: MapBackgroundsEnum.SEMANTIC,
-      },
-    });
-
-    const { result } = renderHook(() => useOlMapWhiteCardLayer(), {
-      wrapper: Wrapper,
-    });
-
-    return result.current;
-  };
-
-  it('should return valid TileLayer instance', () => {
-    const result = getRenderedHookResults();
-
-    expect(result).toBeInstanceOf(VectorLayer);
-    expect(result.getSourceState()).toBe('ready');
-  });
-});

src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.ts

-import { Feature } from 'ol';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import { useMemo } from 'react';
-import Polygon from 'ol/geom/Polygon';
-import { useSelector } from 'react-redux';
-import { mapDataSizeSelector } from '@/redux/map/map.selectors';
-import { usePointToProjection } from '@/utils/map/usePointToProjection';
-import Style from 'ol/style/Style';
-import { Fill } from 'ol/style';
-
-export const useOlMapWhiteCardLayer = (): VectorLayer<VectorSource<Feature<Polygon>>> => {
-  const mapSize = useSelector(mapDataSizeSelector);
-  const pointToProjection = usePointToProjection();
-
-  const rectangle = useMemo(() => {
-    return new Polygon([
-      [
-        pointToProjection({ x: 0, y: 0 }),
-        pointToProjection({ x: mapSize.width, y: 0 }),
-        pointToProjection({ x: mapSize.width, y: mapSize.height }),
-        pointToProjection({ x: 0, y: mapSize.height }),
-        pointToProjection({ x: 0, y: 0 }),
-      ],
-    ]);
-  }, [mapSize.height, mapSize.width, pointToProjection]);
-
-  const rectangleFeature = useMemo(() => {
-    return new Feature(rectangle);
-  }, [rectangle]);
-
-  const vectorSource = useMemo(() => {
-    return new VectorSource({
-      features: [rectangleFeature],
-    });
-  }, [rectangleFeature]);
-
-  return useMemo(
-    () =>
-      new VectorLayer({
-        source: vectorSource,
-        style: new Style({
-          fill: new Fill({
-            color: '#fff',
-          }),
-        }),
-      }),
-    [vectorSource],
-  );
-};

src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.test.ts

@@ -117,7 +117,7 @@ describe('Layer', () => {
         },
       ],
       visible: true,
-      layerId: '23',
+      layerId: 23,
       pointToProjection: jest.fn(point => [point.x, point.y]),
       mapInstance,
       lineTypes: {},

src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts

@@ -32,7 +32,7 @@ export interface LayerProps {
   ovals: Array<LayerOval>;
   lines: Array<LayerLine>;
   visible: boolean;
-  layerId: string;
+  layerId: number;
   lineTypes: LineTypeDict;
   arrowTypes: ArrowTypeDict;
   mapInstance: MapInstance;

src/components/Map/MapViewer/utils/config/useOlMapView.ts

 /* eslint-disable no-magic-numbers */
-import { EXTENT_PADDING_MULTIPLICATOR, OPTIONS, ZOOM_RESCALING_FACTOR } from '@/constants/map';
+import { OPTIONS, ZOOM_RESCALING_FACTOR } from '@/constants/map';
 import { mapDataInitialPositionSelector, mapDataSizeSelector } from '@/redux/map/map.selectors';
 import { MapInstance, Point } from '@/types/map';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
@@ -19,23 +19,32 @@ export const useOlMapView = ({ mapInstance }: UseOlMapViewInput): MapConfig['vie
   const pointToProjection = usePointToProjection();
 
   const extent = useMemo((): Extent => {
-    const extentPadding = {
-      horizontal: mapSize.width * EXTENT_PADDING_MULTIPLICATOR,
-      vertical: mapSize.height * EXTENT_PADDING_MULTIPLICATOR,
-    };
+    let widthPadding = 0;
+    let heightPadding = 0;
+    let mapInstanceWidthToHeightRatio = 2.15;
+    const mapInstanceSize = mapInstance?.getSize();
+    if (mapInstanceSize) {
+      mapInstanceWidthToHeightRatio = mapInstanceSize[0] / mapInstanceSize[1];
+    }
+    const mapWidthToHeightRatio = mapSize.width / mapSize.height;
 
+    if (mapWidthToHeightRatio < mapInstanceWidthToHeightRatio) {
+      widthPadding = mapSize.height * mapInstanceWidthToHeightRatio - mapSize.width;
+    } else {
+      heightPadding = mapSize.width / mapInstanceWidthToHeightRatio - mapSize.height;
+    }
     const topLeftPoint: Point = {
-      x: mapSize.width + extentPadding.horizontal,
-      y: mapSize.height + extentPadding.vertical,
+      x: mapSize.width + widthPadding / 2,
+      y: mapSize.height + heightPadding / 2,
     };
 
     const bottomRightPoint: Point = {
-      x: -extentPadding.horizontal,
-      y: -extentPadding.vertical,
+      x: -widthPadding / 2,
+      y: -heightPadding / 2,
     };
 
     return boundingExtent([topLeftPoint, bottomRightPoint].map(pointToProjection));
-  }, [pointToProjection, mapSize]);
+  }, [mapSize.width, mapSize.height, mapInstance, pointToProjection]);
 
   const center = useMemo((): Point => {
     const centerPoint: Point = {

src/constants/map.ts

@@ -12,7 +12,7 @@ export const DEFAULT_CENTER_Y = 0;
 export const LATLNG_FALLBACK: LatLng = [0, 0];
 export const EXTENT_PADDING_MULTIPLICATOR = 1;
 
-export const ZOOM_RESCALING_FACTOR = 2;
+export const ZOOM_RESCALING_FACTOR = 1;
 
 export const DEFAULT_CENTER_POINT: Point = {
   x: DEFAULT_CENTER_X,

src/models/layerSchema.ts

@@ -2,9 +2,7 @@ import { z } from 'zod';
 
 export const layerSchema = z.object({
   id: z.number(),
-  layerId: z.string(),
   name: z.string(),
   visible: z.boolean(),
   locked: z.boolean(),
-  empty: z.boolean(),
 });

src/redux/layers/layers.reducers.test.ts

@@ -64,7 +64,7 @@ describe('layers reducer', () => {
         },
       ],
       layersVisibility: {
-        [layersFixture.content[0].layerId]: layersFixture.content[0].visible,
+        [layersFixture.content[0].id]: layersFixture.content[0].visible,
       },
     });
   });
@@ -119,7 +119,7 @@ describe('layers reducer', () => {
           },
         ],
         layersVisibility: {
-          [layersFixture.content[0].layerId]: layersFixture.content[0].visible,
+          [layersFixture.content[0].id]: layersFixture.content[0].visible,
         },
       });
       expect(promiseFulfilled).toEqual('succeeded');

src/redux/layers/layers.reducers.ts

@@ -39,7 +39,7 @@ export const getLayersForModelReducer = (builder: ActionReducerMapBuilder<Layers
 
 export const setLayerVisibilityReducer = (
   state: LayersState,
-  action: PayloadAction<{ modelId: number; visible: boolean; layerId: string }>,
+  action: PayloadAction<{ modelId: number; visible: boolean; layerId: number }>,
 ): void => {
   const { modelId, visible, layerId } = action.payload;
   const { data } = state[modelId];

src/redux/layers/layers.thunks.test.ts

@@ -51,7 +51,7 @@ describe('layers thunks', () => {
           },
         ],
         layersVisibility: {
-          [layersFixture.content[0].layerId]: layersFixture.content[0].visible,
+          [layersFixture.content[0].id]: layersFixture.content[0].visible,
         },
       });
     });

src/redux/layers/layers.thunks.ts

@@ -53,7 +53,7 @@ export const getLayersForModel = createAsyncThunk<
       );
     });
     const layersVisibility = layers.reduce((acc: { [key: string]: boolean }, layer) => {
-      acc[layer.details.layerId] = layer.details.visible;
+      acc[layer.details.id] = layer.details.visible;
       return acc;
     }, {});
     return {

src/redux/layers/layers.types.ts

@@ -10,7 +10,7 @@ export type LayerState = {
 };
 
 export type LayerVisibilityState = {
-  [key: string]: boolean;
+  [key: number]: boolean;
 };
 
 export type LayersVisibilitiesState = {