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

@@ -20,6 +20,7 @@ import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shape
 import { ArrowTypeDict, LineTypeDict } from '@/redux/shapes/shapes.types';
 import { FEATURE_TYPE } from '@/constants/features';
 import getScaledElementStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getScaledElementStyle';
+import VectorSource from 'ol/source/Vector';
 
 export interface ReactionProps {
   id: number;
@@ -33,6 +34,7 @@ export interface ReactionProps {
   arrowTypes: ArrowTypeDict;
   shapes: Array<Shape>;
   pointToProjection: UsePointToProjectionResult;
+  vectorSource: VectorSource;
   mapInstance: MapInstance;
 }
 
@@ -59,6 +61,8 @@ export default class Reaction {
 
   pointToProjection: UsePointToProjectionResult;
 
+  vectorSource: VectorSource;
+
   mapInstance: MapInstance;
 
   features: Array<Feature> = [];
@@ -75,6 +79,7 @@ export default class Reaction {
     arrowTypes,
     shapes,
     pointToProjection,
+    vectorSource,
     mapInstance,
   }: ReactionProps) {
     this.id = id;
@@ -88,6 +93,7 @@ export default class Reaction {
     this.arrowTypes = arrowTypes;
     this.shapes = shapes;
     this.pointToProjection = pointToProjection;
+    this.vectorSource = vectorSource;
     this.mapInstance = mapInstance;
 
     this.drawReaction();
@@ -213,6 +219,7 @@ export default class Reaction {
       id: this.id,
       type: FEATURE_TYPE.REACTION,
       elementType: REACTION_ELEMENT_TYPES.LINE,
+      zIndex: this.zIndex,
     });
     lineFeature.setStyle(this.getStyle.bind(this));
 
@@ -262,6 +269,7 @@ export default class Reaction {
       id: this.id,
       type: FEATURE_TYPE.REACTION,
       elementType: REACTION_ELEMENT_TYPES.SQUARE,
+      zIndex: this.zIndex,
     });
     squareFeature.setStyle(this.getStyle.bind(this));
     return squareFeature;
@@ -318,12 +326,24 @@ export default class Reaction {
       type: FEATURE_TYPE.REACTION,
       elementType: REACTION_ELEMENT_TYPES.OPERATOR,
       fontSize: 10,
+      zIndex: this.zIndex,
     });
     circleFeature.setStyle(this.getStyle.bind(this));
     return circleFeature;
   }
 
+  protected isAnyOfElementsHidden(): boolean {
+    return [...this.products, ...this.reactants, ...this.modifiers].some(reactionElement => {
+      const feature = this.vectorSource.getFeatureById(reactionElement.element);
+      return feature && feature.get('hidden');
+    });
+  }
+
   protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+    if (this.isAnyOfElementsHidden()) {
+      return undefined;
+    }
+
     const styles: Array<Style> = [];
     const maxZoom = this.mapInstance?.getView().get('originalMaxZoom');
     const minResolution = this.mapInstance?.getView().getResolutionForZoom(maxZoom);

src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getCoverStyles.test.ts

