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] 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)
+    })
+  }
 }