From 72852553570891892060c7d9039a67190c823d06 Mon Sep 17 00:00:00 2001
From: Ismail Sunni <imajimatika@gmail.com>
Date: Tue, 26 Nov 2024 16:13:08 +0700
Subject: [PATCH 1/8] PB-1212: Allow delete last point by button when on line
 editing mode.

---
 .../drawing/components/DrawingInteractions.vue  |  1 +
 .../components/DrawingSelectInteraction.vue     |  3 ++-
 .../drawing/components/DrawingToolbox.vue       | 17 ++++++++++++++++-
 .../useModifyInteraction.composable.js          | 10 +++++++++-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/modules/drawing/components/DrawingInteractions.vue b/src/modules/drawing/components/DrawingInteractions.vue
index fbeb11889..61ab2205c 100644
--- a/src/modules/drawing/components/DrawingInteractions.vue
+++ b/src/modules/drawing/components/DrawingInteractions.vue
@@ -38,6 +38,7 @@ function removeLastPoint() {
     if (currentInteraction.value?.removeLastPoint) {
         currentInteraction.value.removeLastPoint()
     }
+    selectInteraction.value.removeLastPoint()
 }
 defineExpose({
     removeLastPoint,
diff --git a/src/modules/drawing/components/DrawingSelectInteraction.vue b/src/modules/drawing/components/DrawingSelectInteraction.vue
index 01f1fa5ed..1a4fb2d7c 100644
--- a/src/modules/drawing/components/DrawingSelectInteraction.vue
+++ b/src/modules/drawing/components/DrawingSelectInteraction.vue
@@ -30,7 +30,7 @@ const selectInteraction = new SelectInteraction({
     // to select. We will try to add a bigger hit tolerance to mitigate that.
     hitTolerance: DRAWING_HIT_TOLERANCE,
 })
-useModifyInteraction(selectInteraction.getFeatures())
+const { removeLastPoint } = useModifyInteraction(selectInteraction.getFeatures())
 
 /** OpenLayers feature currently selected */
 const currentlySelectedFeature = ref(null)
@@ -116,6 +116,7 @@ function selectFeature(feature) {
 
 defineExpose({
     selectFeature,
+    removeLastPoint,
 })
 </script>
 
diff --git a/src/modules/drawing/components/DrawingToolbox.vue b/src/modules/drawing/components/DrawingToolbox.vue
index 1d60a76ae..6211bdbe7 100644
--- a/src/modules/drawing/components/DrawingToolbox.vue
+++ b/src/modules/drawing/components/DrawingToolbox.vue
@@ -12,6 +12,7 @@ import DrawingToolboxButton from '@/modules/drawing/components/DrawingToolboxBut
 import SharePopup from '@/modules/drawing/components/SharePopup.vue'
 import { DrawingState } from '@/modules/drawing/lib/export-utils'
 import useSaveKmlOnChange from '@/modules/drawing/useKmlDataManagement.composable'
+import { EditMode } from '@/store/modules/drawing.store'
 import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import debounce from '@/utils/debounce'
@@ -38,6 +39,20 @@ const isDrawingLineOrMeasure = computed(() =>
         currentDrawingMode.value
     )
 )
+const selectedEditableFeatures = computed(() => store.state.features.selectedEditableFeatures)
+const isSelectedALine = computed(() => {
+    if (selectedEditableFeatures.value && selectedEditableFeatures.value.length > 0) {
+        const selectedFeature = selectedEditableFeatures.value[0]
+        return (
+            selectedFeature.geometry.type === 'LineString' &&
+            (selectedFeature.featureType === EditableFeatureTypes.LINEPOLYGON ||
+                selectedFeature.featureType === EditableFeatureTypes.MEASURE)
+        )
+    }
+    return false
+})
+const editMode = computed(() => store.state.drawing.editingMode)
+const isEditingLineMode = computed(() => editMode.value !== EditMode.OFF && isSelectedALine.value)
 const activeKmlLayer = computed(() => store.getters.activeKmlLayer)
 const drawingName = computed({
     get: () => store.state.drawing.name,
@@ -208,7 +223,7 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                             </button>
                         </div>
                     </div>
-                    <div v-if="isDrawingLineOrMeasure" class="row mt-2">
+                    <div v-if="isDrawingLineOrMeasure || isEditingLineMode" class="row mt-2">
                         <div class="col d-grid">
                             <button
                                 data-cy="drawing-delete-last-point-button"
diff --git a/src/modules/drawing/components/useModifyInteraction.composable.js b/src/modules/drawing/components/useModifyInteraction.composable.js
index 93a6c6f60..80494a8e4 100644
--- a/src/modules/drawing/components/useModifyInteraction.composable.js
+++ b/src/modules/drawing/components/useModifyInteraction.composable.js
@@ -116,7 +116,7 @@ export default function useModifyInteraction(features) {
         continueDrawingInteraction.un('drawend', onExtendEnd)
     })
 
-    function onMapRightClick(_event) {
+    function removeLastPoint() {
         if (continueDrawingInteraction.getActive()) {
             continueDrawingInteraction.removeLastPoint()
         } else if (modifyInteraction.getActive() && features.getArray().length > 0) {
@@ -133,6 +133,10 @@ export default function useModifyInteraction(features) {
         }
     }
 
+    function onMapRightClick(_event) {
+        removeLastPoint()
+    }
+
     function onModifyStart(event) {
         const [feature] = event.features.getArray()
 
@@ -195,4 +199,8 @@ export default function useModifyInteraction(features) {
             ...dispatcher,
         })
     }
+
+    return {
+        removeLastPoint,
+    }
 }

From b1b2a11af007026f16dc7e96af5c335003656891 Mon Sep 17 00:00:00 2001
From: Ismail Sunni <imajimatika@gmail.com>
Date: Tue, 26 Nov 2024 16:44:29 +0700
Subject: [PATCH 2/8] PB-1212: Hide delete button when the selected line only
 has 2 points.

---
 .../drawing/components/DrawingToolbox.vue     | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/modules/drawing/components/DrawingToolbox.vue b/src/modules/drawing/components/DrawingToolbox.vue
index 6211bdbe7..d30e51f46 100644
--- a/src/modules/drawing/components/DrawingToolbox.vue
+++ b/src/modules/drawing/components/DrawingToolbox.vue
@@ -40,19 +40,32 @@ const isDrawingLineOrMeasure = computed(() =>
     )
 )
 const selectedEditableFeatures = computed(() => store.state.features.selectedEditableFeatures)
-const isSelectedALine = computed(() => {
+const selectedLineString = computed(() => {
     if (selectedEditableFeatures.value && selectedEditableFeatures.value.length > 0) {
         const selectedFeature = selectedEditableFeatures.value[0]
-        return (
+        if (
             selectedFeature.geometry.type === 'LineString' &&
             (selectedFeature.featureType === EditableFeatureTypes.LINEPOLYGON ||
                 selectedFeature.featureType === EditableFeatureTypes.MEASURE)
-        )
+        ) {
+            return selectedFeature
+        }
+    }
+    return null
+})
+const selectedLineCoordinates = computed(() => {
+    if (selectedLineString.value) {
+        return selectedLineString.value.geometry.coordinates
     }
-    return false
+    return null
 })
 const editMode = computed(() => store.state.drawing.editingMode)
-const isEditingLineMode = computed(() => editMode.value !== EditMode.OFF && isSelectedALine.value)
+const isAllowDeletePointOnSelectedLine = computed(
+    () =>
+        editMode.value !== EditMode.OFF &&
+        selectedLineString.value &&
+        selectedLineCoordinates.value?.length > 2
+)
 const activeKmlLayer = computed(() => store.getters.activeKmlLayer)
 const drawingName = computed({
     get: () => store.state.drawing.name,
@@ -223,7 +236,10 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                             </button>
                         </div>
                     </div>
-                    <div v-if="isDrawingLineOrMeasure || isEditingLineMode" class="row mt-2">
+                    <div
+                        v-if="isDrawingLineOrMeasure || isAllowDeletePointOnSelectedLine"
+                        class="row mt-2"
+                    >
                         <div class="col d-grid">
                             <button
                                 data-cy="drawing-delete-last-point-button"

From fcee12ac9dce1b53965c722367d1532f82c0a900 Mon Sep 17 00:00:00 2001
From: Ismail Sunni <imajimatika@gmail.com>
Date: Tue, 26 Nov 2024 16:47:21 +0700
Subject: [PATCH 3/8] PB-1212: Fix tippy text on add vertex button.

---
 src/modules/drawing/components/AddVertexButton.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/modules/drawing/components/AddVertexButton.vue b/src/modules/drawing/components/AddVertexButton.vue
index 3df450d6d..452886e81 100644
--- a/src/modules/drawing/components/AddVertexButton.vue
+++ b/src/modules/drawing/components/AddVertexButton.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import { EditMode } from '@/store/modules/drawing.store'
@@ -24,7 +23,6 @@ const emit = defineEmits(['button-mounted'])
 
 const buttonRef = ref(null)
 
-const i18n = useI18n()
 const store = useStore()
 
 useTippyTooltip('#addVertexButton [data-tippy-content]', { placement: 'left' })
@@ -47,7 +45,7 @@ function addVertex() {
     <div id="addVertexButton" ref="buttonRef">
         <button
             class="overlay-button d-print-none"
-            :data-tippy-content="i18n.t(props.tooltipText)"
+            :data-tippy-content="props.tooltipText"
             @click="addVertex"
         >
             <font-awesome-icon :icon="['fas', 'plus']" />

From 6b36ca0fe478cf21d3855544ceeba09bce2d2f73 Mon Sep 17 00:00:00 2001
From: Ismail Sunni <imajimatika@gmail.com>
Date: Tue, 26 Nov 2024 17:26:04 +0700
Subject: [PATCH 4/8] PB-1212: Fix vue warning wrong type for props and improve
 code for add vertex button overlay

---
 src/modules/drawing/DrawingModule.vue         |  6 ++--
 .../components/AddVertexButtonOverlay.vue     | 29 ++++++++++++-------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/modules/drawing/DrawingModule.vue b/src/modules/drawing/DrawingModule.vue
index 2d30f6781..e87dcb8f6 100644
--- a/src/modules/drawing/DrawingModule.vue
+++ b/src/modules/drawing/DrawingModule.vue
@@ -36,7 +36,7 @@ const isDrawingEmpty = computed(() => store.getters.isDrawingEmpty)
 const noFeatureInfo = computed(() => store.getters.noFeatureInfo)
 const online = computed(() => store.state.drawing.online)
 const selectedEditableFeatures = computed(() => store.state.features.selectedEditableFeatures)
-const selectedLineString = computed(() => {
+const selectedLineFeature = computed(() => {
     if (selectedEditableFeatures.value && selectedEditableFeatures.value.length > 0) {
         const selectedFeature = selectedEditableFeatures.value[0]
         if (
@@ -50,7 +50,7 @@ const selectedLineString = computed(() => {
     return null
 })
 const showAddVertexButton = computed(() => {
-    return store.state.drawing.editingMode === EditMode.MODIFY && !!selectedLineString.value
+    return store.state.drawing.editingMode === EditMode.MODIFY && !!selectedLineFeature.value
 })
 
 const hasKml = computed(() => {
@@ -242,7 +242,7 @@ async function closeDrawing() {
         <DrawingInteractions ref="drawingInteractions" />
         <AddVertexButtonOverlay
             v-if="showAddVertexButton"
-            :line-string="selectedLineString.geometry"
+            :coordinates="selectedLineFeature.geometry.coordinates"
         />
     </div>
 </template>
diff --git a/src/modules/drawing/components/AddVertexButtonOverlay.vue b/src/modules/drawing/components/AddVertexButtonOverlay.vue
index 8436b37cb..a7d27c14c 100644
--- a/src/modules/drawing/components/AddVertexButtonOverlay.vue
+++ b/src/modules/drawing/components/AddVertexButtonOverlay.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { LineString } from 'ol/geom'
 import Overlay from 'ol/Overlay'
 import { computed, onMounted, ref, watch } from 'vue'
 import { inject } from 'vue'
@@ -8,15 +7,23 @@ import { useStore } from 'vuex'
 
 import AddVertexButton from '@/modules/drawing/components/AddVertexButton.vue'
 
+const BASE_OFFSET_DISTANCE = 35
+const MEASURE_ADDITIONAL_OFFSET = 40 // additional offset for not covering the measure line label
+
 const props = defineProps({
-    lineString: {
-        type: LineString,
+    coordinates: {
+        type: Array,
         required: true,
+        validator: (value) => {
+            return (
+                Array.isArray(value) &&
+                value.length >= 2 &&
+                value.every((coord) => Array.isArray(coord) && coord.length === 2)
+            )
+        },
     },
 })
 
-const coordinates = computed(() => props.lineString.coordinates)
-
 const olMap = inject('olMap')
 
 const firstButtonOverlay = ref(null)
@@ -26,6 +33,7 @@ const firstButtonCoordinate = ref(null)
 const lastButtonCoordinate = ref(null)
 
 const store = useStore()
+const coordinates = computed(() => props.coordinates)
 const selectedEditableFeatures = computed(() => store.state.features.selectedEditableFeatures)
 const selectedFeatureType = computed(() => {
     if (selectedEditableFeatures.value && selectedEditableFeatures.value.length > 0) {
@@ -61,12 +69,13 @@ const updateButtonPositions = () => {
     firstButtonCoordinate.value = coords[0]
     lastButtonCoordinate.value = coords[coords.length - 1]
 
-    let distance = 35
-    const firstOffset = calculateOffset(coords[0], coords[1], distance)
+    const firstOffset = calculateOffset(coords[0], coords[1], BASE_OFFSET_DISTANCE)
+
     // adding this so that the button is not on top of the measure line label
-    if (selectedFeatureType.value === 'MEASURE') {
-        distance = distance + 40
-    }
+    const distance =
+        selectedFeatureType.value === 'MEASURE'
+            ? BASE_OFFSET_DISTANCE + MEASURE_ADDITIONAL_OFFSET
+            : BASE_OFFSET_DISTANCE
     const lastOffset = calculateOffset(
         coords[coords.length - 1],
         coords[coords.length - 2],

From 2d36a40cce25596420ebc17fcaf1f613a5b5b38e Mon Sep 17 00:00:00 2001
From: Ismail Sunni <imajimatika@gmail.com>
Date: Tue, 3 Dec 2024 15:08:08 +0700
Subject: [PATCH 5/8] PB-1212: Address PR review.

---
 .../drawing/components/DrawingToolbox.vue     | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/modules/drawing/components/DrawingToolbox.vue b/src/modules/drawing/components/DrawingToolbox.vue
index d30e51f46..06ae91985 100644
--- a/src/modules/drawing/components/DrawingToolbox.vue
+++ b/src/modules/drawing/components/DrawingToolbox.vue
@@ -41,18 +41,16 @@ const isDrawingLineOrMeasure = computed(() =>
 )
 const selectedEditableFeatures = computed(() => store.state.features.selectedEditableFeatures)
 const selectedLineString = computed(() => {
-    if (selectedEditableFeatures.value && selectedEditableFeatures.value.length > 0) {
-        const selectedFeature = selectedEditableFeatures.value[0]
-        if (
-            selectedFeature.geometry.type === 'LineString' &&
-            (selectedFeature.featureType === EditableFeatureTypes.LINEPOLYGON ||
-                selectedFeature.featureType === EditableFeatureTypes.MEASURE)
-        ) {
-            return selectedFeature
-        }
-    }
-    return null
+    return selectedEditableFeatures.value.find((feature) => {
+        return (
+            feature.geometry.type === 'LineString' &&
+            [EditableFeatureTypes.LINEPOLYGON, EditableFeatureTypes.MEASURE].includes(
+                feature.featureType
+            )
+        )
+    })
 })
+
 const selectedLineCoordinates = computed(() => {
     if (selectedLineString.value) {
         return selectedLineString.value.geometry.coordinates

From 0c61607e40a83f698e8364b886a7abf9c700b24e Mon Sep 17 00:00:00 2001
From: Ismail Sunni <imajimatika@gmail.com>
Date: Tue, 3 Dec 2024 16:14:33 +0700
Subject: [PATCH 6/8] PB-1212: Prevent right click for deleting twice.

---
 src/modules/drawing/DrawingModule.vue         |  6 +++-
 .../useModifyInteraction.composable.js        | 28 ++++++++++++++-----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/modules/drawing/DrawingModule.vue b/src/modules/drawing/DrawingModule.vue
index e87dcb8f6..da7e2f193 100644
--- a/src/modules/drawing/DrawingModule.vue
+++ b/src/modules/drawing/DrawingModule.vue
@@ -34,6 +34,7 @@ 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(() => {
@@ -200,7 +201,10 @@ function createSourceForProjection() {
     })
 }
 function removeLastPoint() {
-    drawingInteractions.value.removeLastPoint()
+    // Only active on drawing mode
+    if (currentDrawingMode.value) {
+        drawingInteractions.value.removeLastPoint()
+    }
 }
 
 function removeLastPointOnDeleteKeyUp(event) {
diff --git a/src/modules/drawing/components/useModifyInteraction.composable.js b/src/modules/drawing/components/useModifyInteraction.composable.js
index 80494a8e4..61511ff52 100644
--- a/src/modules/drawing/components/useModifyInteraction.composable.js
+++ b/src/modules/drawing/components/useModifyInteraction.composable.js
@@ -35,6 +35,7 @@ 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({
@@ -84,15 +85,15 @@ export default function useModifyInteraction(features) {
                 continueDrawingInteraction.extend(selectedFeature)
                 continueDrawingInteraction.setActive(true)
                 modifyInteraction.setActive(false)
-                olMap.on('contextmenu', onMapRightClick)
+                activateRightClickDelete()
             } else if (newValue === EditMode.MODIFY) {
                 modifyInteraction.setActive(true)
                 continueDrawingInteraction.setActive(false)
-                olMap.on('contextmenu', onMapRightClick) // Keep right-click listener
+                activateRightClickDelete()
             } else {
                 modifyInteraction.setActive(true)
                 continueDrawingInteraction.setActive(false)
-                olMap.un('contextmenu', onMapRightClick)
+                deactivateRightClickDelete()
             }
         },
         { immediate: true }
@@ -114,9 +115,26 @@ 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
+        }
         if (continueDrawingInteraction.getActive()) {
             continueDrawingInteraction.removeLastPoint()
         } else if (modifyInteraction.getActive() && features.getArray().length > 0) {
@@ -133,10 +151,6 @@ export default function useModifyInteraction(features) {
         }
     }
 
-    function onMapRightClick(_event) {
-        removeLastPoint()
-    }
-
     function onModifyStart(event) {
         const [feature] = event.features.getArray()
 

From aabb674594adec8163726e0b440b1009e4348aa8 Mon Sep 17 00:00:00 2001
From: Ismail Sunni <imajimatika@gmail.com>
Date: Tue, 3 Dec 2024 18:18:32 +0700
Subject: [PATCH 7/8] PB-1212: Add test for extending and deleting line.

---
 .../components/AddVertexButtonOverlay.vue     | 12 ++++-
 tests/cypress/tests-e2e/drawing.cy.js         | 53 +++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/modules/drawing/components/AddVertexButtonOverlay.vue b/src/modules/drawing/components/AddVertexButtonOverlay.vue
index a7d27c14c..f91d7d0ba 100644
--- a/src/modules/drawing/components/AddVertexButtonOverlay.vue
+++ b/src/modules/drawing/components/AddVertexButtonOverlay.vue
@@ -129,6 +129,14 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <AddVertexButton :reverse="true" @button-mounted="onFirstButtonMounted" />
-    <AddVertexButton :reverse="false" @button-mounted="onLastButtonMounted" />
+    <AddVertexButton
+        :reverse="true"
+        data-cy="extend-from-first-node-button"
+        @button-mounted="onFirstButtonMounted"
+    />
+    <AddVertexButton
+        :reverse="false"
+        data-cy="extend-from-last-node-button"
+        @button-mounted="onLastButtonMounted"
+    />
 </template>
diff --git a/tests/cypress/tests-e2e/drawing.cy.js b/tests/cypress/tests-e2e/drawing.cy.js
index be9383fe9..bc9f4a706 100644
--- a/tests/cypress/tests-e2e/drawing.cy.js
+++ b/tests/cypress/tests-e2e/drawing.cy.js
@@ -66,6 +66,19 @@ describe('Drawing module tests', () => {
                 .its('request')
                 .should((request) => checkKMLRequest(request, [new RegExp(`${regexExpression}`)]))
         }
+
+        // Check that the linestring has the expected number of points
+        // Only works for line string drawing
+        function checkLinestringNumberOfPoints(numberOfPoints) {
+            cy.readWindowValue('drawingLayer')
+                .then((drawingLayer) => drawingLayer.getSource().getFeatures())
+                .should((features) => {
+                    expect(features).to.be.an('Array').lengthOf(1)
+                    const [feature] = features
+                    const lineStringCoordinates = feature.getGeometry().getCoordinates()
+                    expect(lineStringCoordinates).to.be.an('Array').lengthOf(numberOfPoints)
+                })
+        }
         beforeEach(() => {
             cy.goToDrawing()
         })
@@ -545,6 +558,46 @@ describe('Drawing module tests', () => {
             cy.wait(250)
             readCoordinateClipboard('feature-detail-coordinate-copy', "2'660'013.50, 1'185'172.00")
         })
+        it('can create line, extend it, and delete the last node by right click', () => {
+            cy.viewport(1920, 1080)
+            cy.clickDrawingTool(EditableFeatureTypes.LINEPOLYGON)
+
+            const lineCoordinates = [
+                [500, 500],
+                [550, 550],
+                [600, 600],
+                [700, 600],
+                [800, 600],
+                [800, 400],
+                [900, 400],
+                [1000, 400],
+            ]
+            lineCoordinates.forEach((coordinate) => {
+                cy.get('[data-cy="ol-map"]').click(...coordinate)
+            })
+            // should create a line by re-clicking the last point
+            cy.get('[data-cy="ol-map"]').click(...lineCoordinates.at(lineCoordinates.length - 1))
+            checkLinestringNumberOfPoints(8)
+
+            // Extend from the last node of line
+            cy.get('[data-cy="extend-from-last-node-button"]').click()
+            cy.get('[data-cy="ol-map"]').click(1100, 450)
+            // finish extending the line by clicking the last point
+            cy.get('[data-cy="ol-map"]').click(1100, 450)
+            checkLinestringNumberOfPoints(9)
+
+            // Extend from the first node of line
+            cy.get('[data-cy="extend-from-first-node-button"]').click()
+            cy.get('[data-cy="ol-map"]').click(500, 450)
+            cy.get('[data-cy="ol-map"]').click(600, 450)
+            // finish extending the line by clicking the last point
+            cy.get('[data-cy="ol-map"]').click(600, 450)
+            checkLinestringNumberOfPoints(11)
+
+            // Delete the last node by right click
+            cy.get('[data-cy="ol-map"]').rightclick()
+            checkLinestringNumberOfPoints(10)
+        })
         it('can create line/polygons and edit them', () => {
             cy.clickDrawingTool(EditableFeatureTypes.LINEPOLYGON)
             cy.get('[data-cy="ol-map"]').click(100, 250)

From 17039868e49ba49bf2bd0a365f0c179772a0d6c4 Mon Sep 17 00:00:00 2001
From: Ismail Sunni <imajimatika@gmail.com>
Date: Mon, 9 Dec 2024 14:34:41 +0700
Subject: [PATCH 8/8] PB-1212: handle delete last point on one place to avoid
 deleting point twice.

---
 src/modules/drawing/DrawingModule.vue          | 16 ++++++++--------
 .../drawing/components/DrawingInteractions.vue |  6 +++++-
 .../useModifyInteraction.composable.js         | 18 ------------------
 tests/cypress/tests-e2e/drawing.cy.js          |  4 ++++
 4 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/src/modules/drawing/DrawingModule.vue b/src/modules/drawing/DrawingModule.vue
index da7e2f193..2b0ff1a07 100644
--- 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
index 61ab2205c..cd30094af 100644
--- a/src/modules/drawing/components/DrawingInteractions.vue
+++ b/src/modules/drawing/components/DrawingInteractions.vue
@@ -8,6 +8,7 @@ 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)
@@ -15,6 +16,7 @@ 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
index 61511ff52..3aeff94f8 100644
--- 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
index bc9f4a706..9a9587139 100644
--- 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)