Merge branch 'fix/MIN-109-zooming-on-macos' into 'development'

fix(vector-map): set zoom timeout for correct refresh of styles

Closes MIN-109

See merge request !323

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 }>;
 };

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;

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,

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,

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,