From 14f5a91fc084943d14688185969165e4d3aca420 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Wed, 11 Dec 2024 13:35:09 +0100
Subject: [PATCH 1/3] feat(vector-map): add duration to mouseWheelZoom
---
.../utils/config/reactionsLayer/useOlMapReactionsLayer.ts | 2 ++
src/components/Map/MapViewer/utils/useOlMap.ts | 2 +-
2 files changed, 3 insertions(+), 1 deletion(-)
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 bf0d3389..86787f11 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
@@ -244,6 +244,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/utils/useOlMap.ts b/src/components/Map/MapViewer/utils/useOlMap.ts
index 23d585e0..68ec65bd 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,
}),
]),
--
GitLab
From 7d8aec25002cdac1856dad1a48af5bb303ee6a54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Wed, 11 Dec 2024 13:38:19 +0100
Subject: [PATCH 2/3] bugfix(vector-map): add overlaysOrder state in
useOlMapReactionsLayer to avoid elements reloading
---
.../reactionsLayer/useOlMapReactionsLayer.ts | 19 +++++++++---
.../utils/shapes/elements/BaseMultiPolygon.ts | 2 +-
.../shapes/overlay/areOverlayOrdersEqual.ts | 31 +++++++++++++++++++
3 files changed, 46 insertions(+), 6 deletions(-)
create mode 100644 src/components/Map/MapViewer/MapViewerVector/utils/shapes/overlay/areOverlayOrdersEqual.ts
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 86787f11..509d5cbb 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,
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 c13c61f4..30f48a79 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 00000000..965ef019
--- /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;
+}
--
GitLab
From 20fa7f6a0282d9f6f30cc7f20fe19a76bfebbb30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Thu, 12 Dec 2024 08:10:43 +0100
Subject: [PATCH 3/3] feat(vector-map): add default extent padding
---
.../Map/MapViewer/utils/config/useOlMapView.ts | 10 +++++-----
src/constants/map.ts | 2 +-
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapView.ts b/src/components/Map/MapViewer/utils/config/useOlMapView.ts
index cdf5b8f5..d76947fd 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/constants/map.ts b/src/constants/map.ts
index d7efb594..c995fdad 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 = {
--
GitLab