Merge branch 'bugfix/MIN-124-data-overlay-for-elements-inside-comples' into 'development'

feat(vector-map): split getStyle function into separate smaller functions

Closes MIN-124

See merge request !349

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

@@ -22,7 +22,6 @@ import {
 } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
 import VectorSource from 'ol/source/Vector';
 import MapBackgroundsEnum from '@/redux/map/map.enums';
-import { Extent } from 'ol/extent';
 import { MapSize } from '@/redux/map/map.types';
 import getCoverStyles from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getCoverStyles';
 import handleSemanticView from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/handleSemanticView';
@@ -105,6 +104,14 @@ export default abstract class BaseMultiPolygon {
 
   styles: Array<Style> = [];
 
+  overlaysPolygons: Array<Polygon> = [];
+
+  overlaysStyles: Array<Style> = [];
+
+  coverStyle: Style | undefined;
+
+  coverStrokeStyle: Stroke | undefined;
+
   feature: Feature = new Feature();
 
   pointToProjection: UsePointToProjectionResult;
@@ -216,7 +223,7 @@ export default abstract class BaseMultiPolygon {
 
   protected drawMultiPolygonFeature(mapInstance: MapInstance): void {
     this.feature = new Feature({
-      geometry: new MultiPolygon(this.polygons),
+      geometry: new MultiPolygon([...this.polygons, ...this.overlaysPolygons]),
       zIndex: this.zIndex,
       getMapExtent: (resolution: number): [number, number, number, number] | undefined => {
         if (this.mapExtentCache.has(resolution)) {
@@ -253,15 +260,38 @@ export default abstract class BaseMultiPolygon {
     this.feature.setStyle(this.getStyle.bind(this));
   }
 
-  protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
-    if (!(feature instanceof Feature)) {
-      return undefined;
+  protected setStrokeStyle(scale: number, style: Style, strokeStyle: Stroke): void {
+    if (
+      !this.overlaysVisible &&
+      scale < OUTLINE_CUTOFF_SCALE &&
+      !COMPLEX_SBO_TERMS.includes(this.sboTerm) &&
+      this.type !== MAP_ELEMENT_TYPES.COMPARTMENT
+    ) {
+      style.setStroke(null);
+    } else {
+      style.setStroke(getScaledStrokeStyle(strokeStyle, scale));
     }
+  }
+
+  protected processOverlayStyle(scale: number): Array<Style> {
+    let strokeStyle: Stroke | undefined;
     const styles: Array<Style> = [];
-    const scale = this.minResolution / resolution;
-    let cover = false;
-    let largestExtent: Extent | null;
 
+    this.overlaysStyles.forEach(style => {
+      const styleGeometry = style.getGeometry();
+      if (styleGeometry instanceof Polygon) {
+        strokeStyle = styleGeometry.get('strokeStyle');
+      }
+
+      if (strokeStyle) {
+        this.setStrokeStyle(scale, style, strokeStyle);
+      }
+      styles.push(style);
+    });
+    return styles;
+  }
+
+  protected processElementStyles(scale: number): Array<Style> {
     if (
       this.complexId &&
       !COMPLEX_SBO_TERMS.includes(this.sboTerm) &&
@@ -270,54 +300,17 @@ export default abstract class BaseMultiPolygon {
       return [];
     }
 
-    let hide = false;
-    if (this.mapBackgroundType === MapBackgroundsEnum.SEMANTIC && scale < TEXT_CUTOFF_SCALE) {
-      const semanticViewData = handleSemanticView({
-        vectorSource: this.vectorSource,
-        feature,
-        resolution,
-        sboTerm: this.sboTerm,
-        compartmentId: this.compartmentId,
-        complexId: this.complexId,
-      });
-      cover = semanticViewData.cover;
-      hide = semanticViewData.hide;
-      largestExtent = semanticViewData.largestExtent;
-
-      if (hide) {
-        return undefined;
-      }
-    }
-
-    let type: string;
-    let coverStyle: Style | undefined;
     let strokeStyle: Stroke | undefined;
+    let type: string;
+    const styles: Array<Style> = [];
 
     this.styles.forEach(style => {
       const styleGeometry = style.getGeometry();
       if (styleGeometry instanceof Polygon) {
         type = styleGeometry.get('type');
-        coverStyle = styleGeometry.get('coverStyle');
         strokeStyle = styleGeometry.get('strokeStyle');
       }
 
-      if (cover) {
-        if (coverStyle && largestExtent) {
-          styles.push(
-            ...getCoverStyles({
-              coverStyle,
-              largestExtent,
-              text: this.text,
-              scale,
-              zIndex: this.zIndex + 100000,
-              mapSize: this.mapSize,
-              strokeStyle,
-            }),
-          );
-        }
-        return;
-      }
-
       if (
         [MAP_ELEMENT_TYPES.MODIFICATION, MAP_ELEMENT_TYPES.TEXT].includes(type) &&
         scale < TEXT_CUTOFF_SCALE
@@ -330,19 +323,69 @@ export default abstract class BaseMultiPolygon {
         textStyle.setScale(scale);
       }
       if (strokeStyle) {
-        if (
-          !this.overlaysVisible &&
-          scale < OUTLINE_CUTOFF_SCALE &&
-          !COMPLEX_SBO_TERMS.includes(this.sboTerm) &&
-          this.type !== MAP_ELEMENT_TYPES.COMPARTMENT
-        ) {
-          style.setStroke(null);
-        } else {
-          style.setStroke(getScaledStrokeStyle(strokeStyle, scale));
-        }
+        this.setStrokeStyle(scale, style, strokeStyle);
       }
       styles.push(style);
     });
+    return styles;
+  }
+
+  protected processSemanticView(
+    feature: Feature,
+    resolution: number,
+    scale: number,
+  ): { hide: boolean; coverStyle: Array<Style> | null } {
+    let coverStyle = null;
+    const semanticViewData = handleSemanticView({
+      vectorSource: this.vectorSource,
+      feature,
+      resolution,
+      sboTerm: this.sboTerm,
+      compartmentId: this.compartmentId,
+      complexId: this.complexId,
+    });
+    const { cover } = semanticViewData;
+    const { hide } = semanticViewData;
+    const { largestExtent } = semanticViewData;
+
+    if (hide) {
+      return { hide, coverStyle };
+    }
+
+    if (cover && largestExtent && this.coverStyle) {
+      coverStyle = getCoverStyles({
+        coverStyle: this.coverStyle,
+        largestExtent,
+        text: this.text,
+        scale,
+        zIndex: this.zIndex + 100000,
+        mapSize: this.mapSize,
+        strokeStyle: this.coverStrokeStyle,
+      });
+    }
+
+    return { hide, coverStyle };
+  }
+
+  protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+    if (!(feature instanceof Feature)) {
+      return undefined;
+    }
+    const styles: Array<Style> = [];
+    const scale = this.minResolution / resolution;
+
+    if (this.mapBackgroundType === MapBackgroundsEnum.SEMANTIC && scale < TEXT_CUTOFF_SCALE) {
+      const { hide, coverStyle } = this.processSemanticView(feature, resolution, scale);
+      if (hide) {
+        return undefined;
+      }
+      if (coverStyle) {
+        return coverStyle;
+      }
+    }
+
+    styles.push(...this.processOverlayStyle(scale));
+    styles.push(...this.processElementStyles(scale));
 
     return styles;
   }

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

@@ -139,16 +139,10 @@ export default abstract class Compartment extends BaseMultiPolygon {
 
   protected createPolygons(): void {
     const coverPolygon = new Polygon([this.outerCoords]);
-    const coverStyle = new Style({
+    this.coverStyle = new Style({
       geometry: coverPolygon,
       fill: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 255 }) }),
     });
-    coverPolygon.set('coverStyle', coverStyle);
-    this.styles.push(
-      new Style({
-        geometry: coverPolygon,
-      }),
-    );
 
     const framePolygon = new Polygon([this.outerCoords, this.innerCoords]);
     framePolygon.set('type', MAP_ELEMENT_TYPES.COMPARTMENT);

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

@@ -133,11 +133,11 @@ export default class CompartmentPathway extends BaseMultiPolygon {
       ],
     ]);
     compartmentPolygon.set('type', MAP_ELEMENT_TYPES.COMPARTMENT);
-    const coverStyle = new Style({
+    this.coverStyle = new Style({
       geometry: compartmentPolygon,
       fill: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 255 }) }),
     });
-    compartmentPolygon.set('coverStyle', coverStyle);
+
     compartmentPolygon.set(
       'strokeStyle',
       getStroke({

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

@@ -319,12 +319,12 @@ export default class MapElement extends BaseMultiPolygon {
       });
       elementPolygon.set('strokeStyle', strokeStyle);
       if (COMPLEX_SBO_TERMS.includes(this.sboTerm)) {
-        const coverStyle = new Style({
+        this.coverStyle = new Style({
           geometry: elementPolygon,
           fill: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 255 }) }),
           stroke: strokeStyle,
         });
-        elementPolygon.set('coverStyle', coverStyle);
+        this.coverStrokeStyle = strokeStyle;
       }
       this.polygons.push(elementPolygon);
       this.styles.push(elementStyle);
@@ -365,8 +365,8 @@ export default class MapElement extends BaseMultiPolygon {
           color,
         }),
       );
-      this.polygons.push(polygon);
-      this.styles.push(style);
+      this.overlaysPolygons.push(polygon);
+      this.overlaysStyles.push(style);
     });
   }
 }