From 50fedcaf9878310dbf3c0fe79515fd084f58c840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Wed, 27 Nov 2024 13:58:46 +0100
Subject: [PATCH] fix(vector-map): set zoom timeout for correct refresh of
styles
---
.../MapViewerVector/MapViewerVector.types.ts | 2 ++
.../reactionsLayer/useOlMapReactionsLayer.ts | 2 ++
.../utils/shapes/elements/BaseMultiPolygon.ts | 31 ++++++++++++++-----
.../Map/MapViewer/utils/useOlMap.ts | 4 +--
src/constants/map.ts | 2 +-
5 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts
index e7ccb7c9..63fddd60 100644
--- a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts
@@ -10,6 +10,8 @@ export type MapConfig = {
export type VerticalAlign = 'TOP' | 'MIDDLE' | 'BOTTOM';
export type HorizontalAlign = 'LEFT' | 'RIGHT' | 'CENTER' | 'END' | 'START';
+export type ScaleFunction = (resolution: number) => number;
+
export type OverlayBioEntityGroupedElementsType = {
[id: string]: Array<OverlayBioEntityRender & { amount: number }>;
};
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 4e289297..658e2a5d 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
@@ -195,6 +195,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 fab80515..1960681d 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
@@ -6,6 +6,7 @@ import { MultiPolygon } from 'ol/geom';
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import {
HorizontalAlign,
+ ScaleFunction,
VerticalAlign,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
import { MapInstance } from '@/types/map';
@@ -109,6 +110,11 @@ export default abstract class BaseMultiPolygon {
mapSize: MapSize;
+ mapExtentCache: Map<number, [number, number, number, number]> = new Map<
+ number,
+ [number, number, number, number]
+ >();
+
constructor({
type,
sboTerm,
@@ -198,17 +204,24 @@ export default abstract class BaseMultiPolygon {
this.feature = new Feature({
geometry: new MultiPolygon(this.polygons),
zIndex: this.zIndex,
- getScale: (resolution: number): number => {
+ getScale: ((): ScaleFunction => {
const maxZoom = mapInstance?.getView().get('originalMaxZoom');
- if (maxZoom) {
- const minResolution = mapInstance?.getView().getResolutionForZoom(maxZoom);
+ const minResolution = maxZoom
+ ? mapInstance?.getView().getResolutionForZoom(maxZoom)
+ : undefined;
+
+ return (resolution: number): number => {
if (minResolution) {
return minResolution / resolution;
}
- }
- return 1;
- },
+ return 1;
+ };
+ })(),
getMapExtent: (resolution: number): [number, number, number, number] | undefined => {
+ if (this.mapExtentCache.has(resolution)) {
+ return this.mapExtentCache.get(resolution);
+ }
+
const view = mapInstance?.getView();
const center = view?.getCenter();
const size = mapInstance?.getSize();
@@ -216,15 +229,19 @@ export default abstract class BaseMultiPolygon {
if (!size || !center) {
return undefined;
}
+
const extentWidth = size[0] * resolution;
const extentHeight = size[1] * resolution;
- return [
+ const extent: [number, number, number, number] = [
center[0] - extentWidth / 2,
center[1] - extentHeight / 2,
center[0] + extentWidth / 2,
center[1] + extentHeight / 2,
];
+
+ this.mapExtentCache.set(resolution, extent);
+ return extent;
},
id: this.id,
complexId: this.complexId,
diff --git a/src/components/Map/MapViewer/utils/useOlMap.ts b/src/components/Map/MapViewer/utils/useOlMap.ts
index de917a95..68ec65bd 100644
--- a/src/components/Map/MapViewer/utils/useOlMap.ts
+++ b/src/components/Map/MapViewer/utils/useOlMap.ts
@@ -65,8 +65,8 @@ export const useOlMap: UseOlMap = ({ target } = {}) => {
mouseWheelZoom: false,
}).extend([
new MouseWheelZoom({
- duration: 0,
- timeout: 20,
+ duration: 250,
+ timeout: 80,
}),
]),
target: target || mapRef.current,
diff --git a/src/constants/map.ts b/src/constants/map.ts
index 07775a81..5856c87c 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 = 3;
+export const ZOOM_RESCALING_FACTOR = 2;
export const DEFAULT_CENTER_POINT: Point = {
x: DEFAULT_CENTER_X,
--
GitLab