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)