feat(vector-map): add semantic view as a default and stop masking content of...

feat(vector-map): add semantic view as a default and stop masking content of elemenets when text labels appear

Closes MIN-115

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

@@ -14,8 +14,11 @@ import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shape
 import getTextCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextCoords';
 import { Color } from '@/types/models';
 import {
+  COMPLEX_CONTENTS_CUTOFF_SCALE,
   COMPLEX_SBO_TERMS,
   MAP_ELEMENT_TYPES,
+  OUTLINE_CUTOFF_SCALE,
+  TEXT_CUTOFF_SCALE,
 } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
 import VectorSource from 'ol/source/Vector';
 import MapBackgroundsEnum from '@/redux/map/map.enums';
@@ -196,8 +199,6 @@ export default abstract class BaseMultiPolygon {
       });
       const textPolygon = new Polygon([[textCoords, textCoords]]);
       textPolygon.set('type', MAP_ELEMENT_TYPES.TEXT);
-      textPolygon.set('text', this.text);
-      textPolygon.set('fontSize', this.fontSize);
       const textStyle = getTextStyle({
         text: this.text,
         fontSize: this.fontSize,
@@ -260,19 +261,22 @@ export default abstract class BaseMultiPolygon {
     let cover = false;
     let largestExtent: Extent | null;
 
-    if (this.complexId && !COMPLEX_SBO_TERMS.includes(this.sboTerm) && scale < 0.215) {
+    if (
+      this.complexId &&
+      !COMPLEX_SBO_TERMS.includes(this.sboTerm) &&
+      scale < COMPLEX_CONTENTS_CUTOFF_SCALE
+    ) {
       feature.set('hidden', true);
       return [];
     }
     feature.set('hidden', false);
 
     let hide = false;
-    if (this.mapBackgroundType === MapBackgroundsEnum.SEMANTIC) {
+    if (this.mapBackgroundType === MapBackgroundsEnum.SEMANTIC && scale < TEXT_CUTOFF_SCALE) {
       const semanticViewData = handleSemanticView(
         this.vectorSource,
         feature,
         resolution,
-        scale,
         this.compartmentId,
         this.complexId,
       );
@@ -286,8 +290,6 @@ export default abstract class BaseMultiPolygon {
     }
 
     let type: string;
-    let fontSize: number;
-    let text: string;
     let coverStyle: Style | undefined;
     let strokeStyle: Stroke | undefined;
 
@@ -295,8 +297,6 @@ export default abstract class BaseMultiPolygon {
       const styleGeometry = style.getGeometry();
       if (styleGeometry instanceof Polygon) {
         type = styleGeometry.get('type');
-        text = styleGeometry.get('text');
-        fontSize = styleGeometry.get('fontSize') || 10;
         coverStyle = styleGeometry.get('coverStyle');
         strokeStyle = styleGeometry.get('strokeStyle');
       }
@@ -319,21 +319,20 @@ export default abstract class BaseMultiPolygon {
 
       if (
         [MAP_ELEMENT_TYPES.MODIFICATION, MAP_ELEMENT_TYPES.TEXT].includes(type) &&
-        scale * fontSize <= 4
+        scale < TEXT_CUTOFF_SCALE
       ) {
         return;
       }
 
       const textStyle = style.getText();
-      if (type === 'text' && textStyle) {
+      if (type === MAP_ELEMENT_TYPES.TEXT && textStyle) {
         textStyle.setScale(scale);
-        textStyle.setText(text);
       }
       if (strokeStyle) {
         const lineWidth = strokeStyle.getWidth() || 1;
         if (
           !this.overlaysVisible &&
-          scale < 0.18 &&
+          scale < OUTLINE_CUTOFF_SCALE &&
           !COMPLEX_SBO_TERMS.includes(this.sboTerm) &&
           this.type !== MAP_ELEMENT_TYPES.COMPARTMENT
         ) {