PB-1212: handle delete last point on one place to avoid deleting poin…

…t twice.
geoadmin · Dec 9, 2024 · a7009ca · a7009ca
1 parent 6629135
commit a7009ca
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 27 deletions.
diff --git a/src/modules/drawing/DrawingModule.vue b/src/modules/drawing/DrawingModule.vue
@@ -34,7 +34,6 @@ const activeKmlLayer = computed(() => store.getters.activeKmlLayer)
 const featureIds = computed(() => store.state.drawing.featureIds)
 const isDrawingEmpty = computed(() => store.getters.isDrawingEmpty)
 const noFeatureInfo = computed(() => store.getters.noFeatureInfo)
-const currentDrawingMode = computed(() => store.state.drawing.mode)
 const online = computed(() => store.state.drawing.online)
 const selectedEditableFeatures = computed(() => store.state.features.selectedEditableFeatures)
 const selectedLineFeature = computed(() => {
@@ -130,7 +129,7 @@ watch(availableIconSets, () => {
     })
 })
 watch(selectedEditableFeatures, (newValue) => {
-    if (newValue) {
+    if (newValue.length > 0) {
         if (store.state.drawing.editingMode === EditMode.OFF) {
             store.dispatch('setEditingMode', { mode: EditMode.MODIFY, ...dispatcher })
         }
@@ -172,7 +171,7 @@ onMounted(() => {
 
     // listening for "Delete" keystroke (to remove last point when drawing lines or measure)
     document.addEventListener('keyup', removeLastPointOnDeleteKeyUp, { passive: true })
-    document.addEventListener('contextmenu', removeLastPoint, { passive: true })
+    document.addEventListener('contextmenu', removeLastPointOnRightClick, { passive: true })
 
     if (IS_TESTING_WITH_CYPRESS) {
         window.drawingLayer = drawingLayer
@@ -185,7 +184,7 @@ onBeforeUnmount(() => {
     drawingLayer.getSource().clear()
     olMap.removeLayer(drawingLayer)
 
-    document.removeEventListener('contextmenu', removeLastPoint)
+    document.removeEventListener('contextmenu', removeLastPointOnRightClick)
     document.removeEventListener('keyup', removeLastPointOnDeleteKeyUp)
 
     if (IS_TESTING_WITH_CYPRESS) {
@@ -201,10 +200,11 @@ function createSourceForProjection() {
     })
 }
 function removeLastPoint() {
-    // Only active on drawing mode
-    if (currentDrawingMode.value) {
-        drawingInteractions.value.removeLastPoint()
-    }
+    drawingInteractions.value?.removeLastPoint()
+}
+
+function removeLastPointOnRightClick(_event) {
+    removeLastPoint()
 }
 
 function removeLastPointOnDeleteKeyUp(event) {

diff --git a/src/modules/drawing/components/DrawingInteractions.vue b/src/modules/drawing/components/DrawingInteractions.vue
@@ -8,13 +8,15 @@ import DrawingMarkerInteraction from '@/modules/drawing/components/DrawingMarker
 import DrawingMeasureInteraction from '@/modules/drawing/components/DrawingMeasureInteraction.vue'
 import DrawingSelectInteraction from '@/modules/drawing/components/DrawingSelectInteraction.vue'
 import DrawingTextInteraction from '@/modules/drawing/components/DrawingTextInteraction.vue'
+import { EditMode } from '@/store/modules/drawing.store'
 
 // DOM References
 const selectInteraction = ref(null)
 const currentInteraction = ref(null)
 
 const store = useStore()
 const currentDrawingMode = computed(() => store.state.drawing.mode)
+const editMode = computed(() => store.state.drawing.editingMode)
 
 const specializedInteractionComponent = computed(() => {
     switch (currentDrawingMode.value) {
@@ -38,7 +40,9 @@ function removeLastPoint() {
     if (currentInteraction.value?.removeLastPoint) {
         currentInteraction.value.removeLastPoint()
     }
-    selectInteraction.value.removeLastPoint()
+    if (editMode.value !== EditMode.OFF) {
+        selectInteraction.value.removeLastPoint()
+    }
 }
 defineExpose({
     removeLastPoint,

diff --git a/src/modules/drawing/components/useModifyInteraction.composable.js b/src/modules/drawing/components/useModifyInteraction.composable.js
@@ -35,7 +35,6 @@ export default function useModifyInteraction(features) {
     )
 
     const olMap = inject('olMap')
-    let rightClickDeleteActive = false // to make sure only one listener is active
     const { willModify, debounceSaveDrawing } = useSaveKmlOnChange()
 
     const modifyInteraction = new ModifyInteraction({
@@ -85,15 +84,12 @@ export default function useModifyInteraction(features) {
                 continueDrawingInteraction.extend(selectedFeature)
                 continueDrawingInteraction.setActive(true)
                 modifyInteraction.setActive(false)
-                activateRightClickDelete()
             } else if (newValue === EditMode.MODIFY) {
                 modifyInteraction.setActive(true)
                 continueDrawingInteraction.setActive(false)
-                activateRightClickDelete()
             } else {
                 modifyInteraction.setActive(true)
                 continueDrawingInteraction.setActive(false)
-                deactivateRightClickDelete()
             }
         },
         { immediate: true }
@@ -115,22 +111,8 @@ export default function useModifyInteraction(features) {
         modifyInteraction.un('modifyend', onModifyEnd)
         modifyInteraction.un('modifystart', onModifyStart)
         continueDrawingInteraction.un('drawend', onExtendEnd)
-        deactivateRightClickDelete()
     })
 
-    function activateRightClickDelete() {
-        if (rightClickDeleteActive) {
-            return
-        }
-        olMap.on('contextmenu', removeLastPoint)
-        rightClickDeleteActive = true
-    }
-
-    function deactivateRightClickDelete() {
-        olMap.un('contextmenu', removeLastPoint)
-        rightClickDeleteActive = false
-    }
-
     function removeLastPoint() {
         if (editMode.value === EditMode.OFF) {
             return

diff --git a/tests/cypress/tests-e2e/drawing.cy.js b/tests/cypress/tests-e2e/drawing.cy.js
@@ -597,6 +597,10 @@ describe('Drawing module tests', () => {
             // Delete the last node by right click
             cy.get('[data-cy="ol-map"]').rightclick()
             checkLinestringNumberOfPoints(10)
+
+            // Delete the last node by clicking the delete button
+            cy.get('[data-cy="drawing-delete-last-point-button"]').click()
+            checkLinestringNumberOfPoints(9)
         })
         it('can create line/polygons and edit them', () => {
             cy.clickDrawingTool(EditableFeatureTypes.LINEPOLYGON)