some architectural bugfixes:

- move setRadius from composable useEdit to service to prevent creation of multiple listeners (useEdit, must remain singleton)
- fix selection, deselection of features between edit modes

src/components/draw/feature-item.vue

@@ -44,7 +44,7 @@ function onToggleEditFeature() {
 }
 
 function onClickDelete() {
-  emit('clickDelete', props.feature.id)
+  emit('clickDelete', getUid(props.feature))
 }
 
 function onResetInfo(prevLabel: string, prevDescription: string) {

src/components/draw/feature-measurements.vue

@@ -18,14 +18,17 @@ import {
   getDebouncedElevation,
   getElevation,
 } from './feature-measurements-helper'
-import useEdit from '@/composables/draw/edit.composable'
+import { useDrawStore } from '@/stores/draw.store'
+import { setRadius } from '@/services/draw/draw.helper'
 
 defineProps<{
   isEditingFeature?: boolean
 }>()
 
 const { t } = useTranslation()
-const mapProjection: Projection = useMap().getOlMap().getView().getProjection()
+const drawStore = useDrawStore()
+const map = useMap().getOlMap()
+const mapProjection: Projection = map.getView().getProjection()
 
 const feature = ref<DrawnFeature | undefined>(inject('feature'))
 const featureType = ref<string>(feature.value?.featureType || '')
@@ -87,7 +90,8 @@ watchEffect(() => {
 
 function onClickValidateRadius(radius: number) {
   if (feature.value) {
-    useEdit().setRadius(feature.value as DrawnFeature, Number(radius))
+    /* useEdit().setRadius(feature.value as DrawnFeature, Number(radius))*/
+    setRadius(feature.value as DrawnFeature, Number(radius), map, drawStore)
   }
 }
 </script>

src/composables/draw/draw-interaction.composable.ts

@@ -20,6 +20,7 @@ export default function useDrawInteraction(options: Options) {
   function onDrawEnd(event: DrawEvent) {
     drawTooltip.remove()
     addFeature(event.feature)
+    event.stopPropagation()
   }
 
   return {

src/composables/draw/draw-select.composable.ts

@@ -11,14 +11,20 @@ import { useAppStore } from '@/stores/app.store'
 export default function useDrawSelect() {
   const map = useMap().getOlMap()
   const appStore = useAppStore()
-  const { activeFeatureId, editingFeatureId, drawnFeatures } = storeToRefs(
-    useDrawStore()
-  )
+  const {
+    drawStateActive,
+    editStateActive,
+    activeFeatureId,
+    editingFeatureId,
+    drawnFeatures,
+  } = storeToRefs(useDrawStore())
 
   listen(map, 'click', event => handleClick(event))
 
   watch(activeFeatureId, (newId, oldId) => {
-    editingFeatureId.value = undefined
+    if (editingFeatureId.value !== newId) {
+      editingFeatureId.value = undefined
+    }
     drawnFeatures.value
       .filter(f => getUid(f) == oldId)
       .forEach(oldFeature => {
@@ -37,25 +43,31 @@ export default function useDrawSelect() {
   const handleClick = function (event: any) {
     const pixel = event.pixel
 
+    if (
+      drawStateActive.value !== undefined ||
+      editStateActive.value !== undefined
+    ) {
+      return true
+    }
     activeFeatureId.value = undefined
-    const feature = map.forEachFeatureAtPixel(
+    const featureFound = map.forEachFeatureAtPixel(
       pixel,
       feature => {
         const featureMatch = olArray.includes(drawnFeatures.value, feature)
         if (featureMatch) {
           appStore.toggleMyMapsOpen(true)
           activeFeatureId.value = getUid(feature)
 
-          return
+          return true
         }
       },
       {
         hitTolerance: 5,
       }
     )
 
-    if (feature) {
-      return
+    if (featureFound) {
+      return false
     }
   }
 }

src/composables/draw/edit.composable.ts

@@ -11,8 +11,6 @@ import { useDrawStore } from '@/stores/draw.store'
 import useMap from '../map/map.composable'
 import { EditStateActive } from '@/stores/draw.store.model'
 
-import { Circle } from 'ol/geom'
-import { setCircleRadius } from '@/services/common/measurement.utils'
 const DEFAULT_DRAW_EDIT_ZINDEX = 1001
 const FEATURE_EDIT_LAYER_TYPE = 'featureEditLayer'
 
@@ -46,9 +44,11 @@ export default function useEdit() {
   watch(editingFeatureId, editingFeatureId => {
     if (!editingFeatureId) {
       setEditActiveState(undefined)
-      editSource.getFeatures().forEach(feature => {
-        ;(feature as DrawnFeature).editable = false
-        feature.changed()
+      drawnFeatures.value.forEach(feature => {
+        if ((feature as DrawnFeature).editable) {
+          ;(feature as DrawnFeature).editable = false
+          feature.changed()
+        }
       })
     }
     editSource.clear()
@@ -86,15 +86,5 @@ export default function useEdit() {
     })
   }
 
-  function setRadius(feature: DrawnFeature, radius: number) {
-    const geometry = feature.getGeometry()
-    if (geometry?.getType() === 'Circle') {
-      setCircleRadius(geometry as Circle, radius, map)
-      updateDrawnFeature(feature)
-    }
-  }
-
-  return {
-    setRadius,
-  }
+  return {}
 }

src/services/draw/draw.helper.ts

@@ -1,3 +1,8 @@
+import { setCircleRadius } from '@/services/common/measurement.utils'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { Circle } from 'ol/geom'
+import { Map } from 'ol'
+
 export const SYMBOLS_URL = import.meta.env.VITE_SYMBOLS_URL
 export const SYMBOL_ICONS_URL = import.meta.env.VITE_SYMBOL_ICONS_URL
 
@@ -14,3 +19,16 @@ export async function getPublicSymbols(mySymbolsOnly = false) {
   const json = await response.json()
   return json.results
 }
+
+export function setRadius(
+  feature: DrawnFeature,
+  radius: number,
+  map: Map,
+  store: any
+) {
+  const geometry = feature.getGeometry()
+  if (geometry?.getType() === 'Circle') {
+    setCircleRadius(geometry as Circle, radius, map)
+    store.updateDrawnFeature(feature)
+  }
+}

src/stores/draw.store.ts

@@ -72,11 +72,14 @@ export const useDrawStore = defineStore('draw', () => {
     drawnFeatures.value = features
   }
 
-  function removeFeature(featureId: number) {
+  function removeFeature(featureId: String | undefined) {
     drawnFeatures.value = drawnFeatures.value.filter(
-      feature => feature.id !== featureId
+      feature => getUid(feature) !== featureId
     )
-    editingFeatureId.value = undefined
+    if (activeFeatureId.value === featureId) {
+      activeFeatureId.value = undefined
+      editingFeatureId.value = undefined
+    }
   }
 
   return {