fix feature animation and hover styles (#2440)

* fix feature animation and hover styles
maproulette · Sep 18, 2024 · 05c420a · 05c420a
1 parent cb0c41f
commit 05c420a
Show file tree

Hide file tree

Showing 4 changed files with 435 additions and 161 deletions.
diff --git a/src/components/EnhancedMap/TaskFeatureLayer/TaskFeatureLayer.js b/src/components/EnhancedMap/TaskFeatureLayer/TaskFeatureLayer.js
@@ -1,12 +1,14 @@
-import { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import { GeoJSON, useMap } from 'react-leaflet'
 import L from 'leaflet'
 import { injectIntl } from 'react-intl'
 import { featureCollection } from '@turf/helpers'
 import _isFunction from 'lodash/isFunction'
+import _get from 'lodash/get'
 import _uniqueId from 'lodash/uniqueId'
-import AsSimpleStyleableFeature from '../../../interactions/TaskFeature/AsSimpleStyleableFeature'
+import AsSimpleStyleableFeature
+       from '../../../interactions/TaskFeature/AsSimpleStyleableFeature'
 import PropertyList from '../PropertyList/PropertyList'
 import resolveConfig from 'tailwindcss/resolveConfig'
 import tailwindConfig from '../../../tailwind.config.js'
@@ -47,48 +49,94 @@ const TaskFeatureLayer = props => {
 
   const { features, mrLayerId, animator, externalInteractive } = props
   const layerLabel = props.intl.formatMessage(layerMessages.showTaskFeaturesLabel)
+  const pane = _get(props, 'leaflet.pane')
 
   useEffect(() => {
-    setLayer(
+    const newLayer = (
       <GeoJSON
         key={_uniqueId()}
         mrLayerId={mrLayerId}
         mrLayerLabel={layerLabel}
         data={featureCollection(features)}
         pointToLayer={(point, latLng) => {
-          return L.marker(latLng)
+          return L.marker(latLng, {mrLayerLabel: layerLabel, mrLayerId: mrLayerId})
         }}
         onEachFeature={(feature, layer) => {
-          const styleableFeature = _isFunction(feature.styleLeafletLayer) ? feature : AsSimpleStyleableFeature(feature)
-
-          if (!externalInteractive) {
-            layer.bindPopup(() => propertyList(feature.properties))
-          } else {
-            layer.on('click', ({ latlng }) => {
-              const popup = L.popup({
-                offset: [1, -20], 
-                maxHeight: 300, 
-              })
-                .setLatLng(latlng)
-                .setContent(propertyList(feature.properties))
+          const styleableFeature =
+            _isFunction(feature.styleLeafletLayer) ?
+            feature :
+            AsSimpleStyleableFeature(feature)
+
+          if (externalInteractive) {
+            layer.on('click', (e) => {
+              if (!layer._map) return; // Check if layer is still on the map
 
-              popup.openOn(map)
-            })
+              L.popup({}, layer)
+                .setLatLng(e.latlng)
+                .setContent(propertyList(feature.properties))
+                .openOn(map);
 
-            layer.on('mr-external-interaction:start-preview', () => {
               styleableFeature.pushLeafletLayerSimpleStyles(
                 layer,
-                Object.assign(styleableFeature.markerSimplestyles(layer), HIGHLIGHT_SIMPLESTYLE),
-                'mr-external-interaction:start-preview'
-              )
-            })
-
-            layer.on('mr-external-interaction:end-preview', () => {
-              styleableFeature.popLeafletLayerSimpleStyles(layer, 'mr-external-interaction:start-preview')
-            })
+                {
+                  ...styleableFeature.markerSimplestyles(layer),
+                  ...HIGHLIGHT_SIMPLESTYLE,
+                },
+                'mr-external-interaction:popup-open'
+              );
+
+              const previewHandler = () => {
+                if (layer._map) {
+                  styleableFeature.pushLeafletLayerSimpleStyles(
+                    layer,
+                    {
+                      ...styleableFeature.markerSimplestyles(layer),
+                      ...HIGHLIGHT_SIMPLESTYLE,
+                    },
+                    'mr-external-interaction:popup-open'
+                  )
+                }
+              };
+
+              layer.on('mr-external-interaction:start-preview', previewHandler);
+
+              const popupCloseHandler = () => {
+                if (layer._map) {
+                  styleableFeature.popLeafletLayerSimpleStyles(layer, 'mr-external-interaction:popup-open');
+                  styleableFeature.popLeafletLayerSimpleStyles(layer, 'mr-external-interaction:start-preview');
+                }
+                map.off('popupclose', popupCloseHandler);
+                layer.off('mr-external-interaction:start-preview', previewHandler);
+              };
+
+              map.on('popupclose', popupCloseHandler);
+            });
+
+            if(feature.geometry.type !== 'Point' && feature.geometry.type !== 'GeometryCollection'){
+              layer.on('mouseover', () => {
+                if (!layer._map) return; // Check if layer is still on the map
+
+                styleableFeature.pushLeafletLayerSimpleStyles(
+                  layer,
+                  {
+                    ...styleableFeature.markerSimplestyles(layer),
+                    ...HIGHLIGHT_SIMPLESTYLE,
+                  },
+                  'mr-external-interaction:start-preview'
+                )
+
+                const mouseoutHandler = () => {
+                  if (layer._map) {
+                    styleableFeature.popLeafletLayerSimpleStyles(layer, 'mr-external-interaction:start-preview')
+                  }
+                  layer.off('mouseout', mouseoutHandler);
+                };
+
+                layer.on('mouseout', mouseoutHandler);
+              });
+            }
           }
 
-          // Animate features when added to map (if requested)
           if (animator) {
             const oldOnAdd = layer.onAdd
             layer.onAdd = map => {
@@ -101,7 +149,9 @@ const TaskFeatureLayer = props => {
         }}
       />
     )
-  }, [features.length])
+
+    setLayer(newLayer)
+  }, [features, mrLayerId, pane, animator, externalInteractive, layerLabel, map])
 
   return layer
 }

diff --git a/src/components/TaskPane/TaskMap/Messages.js b/src/components/TaskPane/TaskMap/Messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl'
+
+/**
+ * Internationalized messages for use with EnhancedMap
+ */
+export default defineMessages({
+  layerSelectionHeader: {
+    id: "Map.layerSelectionList.header",
+    defaultMessage: "Select Desired Feature"
+  },
+})