From a6baa7a043d09c9a18b1bce5d376c984d10f9b7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Thu, 28 Nov 2024 12:03:54 +0100
Subject: [PATCH] fix(vector-map): add hiding context menu after clicking on
the map
---
.../mouseLeftClick/onMapLeftClick.ts | 79 ++++++++++++-------
.../mouseRightClick/onMapRightClick.ts | 4 +-
2 files changed, 54 insertions(+), 29 deletions(-)
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 d426caaa..62ad872d 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
@@ -16,32 +16,65 @@ import { handleDataReset } from '@/components/Map/MapViewer/utils/listeners/mapS
import { FEATURE_TYPE } from '@/constants/features';
import { clickHandleReaction } from '@/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/clickHandleReaction';
+function isFeatureFilledCompartment(feature: FeatureLike): boolean {
+ return feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled');
+}
+
+function isFeatureNotCompartment(feature: FeatureLike): boolean {
+ return (
+ [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) &&
+ feature.get('type') !== FEATURE_TYPE.COMPARTMENT
+ );
+}
+
/* prettier-ignore */
export const onMapLeftClick =
- (mapSize: MapSize, modelId: number, dispatch: AppDispatch, isResultDrawerOpen: boolean, comments: Comment[], modelElements: Array<ModelElement>, reactions: Array<NewReaction>) =>
- async ({ coordinate, pixel }: Pick<MapBrowserEvent<UIEvent>, 'coordinate' | 'pixel'>, mapInstance: Map): Promise<void> => {
+ (
+ mapSize: MapSize,
+ modelId: number,
+ dispatch: AppDispatch,
+ isResultDrawerOpen: boolean,
+ comments: Comment[],
+ modelElements: Array<ModelElement>,
+ reactions: Array<NewReaction>,
+ ) =>
+ async (
+ { coordinate, pixel }: Pick<MapBrowserEvent<UIEvent>, 'coordinate' | 'pixel'>,
+ mapInstance: Map,
+ ): Promise<void> => {
const [lng, lat] = toLonLat(coordinate);
const point = latLngToPoint([lat, lng], mapSize);
dispatch(updateLastClick({ coordinates: point, modelId }));
let featureAtPixel: FeatureLike | undefined;
- mapInstance.forEachFeatureAtPixel(pixel, (feature, ) => {
- if(
- feature.get('id') &&
- (
- feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled') ||
- [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('type') !== FEATURE_TYPE.COMPARTMENT
- )
- && feature.get('zIndex') >= 0
- && !feature.get('hidden')
- ) {
- featureAtPixel = feature;
- return true;
+ mapInstance.forEachFeatureAtPixel(
+ pixel,
+ feature => {
+ const featureZIndex = feature.get('zIndex');
+ if (
+ (isFeatureFilledCompartment(feature) || isFeatureNotCompartment(feature)) &&
+ (featureZIndex === undefined || featureZIndex >= 0) &&
+ !feature.get('hidden')
+ ) {
+ featureAtPixel = feature;
+ return true;
+ }
+ return false;
+ },
+ { hitTolerance: 10 },
+ );
+
+ if (featureAtPixel) {
+ const { shouldBlockCoordSearch } = handleFeaturesClick([featureAtPixel], dispatch, comments);
+ if (shouldBlockCoordSearch) {
+ return;
}
- return false;
- }, {hitTolerance: 10});
- if(!featureAtPixel) {
+ }
+
+ dispatch(handleDataReset);
+
+ if (!featureAtPixel) {
if (isResultDrawerOpen) {
dispatch(closeDrawer());
}
@@ -51,19 +84,11 @@ export const onMapLeftClick =
return;
}
- const { shouldBlockCoordSearch } = handleFeaturesClick([featureAtPixel], dispatch, comments);
-
- if (shouldBlockCoordSearch) {
- return;
- }
-
- dispatch(handleDataReset);
-
const type = featureAtPixel.get('type');
const id = featureAtPixel.get('id');
- if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
+ if ([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
await leftClickHandleAlias(dispatch)(featureAtPixel, modelId);
} else if (type === FEATURE_TYPE.REACTION) {
- clickHandleReaction(dispatch)(modelElements, reactions, id, modelId);
+ clickHandleReaction(dispatch)(modelElements, reactions, id, modelId);
}
};
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 5a6429c6..2822685f 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
@@ -23,6 +23,8 @@ export const onMapRightClick =
const [lng, lat] = toLonLat(coordinate);
const point = latLngToPoint([lat, lng], mapSize);
dispatch(updateLastRightClick({ coordinates: point, modelId }));
+ dispatch(handleDataReset);
+ dispatch(openContextMenu(pixel));
let foundFeature: Feature | undefined;
mapInstance.getAllLayers().forEach(layer => {
@@ -47,8 +49,6 @@ export const onMapRightClick =
if(!foundFeature) {
return;
}
- dispatch(handleDataReset);
- dispatch(openContextMenu(pixel));
const type = foundFeature.get('type');
const id = foundFeature.get('id');
--
GitLab