From ea44057cfefe9231a706ec13b2a165dc06bdfe8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Fri, 22 Nov 2024 12:14:29 +0100
Subject: [PATCH] feat(vector-map): skip handle click on elements with negative
zIndex
---
.../mouseClick/mouseLeftClick/onMapLeftClick.test.ts | 10 +++++++---
.../mouseClick/mouseLeftClick/onMapLeftClick.ts | 4 ++--
.../mouseClick/mouseRightClick/onMapRightClick.ts | 7 ++++++-
.../utils/shapes/elements/BaseMultiPolygon.ts | 1 +
.../MapViewerVector/utils/shapes/elements/Glyph.ts | 1 +
.../utils/shapes/elements/getArrowFeature.ts | 1 +
.../MapViewerVector/utils/shapes/reaction/Reaction.ts | 3 +++
7 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.test.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.test.ts
index 212465ce..fb720a27 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.test.ts
+++ b/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);
});
diff --git a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
index d5fca4ab..be79fe07 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
@@ -1,3 +1,4 @@
+/* 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());
diff --git a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
index d781719b..38a214a5 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
@@ -1,3 +1,4 @@
+/* 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;
});
}
}
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
index 5997a743..135bd839 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
+++ b/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));
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
index ede963f1..60318446 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
+++ b/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;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature.ts
index 97168e2d..02e0ab19 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature.ts
+++ b/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;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
index f8140764..a3878b53 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
+++ b/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;
--
GitLab