+/* eslint-disable no-magic-numbers */
+import Style from 'ol/style/Style';
+import { Extent } from 'ol/extent';
+import getWrappedTextWithFontSize from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getWrappedTextWithFontSize';
+import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
+import { latLngToPoint } from '@/utils/map/latLngToPoint';
+import getCoverStyles from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getCoverStyles';
+import { DEFAULT_TILE_SIZE } from '@/constants/map';
+
+jest.mock('../text/getWrappedTextWithFontSize');
+jest.mock('../text/getTextStyle');
+jest.mock('../../../../../../../utils/map/latLngToPoint');
+
+describe('getCoverStyles', () => {
+  it('should return cover and text styles based on the provided parameters', () => {
+    const coverStyle = new Style();
+    const largestExtent: Extent = [10, 10, 50, 50];
+    const text = 'Sample Text';
+    const scale = 1;
+    const zIndex = 5;
+    const mapSize = {
+      width: 1000,
+      height: 800,
+      minZoom: 1,
+      maxZoom: 9,
+      tileSize: DEFAULT_TILE_SIZE,
+    };
+
+    (latLngToPoint as jest.Mock).mockImplementation(([lat, lng], size) => ({
+      x: (lng * size.width) / 100,
+      y: (lat * size.height) / 100,
+    }));
+
+    (getWrappedTextWithFontSize as jest.Mock).mockReturnValue({
+      text: 'Sample\nText',
+      fontSize: 12,
+    });
+
+    const mockTextStyle = new Style();
+    (getTextStyle as jest.Mock).mockReturnValue(mockTextStyle);
+
+    const result = getCoverStyles(coverStyle, largestExtent, text, scale, zIndex, mapSize);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toBe(coverStyle);
+    expect(coverStyle.getZIndex()).toBe(zIndex);
+
+    expect(result[1]).toBe(mockTextStyle);
+    expect(getWrappedTextWithFontSize).toHaveBeenCalledWith({
+      text,
+      maxWidth: expect.any(Number),
+      maxHeight: expect.any(Number),
+    });
+
+    expect(getTextStyle).toHaveBeenCalledWith({
+      text: 'Sample\nText',
+      fontSize: 12,
+      color: '#000',
+      zIndex,
+      horizontalAlign: 'CENTER',
+    });
+  });
+
+  it('should handle empty text gracefully', () => {
+    const coverStyle = new Style();
+    const largestExtent: Extent = [10, 10, 50, 50];
+    const text = '';
+    const scale = 1;
+    const zIndex = 5;
+    const mapSize = {
+      width: 1000,
+      height: 800,
+      minZoom: 1,
+      maxZoom: 9,
+      tileSize: DEFAULT_TILE_SIZE,
+    };
+
+    (getWrappedTextWithFontSize as jest.Mock).mockReturnValue({
+      text: '',
+      fontSize: 0,
+    });
+
+    const result = getCoverStyles(coverStyle, largestExtent, text, scale, zIndex, mapSize);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toBe(coverStyle);
+  });
+});

src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getCoverStyles.ts

+/* eslint-disable no-magic-numbers */
+import Style from 'ol/style/Style';
+import { Extent, getCenter } from 'ol/extent';
+import { toLonLat } from 'ol/proj';
+import { latLngToPoint } from '@/utils/map/latLngToPoint';
+import getWrappedTextWithFontSize from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getWrappedTextWithFontSize';
+import { Point } from 'ol/geom';
+import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
+import { MapSize } from '@/redux/map/map.types';
+
+export default function getCoverStyles(
+  coverStyle: Style,
+  largestExtent: Extent,
+  text: string,
+  scale: number,
+  zIndex: number,
+  mapSize: MapSize,
+): Array<Style> {
+  const styles: Array<Style> = [];
+  coverStyle.setZIndex(zIndex);
+  styles.push(coverStyle);
+
+  if (text) {
+    const [lng1, lat1] = toLonLat([largestExtent[0], largestExtent[1]]);
+    const [lng2, lat2] = toLonLat([largestExtent[2], largestExtent[3]]);
+    const point1 = latLngToPoint([lat1, lng1], mapSize);
+    const point2 = latLngToPoint([lat2, lng2], mapSize);
+    const maxWidth = point2.x - point1.x;
+    const maxHeight = Math.abs(Math.abs(point2.y) - Math.abs(point1.y));
+    const { text: brokenText, fontSize: calculatedFontSize } = getWrappedTextWithFontSize({
+      text,
+      maxWidth: maxWidth * scale * 0.9,
+      maxHeight: maxHeight * scale * 0.9,
+    });
+    const center = getCenter(largestExtent);
+    const textGeometry = new Point([center[0], center[1]]);
+
+    const textStyle = getTextStyle({
+      text: brokenText.trim(),
+      fontSize: calculatedFontSize,
+      color: '#000',
+      zIndex,
+      horizontalAlign: 'CENTER',
+    });
+    textStyle.setGeometry(textGeometry);
+    styles.push(textStyle);
+  }
+
+  return styles;
+}

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

