diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
index bf0d33892b9f2fbea737390416f13d6e4ff777bd..509d5cbb35c6f387d349aeaeb1c4885655e6ed43 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
@@ -2,7 +2,7 @@
import { Feature } from 'ol';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { usePointToProjection } from '@/utils/map/usePointToProjection';
import MapElement from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement';
import { useSelector } from 'react-redux';
@@ -48,6 +48,8 @@ import { mapBackgroundTypeSelector, mapDataSizeSelector } from '@/redux/map/map.
import MapBackgroundsEnum from '@/redux/map/map.enums';
import { setMapBackgroundType } from '@/redux/map/map.slice';
import { ZOOM_RESCALING_FACTOR } from '@/constants/map';
+import { OverlayOrder } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
+import areOverlayOrdersEqual from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/overlay/areOverlayOrdersEqual';
export const useOlMapReactionsLayer = ({
mapInstance,
@@ -56,6 +58,7 @@ export const useOlMapReactionsLayer = ({
}): VectorLayer<VectorSource<Feature>> => {
const dispatch = useAppDispatch();
+ const [overlaysOrderState, setOverlaysOrderState] = useState<Array<OverlayOrder>>([]);
const currentModelId = useSelector(currentModelIdSelector);
const shapes = useSelector(bioShapesSelector);
const mapSize = useSelector(mapDataSizeSelector);
@@ -84,6 +87,12 @@ export const useOlMapReactionsLayer = ({
return mapSize.maxZoom * ZOOM_RESCALING_FACTOR === mapModelOriginalMaxZoom;
}, [mapModelOriginalMaxZoom, mapSize.maxZoom]);
+ useEffect(() => {
+ if (areOverlayOrdersEqual(overlaysOrderState, overlaysOrder)) {
+ setOverlaysOrderState(overlaysOrder);
+ }
+ }, [overlaysOrder, overlaysOrderState]);
+
useEffect(() => {
if (!currentModelId) {
return;
@@ -97,10 +106,10 @@ export const useOlMapReactionsLayer = ({
}, [currentModelId, dispatch, reactionsLoading, modelElementsLoading]);
useEffect(() => {
- if (overlaysOrder.length) {
+ if (overlaysOrderState.length) {
dispatch(setMapBackgroundType(MapBackgroundsEnum.NETWORK));
}
- }, [dispatch, overlaysOrder]);
+ }, [dispatch, overlaysOrderState]);
const groupedElementsOverlays = useMemo(() => {
const elementsBioEntitesOverlay = debouncedBioEntities.filter(
@@ -202,7 +211,7 @@ export const useOlMapReactionsLayer = ({
shapes,
lineTypes,
groupedElementsOverlays,
- overlaysOrder,
+ overlaysOrderState,
getOverlayBioEntityColorByAvailableProperties,
vectorSource,
mapInstance,
@@ -216,7 +225,7 @@ export const useOlMapReactionsLayer = ({
isCorrectMapInstanceViewScale,
lineTypes,
groupedElementsOverlays,
- overlaysOrder,
+ overlaysOrderState,
getOverlayBioEntityColorByAvailableProperties,
vectorSource,
mapInstance,
@@ -244,6 +253,8 @@ export const useOlMapReactionsLayer = ({
return useMemo(() => {
const vectorLayer = new VectorLayer({
source: vectorSource,
+ updateWhileAnimating: true,
+ updateWhileInteracting: true,
});
vectorLayer.set('type', VECTOR_MAP_LAYER_TYPE);
return vectorLayer;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
index c13c61f4b2ed27bbb2ccbcf39df119ee957b4eab..30f48a793a787e7719a02a024a5e9e3a5bf301ec 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
@@ -309,7 +309,7 @@ export default abstract class BaseMultiPolygon {
largestExtent,
this.text,
scale,
- this.zIndex + 1000,
+ this.zIndex + 100000,
this.mapSize,
),
);
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/overlay/areOverlayOrdersEqual.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/overlay/areOverlayOrdersEqual.ts
new file mode 100644
index 0000000000000000000000000000000000000000..965ef0196e471b2515c6000e4d5d6e97d47a4334
--- /dev/null
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/overlay/areOverlayOrdersEqual.ts
@@ -0,0 +1,31 @@
+/* eslint-disable no-magic-numbers */
+import { OverlayOrder } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
+
+export default function areOverlayOrdersEqual(
+ overlaysOrder1: Array<OverlayOrder>,
+ overlaysOrder2: Array<OverlayOrder>,
+): boolean {
+ if (overlaysOrder1 === overlaysOrder2) {
+ return true;
+ }
+
+ if (overlaysOrder1.length !== overlaysOrder2.length) {
+ return false;
+ }
+
+ for (let index = 0; index < overlaysOrder1.length; index += 1) {
+ const obj1 = overlaysOrder1[index];
+ const obj2 = overlaysOrder2[index];
+
+ if (
+ obj1.id !== obj2.id ||
+ obj1.order !== obj2.order ||
+ obj1.calculatedOrder !== obj2.calculatedOrder ||
+ obj1.index !== obj2.index
+ ) {
+ return false;
+ }
+ }
+
+ return true;
+}
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapView.ts b/src/components/Map/MapViewer/utils/config/useOlMapView.ts
index cdf5b8f5c668c8336b7e332d854d2c72c9aa874e..d76947fdfa250784062178211202a1f7a3fff1d8 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 { OPTIONS, ZOOM_RESCALING_FACTOR } from '@/constants/map';
+import { DEFAULT_EXTENT_PADDING, 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';
@@ -34,13 +34,13 @@ export const useOlMapView = ({ mapInstance }: UseOlMapViewInput): MapConfig['vie
heightPadding = mapSize.width / mapInstanceWidthToHeightRatio - mapSize.height;
}
const topLeftPoint: Point = {
- x: mapSize.width + widthPadding / 2,
- y: mapSize.height + heightPadding / 2,
+ x: mapSize.width + widthPadding / 2 + DEFAULT_EXTENT_PADDING,
+ y: mapSize.height + heightPadding / 2 + DEFAULT_EXTENT_PADDING,
};
const bottomRightPoint: Point = {
- x: -widthPadding / 2,
- y: -heightPadding / 2,
+ x: -widthPadding / 2 - DEFAULT_EXTENT_PADDING,
+ y: -heightPadding / 2 - DEFAULT_EXTENT_PADDING,
};
return boundingExtent([topLeftPoint, bottomRightPoint].map(pointToProjection));
diff --git a/src/components/Map/MapViewer/utils/useOlMap.ts b/src/components/Map/MapViewer/utils/useOlMap.ts
index 23d585e05dd86fb232f96b99fe0bce896ef39b71..68ec65bdabc7f95366cf0835ef547a515301a6ce 100644
--- a/src/components/Map/MapViewer/utils/useOlMap.ts
+++ b/src/components/Map/MapViewer/utils/useOlMap.ts
@@ -65,7 +65,7 @@ export const useOlMap: UseOlMap = ({ target } = {}) => {
mouseWheelZoom: false,
}).extend([
new MouseWheelZoom({
- duration: 0,
+ duration: 250,
timeout: 80,
}),
]),
diff --git a/src/constants/map.ts b/src/constants/map.ts
index d7efb594341aee93bf286ec885e543fb87036e8e..c995fdad5c637c292fc4162dd24dc6ac07e1021d 100644
--- a/src/constants/map.ts
+++ b/src/constants/map.ts
@@ -11,7 +11,7 @@ export const DEFAULT_CENTER_Y = 0;
// eslint-disable-next-line no-magic-numbers
export const LATLNG_FALLBACK: LatLng = [0, 0];
export const EXTENT_PADDING_MULTIPLICATOR = 1;
-
+export const DEFAULT_EXTENT_PADDING = 20;
export const ZOOM_RESCALING_FACTOR = 1;
export const DEFAULT_CENTER_POINT: Point = {