DBC22-867: fixed and cleaned up click and hover logic for icons

bcgov · Nov 1, 2023 · bc9d44f · bc9d44f
1 parent a25e9ce
commit bc9d44f
Showing 1 changed file with 82 additions and 61 deletions.
diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
@@ -339,6 +339,23 @@ export default function MapWrapper({
       dispatch(updateMapState({pan: toLonLat(mapView.current.getCenter()), zoom: mapView.current.getZoom()}))
     });
 
+    // Click states
+    const resetClickedStates = (clickedFeature) => {
+      if (clickedCamera.current && clickedFeature != clickedCamera.current) {
+        clickedCamera.current.setStyle(cameraStyles['static']);
+        clickedCamera.current = null;
+      }
+
+      if (clickedEvent.current && clickedFeature != clickedEvent.current) {
+        clickedEvent.current.setStyle(
+          getEventIcon(clickedEvent.current, 'static'),
+        );
+
+        setRelatedGeometry(clickedEvent.current, 'static');
+        clickedEvent.current = null;
+      }
+    }
+
     mapRef.current.on('click', async (e) => {
       setIconClicked(false);
 
@@ -360,20 +377,13 @@ export default function MapWrapper({
 
         } else {
           setIconClicked(true);
-          // reset previous clicked feature
-          if (clickedCamera.current) {
-            clickedCamera.current.setStyle(cameraStyles['static']);
 
-          } else if (clickedEvent.current) {
-            clickedEvent.current.setStyle(
-              getEventIcon(clickedEvent.current, 'static'),
-            );
-            setRelatedGeometry(clickedEvent.current, 'static');
-            clickedEvent.current = null;
-          }
+          const feature = camFeatures[0];
+
+          resetClickedStates(feature);
 
           // set new clicked camera feature
-          clickedCamera.current = camFeatures[0];
+          clickedCamera.current = feature;
           clickedCamera.current.setStyle(cameraStyles['active']);
           clickedCamera.current.setProperties({ clicked: true }, true);
 
@@ -393,18 +403,10 @@ export default function MapWrapper({
           const feature = eventFeatures[0];
 
           // reset previous clicked feature
-          if (clickedCamera.current) {
-            clickedCamera.current.setStyle(cameraStyles['static']);
-            clickedCamera.current = null;
-          } else if (clickedEvent.current) {
-            clickedEvent.current.setStyle(
-              getEventIcon(clickedEvent.current, 'static'),
-            );
-            setRelatedGeometry(clickedEvent.current, 'static');
-          }
+          resetClickedStates(feature);
 
           // set new clicked event feature
-          clickedEvent.current = eventFeatures[0];
+          clickedEvent.current = feature;
           clickedEvent.current.setStyle(
             getEventIcon(clickedEvent.current, 'active'),
           );
@@ -428,50 +430,69 @@ export default function MapWrapper({
       }
     });
 
-    mapRef.current.on('pointermove', e => {
+    // Hover states
+    const resetHoveredStates = (hoveredFeature) => {
+      if (hoveredCamera.current && hoveredFeature != hoveredCamera.current) {
+        if (!hoveredCamera.current.getProperties().clicked) {
+          hoveredCamera.current.setStyle(cameraStyles['static']);
+        }
+
+        hoveredCamera.current = null;
+      }
+
+      if (hoveredEvent.current && hoveredFeature != hoveredEvent.current) {
+        if (!hoveredEvent.current.getProperties().clicked) {
+          hoveredEvent.current.setStyle(
+            getEventIcon(hoveredEvent.current, 'static'),
+          );
+          setRelatedGeometry(hoveredEvent.current, 'static');
+        }
+        hoveredEvent.current = null;
+      }
+    }
+
+    mapRef.current.on('pointermove', async (e) => {
+      let camHit = false;
       if (layers.current && 'webcamsLayer' in layers.current) {
         // check if it was a camera icon that was hovered on
-        layers.current['webcamsLayer']
-          .getFeatures(e.pixel)
-          .then(hoveredFeatures => {
-            if (hoveredFeatures[0]) {
-              hoveredCamera.current = hoveredFeatures[0];
-              if (!hoveredCamera.current.getProperties().clicked) {
-                hoveredCamera.current.setStyle(cameraStyles['hover']);
-              }
-            } else if (hoveredCamera.current) {
-              if (!hoveredCamera.current.getProperties().clicked) {
-                hoveredCamera.current.setStyle(cameraStyles['static']);
-              }
-
-              hoveredCamera.current = null;
-            }
-          });
+        const hoveredCameras = await layers.current['webcamsLayer'].getFeatures(e.pixel);
+        if (hoveredCameras.length) {
+          camHit = true;
+
+          const feature = hoveredCameras[0];
+
+          resetHoveredStates(feature);
+
+          hoveredCamera.current = feature;
+          if (!hoveredCamera.current.getProperties().clicked) {
+            hoveredCamera.current.setStyle(cameraStyles['hover']);
+          }
+        }
+      }
+
+      // if it wasn't a camera icon, check if it was an event
+      let eventHit = false;
+      if (layers.current && 'eventsLayer' in layers.current && !camHit) {
+        const hoveredEvents = await layers.current['eventsLayer'].getFeatures(e.pixel);
+        if (hoveredEvents.length) {
+          eventHit = true;
+
+          const feature = hoveredEvents[0];
+
+          resetHoveredStates(feature);
+
+          hoveredEvent.current = feature;
+          if (!hoveredEvent.current.getProperties().clicked) {
+            hoveredEvent.current.setStyle(
+              getEventIcon(hoveredEvent.current, 'hover'),
+            );
+            setRelatedGeometry(hoveredEvent.current, 'hover');
+          }
+        }
       }
 
-      if (layers.current && 'eventsLayer' in layers.current) {
-        // if it wasn't a camera icon, check if it was an event
-        layers.current['eventsLayer']
-          .getFeatures(e.pixel)
-          .then(hoveredFeatures => {
-            if (hoveredFeatures[0]) {
-              hoveredEvent.current = hoveredFeatures[0];
-              if (!hoveredEvent.current.getProperties().clicked) {
-                hoveredEvent.current.setStyle(
-                  getEventIcon(hoveredEvent.current, 'hover'),
-                );
-                setRelatedGeometry(hoveredEvent.current, 'hover');
-              }
-            } else if (hoveredEvent.current) {
-              if (!hoveredEvent.current.getProperties().clicked) {
-                hoveredEvent.current.setStyle(
-                  getEventIcon(hoveredEvent.current, 'static'),
-                );
-                setRelatedGeometry(hoveredEvent.current, 'static');
-              }
-              hoveredEvent.current = null;
-            }
-          });
+      if (!camHit && !eventHit) {
+        resetHoveredStates(null);
       }
     });
   }, []);