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

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

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

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