feat(vector-map): skip handle click on elements with negative zIndex

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.test.ts

@@ -51,7 +51,11 @@ describe('onMapLeftClick', () => {
   it('dispatches updateLastClick and resets data if no feature at pixel', async () => {
     const dispatch = jest.fn();
     jest.spyOn(mapInstance, 'forEachFeatureAtPixel').mockImplementation((_, callback) => {
-      callback(new Feature({}), null as unknown as Layer, null as unknown as SimpleGeometry);
+      callback(
+        new Feature({ zIndex: 1 }),
+        null as unknown as Layer,
+        null as unknown as SimpleGeometry,
+      );
     });
     await onMapLeftClick(
       mapSize,
@@ -74,7 +78,7 @@ describe('onMapLeftClick', () => {
     const dispatch = jest.fn(() => ({
       unwrap: jest.fn().mockResolvedValue(mockBioEntities),
     }));
-    const feature = new Feature({ id: 1, type: FEATURE_TYPE.ALIAS });
+    const feature = new Feature({ id: 1, type: FEATURE_TYPE.ALIAS, zIndex: 1 });
     jest.spyOn(mapInstance, 'forEachFeatureAtPixel').mockImplementation((_, callback) => {
       callback(feature, null as unknown as Layer, null as unknown as SimpleGeometry);
     });
@@ -98,7 +102,7 @@ describe('onMapLeftClick', () => {
     const dispatch = jest.fn(() => ({
       unwrap: jest.fn().mockResolvedValue(mockBioEntities),
     }));
-    const feature = new Feature({ id: 1, type: FEATURE_TYPE.REACTION });
+    const feature = new Feature({ id: 1, type: FEATURE_TYPE.REACTION, zIndex: 1 });
     jest.spyOn(mapInstance, 'forEachFeatureAtPixel').mockImplementation((_, callback) => {
       callback(feature, null as unknown as Layer, null as unknown as SimpleGeometry);
     });

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts

+/* eslint-disable no-magic-numbers */
 import { MapSize } from '@/redux/map/map.types';
 import { AppDispatch } from '@/redux/store';
 import { Map, MapBrowserEvent } from 'ol';
@@ -26,13 +27,12 @@ export const onMapLeftClick =
 
       let featureAtPixel: FeatureLike | undefined;
       mapInstance.forEachFeatureAtPixel(pixel, (feature, ) => {
-        if(feature.get('id') && [...Object.values(FEATURE_TYPE)].includes(feature.get('type'))) {
+        if(feature.get('id') && [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('zIndex') >= 0) {
           featureAtPixel = feature;
           return true;
         }
         return false;
       }, {hitTolerance: 10});
-
       if(!featureAtPixel) {
         if (isResultDrawerOpen) {
           dispatch(closeDrawer());

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts

+/* eslint-disable no-magic-numbers */
 import { MapSize } from '@/redux/map/map.types';
 import { AppDispatch } from '@/redux/store';
 import { Feature, Map, MapBrowserEvent } from 'ol';
@@ -30,7 +31,11 @@ export const onMapRightClick =
             const source = layer.getSource();
             if (source instanceof VectorSource) {
               foundFeature = source.getClosestFeatureToCoordinate(coordinate, (feature) => {
-                return [FEATURE_TYPE.ALIAS, FEATURE_TYPE.REACTION, FEATURE_TYPE.GLYPH].includes(feature.get('type'));
+                return [
+                  FEATURE_TYPE.ALIAS,
+                  FEATURE_TYPE.REACTION,
+                  FEATURE_TYPE.GLYPH
+                ].includes(feature.get('type')) && feature.get('zIndex') >= 0;
               });
             }
           }

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

@@ -178,6 +178,7 @@ export default abstract class BaseMultiPolygon {
       },
       id: this.id,
       type: this.type,
+      zIndex: this.zIndex,
     });
 
     this.feature.setStyle(this.getStyle.bind(this));

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

@@ -92,6 +92,7 @@ export default class Glyph {
       geometry: polygon,
       id: elementId,
       type: FEATURE_TYPE.GLYPH,
+      zIndex,
       getImageScale: (resolution: number): number => {
         if (mapInstance) {
           return mapInstance.getView().getMinResolution() / resolution;

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

@@ -60,6 +60,7 @@ export default function getArrowFeature({
   const arrowFeature = new Feature({
     geometry: new MultiPolygon(arrowPolygons),
     style: arrowStyles,
+    zIndex,
   });
   arrowFeature.setStyle(arrowStyles);
   return arrowFeature;

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

@@ -213,6 +213,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 +263,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,6 +320,7 @@ 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;