diff --git a/src/components/Map/Drawer/LayersDrawer/LayersDrawer.component.tsx b/src/components/Map/Drawer/LayersDrawer/LayersDrawer.component.tsx
index 6ee65f6b44eeb7c078b7d7fc0250928f933db92f..e5f914e8c2dc8d5947b08817359eba144b923218 100644
--- a/src/components/Map/Drawer/LayersDrawer/LayersDrawer.component.tsx
+++ b/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,
}),
)
}
diff --git a/src/components/Map/MapViewer/MapViewer.component.tsx b/src/components/Map/MapViewer/MapViewer.component.tsx
index e4c857412058ee83bd83dabdfbc873628505e40c..662384c9bd6b215ea3277fd94c0568eac7dc081d 100644
--- a/src/components/Map/MapViewer/MapViewer.component.tsx
+++ b/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"
/>
);
};
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/additionalLayers/useOlMapAdditionalLayers.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/additionalLayers/useOlMapAdditionalLayers.ts
index b37cffdaf794171804473a8a0dc3c438c5350b3a..f0dfaa9fc3ccd4d993bfe3d174ad6a4525689842 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/additionalLayers/useOlMapAdditionalLayers.ts
+++ b/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,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.test.ts
index fed682be2c760b0f5b505436cdae182cd2976ca4..9ec7e61450fa2c2176760f600ba4bca508566bef 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.test.ts
+++ b/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');
- });
});
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.ts
index cebab4e092508f7d15bbeaf8a649166db7dfbe02..822b54ddd79e39d5d43c58f19464c070f8d6222d 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers.ts
@@ -1,6 +1,5 @@
/* 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]);
};
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.test.ts
deleted file mode 100644
index 394abc0c4a86767c4c8e2aee6d74e680fc965fae..0000000000000000000000000000000000000000
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.test.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/* 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');
- });
-});
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.ts
deleted file mode 100644
index f54b8d744acbe1b51c1c092749a83c02b6040997..0000000000000000000000000000000000000000
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-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],
- );
-};
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.test.ts
index 96829031476236840553f6d7da063b086dc60eee..46baee4385088e620a5170c6bde5521d95ee497f 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.test.ts
+++ b/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: {},
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts
index a842f5f242f883d83eee458e0869c00d0dc6c60d..29f17e00af39fb20d135bf1784b5abeb03a83737 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts
+++ b/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;
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapView.ts b/src/components/Map/MapViewer/utils/config/useOlMapView.ts
index a639ebd1dfe90648dfab7edc89855b406a6d565b..cdf5b8f5c668c8336b7e332d854d2c72c9aa874e 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapView.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapView.ts
@@ -1,5 +1,5 @@
/* 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 = {
diff --git a/src/constants/map.ts b/src/constants/map.ts
index 5856c87cf9eaa8aafee6d1aed74a4e57b9b70b16..d7efb594341aee93bf286ec885e543fb87036e8e 100644
--- a/src/constants/map.ts
+++ b/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,
diff --git a/src/models/layerSchema.ts b/src/models/layerSchema.ts
index be2ba10b1a0fe09971903c64ff8128e564244366..380146a7d8abc2d72931291915a4012d67746dbc 100644
--- a/src/models/layerSchema.ts
+++ b/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(),
});
diff --git a/src/redux/layers/layers.reducers.test.ts b/src/redux/layers/layers.reducers.test.ts
index ffc0d92384518dde4ef3e126133e30568e74c220..158ed1b037f696342238bacd298fafe2483a045b 100644
--- a/src/redux/layers/layers.reducers.test.ts
+++ b/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');
diff --git a/src/redux/layers/layers.reducers.ts b/src/redux/layers/layers.reducers.ts
index 0cc1ad73bf6c4e7625d657791389ef5befe48fc5..b0e601d57acd4fbe5bdf5b89d80ddb8d4a3a6e7e 100644
--- a/src/redux/layers/layers.reducers.ts
+++ b/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];
diff --git a/src/redux/layers/layers.thunks.test.ts b/src/redux/layers/layers.thunks.test.ts
index bdc626d56da950187f9c9d5f57970e12e8a9597b..234d9950d59c21be0a60a830d4ce7e8cfc755db8 100644
--- a/src/redux/layers/layers.thunks.test.ts
+++ b/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,
},
});
});
diff --git a/src/redux/layers/layers.thunks.ts b/src/redux/layers/layers.thunks.ts
index 0f38e3d1256a8c2d0ec34581cee2fb129cddfc74..f1594875f0597b512a6e8d6c4b4becb063ac8425 100644
--- a/src/redux/layers/layers.thunks.ts
+++ b/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 {
diff --git a/src/redux/layers/layers.types.ts b/src/redux/layers/layers.types.ts
index c00d6a7e63889b392919154ee1be634e5ed6f90e..701a499abc9979cc38b900ce64d25943a58935ef 100644
--- a/src/redux/layers/layers.types.ts
+++ b/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 = {