Merge branch 'feat/MIN-57-reactant-product' into 'development'

Resolve MIN-57 "Feat/ reactant product"

Closes MIN-57

See merge request !297

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts

@@ -150,7 +150,7 @@ export default abstract class BaseMultiPolygon {
     this.feature = new Feature({
       geometry: new MultiPolygon(this.polygons),
       getTextScale: (resolution: number): number => {
-        const maxZoom = mapInstance?.getView().getMaxZoom();
+        const maxZoom = mapInstance?.getView().get('originalMaxZoom');
         if (maxZoom) {
           const minResolution = mapInstance?.getView().getResolutionForZoom(maxZoom);
           if (minResolution) {

src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts

@@ -283,7 +283,8 @@ export default class Layer {
   };
 
   protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
-    const minResolution = this.mapInstance?.getView().getMinResolution();
+    const maxZoom = this.mapInstance?.getView().get('originalMaxZoom');
+    const minResolution = this.mapInstance?.getView().getResolutionForZoom(maxZoom);
     const style = feature.get('style');
     if (!minResolution || !style) {
       return [];

src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts

@@ -251,13 +251,16 @@ export default class Reaction {
 
   protected getOperator(operator: Operator): Feature<Circle> {
     const firstSegment = operator.line.segments[0];
+    let zIndex: number;
     let radius: number;
 
     if (operator.operatorText) {
+      zIndex = this.zIndex + 1;
       radius = Math.abs(
         this.pointToProjection({ x: 0, y: 0 })[0] - this.pointToProjection({ x: 6, y: 0 })[0],
       );
     } else {
+      zIndex = this.zIndex;
       radius = Math.abs(
         this.pointToProjection({ x: 0, y: 0 })[0] - this.pointToProjection({ x: 1.8, y: 0 })[0],
       );
@@ -270,10 +273,10 @@ export default class Reaction {
 
     const circleStyle = getStyle({
       geometry: circle,
-      zIndex: this.zIndex + 1,
+      zIndex,
       lineWidth: 1,
-      borderColor: this.line.color,
-      fillColor: this.line.color,
+      borderColor: operator.line.color,
+      fillColor: operator.line.color,
     });
 
     if (operator.operatorText) {
@@ -299,7 +302,8 @@ export default class Reaction {
   }
 
   protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
-    const minResolution = this.mapInstance?.getView().getMinResolution();
+    const maxZoom = this.mapInstance?.getView().get('originalMaxZoom');
+    const minResolution = this.mapInstance?.getView().getResolutionForZoom(maxZoom);
     const style = feature.get('style');
     if (!minResolution || !style) {
       return [];

src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts

@@ -81,7 +81,7 @@ export default class Text {
     this.feature = new Feature({
       geometry: this.point,
       getTextScale: (resolution: number): number => {
-        const maxZoom = mapInstance?.getView().getMaxZoom();
+        const maxZoom = mapInstance?.getView().get('originalMaxZoom');
         if (maxZoom) {
           const minResolution = mapInstance?.getView().getResolutionForZoom(maxZoom);
           if (minResolution) {

src/components/Map/MapViewer/utils/config/useOlMapView.ts

@@ -57,11 +57,12 @@ export const useOlMapView = ({ mapInstance }: UseOlMapViewInput): MapConfig['vie
       zoom: mapInitialPosition.z,
       showFullExtent: OPTIONS.showFullExtent,
       zoomFactor: 2 ** (1 / 3),
+      originalMaxZoom: mapSize.maxZoom * 3,
       maxZoom:
-        mapSize.width < 1.5 * mapSize.tileSize || mapSize.height < 1.5 * mapSize.tileSize
+        mapSize.width < 1.6 * mapSize.tileSize || mapSize.height < 1.6 * mapSize.tileSize
           ? Math.max(15, mapSize.maxZoom * 3)
           : mapSize.maxZoom * 3,
-      minZoom: mapSize.minZoom,
+      minZoom: mapSize.minZoom * 3,
       extent,
     }),
     [