From c22608942c726f7b1c1c76281bdea35eeb37e262 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 6 Sep 2024 10:41:02 +0200
Subject: [PATCH 01/15] fix(draw): deactivate draw interactions when toolbar is
 closed

---
 src/components/footer/footer-bar.vue   | 3 +++
 src/components/footer/toolbar-draw.vue | 8 +++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/footer/footer-bar.vue b/src/components/footer/footer-bar.vue
index 1387cedd..72d8d1e1 100644
--- a/src/components/footer/footer-bar.vue
+++ b/src/components/footer/footer-bar.vue
@@ -6,6 +6,7 @@ import ButtonLink from './button-link.vue'
 import ToolbarDraw from './toolbar-draw.vue'
 import { useTranslation } from 'i18next-vue'
 import { useAppStore } from '@/stores/app.store'
+import useDraw from '@/composables/draw/draw.composable'
 
 const { t, i18next } = useTranslation()
 const appStore = useAppStore()
@@ -29,6 +30,8 @@ function onClickLayersIcon() {
 
   themeGridOpen.value = false
 }
+//init draw interactions in parent of toolbar-draw to allow deactivation when toolbar is closed
+useDraw()
 </script>
 <template>
   <footer
diff --git a/src/components/footer/toolbar-draw.vue b/src/components/footer/toolbar-draw.vue
index 942c3066..5b4dd3fc 100644
--- a/src/components/footer/toolbar-draw.vue
+++ b/src/components/footer/toolbar-draw.vue
@@ -2,17 +2,19 @@
 import { useTranslation } from 'i18next-vue'
 import { storeToRefs } from 'pinia'
 
-import useDraw from '@/composables/draw/draw.composable'
 import { useDrawStore } from '@/stores/draw.store'
 
 import ButtonText from './button-text.vue'
+import { onBeforeUnmount } from 'vue'
 
 const { t } = useTranslation()
 const drawStore = useDrawStore()
 const { toggleActiveState } = drawStore
 const { drawStateActive } = storeToRefs(drawStore)
-// keep logic in composable
-useDraw()
+
+onBeforeUnmount(() => {
+  toggleActiveState(undefined)
+})
 </script>
 <template>
   <div data-cy="toolbarDraw">

From d4e2efc5d40156ebc9bf721ac476a11a50390aa4 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Wed, 11 Sep 2024 12:44:58 +0200
Subject: [PATCH 02/15] feat(draw): add ol modify interaction and handle edit
 states

---
 src/components/draw/feature-item.vue    |  2 -
 src/components/footer/toolbar-draw.vue  | 27 +++++++---
 src/composables/draw/draw.composable.ts | 65 ++++++++++++++++++++++++-
 src/stores/draw.store.model.ts          |  5 ++
 src/stores/draw.store.ts                | 31 +++++++++++-
 5 files changed, 117 insertions(+), 13 deletions(-)

