From 47eb8d6f1388048295692606ce2d5de0fd30313b Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Mon, 18 Nov 2024 16:25:59 +0100
Subject: [PATCH 1/5] fix: update modal coords when drawing is updated

---
 src/components/draw/feature-sub-wrapper.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/draw/feature-sub-wrapper.vue b/src/components/draw/feature-sub-wrapper.vue
index 89ea2523..1662243b 100644
--- a/src/components/draw/feature-sub-wrapper.vue
+++ b/src/components/draw/feature-sub-wrapper.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 
 import MapPopup from '@/components/map/map-popup.vue'
 import useDrawnFeatures from '@/composables/draw/drawn-features.composable'
@@ -11,7 +11,9 @@ defineProps<{
 const { getFeatCoordinates } = useDrawnFeatures()
 const emit = defineEmits(['closePopup'])
 const feature: DrawnFeature | undefined = inject('feature')
-const popupAnchor = feature ? getFeatCoordinates(feature) : undefined
+const popupAnchor = computed(() =>
+  feature ? getFeatCoordinates(feature) : undefined
+)
 
 function onClosePopup() {
   emit('closePopup')

From 9483894159648593f002f99cf69613f1cdaa4c98 Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Mon, 18 Nov 2024 16:29:18 +0100
Subject: [PATCH 2/5] fix: update display of line style buttons

---
 src/assets/main.css                                 | 9 +++------
 src/components/draw/feature-edit-linestyle-item.vue | 5 +++--
 src/services/utils.ts                               | 4 ++++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index a6dab390..aa75d4d0 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -118,21 +118,18 @@
   }
 
   .lux-btn-grey {
-    @apply lux-btn py-[3px] px-[8px];
+    @apply lux-btn py-[2px] px-[9px] border-[1px] border-gray-500 border-solid rounded-[2.5px] focus:text-gray-800 focus:border-gray-500;
     background-color: rgb(239, 239, 239);
-    border-style: outset;
-    border-color: rgb(51, 51, 51);
     color: rgb(51, 51, 51);
   }
 
   .lux-btn-grey:hover {
-    background-color: rgb(233, 233, 233);
+    @apply bg-gray-300;
     color: rgb(51, 51, 51);
   }
 
   .lux-btn-grey.pressed {
-    background-color: rgb(133, 168, 233);
-    color: rgb(51, 51, 181);
+    @apply bg-gray-400;
   }
 
   .lux-close-cross {
diff --git a/src/components/draw/feature-edit-linestyle-item.vue b/src/components/draw/feature-edit-linestyle-item.vue
index b2dec65c..7eacb3c4 100644
--- a/src/components/draw/feature-edit-linestyle-item.vue
+++ b/src/components/draw/feature-edit-linestyle-item.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useTranslation } from 'i18next-vue'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { upperCaseFirst } from '@/services/utils'
 
 const { t } = useTranslation()
 
@@ -17,11 +18,11 @@ function onClickChangeLineStyle(linestyle: string) {
 
 <template>
   <button
-    :class="`lux-btn-grey rounded${
+    :class="`lux-btn-grey${
       props.feature.featureStyle.linestyle === props.linestyle ? ' pressed' : ''
     }`"
     @click="onClickChangeLineStyle(props.linestyle)"
   >
-    {{ t(props.linestyle) }}
+    {{ t(upperCaseFirst(props.linestyle)) }}
   </button>
 </template>
diff --git a/src/services/utils.ts b/src/services/utils.ts
index 13b50fe7..06222ee2 100644
--- a/src/services/utils.ts
+++ b/src/services/utils.ts
@@ -133,3 +133,7 @@ export function downloadFile(
   document.body.removeChild(a)
   URL.revokeObjectURL(url)
 }
+
+export function upperCaseFirst(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

From 42dda0645d65c275cf9eab0c709964463829df8d Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Mon, 18 Nov 2024 16:30:11 +0100
Subject: [PATCH 3/5] fix: handle Escape keyup event

---
 cypress/e2e/draw/draw-feat-line.cy.ts          | 12 ++++++++++++
 .../layers-selection-catalog.cy.ts             | 12 ++----------
 .../draw/draw-interaction.composable.ts        | 18 +++++++++++++++++-
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/draw/draw-feat-line.cy.ts b/cypress/e2e/draw/draw-feat-line.cy.ts
index ada0f825..40b73133 100644
--- a/cypress/e2e/draw/draw-feat-line.cy.ts
+++ b/cypress/e2e/draw/draw-feat-line.cy.ts
@@ -61,4 +61,16 @@ describe('Draw "Line"', () => {
         .should('contain.text', 'Changer le sens de la ligne')
     })
   })
+
+  describe('When using Escape key when drawing a line', () => {
+    it('ends the drawing and adds a new line', () => {
+      cy.get('*[data-cy="featItemName"]').should('have.length', 1)
+      cy.get('button[data-cy="drawLineButton"]').click()
+      cy.get('button[data-cy="drawLineButton"]').click()
+      cy.get('div.ol-viewport').click(250, 250, { force: true })
+      cy.get('div.ol-viewport').click(300, 300, { force: true })
+      cy.get('body').type('{esc}')
+      cy.get('*[data-cy="featItemName"]').should('have.length', 2)
+    })
+  })
 })
diff --git a/cypress/e2e/layers-selection/layers-selection-catalog.cy.ts b/cypress/e2e/layers-selection/layers-selection-catalog.cy.ts
index d5090ef6..cfe0d15b 100644
--- a/cypress/e2e/layers-selection/layers-selection-catalog.cy.ts
+++ b/cypress/e2e/layers-selection/layers-selection-catalog.cy.ts
@@ -67,11 +67,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter(
-            (l: any) =>
-              // regex match
-              !/feature(Edit)?Layer/.exec(l.get('cyLayerType'))
-          )
+          .filter((l: any) => !/feature(Edit)?Layer/.exec(l.get('cyLayerType')))
         expect(layers[0].get('id')).to.eq(556)
       })
       cy.get('[data-cy="catalog"]')
@@ -85,11 +81,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter(
-            (l: any) =>
-              // regex match
-              !/feature(Edit)?Layer/.exec(l.get('cyLayerType'))
-          )
+          .filter((l: any) => !/feature(Edit)?Layer/.exec(l.get('cyLayerType')))
         expect(layers[0].get('id')).to.eq(359)
         expect(layers[1].get('id')).to.eq(353)
       })
diff --git a/src/composables/draw/draw-interaction.composable.ts b/src/composables/draw/draw-interaction.composable.ts
index d45eff81..3e8cc835 100644
--- a/src/composables/draw/draw-interaction.composable.ts
+++ b/src/composables/draw/draw-interaction.composable.ts
@@ -5,6 +5,7 @@ import useDrawnFeatures from './drawn-features.composable'
 import drawTooltip from './draw-tooltip'
 
 export default function useDrawInteraction(options: Options) {
+  const { addFeature } = useDrawnFeatures()
   const drawInteraction = new Draw(options)
   drawInteraction.setActive(false)
   const map = useMap().getOlMap()
@@ -16,13 +17,28 @@ export default function useDrawInteraction(options: Options) {
   listen(drawInteraction, 'drawend', event => {
     onDrawEnd(event as DrawEvent)
   })
-  const { addFeature } = useDrawnFeatures()
+  listen(document, 'keyup', event => {
+    onKeyUp(event as KeyboardEvent)
+  })
+
   function onDrawEnd(event: DrawEvent) {
     drawTooltip.remove()
     addFeature(event.feature)
     event.stopPropagation()
   }
 
+  /**
+   * Deactivate this interaction if the ESC key is pressed.
+   * @param event
+   */
+  function onKeyUp(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      drawTooltip.remove()
+      drawInteraction.finishDrawing()
+      drawInteraction.setActive(false)
+    }
+  }
+
   return {
     drawInteraction,
   }

From 86f63398d5ece0f602a1426802ebc7a385597fcf Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Tue, 19 Nov 2024 12:01:13 +0100
Subject: [PATCH 4/5] refactor: rename to capitalize()

---
 src/components/draw/feature-edit-linestyle-item.vue | 4 ++--
 src/services/utils.ts                               | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/draw/feature-edit-linestyle-item.vue b/src/components/draw/feature-edit-linestyle-item.vue
index 7eacb3c4..899e85b9 100644
--- a/src/components/draw/feature-edit-linestyle-item.vue
+++ b/src/components/draw/feature-edit-linestyle-item.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslation } from 'i18next-vue'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
-import { upperCaseFirst } from '@/services/utils'
+import { capitalize } from '@/services/utils'
 
 const { t } = useTranslation()
 
@@ -23,6 +23,6 @@ function onClickChangeLineStyle(linestyle: string) {
     }`"
     @click="onClickChangeLineStyle(props.linestyle)"
   >
-    {{ t(upperCaseFirst(props.linestyle)) }}
+    {{ t(capitalize(props.linestyle)) }}
   </button>
 </template>
diff --git a/src/services/utils.ts b/src/services/utils.ts
index 06222ee2..5e3962a1 100644
--- a/src/services/utils.ts
+++ b/src/services/utils.ts
@@ -134,6 +134,11 @@ export function downloadFile(
   URL.revokeObjectURL(url)
 }
 
-export function upperCaseFirst(str: string) {
+/**
+ * Capitalized (only) the first letter of the given string
+ * @param str The string to capitalize
+ * @returns The capitalized string
+ */
+export function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }

From 1cd311e2a9f6fb8ffad657166a7a75a27d70e256 Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Tue, 19 Nov 2024 13:43:09 +0100
Subject: [PATCH 5/5] refactor: improve update modale anchor with debounce

---
 src/components/draw/feature-sub-wrapper.vue | 29 ++++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/draw/feature-sub-wrapper.vue b/src/components/draw/feature-sub-wrapper.vue
index 1662243b..0ef577a8 100644
--- a/src/components/draw/feature-sub-wrapper.vue
+++ b/src/components/draw/feature-sub-wrapper.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { inject, ref, watchEffect } from 'vue'
 
 import MapPopup from '@/components/map/map-popup.vue'
 import useDrawnFeatures from '@/composables/draw/drawn-features.composable'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { debounce } from '@/services/utils'
 
 defineProps<{
   isDocked: boolean
@@ -11,13 +12,33 @@ defineProps<{
 const { getFeatCoordinates } = useDrawnFeatures()
 const emit = defineEmits(['closePopup'])
 const feature: DrawnFeature | undefined = inject('feature')
-const popupAnchor = computed(() =>
-  feature ? getFeatCoordinates(feature) : undefined
-)
+const popupAnchor: any = ref(getUnreactiveCoords())
 
 function onClosePopup() {
   emit('closePopup')
 }
+
+/**
+ * Update the anchor coords when user modfies the geom,
+ * but with a debounce, preventing the modale to moves at each update of the geom
+ */
+const onChangeGeom = debounce(() => {
+  popupAnchor.value = getUnreactiveCoords()
+}, 1000)
+
+/**
+ * Get an unreactive value for coords, otherwise, anchor is updated
+ * each time the geom is modified by the user
+ */
+function getUnreactiveCoords() {
+  return JSON.parse(JSON.stringify(getFeatCoordinates(feature!)))
+}
+
+watchEffect(() => {
+  if (feature?.getGeometry() && getFeatCoordinates(feature!)) {
+    onChangeGeom()
+  }
+})
 </script>
 
 <template>