[CAM-954] enhance context menu with feature deselection and selection logic

frontend/src/components/ContextMenu.vue

@@ -12,7 +12,7 @@
       </div>
       <v-list density="compact">
         <v-list-item
-          v-if="multiReachMode"
+          v-if="multiReachMode && !isFeatureSelected"
           :disabled="!canAddMoreFeatures"
           @click="$emit('select-additional-feature')"
         >
@@ -23,10 +23,13 @@
             Select Additional Feature
           </v-list-item-title>
         </v-list-item>
+        <v-list-item v-if="isFeatureSelected && multiReachMode" @click="$emit('deselect-feature')">
+          <v-list-item-title>Deselect Feature</v-list-item-title>
+        </v-list-item>
         <v-list-item @click="$emit('zoom-to-feature')">
           <v-list-item-title>Zoom to Feature</v-list-item-title>
         </v-list-item>
-        <v-list-item @click="$emit('select-feature')">
+        <v-list-item v-if="!isFeatureSelected" @click="$emit('select-feature')">
           <v-list-item-title>Select Feature</v-list-item-title>
         </v-list-item>
         <v-list-item @click="$emit('show-feature-info')">
@@ -43,13 +46,18 @@ defineProps({
   context: {
     type: Object,
     required: true
+  },
+  isFeatureSelected: {
+    type: Boolean,
+    default: false
   }
 })
 
 defineEmits([
   'close',
   'zoom-to-feature',
   'select-feature',
+  'deselect-feature',
   'select-additional-feature',
   'show-feature-info',
   'dismiss'

frontend/src/components/TheLeafletMap.vue

@@ -7,9 +7,11 @@
   <ContextMenu
     v-if="contextMenu.show"
     :context="contextMenu"
+    :is-feature-selected="isContextMenuFeatureSelected"
     @close="contextMenu.show = false"
     @zoom-to-feature="contextZoomToFeature"
     @select-feature="contextSelectFeature"
+    @deselect-feature="contextDeselectFeature"
     @select-additional-feature="contextSelectAdditionalFeature"
     @show-feature-info="contextShowFeatureInfo"
     @dismiss="dismissContextMenu"
@@ -23,7 +25,7 @@ import L from 'leaflet'
 import * as esriLeaflet from 'esri-leaflet'
 import * as esriLeafletGeocoder from 'esri-leaflet-geocoder'
 import 'leaflet-easybutton/src/easy-button'
-import { onMounted, ref, watch, nextTick, onUnmounted } from 'vue'
+import { onMounted, ref, watch, nextTick, onUnmounted, computed } from 'vue'
 import {
   mapObject,
   control,
@@ -63,6 +65,26 @@ const { multiReachMode } = storeToRefs(featureStore)
 const ACCESS_TOKEN =
   'AAPK7e5916c7ccc04c6aa3a1d0f0d85f8c3brwA96qnn6jQdX3MT1dt_4x1VNVoN8ogd38G2LGBLLYaXk7cZ3YzE_lcY-evhoeGX'
 
+const isContextMenuFeatureSelected = computed(() => {
+  if (!contextMenu.value.feature) return false
+
+  const featureStore = useFeaturesStore()
+  const { selectedFeatures } = storeToRefs(featureStore)
+
+  return selectedFeatures.value.some(
+    (feature) => feature.properties.COMID === contextMenu.value.feature.properties.COMID
+  )
+})
+
+// Add new context menu handler for deselection
+function contextDeselectFeature() {
+  if (contextMenu.value.feature) {
+    featureStore.deselectFeature(contextMenu.value.feature)
+  }
+  contextMenu.value.show = false
+  contextMenuFeatureLatLng.value = null
+}
+
 // Keyboard event handlers
 const handleKeyDown = (event) => {
   if ((event.ctrlKey || event.metaKey) && multiReachMode) {

frontend/src/helpers/map.js

@@ -522,7 +522,7 @@ const showHoverPopup = (feature, latlng, closeable = false) => {
 
 function createFlowlinesFeatureLayer(region) {
   const featureStore = useFeaturesStore()
-  const { multiReachMode } = storeToRefs(featureStore)
+  const { multiReachMode, selectedFeatures } = storeToRefs(featureStore)
   let url = `https://arcgis.cuahsi.org/arcgis/rest/services/CIROH-ComRes/${region.name}/FeatureServer/${region.flowlinesLayerNumber}`
   const featureLayer = esriLeaflet.featureLayer({
     url: url,
@@ -579,11 +579,27 @@ function createFlowlinesFeatureLayer(region) {
   featureLayer.on('click', function (e) {
     const feature = e.layer.feature
     console.log('Feature clicked:', feature)
+
     const isCtrlOrCmdClick = e.originalEvent.ctrlKey || e.originalEvent.metaKey
-    if (isCtrlOrCmdClick && multiReachMode.value) {
-      console.log('Multi-select enabled via Ctrl/Cmd key.')
-      featureStore.mergeFeature(feature)
+
+    // Check if feature is already selected
+    const isAlreadySelected = selectedFeatures.value.some(
+      (selected) => selected.properties.COMID === feature.properties.COMID
+    )
+
+    if (multiReachMode.value && isCtrlOrCmdClick) {
+      console.log('Multi-select mode with Ctrl/Cmd key.')
+      if (isAlreadySelected) {
+        // Deselect the feature if already selected
+        console.log('Deselecting feature in multi-reach mode')
+        featureStore.deselectFeature(feature)
+      } else {
+        // Select additional feature
+        console.log('Selecting additional feature in multi-reach mode')
+        featureStore.mergeFeature(feature)
+      }
     } else {
+      // Normal selection behavior (replace current selection)
       featureStore.selectFeature(feature)
     }
   })