diff --git a/src/components/draw/feature-item.vue b/src/components/draw/feature-item.vue
index 00bca3a9..00966781 100644
--- a/src/components/draw/feature-item.vue
+++ b/src/components/draw/feature-item.vue
@@ -32,8 +32,6 @@ function onToggleFeatureSub() {
 
 function onToggleEditFeature() {
   emit('toggleFeatureEdit', getUid(props.feature), !props.isEditing)
-
-  alert('TODO: Toggle edition mode')
 }
 
 function onClickDelete() {
diff --git a/src/components/footer/toolbar-draw.vue b/src/components/footer/toolbar-draw.vue
index 5b4dd3fc..c7faade6 100644
--- a/src/components/footer/toolbar-draw.vue
+++ b/src/components/footer/toolbar-draw.vue
@@ -9,11 +9,11 @@ import { onBeforeUnmount } from 'vue'
 
 const { t } = useTranslation()
 const drawStore = useDrawStore()
-const { toggleActiveState } = drawStore
+const { toggleActiveState, setActiveState } = drawStore
 const { drawStateActive } = storeToRefs(drawStore)
 
 onBeforeUnmount(() => {
-  toggleActiveState(undefined)
+  setActiveState(undefined)
 })
 </script>
 <template>
@@ -24,7 +24,9 @@ onBeforeUnmount(() => {
       <li>
         <button-text
           :label="t('Draw Point', { ns: 'client' })"
-          :active="drawStateActive === 'drawPoint'"
+          :active="
+            drawStateActive === 'drawPoint' || drawStateActive === 'editPoint'
+          "
           @click="() => toggleActiveState('drawPoint')"
           data-cy="drawPointButton"
         >
@@ -33,7 +35,9 @@ onBeforeUnmount(() => {
       <li>
         <button-text
           :label="t('Label', { ns: 'client' })"
-          :active="drawStateActive === 'drawLabel'"
+          :active="
+            drawStateActive === 'drawLabel' || drawStateActive === 'editLabel'
+          "
           @click="() => toggleActiveState('drawLabel')"
           data-cy="drawLabelButton"
         >
@@ -42,7 +46,9 @@ onBeforeUnmount(() => {
       <li>
         <button-text
           :label="t('Line', { ns: 'client' })"
-          :active="drawStateActive === 'drawLine'"
+          :active="
+            drawStateActive === 'drawLine' || drawStateActive === 'editLine'
+          "
           @click="() => toggleActiveState('drawLine')"
           data-cy="drawLineButton"
         >
@@ -51,7 +57,10 @@ onBeforeUnmount(() => {
       <li>
         <button-text
           :label="t('Polygon', { ns: 'client' })"
-          :active="drawStateActive === 'drawPolygon'"
+          :active="
+            drawStateActive === 'drawPolygon' ||
+            drawStateActive === 'editPolygon'
+          "
           @click="() => toggleActiveState('drawPolygon')"
           data-cy="drawPolygonButton"
         >
@@ -60,7 +69,9 @@ onBeforeUnmount(() => {
       <li>
         <button-text
           :label="t('Circle', { ns: 'client' })"
-          :active="drawStateActive === 'drawCircle'"
+          :active="
+            drawStateActive === 'drawCircle' || drawStateActive === 'editCircle'
+          "
           @click="() => toggleActiveState('drawCircle')"
           data-cy="drawCircleButton"
         >
@@ -69,7 +80,7 @@ onBeforeUnmount(() => {
     </ul>
     <ul
       class="absolute bottom-full top-auto z-10 pl-[130px] pb-16 w-[326px]"
-      v-if="drawStateActive === 'drawLine'"
+      v-if="drawStateActive === 'drawLine' || drawStateActive === 'editLine'"
       data-cy="followRoads"
     >
       <li
diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index 3a78d042..bd7f470b 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -1,10 +1,17 @@
 import { watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import Draw from 'ol/interaction/Draw'
-
+import Modify, { ModifyEvent } from 'ol/interaction/Modify'
+// import Select from 'ol/interaction/Select'
 import { useDrawStore } from '@/stores/draw.store'
 import useDrawInteraction from './draw-interaction.composable'
 import useDrawNotifications from './draw-notifications.composable'
+import { noModifierKeys, singleClick } from 'ol/events/condition'
+import { Collection, getUid } from 'ol'
+import useMap from '../map/map.composable'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { listen } from 'ol/events'
+import { DrawStateActive } from '@/stores/draw.store.model'
 
 type DrawInteractions = {
   drawPoint: Draw
@@ -15,7 +22,11 @@ type DrawInteractions = {
 }
 
 export default function useDraw() {
-  const { drawStateActive } = storeToRefs(useDrawStore())
+  const { drawStateActive, editingFeatureId, drawnFeatures } = storeToRefs(
+    useDrawStore()
+  )
+  const { updateDrawnFeature, setActiveState } = useDrawStore()
+
   const drawInteractions = {
     drawPoint: useDrawInteraction({ type: 'Point' }).drawInteraction,
     drawLabel: useDrawInteraction({ type: 'Point' }).drawInteraction,
@@ -26,6 +37,7 @@ export default function useDraw() {
 
   useDrawNotifications()
 
+  //listener to synchronize ol interaction active states with store state
   watch(drawStateActive, drawStateActive => {
     Object.keys(drawInteractions).forEach(key => {
       if (`${[key as keyof DrawInteractions]}` === `${drawStateActive}`) {
@@ -34,6 +46,55 @@ export default function useDraw() {
         drawInteractions[key as keyof DrawInteractions].setActive(false)
       }
     })
+    if (drawStateActive?.startsWith('edit')) {
+      modifyInteraction.setActive(true)
+    } else {
+      modifyInteraction.setActive(false)
+    }
+  })
+
+  const editingFeatures = new Collection<DrawnFeature>()
+
+  //listener on editingFeatureId to set stores editing states
+  watch(editingFeatureId, editingFeatureId => {
+    if (!editingFeatureId) setActiveState(undefined)
+    editingFeatures.clear()
+    const feature = drawnFeatures.value.find(
+      feature => getUid(feature) === editingFeatureId
+    ) as DrawnFeature
+    if (feature) {
+      const editState = feature.featureType.replace(
+        'drawn',
+        'edit'
+      ) as DrawStateActive
+      setActiveState(editState)
+      editingFeatures.push(feature)
+    }
+  })
+
+  // const selectInteraction = new Select({
+  //   features: editingFeatures,
+  //   pixelTolerance: 20,
+  //   //TODO: filter from v3
+  // })
+  // selectInteraction.setActive(false)
+
+  const modifyInteraction = new Modify({
+    features: editingFeatures,
+    pixelTolerance: 20,
+    deleteCondition: function (event) {
+      return noModifierKeys(event) && singleClick(event)
+    },
+  })
+  modifyInteraction.setActive(false)
+
+  const map = useMap().getOlMap()
+  map.addInteraction(modifyInteraction)
+  // map.addInteraction(selectInteraction)
+
+  listen(modifyInteraction, 'modifyend', event => {
+    const feature = (event as ModifyEvent).features.getArray()[0]
+    updateDrawnFeature(feature as DrawnFeature)
   })
 
   return {}
diff --git a/src/stores/draw.store.model.ts b/src/stores/draw.store.model.ts
index a5351154..49458b56 100644
--- a/src/stores/draw.store.model.ts
+++ b/src/stores/draw.store.model.ts
@@ -5,6 +5,11 @@ export type DrawStateActive =
   | 'drawLine'
   | 'drawCircle'
   | 'drawPolygon'
+  | 'editPoint'
+  | 'editLabel'
+  | 'editLine'
+  | 'editCircle'
+  | 'editPolygon'
 
 export type DrawnFeatureType =
   | 'drawnPoint'
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index c0ca771e..04c92835 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -15,17 +15,44 @@ export const useDrawStore = defineStore('draw', () => {
   const featureEditionDocked = ref(false)
 
   function toggleActiveState(newState: DrawStateActive) {
-    if (drawStateActive.value === newState) {
+    if (
+      drawStateActive.value?.startsWith('edit') &&
+      newState?.startsWith('draw')
+    ) {
+      drawStateActive.value = undefined
+      editingFeatureId.value = undefined
+    } else if (drawStateActive.value === newState) {
       drawStateActive.value = undefined
     } else {
       drawStateActive.value = newState
     }
   }
 
+  function setActiveState(newState: DrawStateActive) {
+    drawStateActive.value = newState
+    if (!newState) editingFeatureId.value = undefined
+  }
+
   function addDrawnFeature(feature: DrawnFeature) {
     drawnFeatures.value = [...drawnFeatures.value, feature]
     activeFeatureId.value = getUid(feature)
     editingFeatureId.value = getUid(feature)
+    drawStateActive.value = drawStateActive.value?.replace(
+      'draw',
+      'edit'
+    ) as DrawStateActive
+    console.log(drawStateActive.value)
+  }
+
+  function updateDrawnFeature(feature: DrawnFeature) {
+    const index = drawnFeatures.value.findIndex(
+      drawnFeature => drawnFeature.id === feature.id
+    )
+    if (index !== -1) {
+      drawnFeatures.value[index] = feature
+    }
+    //affect immutable value to trigger reactivity
+    drawnFeatures.value = [...drawnFeatures.value]
   }
 
   function setDrawnFeatures(features: DrawnFeature[]) {
@@ -46,7 +73,9 @@ export const useDrawStore = defineStore('draw', () => {
     featureEditionDocked,
     removeFeature,
     toggleActiveState,
+    setActiveState,
     addDrawnFeature,
+    updateDrawnFeature,
     setDrawnFeatures,
   }
 })

From 3cc410b000250a5b7c3591b1b860a4487ad1b0c6 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 13 Sep 2024 08:56:25 +0200
Subject: [PATCH 03/15] feat(draw): set feature.editable

---
 src/composables/draw/draw.composable.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index bd7f470b..cc904f88 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -68,6 +68,8 @@ export default function useDraw() {
         'edit'
       ) as DrawStateActive
       setActiveState(editState)
+      feature.editable = true
+      feature.changed()
       editingFeatures.push(feature)
     }
   })

From a762a6edc25f59e41fa4137adb80a0411d68dc25 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 13 Sep 2024 15:43:16 +0200
Subject: [PATCH 04/15] refactor(draw): split draw and edit into different
 states

---
 src/components/footer/toolbar-draw.vue  | 28 ++++++++--------
 src/composables/draw/draw.composable.ts | 29 +++++++---------
 src/stores/draw.store.model.ts          |  3 ++
 src/stores/draw.store.ts                | 44 ++++++++++++++++---------
 4 files changed, 57 insertions(+), 47 deletions(-)

diff --git a/src/components/footer/toolbar-draw.vue b/src/components/footer/toolbar-draw.vue
index c7faade6..3e09d44e 100644
--- a/src/components/footer/toolbar-draw.vue
+++ b/src/components/footer/toolbar-draw.vue
@@ -9,11 +9,11 @@ import { onBeforeUnmount } from 'vue'
 
 const { t } = useTranslation()
 const drawStore = useDrawStore()
-const { toggleActiveState, setActiveState } = drawStore
-const { drawStateActive } = storeToRefs(drawStore)
+const { toggleDrawActiveState, setDrawActiveState } = drawStore
+const { drawStateActive, editStateActive } = storeToRefs(drawStore)
 
 onBeforeUnmount(() => {
-  setActiveState(undefined)
+  setDrawActiveState(undefined)
 })
 </script>
 <template>
@@ -25,9 +25,9 @@ onBeforeUnmount(() => {
         <button-text
           :label="t('Draw Point', { ns: 'client' })"
           :active="
-            drawStateActive === 'drawPoint' || drawStateActive === 'editPoint'
+            drawStateActive === 'drawPoint' || editStateActive === 'editPoint'
           "
-          @click="() => toggleActiveState('drawPoint')"
+          @click="() => toggleDrawActiveState('drawPoint')"
           data-cy="drawPointButton"
         >
         </button-text>
@@ -36,9 +36,9 @@ onBeforeUnmount(() => {
         <button-text
           :label="t('Label', { ns: 'client' })"
           :active="
-            drawStateActive === 'drawLabel' || drawStateActive === 'editLabel'
+            drawStateActive === 'drawLabel' || editStateActive === 'editLabel'
           "
-          @click="() => toggleActiveState('drawLabel')"
+          @click="() => toggleDrawActiveState('drawLabel')"
           data-cy="drawLabelButton"
         >
         </button-text>
@@ -47,9 +47,9 @@ onBeforeUnmount(() => {
         <button-text
           :label="t('Line', { ns: 'client' })"
           :active="
-            drawStateActive === 'drawLine' || drawStateActive === 'editLine'
+            drawStateActive === 'drawLine' || editStateActive === 'editLine'
           "
-          @click="() => toggleActiveState('drawLine')"
+          @click="() => toggleDrawActiveState('drawLine')"
           data-cy="drawLineButton"
         >
         </button-text>
@@ -59,9 +59,9 @@ onBeforeUnmount(() => {
           :label="t('Polygon', { ns: 'client' })"
           :active="
             drawStateActive === 'drawPolygon' ||
-            drawStateActive === 'editPolygon'
+            editStateActive === 'editPolygon'
           "
-          @click="() => toggleActiveState('drawPolygon')"
+          @click="() => toggleDrawActiveState('drawPolygon')"
           data-cy="drawPolygonButton"
         >
         </button-text>
@@ -70,9 +70,9 @@ onBeforeUnmount(() => {
         <button-text
           :label="t('Circle', { ns: 'client' })"
           :active="
-            drawStateActive === 'drawCircle' || drawStateActive === 'editCircle'
+            drawStateActive === 'drawCircle' || editStateActive === 'editCircle'
           "
-          @click="() => toggleActiveState('drawCircle')"
+          @click="() => toggleDrawActiveState('drawCircle')"
           data-cy="drawCircleButton"
         >
         </button-text>
@@ -80,7 +80,7 @@ onBeforeUnmount(() => {
     </ul>
     <ul
       class="absolute bottom-full top-auto z-10 pl-[130px] pb-16 w-[326px]"
-      v-if="drawStateActive === 'drawLine' || drawStateActive === 'editLine'"
+      v-if="drawStateActive === 'drawLine' || editStateActive === 'editLine'"
       data-cy="followRoads"
     >
       <li
diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index cc904f88..36948e3c 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -2,7 +2,6 @@ import { watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import Draw from 'ol/interaction/Draw'
 import Modify, { ModifyEvent } from 'ol/interaction/Modify'
-// import Select from 'ol/interaction/Select'
 import { useDrawStore } from '@/stores/draw.store'
 import useDrawInteraction from './draw-interaction.composable'
 import useDrawNotifications from './draw-notifications.composable'
@@ -11,7 +10,7 @@ import { Collection, getUid } from 'ol'
 import useMap from '../map/map.composable'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 import { listen } from 'ol/events'
-import { DrawStateActive } from '@/stores/draw.store.model'
+import { EditStateActive } from '@/stores/draw.store.model'
 
 type DrawInteractions = {
   drawPoint: Draw
@@ -22,10 +21,9 @@ type DrawInteractions = {
 }
 
 export default function useDraw() {
-  const { drawStateActive, editingFeatureId, drawnFeatures } = storeToRefs(
-    useDrawStore()
-  )
-  const { updateDrawnFeature, setActiveState } = useDrawStore()
+  const { drawStateActive, editStateActive, editingFeatureId, drawnFeatures } =
+    storeToRefs(useDrawStore())
+  const { updateDrawnFeature, setEditActiveState } = useDrawStore()
 
   const drawInteractions = {
     drawPoint: useDrawInteraction({ type: 'Point' }).drawInteraction,
@@ -46,7 +44,10 @@ export default function useDraw() {
         drawInteractions[key as keyof DrawInteractions].setActive(false)
       }
     })
-    if (drawStateActive?.startsWith('edit')) {
+  })
+
+  watch(editStateActive, editStateActive => {
+    if (editStateActive) {
       modifyInteraction.setActive(true)
     } else {
       modifyInteraction.setActive(false)
@@ -57,7 +58,7 @@ export default function useDraw() {
 
   //listener on editingFeatureId to set stores editing states
   watch(editingFeatureId, editingFeatureId => {
-    if (!editingFeatureId) setActiveState(undefined)
+    if (!editingFeatureId) setEditActiveState(undefined)
     editingFeatures.clear()
     const feature = drawnFeatures.value.find(
       feature => getUid(feature) === editingFeatureId
@@ -66,21 +67,14 @@ export default function useDraw() {
       const editState = feature.featureType.replace(
         'drawn',
         'edit'
-      ) as DrawStateActive
-      setActiveState(editState)
+      ) as EditStateActive
+      setEditActiveState(editState)
       feature.editable = true
       feature.changed()
       editingFeatures.push(feature)
     }
   })
 
-  // const selectInteraction = new Select({
-  //   features: editingFeatures,
-  //   pixelTolerance: 20,
-  //   //TODO: filter from v3
-  // })
-  // selectInteraction.setActive(false)
-
   const modifyInteraction = new Modify({
     features: editingFeatures,
     pixelTolerance: 20,
@@ -92,7 +86,6 @@ export default function useDraw() {
 
   const map = useMap().getOlMap()
   map.addInteraction(modifyInteraction)
-  // map.addInteraction(selectInteraction)
 
   listen(modifyInteraction, 'modifyend', event => {
     const feature = (event as ModifyEvent).features.getArray()[0]
diff --git a/src/stores/draw.store.model.ts b/src/stores/draw.store.model.ts
index 49458b56..d1e806bb 100644
--- a/src/stores/draw.store.model.ts
+++ b/src/stores/draw.store.model.ts
@@ -5,6 +5,9 @@ export type DrawStateActive =
   | 'drawLine'
   | 'drawCircle'
   | 'drawPolygon'
+
+export type EditStateActive =
+  | undefined
   | 'editPoint'
   | 'editLabel'
   | 'editLine'
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index 04c92835..dcc2a52b 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -2,46 +2,58 @@ import { defineStore } from 'pinia'
 import { ref, Ref } from 'vue'
 
 import { getUid } from 'ol/util'
-import { DrawStateActive } from './draw.store.model'
+import { DrawStateActive, EditStateActive } from './draw.store.model'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 export const useDrawStore = defineStore('draw', () => {
   const activeFeatureId: Ref<String | undefined> = ref(undefined)
   const editingFeatureId: Ref<String | undefined> = ref(undefined)
   const drawStateActive = ref<DrawStateActive>(undefined)
+  const editStateActive = ref<EditStateActive>(undefined)
   // no immutable changes on drawnFeatures in functions bellow,
   // but keep same Collection for sync with ol source (map)
   const drawnFeatures = ref<DrawnFeature[]>([])
   const featureEditionDocked = ref(false)
 
-  function toggleActiveState(newState: DrawStateActive) {
-    if (
-      drawStateActive.value?.startsWith('edit') &&
-      newState?.startsWith('draw')
-    ) {
+  function toggleDrawActiveState(newState: DrawStateActive) {
+    // allow draw of different geom type after edit, but not same type
+    if (editStateActive.value?.slice(4) === newState?.slice(4)) {
       drawStateActive.value = undefined
+      editStateActive.value = undefined
       editingFeatureId.value = undefined
     } else if (drawStateActive.value === newState) {
       drawStateActive.value = undefined
     } else {
-      drawStateActive.value = newState
+      setDrawActiveState(newState)
     }
   }
 
-  function setActiveState(newState: DrawStateActive) {
+  function setDrawActiveState(newState: DrawStateActive) {
+    if (newState) {
+      editStateActive.value = undefined
+      editingFeatureId.value = undefined
+    }
     drawStateActive.value = newState
-    if (!newState) editingFeatureId.value = undefined
+  }
+
+  function setEditActiveState(newState: EditStateActive) {
+    if (newState) {
+      drawStateActive.value = undefined
+    } else {
+      editingFeatureId.value = undefined
+    }
+    editStateActive.value = newState
   }
 
   function addDrawnFeature(feature: DrawnFeature) {
     drawnFeatures.value = [...drawnFeatures.value, feature]
     activeFeatureId.value = getUid(feature)
     editingFeatureId.value = getUid(feature)
-    drawStateActive.value = drawStateActive.value?.replace(
-      'draw',
+    editStateActive.value = feature.featureType.replace(
+      'drawn',
       'edit'
-    ) as DrawStateActive
-    console.log(drawStateActive.value)
+    ) as EditStateActive
+    drawStateActive.value = undefined
   }
 
   function updateDrawnFeature(feature: DrawnFeature) {
@@ -69,11 +81,13 @@ export const useDrawStore = defineStore('draw', () => {
     activeFeatureId,
     editingFeatureId,
     drawStateActive,
+    editStateActive,
     drawnFeatures,
     featureEditionDocked,
     removeFeature,
-    toggleActiveState,
-    setActiveState,
+    toggleDrawActiveState,
+    setDrawActiveState,
+    setEditActiveState,
     addDrawnFeature,
     updateDrawnFeature,
     setDrawnFeatures,

From 3f1b2bb24f222f7136218d43fc9bff5357285e09 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 13 Sep 2024 16:39:45 +0200
Subject: [PATCH 05/15] refactor(draw): simplify and fix ol synchronization

---
 src/composables/map/map.composable.ts  |  8 ++------
 src/composables/map/ol.composable.ts   | 18 +++---------------
 src/composables/map/ol.synchronizer.ts | 15 ++-------------
 3 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/src/composables/map/map.composable.ts b/src/composables/map/map.composable.ts
index ac8624a4..13d778dd 100644
--- a/src/composables/map/map.composable.ts
+++ b/src/composables/map/map.composable.ts
@@ -15,10 +15,7 @@ import { MutationTypeValue } from './map.model'
 import { transformExtent } from 'ol/proj'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
-import { storeToRefs } from 'pinia'
-import { useDrawStore } from '@/stores/draw.store'
-import { Feature } from 'ol'
-import { Geometry } from 'ol/geom'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 export const PROJECTION_WEBMERCATOR = 'EPSG:3857'
 export const PROJECTION_WGS84 = 'EPSG:4326'
@@ -193,8 +190,7 @@ export default function useMap() {
   }
 
   function addDrawLayer() {
-    const { drawnFeatures } = storeToRefs(useDrawStore())
-    const features = drawnFeatures.value as unknown as Feature<Geometry>[] // as Collection<Feature<Geometry>>
+    const features: DrawnFeature[] = []
     const drawLayer = new VectorLayer({
       source: new VectorSource({
         features,
diff --git a/src/composables/map/ol.composable.ts b/src/composables/map/ol.composable.ts
index 675440a7..f72c74fd 100644
--- a/src/composables/map/ol.composable.ts
+++ b/src/composables/map/ol.composable.ts
@@ -150,7 +150,7 @@ export default function useOpenLayers() {
     }
   }
 
-  function addFeatures(features: DrawnFeature[], olMap: OlMap) {
+  function setDrawnFeatures(features: DrawnFeature[], olMap: OlMap) {
     const mapLayers = olMap.getLayers()
     const drawLayer = mapLayers
       .getArray()
@@ -160,22 +160,11 @@ export default function useOpenLayers() {
     if (!drawLayer) {
       useMap().addDrawLayer()
     } else {
+      drawLayer.getSource()?.clear()
       drawLayer.getSource()?.addFeatures(features)
     }
   }
 
-  function removeFeatures(features: DrawnFeature[], olMap: OlMap) {
-    const mapLayers = olMap.getLayers()
-    const drawLayer = mapLayers
-      .getArray()
-      .find(
-        layer => layer.get('featureID') === 'featureLayer'
-      ) as VectorLayer<VectorSource>
-    features.forEach(f => {
-      drawLayer.getSource()?.removeFeature(f)
-    })
-  }
-
   return {
     addLayer,
     findLayer,
@@ -187,7 +176,6 @@ export default function useOpenLayers() {
     getLayerFromCache,
     setBgLayer,
     applyOnBgLayer,
-    addFeatures,
-    removeFeatures,
+    setDrawnFeatures,
   }
 }
diff --git a/src/composables/map/ol.synchronizer.ts b/src/composables/map/ol.synchronizer.ts
index 5a487149..e99431f3 100644
--- a/src/composables/map/ol.synchronizer.ts
+++ b/src/composables/map/ol.synchronizer.ts
@@ -168,19 +168,8 @@ export class OlSynchronizer {
 
     watch(
       () => drawStore.drawnFeatures,
-      (newFeatures, oldFeatures) => {
-        const addedFeatures = newFeatures.filter(
-          f => !oldFeatures.some(fo => fo.id == f.id)
-        )
-        if (addedFeatures.length > 0) {
-          openLayers.addFeatures(addedFeatures as DrawnFeature[], map)
-        }
-        const removedFeatures = oldFeatures.filter(
-          f => !newFeatures.some(fnew => fnew.id == f.id)
-        )
-        if (removedFeatures.length > 0) {
-          openLayers.removeFeatures(removedFeatures as DrawnFeature[], map)
-        }
+      drawnFeatures => {
+        openLayers.setDrawnFeatures(drawnFeatures as DrawnFeature[], map)
       }
     )
   }

From 359b3c1b049996c499a1216ae0b29296d7693e4f Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 13 Sep 2024 17:10:09 +0200
Subject: [PATCH 06/15] refactor(draw): introduce olDraw.composable to simplify
 and concentrate logic

---
 src/components/map/map-container.vue      |  4 ++-
 src/composables/map/map.composable.ts     | 18 ----------
 src/composables/map/ol-draw.composable.ts | 40 +++++++++++++++++++++++
 src/composables/map/ol.composable.ts      | 20 ------------
 src/composables/map/ol.synchronizer.ts    | 10 ------
 5 files changed, 43 insertions(+), 49 deletions(-)
 create mode 100644 src/composables/map/ol-draw.composable.ts

diff --git a/src/components/map/map-container.vue b/src/components/map/map-container.vue
index 9a926469..6d1ae40a 100644
--- a/src/components/map/map-container.vue
+++ b/src/components/map/map-container.vue
@@ -14,6 +14,7 @@ import Map3dControl from '../map-controls/map-3d.vue'
 import FullscreenControl from '../map-controls/fullscreen-control.vue'
 import ZoomControl from '../map-controls/zoom-control.vue'
 import ZoomToExtentControl from '../map-controls/zoom-to-extent-control.vue'
+import useOlDraw from '@/composables/map/ol-draw.composable'
 
 const appStore = useAppStore()
 const { embedded } = storeToRefs(appStore)
@@ -21,7 +22,8 @@ const map = useMap()
 const mapContainer = ref(null)
 const olMap = map.createMap()
 // add draw layer after map init to allow restoring draw features
-map.addDrawLayer()
+const olDraw = useOlDraw()
+olDraw.addDrawLayer(olMap)
 
 withDefaults(
   defineProps<{
diff --git a/src/composables/map/map.composable.ts b/src/composables/map/map.composable.ts
index 13d778dd..90c5ca30 100644
--- a/src/composables/map/map.composable.ts
+++ b/src/composables/map/map.composable.ts
@@ -13,16 +13,12 @@ import type {
 } from '@/stores/map.store.model'
 import { MutationTypeValue } from './map.model'
 import { transformExtent } from 'ol/proj'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 export const PROJECTION_WEBMERCATOR = 'EPSG:3857'
 export const PROJECTION_WGS84 = 'EPSG:4326'
 export const PROJECTION_LUX = 'EPSG:2169'
 const MAX_EXTENT = JSON.parse(import.meta.env.VITE_DEFAULT_MAX_EXTENT)
 const DEFAULT_VIEW_ZOOM = parseInt(import.meta.env.VITE_DEFAULT_VIEW_ZOOM, 10)
-const DEFAULT_DRAW_ZINDEX = 1000
 
 let map: OlMap
 const olMap: ShallowRef<OlMap | undefined> = shallowRef()
@@ -189,19 +185,6 @@ export default function useMap() {
     // TODO: Add slide effect and do this update after slide animation ends
   }
 
-  function addDrawLayer() {
-    const features: DrawnFeature[] = []
-    const drawLayer = new VectorLayer({
-      source: new VectorSource({
-        features,
-      }),
-      zIndex: DEFAULT_DRAW_ZINDEX,
-      // altitudeMode: 'clampToGround', //used in v3, but causes type error
-    })
-    drawLayer.set('featureID', 'featureLayer')
-    map.addLayer(drawLayer)
-  }
-
   return {
     olMap,
     getOlMap,
@@ -215,6 +198,5 @@ export default function useMap() {
     getMutatedLayers,
     getMutationType,
     resize,
-    addDrawLayer,
   }
 }
diff --git a/src/composables/map/ol-draw.composable.ts b/src/composables/map/ol-draw.composable.ts
new file mode 100644
index 00000000..8a4419e4
--- /dev/null
+++ b/src/composables/map/ol-draw.composable.ts
@@ -0,0 +1,40 @@
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { useDrawStore } from '@/stores/draw.store'
+import OlMap from 'ol/Map'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import { watch } from 'vue'
+
+const DEFAULT_DRAW_ZINDEX = 1000
+
+export default function useOlDraw() {
+  const drawLayer = new VectorLayer({
+    source: new VectorSource({
+      features: [] as DrawnFeature[],
+    }),
+    zIndex: DEFAULT_DRAW_ZINDEX,
+  })
+  const drawStore = useDrawStore()
+
+  watch(
+    () => drawStore.drawnFeatures,
+    drawnFeatures => {
+      setDrawnFeatures(drawnFeatures as DrawnFeature[])
+    }
+  )
+
+  function addDrawLayer(map: OlMap) {
+    drawLayer.set('featureID', 'featureLayer')
+    map.addLayer(drawLayer)
+  }
+
+  function setDrawnFeatures(features: DrawnFeature[]) {
+    drawLayer.getSource()?.clear()
+    drawLayer.getSource()?.addFeatures(features)
+  }
+
+  return {
+    addDrawLayer,
+    setDrawnFeatures,
+  }
+}
diff --git a/src/composables/map/ol.composable.ts b/src/composables/map/ol.composable.ts
index f72c74fd..381ad189 100644
--- a/src/composables/map/ol.composable.ts
+++ b/src/composables/map/ol.composable.ts
@@ -1,8 +1,5 @@
 import type BaseLayer from 'ol/layer/Base'
 import type OlMap from 'ol/Map'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 import { layersCache } from '@/stores/layers.cache'
 import type { Layer, LayerId } from '@/stores/map.store.model'
@@ -12,7 +9,6 @@ import { statePersistorStyleService } from '@/services/state-persistor/state-per
 import { olLayerFactoryService } from '@/services/ol-layer/ol-layer-factory.service'
 import { olLayerTimeService } from '@/services/ol-layer/ol-layer-time.service'
 import { OlLayer } from '@/services/ol-layer/ol-layer.model'
-import useMap from './map.composable'
 
 const DEFAULT_BGZINDEX = -200 // Value comming  from legacy
 
@@ -150,21 +146,6 @@ export default function useOpenLayers() {
     }
   }
 
-  function setDrawnFeatures(features: DrawnFeature[], olMap: OlMap) {
-    const mapLayers = olMap.getLayers()
-    const drawLayer = mapLayers
-      .getArray()
-      .find(
-        layer => layer.get('featureID') === 'featureLayer'
-      ) as VectorLayer<VectorSource>
-    if (!drawLayer) {
-      useMap().addDrawLayer()
-    } else {
-      drawLayer.getSource()?.clear()
-      drawLayer.getSource()?.addFeatures(features)
-    }
-  }
-
   return {
     addLayer,
     findLayer,
@@ -176,6 +157,5 @@ export default function useOpenLayers() {
     getLayerFromCache,
     setBgLayer,
     applyOnBgLayer,
-    setDrawnFeatures,
   }
 }
diff --git a/src/composables/map/ol.synchronizer.ts b/src/composables/map/ol.synchronizer.ts
index e99431f3..565d2656 100644
--- a/src/composables/map/ol.synchronizer.ts
+++ b/src/composables/map/ol.synchronizer.ts
@@ -6,20 +6,17 @@ import useOpenLayers from './ol.composable'
 
 import { useMapStore } from '@/stores/map.store'
 import { useStyleStore } from '@/stores/style.store'
-import { useDrawStore } from '@/stores/draw.store'
 import { StyleSpecification } from '@/composables/mvt-styles/mvt-styles.model'
 import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
 import useMap from '@/composables/map/map.composable'
 import useOffline from '@/composables/offline/offline.composable'
 import { MutationTypeValue } from './map.model'
-import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 export class OlSynchronizer {
   timeoutID: NodeJS.Timeout
   constructor(map: OlMap) {
     const mapStore = useMapStore()
     const styleStore = useStyleStore()
-    const drawStore = useDrawStore()
     const mapService = useMap()
     const styleService = useMvtStyles()
     const openLayers = useOpenLayers()
@@ -165,12 +162,5 @@ export class OlSynchronizer {
         }
       }
     )
-
-    watch(
-      () => drawStore.drawnFeatures,
-      drawnFeatures => {
-        openLayers.setDrawnFeatures(drawnFeatures as DrawnFeature[], map)
-      }
-    )
   }
 }

From 377afbfd9641f4e6a76f195be9d26d62d9c15399 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 13 Sep 2024 17:11:01 +0200
Subject: [PATCH 07/15] fix(draw): unset edit id when selecting other feature
 on map

---
 src/composables/draw/draw-select.composable.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/composables/draw/draw-select.composable.ts b/src/composables/draw/draw-select.composable.ts
index e8a3296b..8d7360cb 100644
--- a/src/composables/draw/draw-select.composable.ts
+++ b/src/composables/draw/draw-select.composable.ts
@@ -11,7 +11,9 @@ import { useAppStore } from '@/stores/app.store'
 export default function useDrawSelect() {
   const map = useMap().getOlMap()
   const appStore = useAppStore()
-  const { activeFeatureId, drawnFeatures } = storeToRefs(useDrawStore())
+  const { activeFeatureId, editingFeatureId, drawnFeatures } = storeToRefs(
+    useDrawStore()
+  )
 
   listen(map, 'click', event => handleClick(event))
 
@@ -40,6 +42,7 @@ export default function useDrawSelect() {
         if (featureMatch) {
           appStore.toggleMyMapsOpen(true)
           activeFeatureId.value = getUid(feature)
+          editingFeatureId.value = undefined
 
           return
         }

From fb1719653e0ff4fef9646bc084882a13e73c8c53 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Wed, 18 Sep 2024 15:44:05 +0200
Subject: [PATCH 08/15] refactor(draw): replace edit collection with source and
 layer

and adapt style when feature become uneditable
---
 src/composables/draw/draw.composable.ts | 27 +++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index 36948e3c..d14b4022 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -6,11 +6,13 @@ import { useDrawStore } from '@/stores/draw.store'
 import useDrawInteraction from './draw-interaction.composable'
 import useDrawNotifications from './draw-notifications.composable'
 import { noModifierKeys, singleClick } from 'ol/events/condition'
-import { Collection, getUid } from 'ol'
+import { getUid } from 'ol'
 import useMap from '../map/map.composable'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 import { listen } from 'ol/events'
 import { EditStateActive } from '@/stores/draw.store.model'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
 
 type DrawInteractions = {
   drawPoint: Draw
@@ -54,12 +56,24 @@ export default function useDraw() {
     }
   })
 
-  const editingFeatures = new Collection<DrawnFeature>()
+  const editSource = new VectorSource({
+    features: [] as DrawnFeature[],
+  })
+
+  const editLayer = new VectorLayer({
+    source: editSource,
+  })
 
   //listener on editingFeatureId to set stores editing states
   watch(editingFeatureId, editingFeatureId => {
-    if (!editingFeatureId) setEditActiveState(undefined)
-    editingFeatures.clear()
+    if (!editingFeatureId) {
+      setEditActiveState(undefined)
+      editSource.getFeatures().forEach(feature => {
+        ;(feature as DrawnFeature).editable = false
+        feature.changed()
+      })
+    }
+    editSource.clear()
     const feature = drawnFeatures.value.find(
       feature => getUid(feature) === editingFeatureId
     ) as DrawnFeature
@@ -71,12 +85,12 @@ export default function useDraw() {
       setEditActiveState(editState)
       feature.editable = true
       feature.changed()
-      editingFeatures.push(feature)
+      editSource.addFeature(feature)
     }
   })
 
   const modifyInteraction = new Modify({
-    features: editingFeatures,
+    source: editSource,
     pixelTolerance: 20,
     deleteCondition: function (event) {
       return noModifierKeys(event) && singleClick(event)
@@ -86,6 +100,7 @@ export default function useDraw() {
 
   const map = useMap().getOlMap()
   map.addInteraction(modifyInteraction)
+  map.addLayer(editLayer)
 
   listen(modifyInteraction, 'modifyend', event => {
     const feature = (event as ModifyEvent).features.getArray()[0]

From 93de6d222a7f1ecdec85de959ea1b0d126ff755b Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Thu, 19 Sep 2024 09:50:37 +0200
Subject: [PATCH 09/15] refactor(draw): move ol-draw logic to draw composable

---
 src/components/footer/footer-bar.vue      |  3 --
 src/components/map/map-container.vue      |  6 ++--
 src/composables/draw/draw.composable.ts   | 32 +++++++++++++++++-
 src/composables/map/ol-draw.composable.ts | 40 -----------------------
 4 files changed, 34 insertions(+), 47 deletions(-)
 delete mode 100644 src/composables/map/ol-draw.composable.ts

diff --git a/src/components/footer/footer-bar.vue b/src/components/footer/footer-bar.vue
index 72d8d1e1..1387cedd 100644
--- a/src/components/footer/footer-bar.vue
+++ b/src/components/footer/footer-bar.vue
@@ -6,7 +6,6 @@ import ButtonLink from './button-link.vue'
 import ToolbarDraw from './toolbar-draw.vue'
 import { useTranslation } from 'i18next-vue'
 import { useAppStore } from '@/stores/app.store'
-import useDraw from '@/composables/draw/draw.composable'
 
 const { t, i18next } = useTranslation()
 const appStore = useAppStore()
@@ -30,8 +29,6 @@ function onClickLayersIcon() {
 
   themeGridOpen.value = false
 }
-//init draw interactions in parent of toolbar-draw to allow deactivation when toolbar is closed
-useDraw()
 </script>
 <template>
   <footer
diff --git a/src/components/map/map-container.vue b/src/components/map/map-container.vue
index 6d1ae40a..00bb1019 100644
--- a/src/components/map/map-container.vue
+++ b/src/components/map/map-container.vue
@@ -14,7 +14,7 @@ import Map3dControl from '../map-controls/map-3d.vue'
 import FullscreenControl from '../map-controls/fullscreen-control.vue'
 import ZoomControl from '../map-controls/zoom-control.vue'
 import ZoomToExtentControl from '../map-controls/zoom-to-extent-control.vue'
-import useOlDraw from '@/composables/map/ol-draw.composable'
+import useDraw from '@/composables/draw/draw.composable'
 
 const appStore = useAppStore()
 const { embedded } = storeToRefs(appStore)
@@ -22,8 +22,8 @@ const map = useMap()
 const mapContainer = ref(null)
 const olMap = map.createMap()
 // add draw layer after map init to allow restoring draw features
-const olDraw = useOlDraw()
-olDraw.addDrawLayer(olMap)
+const draw = useDraw()
+draw.addDrawLayer(olMap)
 
 withDefaults(
   defineProps<{
diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index d14b4022..a4a020ab 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -13,6 +13,9 @@ import { listen } from 'ol/events'
 import { EditStateActive } from '@/stores/draw.store.model'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
+import OlMap from 'ol/Map'
+
+const DEFAULT_DRAW_ZINDEX = 1000
 
 type DrawInteractions = {
   drawPoint: Draw
@@ -89,6 +92,31 @@ export default function useDraw() {
     }
   })
 
+  const drawLayer = new VectorLayer({
+    source: new VectorSource({
+      features: [] as DrawnFeature[],
+    }),
+    zIndex: DEFAULT_DRAW_ZINDEX,
+  })
+  const drawStore = useDrawStore()
+
+  watch(
+    () => drawStore.drawnFeatures,
+    drawnFeatures => {
+      setDrawnFeatures(drawnFeatures as DrawnFeature[])
+    }
+  )
+
+  function addDrawLayer(map: OlMap) {
+    drawLayer.set('featureID', 'featureLayer')
+    map.addLayer(drawLayer)
+  }
+
+  function setDrawnFeatures(features: DrawnFeature[]) {
+    drawLayer.getSource()?.clear()
+    drawLayer.getSource()?.addFeatures(features)
+  }
+
   const modifyInteraction = new Modify({
     source: editSource,
     pixelTolerance: 20,
@@ -107,5 +135,7 @@ export default function useDraw() {
     updateDrawnFeature(feature as DrawnFeature)
   })
 
-  return {}
+  return {
+    addDrawLayer,
+  }
 }
diff --git a/src/composables/map/ol-draw.composable.ts b/src/composables/map/ol-draw.composable.ts
deleted file mode 100644
index 8a4419e4..00000000
--- a/src/composables/map/ol-draw.composable.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DrawnFeature } from '@/services/draw/drawn-feature'
-import { useDrawStore } from '@/stores/draw.store'
-import OlMap from 'ol/Map'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import { watch } from 'vue'
-
-const DEFAULT_DRAW_ZINDEX = 1000
-
-export default function useOlDraw() {
-  const drawLayer = new VectorLayer({
-    source: new VectorSource({
-      features: [] as DrawnFeature[],
-    }),
-    zIndex: DEFAULT_DRAW_ZINDEX,
-  })
-  const drawStore = useDrawStore()
-
-  watch(
-    () => drawStore.drawnFeatures,
-    drawnFeatures => {
-      setDrawnFeatures(drawnFeatures as DrawnFeature[])
-    }
-  )
-
-  function addDrawLayer(map: OlMap) {
-    drawLayer.set('featureID', 'featureLayer')
-    map.addLayer(drawLayer)
-  }
-
-  function setDrawnFeatures(features: DrawnFeature[]) {
-    drawLayer.getSource()?.clear()
-    drawLayer.getSource()?.addFeatures(features)
-  }
-
-  return {
-    addDrawLayer,
-    setDrawnFeatures,
-  }
-}

From d6897037957a591511dabaa5d193ab841ccb0e27 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Thu, 26 Sep 2024 10:50:47 +0200
Subject: [PATCH 10/15] refactor(draw): seperate into draw and edit composable

---
 src/composables/draw/draw.composable.ts | 78 ++-----------------------
 src/composables/draw/edit.composable.ts | 76 ++++++++++++++++++++++++
 src/stores/draw.store.ts                |  4 +-
 3 files changed, 83 insertions(+), 75 deletions(-)
 create mode 100644 src/composables/draw/edit.composable.ts

diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index a4a020ab..23f27085 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -1,19 +1,14 @@
 import { watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import Draw from 'ol/interaction/Draw'
-import Modify, { ModifyEvent } from 'ol/interaction/Modify'
 import { useDrawStore } from '@/stores/draw.store'
 import useDrawInteraction from './draw-interaction.composable'
 import useDrawNotifications from './draw-notifications.composable'
-import { noModifierKeys, singleClick } from 'ol/events/condition'
-import { getUid } from 'ol'
-import useMap from '../map/map.composable'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
-import { listen } from 'ol/events'
-import { EditStateActive } from '@/stores/draw.store.model'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import OlMap from 'ol/Map'
+import useEdit from './edit.composable'
 
 const DEFAULT_DRAW_ZINDEX = 1000
 
@@ -26,9 +21,10 @@ type DrawInteractions = {
 }
 
 export default function useDraw() {
-  const { drawStateActive, editStateActive, editingFeatureId, drawnFeatures } =
-    storeToRefs(useDrawStore())
-  const { updateDrawnFeature, setEditActiveState } = useDrawStore()
+  const { drawStateActive, drawnFeatures } = storeToRefs(useDrawStore())
+
+  useDrawNotifications()
+  useEdit()
 
   const drawInteractions = {
     drawPoint: useDrawInteraction({ type: 'Point' }).drawInteraction,
@@ -38,8 +34,6 @@ export default function useDraw() {
     drawPolygon: useDrawInteraction({ type: 'Polygon' }).drawInteraction,
   } as DrawInteractions
 
-  useDrawNotifications()
-
   //listener to synchronize ol interaction active states with store state
   watch(drawStateActive, drawStateActive => {
     Object.keys(drawInteractions).forEach(key => {
@@ -51,57 +45,15 @@ export default function useDraw() {
     })
   })
 
-  watch(editStateActive, editStateActive => {
-    if (editStateActive) {
-      modifyInteraction.setActive(true)
-    } else {
-      modifyInteraction.setActive(false)
-    }
-  })
-
-  const editSource = new VectorSource({
-    features: [] as DrawnFeature[],
-  })
-
-  const editLayer = new VectorLayer({
-    source: editSource,
-  })
-
-  //listener on editingFeatureId to set stores editing states
-  watch(editingFeatureId, editingFeatureId => {
-    if (!editingFeatureId) {
-      setEditActiveState(undefined)
-      editSource.getFeatures().forEach(feature => {
-        ;(feature as DrawnFeature).editable = false
-        feature.changed()
-      })
-    }
-    editSource.clear()
-    const feature = drawnFeatures.value.find(
-      feature => getUid(feature) === editingFeatureId
-    ) as DrawnFeature
-    if (feature) {
-      const editState = feature.featureType.replace(
-        'drawn',
-        'edit'
-      ) as EditStateActive
-      setEditActiveState(editState)
-      feature.editable = true
-      feature.changed()
-      editSource.addFeature(feature)
-    }
-  })
-
   const drawLayer = new VectorLayer({
     source: new VectorSource({
       features: [] as DrawnFeature[],
     }),
     zIndex: DEFAULT_DRAW_ZINDEX,
   })
-  const drawStore = useDrawStore()
 
   watch(
-    () => drawStore.drawnFeatures,
+    () => drawnFeatures.value,
     drawnFeatures => {
       setDrawnFeatures(drawnFeatures as DrawnFeature[])
     }
@@ -117,24 +69,6 @@ export default function useDraw() {
     drawLayer.getSource()?.addFeatures(features)
   }
 
-  const modifyInteraction = new Modify({
-    source: editSource,
-    pixelTolerance: 20,
-    deleteCondition: function (event) {
-      return noModifierKeys(event) && singleClick(event)
-    },
-  })
-  modifyInteraction.setActive(false)
-
-  const map = useMap().getOlMap()
-  map.addInteraction(modifyInteraction)
-  map.addLayer(editLayer)
-
-  listen(modifyInteraction, 'modifyend', event => {
-    const feature = (event as ModifyEvent).features.getArray()[0]
-    updateDrawnFeature(feature as DrawnFeature)
-  })
-
   return {
     addDrawLayer,
   }
diff --git a/src/composables/draw/edit.composable.ts b/src/composables/draw/edit.composable.ts
new file mode 100644
index 00000000..12559753
--- /dev/null
+++ b/src/composables/draw/edit.composable.ts
@@ -0,0 +1,76 @@
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { getUid } from 'ol'
+import { noModifierKeys, singleClick } from 'ol/events/condition'
+import Modify, { ModifyEvent } from 'ol/interaction/Modify'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import { listen } from 'ol/events'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { useDrawStore } from '@/stores/draw.store'
+import useMap from '../map/map.composable'
+import { EditStateActive } from '@/stores/draw.store.model'
+
+export default function useEdit() {
+  const { editStateActive, editingFeatureId, drawnFeatures } = storeToRefs(
+    useDrawStore()
+  )
+  const { updateDrawnFeature, setEditActiveState } = useDrawStore()
+
+  const map = useMap().getOlMap()
+  const editSource = new VectorSource({
+    features: [] as DrawnFeature[],
+  })
+  const editLayer = new VectorLayer({
+    source: editSource,
+  })
+  map.addLayer(editLayer)
+
+  watch(editStateActive, editStateActive => {
+    if (editStateActive) {
+      modifyInteraction.setActive(true)
+    } else {
+      modifyInteraction.setActive(false)
+    }
+  })
+
+  //listener on editingFeatureId to set stores editing states
+  watch(editingFeatureId, editingFeatureId => {
+    if (!editingFeatureId) {
+      setEditActiveState(undefined)
+      editSource.getFeatures().forEach(feature => {
+        ;(feature as DrawnFeature).editable = false
+        feature.changed()
+      })
+    }
+    editSource.clear()
+    const feature = drawnFeatures.value.find(
+      feature => getUid(feature) === editingFeatureId
+    ) as DrawnFeature
+    if (feature) {
+      const editState = feature.featureType.replace(
+        'drawn',
+        'edit'
+      ) as EditStateActive
+      setEditActiveState(editState)
+      feature.editable = true
+      feature.changed()
+      editSource.addFeature(feature)
+    }
+  })
+
+  const modifyInteraction = new Modify({
+    source: editSource,
+    pixelTolerance: 20,
+    deleteCondition: function (event) {
+      return noModifierKeys(event) && singleClick(event)
+    },
+  })
+  modifyInteraction.setActive(false)
+  map.addInteraction(modifyInteraction)
+
+  listen(modifyInteraction, 'modifyend', event => {
+    const feature = (event as ModifyEvent).features.getArray()[0]
+    updateDrawnFeature(feature as DrawnFeature)
+  })
+}
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index dcc2a52b..28d6a1b2 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -10,8 +10,6 @@ export const useDrawStore = defineStore('draw', () => {
   const editingFeatureId: Ref<String | undefined> = ref(undefined)
   const drawStateActive = ref<DrawStateActive>(undefined)
   const editStateActive = ref<EditStateActive>(undefined)
-  // no immutable changes on drawnFeatures in functions bellow,
-  // but keep same Collection for sync with ol source (map)
   const drawnFeatures = ref<DrawnFeature[]>([])
   const featureEditionDocked = ref(false)
 
@@ -63,7 +61,7 @@ export const useDrawStore = defineStore('draw', () => {
     if (index !== -1) {
       drawnFeatures.value[index] = feature
     }
-    //affect immutable value to trigger reactivity
+    //affect immutable value to trigger reactivity for state persistor
     drawnFeatures.value = [...drawnFeatures.value]
   }
 

From bb0ea184c2d776c6d7ea4985c246cff7e928540e Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Thu, 26 Sep 2024 12:11:12 +0200
Subject: [PATCH 11/15] test(e2e): fix tests

---
 cypress/e2e/background-selection.cy.ts  | 4 ++--
 cypress/e2e/layers-selection.cy.ts      | 4 ++--
 src/composables/draw/draw.composable.ts | 5 +++--
 src/composables/draw/edit.composable.ts | 3 +++
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/cypress/e2e/background-selection.cy.ts b/cypress/e2e/background-selection.cy.ts
index 94c5108c..efe1c265 100644
--- a/cypress/e2e/background-selection.cy.ts
+++ b/cypress/e2e/background-selection.cy.ts
@@ -22,7 +22,7 @@ describe('Background selector', () => {
       const layers = (<AUTWindowOlMap>window).olMap
         .getLayers()
         .getArray()
-        .filter((l: any) => l.get('featureID') != 'featureLayer')
+        .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
       expect(layers[0].get('id')).to.eq(556)
     })
 
@@ -52,7 +52,7 @@ describe('Background selector', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(502)
       })
     })
diff --git a/cypress/e2e/layers-selection.cy.ts b/cypress/e2e/layers-selection.cy.ts
index 882f5fd1..1e1c198e 100644
--- a/cypress/e2e/layers-selection.cy.ts
+++ b/cypress/e2e/layers-selection.cy.ts
@@ -66,7 +66,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(556)
       })
       cy.get('[data-cy="catalog"]').find('[data-cy="layerLabel-359"]').click()
@@ -76,7 +76,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(359)
         expect(layers[1].get('id')).to.eq(353)
       })
diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index 23f27085..a63f2881 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -10,7 +10,8 @@ import VectorSource from 'ol/source/Vector'
 import OlMap from 'ol/Map'
 import useEdit from './edit.composable'
 
-const DEFAULT_DRAW_ZINDEX = 1000
+export const DEFAULT_DRAW_ZINDEX = 1000
+export const FEATURE_LAYER_TYPE = 'featureLayer'
 
 type DrawInteractions = {
   drawPoint: Draw
@@ -51,6 +52,7 @@ export default function useDraw() {
     }),
     zIndex: DEFAULT_DRAW_ZINDEX,
   })
+  drawLayer.set('cyLayerType', FEATURE_LAYER_TYPE)
 
   watch(
     () => drawnFeatures.value,
@@ -60,7 +62,6 @@ export default function useDraw() {
   )
 
   function addDrawLayer(map: OlMap) {
-    drawLayer.set('featureID', 'featureLayer')
     map.addLayer(drawLayer)
   }
 
diff --git a/src/composables/draw/edit.composable.ts b/src/composables/draw/edit.composable.ts
index 12559753..36708e29 100644
--- a/src/composables/draw/edit.composable.ts
+++ b/src/composables/draw/edit.composable.ts
@@ -10,6 +10,7 @@ import { DrawnFeature } from '@/services/draw/drawn-feature'
 import { useDrawStore } from '@/stores/draw.store'
 import useMap from '../map/map.composable'
 import { EditStateActive } from '@/stores/draw.store.model'
+import { DEFAULT_DRAW_ZINDEX, FEATURE_LAYER_TYPE } from './draw.composable'
 
 export default function useEdit() {
   const { editStateActive, editingFeatureId, drawnFeatures } = storeToRefs(
@@ -23,7 +24,9 @@ export default function useEdit() {
   })
   const editLayer = new VectorLayer({
     source: editSource,
+    zIndex: DEFAULT_DRAW_ZINDEX,
   })
+  editLayer.set('cyLayerType', FEATURE_LAYER_TYPE)
   map.addLayer(editLayer)
 
   watch(editStateActive, editStateActive => {

From 3ffa87e423ba84bcb42c825f159644a91372a01a Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Thu, 26 Sep 2024 17:25:29 +0200
Subject: [PATCH 12/15] test(e2e): add tests

---
 cypress/e2e/draw/draw-bar.cy.ts     | 84 +++++++++++++++++------------
 cypress/e2e/draw/draw-feat.utils.ts | 18 +++++++
 cypress/e2e/draw/draw-panel.cy.ts   | 14 +++++
 cypress/support/commands.ts         | 18 ++++++-
 4 files changed, 98 insertions(+), 36 deletions(-)

diff --git a/cypress/e2e/draw/draw-bar.cy.ts b/cypress/e2e/draw/draw-bar.cy.ts
index 774ba26b..dd0fed7a 100644
--- a/cypress/e2e/draw/draw-bar.cy.ts
+++ b/cypress/e2e/draw/draw-bar.cy.ts
@@ -1,3 +1,9 @@
+import {
+  checkDrawInteractionActive,
+  checkModifyInteractionActive,
+  testFeatItem,
+} from './draw-feat.utils'
+
 describe('Map controls', () => {
   beforeEach(() => {
     cy.visit('/')
@@ -10,20 +16,27 @@ describe('Map controls', () => {
     })
   })
 
-  describe('when clicking button to draw point', () => {
-    beforeEach(() => {
+  describe('When clicking button to close draw tools', () => {
+    it('should deactivate active ol draw interaction', () => {
       cy.get('button[data-cy="drawPointButton"]').click()
-    })
-
-    it('activates ol Draw interaction in mode Point', () => {
+      checkDrawInteractionActive('Point')
+      cy.get('button[data-cy="drawButton"]').click()
       cy.getDrawInteractions().then(drawInteractions => {
         const activeInteractions = drawInteractions.filter(interaction => {
           return interaction.getActive() === true
         })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Point')
+        expect(activeInteractions).to.have.length(0)
       })
     })
+  })
+
+  describe('when clicking button to draw point', () => {
+    beforeEach(() => {
+      cy.get('button[data-cy="drawPointButton"]').click()
+    })
+    it('activates ol Draw interaction in mode Point', () => {
+      checkDrawInteractionActive('Point')
+    })
 
     describe('When drawing the point on the map', () => {
       beforeEach(() => {
@@ -34,6 +47,11 @@ describe('Map controls', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
 
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
+
       it('does not display a tooltip overlay when clicking on the map', () => {
         cy.get('div.lux-tooltip').should('not.exist')
       })
@@ -46,13 +64,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Point', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Point')
-      })
+      checkDrawInteractionActive('Point')
     })
 
     describe('When drawing the label on the map', () => {
@@ -64,6 +76,11 @@ describe('Map controls', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
 
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
+
       it('does not display a tooltip overlay when clicking on the map', () => {
         cy.get('div.lux-tooltip').should('not.exist')
       })
@@ -76,13 +93,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode LineString', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('LineString')
-      })
+      checkDrawInteractionActive('LineString')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (second point double click)', () => {
@@ -101,6 +112,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 
@@ -110,13 +126,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Polygon', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Polygon')
-      })
+      checkDrawInteractionActive('Polygon')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (third point double click)', () => {
@@ -137,6 +147,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 
@@ -146,13 +161,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Circle', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Circle')
-      })
+      checkDrawInteractionActive('Circle')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (second point simple click)', () => {
@@ -171,6 +180,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 })
diff --git a/cypress/e2e/draw/draw-feat.utils.ts b/cypress/e2e/draw/draw-feat.utils.ts
index 4475d08c..53e742d8 100644
--- a/cypress/e2e/draw/draw-feat.utils.ts
+++ b/cypress/e2e/draw/draw-feat.utils.ts
@@ -16,3 +16,21 @@ export function testFeatItemDocking() {
   cy.get('*[data-cy="featItemDock"]').click()
   cy.get('*[data-cy="mapPopup"]').should('exist')
 }
+
+export function checkDrawInteractionActive(
+  type: 'Point' | 'LineString' | 'Polygon' | 'Circle'
+) {
+  cy.getDrawInteractions().then(drawInteractions => {
+    const activeInteractions = drawInteractions.filter(interaction => {
+      return interaction.getActive() === true
+    })
+    expect(activeInteractions).to.have.length(1)
+    expect(activeInteractions[0].mode_).to.be.equal(type)
+  })
+}
+
+export function checkModifyInteractionActive(active: boolean) {
+  cy.getModifyInteraction().then(modifyInteraction => {
+    expect(modifyInteraction.getActive()).to.equal(active)
+  })
+}
diff --git a/cypress/e2e/draw/draw-panel.cy.ts b/cypress/e2e/draw/draw-panel.cy.ts
index c21a9385..82018f86 100644
--- a/cypress/e2e/draw/draw-panel.cy.ts
+++ b/cypress/e2e/draw/draw-panel.cy.ts
@@ -1,3 +1,5 @@
+import { checkModifyInteractionActive, testFeatItem } from './draw-feat.utils'
+
 describe('Draw panel', () => {
   beforeEach(() => {
     cy.visit('/')
@@ -33,4 +35,16 @@ describe('Draw panel', () => {
       cy.get('@menuItem').eq(4).should('contain.text', 'Couper une ligne')
     })
   })
+
+  describe('When clicking toggle edit button', () => {
+    it('should toggle edit in panel and on map (ol modify interaction)', () => {
+      checkModifyInteractionActive(true)
+      testFeatItem()
+      cy.get('*[data-cy="featItemToggleEdit"]').click()
+      checkModifyInteractionActive(false)
+      cy.get('*[data-cy="featItemToggleEdit"]').click()
+      checkModifyInteractionActive(true)
+      testFeatItem()
+    })
+  })
 })
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 5b888a33..8d5d50c6 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -36,7 +36,7 @@ Cypress.Commands.add('getDrawInteractions', () => {
       .getInteractions()
       .getArray()
       .filter(interaction => {
-        // workaround for 'instance of Draw' not working with Draw2 class
+        // workaround for 'instance of Draw' not working (with Draw2 class?)
         return (
           'finishDrawing' in interaction &&
           typeof interaction.finishDrawing === 'function'
@@ -45,10 +45,26 @@ Cypress.Commands.add('getDrawInteractions', () => {
   })
 })
 
+Cypress.Commands.add('getModifyInteraction', () => {
+  cy.window().then(win => {
+    const map = win.olMap
+    return map
+      .getInteractions()
+      .getArray()
+      .filter(interaction => {
+        return (
+          'removePoint' in interaction &&
+          typeof interaction.removePoint === 'function'
+        )
+      })[0]
+  })
+})
+
 declare global {
   namespace Cypress {
     interface Chainable {
       getDrawInteractions(): Chainable<Array<Interaction>>
+      getModifyInteraction(): Chainable<Interaction>
       // login(email: string, password: string): Chainable<void>
       // drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
       // dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>

From 3f7f77b05fada68ee50b5b9db5572642a9e29fea Mon Sep 17 00:00:00 2001
From: Moritz Kirmse <moritz.kirmse@camptocamp.com>
Date: Fri, 27 Sep 2024 14:57:13 +0200
Subject: [PATCH 13/15] fix bug where feature retains editable style on feature
 selection change

---
 src/composables/draw/draw-select.composable.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/composables/draw/draw-select.composable.ts b/src/composables/draw/draw-select.composable.ts
index 8d7360cb..1d81b5a8 100644
--- a/src/composables/draw/draw-select.composable.ts
+++ b/src/composables/draw/draw-select.composable.ts
@@ -28,6 +28,7 @@ export default function useDrawSelect() {
       .filter(f => getUid(f) == newId)
       .forEach(newFeature => {
         newFeature.selected = true
+        newFeature.editable = false
         newFeature.changed()
       })
   })

From 39a3bfed74f4870497f00255abdc785e3e4e21f4 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 27 Sep 2024 15:36:13 +0200
Subject: [PATCH 14/15] fix(draw): recreate modify interaction instead of
 de/-activating

this prevents once edited feature geometries to stay editable when another feature geometry should only be editable
---
 cypress/e2e/draw/draw-feat.utils.ts     |  8 ++++--
 cypress/support/commands.ts             |  7 ++---
 src/composables/draw/edit.composable.ts | 35 ++++++++++++++-----------
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/cypress/e2e/draw/draw-feat.utils.ts b/cypress/e2e/draw/draw-feat.utils.ts
index 53e742d8..ae30283a 100644
--- a/cypress/e2e/draw/draw-feat.utils.ts
+++ b/cypress/e2e/draw/draw-feat.utils.ts
@@ -29,8 +29,12 @@ export function checkDrawInteractionActive(
   })
 }
 
-export function checkModifyInteractionActive(active: boolean) {
+export function checkModifyInteractionActive(exists: boolean) {
   cy.getModifyInteraction().then(modifyInteraction => {
-    expect(modifyInteraction.getActive()).to.equal(active)
+    if (exists) {
+      expect(modifyInteraction).to.exist
+    } else {
+      expect(modifyInteraction).to.equal(undefined)
+    }
   })
 }
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 8d5d50c6..8cfa2d1d 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -48,15 +48,16 @@ Cypress.Commands.add('getDrawInteractions', () => {
 Cypress.Commands.add('getModifyInteraction', () => {
   cy.window().then(win => {
     const map = win.olMap
-    return map
+    const modifyInteraction = map
       .getInteractions()
       .getArray()
-      .filter(interaction => {
+      .find(interaction => {
         return (
           'removePoint' in interaction &&
           typeof interaction.removePoint === 'function'
         )
-      })[0]
+      })
+    cy.wrap(modifyInteraction)
   })
 })
 
diff --git a/src/composables/draw/edit.composable.ts b/src/composables/draw/edit.composable.ts
index 36708e29..260ea568 100644
--- a/src/composables/draw/edit.composable.ts
+++ b/src/composables/draw/edit.composable.ts
@@ -18,6 +18,7 @@ export default function useEdit() {
   )
   const { updateDrawnFeature, setEditActiveState } = useDrawStore()
 
+  let modifyInteraction: Modify
   const map = useMap().getOlMap()
   const editSource = new VectorSource({
     features: [] as DrawnFeature[],
@@ -31,9 +32,9 @@ export default function useEdit() {
 
   watch(editStateActive, editStateActive => {
     if (editStateActive) {
-      modifyInteraction.setActive(true)
+      createModifyInteraction()
     } else {
-      modifyInteraction.setActive(false)
+      map.removeInteraction(modifyInteraction)
     }
   })
 
@@ -62,18 +63,22 @@ export default function useEdit() {
     }
   })
 
-  const modifyInteraction = new Modify({
-    source: editSource,
-    pixelTolerance: 20,
-    deleteCondition: function (event) {
-      return noModifierKeys(event) && singleClick(event)
-    },
-  })
-  modifyInteraction.setActive(false)
-  map.addInteraction(modifyInteraction)
+  function createModifyInteraction() {
+    if (modifyInteraction) {
+      map.removeInteraction(modifyInteraction)
+    }
+    modifyInteraction = new Modify({
+      source: editSource,
+      pixelTolerance: 20,
+      deleteCondition: function (event) {
+        return noModifierKeys(event) && singleClick(event)
+      },
+    })
+    map.addInteraction(modifyInteraction)
 
-  listen(modifyInteraction, 'modifyend', event => {
-    const feature = (event as ModifyEvent).features.getArray()[0]
-    updateDrawnFeature(feature as DrawnFeature)
-  })
+    listen(modifyInteraction, 'modifyend', event => {
+      const feature = (event as ModifyEvent).features.getArray()[0]
+      updateDrawnFeature(feature as DrawnFeature)
+    })
+  }
 }

From 1307a59983a3dfed593ad5a1ee1beafaf06e1744 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 27 Sep 2024 16:20:43 +0200
Subject: [PATCH 15/15] refactor(draw): address review comments

---
 src/stores/draw.store.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index 28d6a1b2..f4bd7936 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -15,7 +15,10 @@ export const useDrawStore = defineStore('draw', () => {
 
   function toggleDrawActiveState(newState: DrawStateActive) {
     // allow draw of different geom type after edit, but not same type
-    if (editStateActive.value?.slice(4) === newState?.slice(4)) {
+    if (
+      editStateActive.value?.replace('edit', '') ===
+      newState?.replace('draw', '')
+    ) {
       drawStateActive.value = undefined
       editStateActive.value = undefined
       editingFeatureId.value = undefined