@@ -8,12 +8,14 @@ export default function getTextStyle({
   color,
   zIndex,
   horizontalAlign,
+  overflow = true,
 }: {
   text: string;
   fontSize: number;
   color: string;
   zIndex: number;
   horizontalAlign: HorizontalAlign;
+  overflow?: boolean;
 }): Style {
   return new Style({
     text: new Text({
@@ -25,7 +27,7 @@ export default function getTextStyle({
       placement: 'point',
       textAlign: horizontalAlign.toLowerCase() as CanvasTextAlign,
       textBaseline: 'middle',
-      overflow: true,
+      overflow,
     }),
     zIndex,
   });

src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getWrappedTextWithFontSize.test.ts

+/* eslint-disable no-magic-numbers */
+import getWrappedTextWithFontSize from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getWrappedTextWithFontSize';
+
+describe('getWrappedTextWithFontSize', () => {
+  it('should return a wrapped text and font size for this text when maxWidth is limited and maxHeight is unlimited', () => {
+    const text = 'Wrapped text with font size test';
+    const maxWidth = 15;
+    const maxHeight = 9999;
+
+    const { text: wrappedText, fontSize } = getWrappedTextWithFontSize({
+      text,
+      maxWidth,
+      maxHeight,
+    });
+
+    expect(wrappedText.trim()).toEqual('Wrapped text\nwith font size\ntest');
+    expect(fontSize).toEqual(12);
+  });
+
+  it('should return a wrapped text and font size for this text when maxWidth is unlimited and maxHeight is limited', () => {
+    const text = 'Wrapped text with font size test';
+    const maxWidth = 9999;
+    const maxHeight = 9;
+
+    const { text: wrappedText, fontSize } = getWrappedTextWithFontSize({
+      text,
+      maxWidth,
+      maxHeight,
+    });
+
+    expect(wrappedText.trim()).toEqual('Wrapped text with font size test');
+    expect(fontSize).toEqual(4);
+  });
+
+  it('should return a wrapped text and font size for this text when maxWidth is limited and maxHeight is limited', () => {
+    const text = 'Wrapped text with font size test';
+    const maxWidth = 20;
+    const maxHeight = 9;
+
+    const { text: wrappedText, fontSize } = getWrappedTextWithFontSize({
+      text,
+      maxWidth,
+      maxHeight,
+    });
+
+    expect(wrappedText.trim()).toEqual('Wrapped text with\nfont size test');
+    expect(fontSize).toEqual(3);
+  });
+});

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

+/* eslint-disable no-magic-numbers */
+export default function getWrappedTextWithFontSize({
+  text,
+  maxWidth,
+  maxHeight,
+  minFontSize = 1,
+  maxFontSize = 12,
+}: {
+  text: string;
+  maxWidth: number;
+  maxHeight: number;
+  minFontSize?: number;
+  maxFontSize?: number;
+}): { text: string; fontSize: number } {
+  const result = {
+    text,
+    fontSize: maxFontSize,
+  };
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return result;
+  }
+
+  let resultFontSize = maxFontSize;
+  let resultText = text;
+  for (let testFontSize = maxFontSize; testFontSize >= minFontSize; testFontSize -= 1) {
+    context.font = `${testFontSize}px Arial`;
+    let currentLine = '';
+    let splittedText = '';
+    resultFontSize = testFontSize;
+    text.split(' ').forEach((word: string) => {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const testWidth = context.measureText(testLine).width;
+
+      if (testWidth > maxWidth && currentLine) {
+        splittedText += `\n${currentLine}`;
+        currentLine = word;
+      } else {
+        currentLine = testLine;
+      }
+    });
+    if (currentLine) {
+      splittedText += `\n${currentLine}`;
+    }
+    const lines = splittedText.split('\n');
+    const maxLineWidth = lines.reduce(
+      (maxFoundWidth, line) => Math.max(maxFoundWidth, context.measureText(line).width),
+      0,
+    );
+    if (maxLineWidth <= maxWidth && testFontSize * lines.length <= maxHeight) {
+      resultText = splittedText;
+      break;
+    }
+  }
+  result.text = resultText;
+  result.fontSize = resultFontSize;
+  return result;
+}

src/components/Map/MapViewer/utils/config/useOlMapCommonLayers.test.ts

@@ -6,6 +6,7 @@ import BaseLayer from 'ol/layer/Base';
 import React from 'react';
 import VectorLayer from 'ol/layer/Vector';
 import { useOlMapCommonLayers } from '@/components/Map/MapViewer/utils/config/useOlMapCommonLayers';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 
 const useRefValue = {
   current: null,
@@ -58,6 +59,7 @@ describe('useOlMapCommonLayers - util', () => {
           message: '',
         },
         openedMaps: OPENED_MAPS_INITIAL_STATE,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 

src/components/Map/MapViewer/utils/config/useOlMapLayers.test.ts

@@ -6,6 +6,7 @@ import BaseLayer from 'ol/layer/Base';
 import TileLayer from 'ol/layer/Tile';
 import React from 'react';
 import VectorLayer from 'ol/layer/Vector';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { useOlMapLayers } from './useOlMapLayers';
 
 const useRefValue = {
@@ -59,6 +60,7 @@ describe('useOlMapLayers - util', () => {
           message: '',
         },
         openedMaps: OPENED_MAPS_INITIAL_STATE,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 

src/components/Map/MapViewer/utils/config/useOlMapTileLayer.test.ts

@@ -5,6 +5,7 @@ import { renderHook } from '@testing-library/react';
 import BaseLayer from 'ol/layer/Base';
 import TileLayer from 'ol/layer/Tile';
 import React from 'react';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { useOlMapTileLayer } from './useOlMapTileLayer';
 
 const useRefValue = {
@@ -58,6 +59,7 @@ describe('useOlMapTileLayer - util', () => {
           message: '',
         },
         openedMaps: OPENED_MAPS_INITIAL_STATE,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 

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

@@ -11,6 +11,7 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import { View } from 'ol';
 import Map from 'ol/Map';
 import React from 'react';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { useOlMap } from '../useOlMap';
 import { useOlMapView } from './useOlMapView';
 
@@ -95,6 +96,7 @@ describe('useOlMapView - util', () => {
           message: '',
         },
         openedMaps: OPENED_MAPS_INITIAL_STATE,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
       backgrounds: BACKGROUND_INITIAL_STATE_MOCK,
     });

src/components/Map/MapViewer/utils/listeners/useOlMapListeners.test.ts

@@ -3,6 +3,7 @@ import { renderHook } from '@testing-library/react';
 import { View } from 'ol';
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/map/map.fixtures';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import * as singleClickListener from './mapSingleClick/onMapSingleClick';
 import * as positionListener from './onMapPositionChange';
 import { useOlMapListeners } from './useOlMapListeners';
@@ -31,6 +32,7 @@ describe('useOlMapListeners - util', () => {
       loading: 'succeeded',
       error: { message: '', name: '' },
       openedMaps: openedMapsThreeSubmapsFixture,
+      backgroundType: MapBackgroundsEnum.SEMANTIC,
     },
   });
 

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/features.ts

@@ -6,6 +6,7 @@ export const FEATURE_TYPE = {
   PIN_ICON_COMMENT: 'PIN_ICON_COMMENT',
   ALIAS: 'ALIAS',
   REACTION: 'REACTION',
+  GLYPH: 'GLYPH',
 } as const;
 
 export const PIN_ICON_ANY = [

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,

src/redux/map/map.constants.ts

@@ -6,10 +6,16 @@ import {
   DEFAULT_TILE_SIZE,
 } from '@/constants/map';
 import { Point } from '@/types/map';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { MapData, MapState, OppenedMap } from './map.types';
 
 export const MAIN_MAP = 'Main map';
 
+export const MAP_BACKGROUND_TYPES = [
+  { id: MapBackgroundsEnum.NETWORK, name: 'Network' },
+  { id: MapBackgroundsEnum.SEMANTIC, name: 'Semantic' },
+];
+
 export const MODEL_ID_DEFAULT: number = 0;
 
 export const BACKGROUND_ID_DEFAULT: number = 0;
@@ -67,6 +73,7 @@ export const MAP_INITIAL_STATE: MapState = {
   loading: 'idle',
   error: { name: '', message: '' },
   openedMaps: OPENED_MAPS_INITIAL_STATE,
+  backgroundType: MapBackgroundsEnum.NETWORK,
 };
 
 export const INIT_MAP_SIZE_MODEL_ID_ERROR_PREFIX = 'Failed to initialize map size and model ID';

src/redux/map/map.enums.ts

+/* eslint-disable no-magic-numbers */
+enum MapBackgroundsEnum {
+  NETWORK = 1,
+  SEMANTIC = 2,
+}
+
+export default MapBackgroundsEnum;

src/redux/map/map.fixtures.ts

 import { DEFAULT_ERROR } from '@/constants/errors';
 import { MODEL_ID_DEFAULT } from '@/redux/map/map.constants';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { MapData, MapState, OppenedMap } from './map.types';
 
 export const openedMapsInitialValueFixture: OppenedMap[] = [
@@ -54,6 +55,7 @@ export const initialMapStateFixture: MapState = {
   loading: 'idle',
   error: DEFAULT_ERROR,
   openedMaps: openedMapsInitialValueFixture,
+  backgroundType: MapBackgroundsEnum.SEMANTIC,
 };
 
 export const mapStateWithCurrentlySelectedMainMapFixture: MapState = {
@@ -71,4 +73,5 @@ export const mapStateWithCurrentlySelectedMainMapFixture: MapState = {
   loading: 'idle',
   error: DEFAULT_ERROR,
   openedMaps: openedMapsInitialValueFixture,
+  backgroundType: MapBackgroundsEnum.SEMANTIC,
 };

src/redux/map/map.reducers.ts

 import { DEFAULT_ZOOM } from '@/constants/map';
 import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
-import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
-import { getPointMerged } from '../../utils/object/getPointMerged';
+import { ActionReducerMapBuilder, PayloadAction } from '@reduxjs/toolkit';
+import { getPointMerged } from '@/utils/object/getPointMerged';
 import {
   initMapBackground,
   initMapPosition,
@@ -221,3 +221,11 @@ export const initOpenedMapsReducer = (builder: ActionReducerMapBuilder<MapState>
     state.openedMaps = action.payload;
   });
 };
+
+export const setMapBackgroundTypeReducer = (
+  state: MapState,
+  action: PayloadAction<number>,
+): void => {
+  const { payload } = action;
+  state.backgroundType = payload;
+};

src/redux/map/map.selectors.ts

@@ -34,3 +34,5 @@ export const mapDataLastZoomValue = createSelector(
 );
 
 export const mapDataMaxZoomValue = createSelector(mapDataSizeSelector, model => model.maxZoom);
+
+export const mapBackgroundTypeSelector = createSelector(mapSelector, map => map.backgroundType);

src/redux/map/map.slice.ts

@@ -12,6 +12,7 @@ import {
   setActiveMapReducer,
   setLastPositionZoomReducer,
   setMapBackgroundReducer,
+  setMapBackgroundTypeReducer,
   setMapDataReducer,
   setMapPositionReducer,
   updateLastClickReducer,
@@ -35,6 +36,7 @@ const mapSlice = createSlice({
     setLastPositionZoom: setLastPositionZoomReducer,
     updateLastClick: updateLastClickReducer,
     updateLastRightClick: updateLastRightClickReducer,
+    setMapBackgroundType: setMapBackgroundTypeReducer,
   },
   extraReducers: builder => {
     initMapPositionReducers(builder);
@@ -57,6 +59,7 @@ export const {
   setLastPositionZoom,
   updateLastClick,
   updateLastRightClick,
+  setMapBackgroundType,
 } = mapSlice.actions;
 
 export default mapSlice.reducer;